320 lines
10 KiB
Vue
320 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<!-- 下拉刷新 -->
|
||
<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
|
||
</custom-refresher>
|
||
|
||
<!-- 头部 -->
|
||
<view slot="top" class="width-750 relative flex align-center justify-center bj-8EBEFF"
|
||
:style="{height: `calc(${statusBar}px + 176rpx)`}">
|
||
<view class="width-750 fixed1"
|
||
:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 176rpx)`}">
|
||
<view class="width-750 height-110 padding-w-30 bgimg1 flex align-center justify-center">
|
||
<view @click="_goback" class="cuIcon-back font-40"
|
||
style="position: absolute;left: 30rpx;"></view>
|
||
<text class="font-36 weight-bold">{{i18n.TranRecord.title1}}</text>
|
||
<image @click="show=true" class="width-36 height-36 absolute" style="right: 30rpx;"
|
||
src="/static/imgs/index/shaixuan@2x.png"></image>
|
||
</view>
|
||
<view class="height-66 flex align-center">
|
||
<view @click="selectMeun(index)" v-for="(item,index) in meunList" class="flex-1 height-66">
|
||
<view class="height-60 line-height-60 text-center">
|
||
<text
|
||
:class="meunIndex==index?'font-28 color-0165EE weight-bold':'color-C3C3C3 font-26'">{{item}}</text>
|
||
</view>
|
||
<view class="height-4 flex align-center justify-center">
|
||
<view v-if="meunIndex==index" class="width-40 height-4 bj-0165EE"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 身体 -->
|
||
<view class="width-750 padding-b-40">
|
||
<view>
|
||
<view v-for="(item,index) in list" class="padding-w-30 margin-t-8"
|
||
:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
||
<view class="height-96 flex align-center justify-between">
|
||
<view class="flex align-center font-28 numbold-font">
|
||
<image class="width-52 height-52 radiu-26 margin-r-12" :src="item.image" mode="">
|
||
</image>
|
||
<text :class="item.type==1?'color-00C481':'color-FF4040'">{{item.type==1?i18n.TranRecord.text1:i18n.TranRecord.text2}}</span>{{item.coinname}}</text>
|
||
</view>
|
||
<text class="font-24 color-C3C3C3">{{item.createtime}}</text>
|
||
</view>
|
||
<view class="padding-c-20">
|
||
<view class="flex align-center margin-b-8">
|
||
<text class="font-24 color-C3C3C3">{{i18n.TranRecord.text3}}：</text>
|
||
<text class="font-24 numbold-font">{{item.order_sn}}</text>
|
||
</view>
|
||
<view class="flex align-center margin-b-8">
|
||
<text
|
||
class="font-24 color-C3C3C3">{{item.type == 1?i18n.TranRecord.text1:i18n.TranRecord.text2}}{{i18n.TranRecord.text4}}：</text>
|
||
<text class="font-24 numbold-font">{{item.num}}</text>
|
||
</view>
|
||
<view class="flex align-center margin-b-8">
|
||
<text
|
||
class="font-24 color-C3C3C3">{{item.type == 1?i18n.TranRecord.text1:i18n.TranRecord.text2}}{{i18n.TranRecord.text5}}：</text>
|
||
<text class="font-24 numbold-font">{{item.amount}}</text>
|
||
</view>
|
||
<view class="flex align-center margin-b-8">
|
||
<text
|
||
class="font-24 color-C3C3C3">{{item.type == 1?i18n.TranRecord.text1:i18n.TranRecord.text2}}{{i18n.TranRecord.text6}}：</text>
|
||
<text class="font-24 numbold-font">{{item.price}}</text>
|
||
</view>
|
||
<view class="flex align-center margin-b-8">
|
||
<text class="font-24 color-C3C3C3">{{i18n.TranRecord.text7}}：</text>
|
||
<text class="font-24 numbold-font">{{item.fee}}</text>
|
||
</view>
|
||
<view class="flex align-center margin-b-8">
|
||
<text class="font-24 color-C3C3C3">{{i18n.TranRecord.text8}}：</text>
|
||
<text class="font-24 numbold-font">{{item.bc_time}}</text>
|
||
</view>
|
||
<view class="flex align-center">
|
||
<text class="font-24 color-C3C3C3">{{i18n.TranRecord.text9}}：</text>
|
||
<text class="font-24 numbold-font">{{item.income}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</z-paging>
|
||
|
||
<!-- 筛选弹窗 -->
|
||
<u-popup v-model="show" mode="bottom" border-radius="25">
|
||
<view class="width-100b padding-w-20"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text"
|
||
style="height:570rpx; border-radius: 20rpx 20rpx 0 0;">
|
||
<view class="width-100b height-70 text-center line-height-100">
|
||
<text class="font-28 weight-bold">{{i18n.TranRecord.text10}}</text>
|
||
</view>
|
||
<!-- <view class="width-100b height-160 padding-w-30 margin-c-10 flex direction-column justify-around">
|
||
<text class="font-30 weight-bold">{{i18n.TranRecord.text11}}</text>
|
||
<view class="width-100b flex align-center">
|
||
<view @click="selectBourse(index)" :class="bourseIndex==index+1?'select_on':'select_off'"
|
||
v-for="(item,index) in bourseList" :key="index">{{item}}</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="width-100b height-150 margin-c-10 padding-w-30 flex direction-column justify-around">
|
||
<text class="font-28 weight-bold line-height-64">{{i18n.TranRecord.text12}} <span
|
||
class="font-26">({{i18n.TranRecord.text13}})</span></text>
|
||
<input class="width-100b height-86 font-28 numbold-font"
|
||
:placeholder="i18n.TranRecord.tos2" type="text" v-model="coin" />
|
||
</view>
|
||
<view class="width-100b height-160 margin-c-10 padding-w-30 flex direction-column justify-around">
|
||
<text class="font-28 weight-bold">{{i18n.TranRecord.text14}}</text>
|
||
<view class="width-100b height-70 flex align-center justify-between">
|
||
<view @click="tshow1=true" class="selectTime">
|
||
<view class="picker">
|
||
{{startTime}}
|
||
</view>
|
||
</view>
|
||
<view class="width-20 height-6 radiu-3 bj-0165EE"></view>
|
||
<view @click="tshow2=true" class="selectTime">
|
||
<view class="picker">
|
||
{{endTime}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="width-100b height-100 padding-30 flex align-center justify-between">
|
||
<view class="resetBtn" @click="reset">{{i18n.TranRecord.text15}}</view>
|
||
<view class="inquireBtn" @click="chechOrder">{{i18n.TranRecord.text16}}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-picker mode="time" v-model="tshow1" @confirm="startTimeChange" :cancelText="i18n.Tactics.text28"
|
||
:confirmText="i18n.Tactics.text29"></u-picker>
|
||
<u-picker mode="time" v-model="tshow2" @confirm="endTimeChange" :cancelText="i18n.Tactics.text28"
|
||
:confirmText="i18n.Tactics.text29"></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusBar: uni.getSystemInfoSync().statusBarHeight,
|
||
meunList: ['全部', '买入', '卖出'],
|
||
meunIndex: 0,
|
||
|
||
show: false,
|
||
|
||
bourseList: ['HUOBI'],
|
||
// bourseList: ['HUOBI', 'Binance', 'OKEx', 'Coinbase'],
|
||
bourseIndex: 1,
|
||
|
||
coin: '',
|
||
|
||
startTime: '请选择时间',
|
||
endTime: '请选择时间',
|
||
tshow1: false,
|
||
tshow2: false,
|
||
|
||
list: [],
|
||
theme: '',
|
||
}
|
||
},
|
||
computed: {
|
||
i18n() {
|
||
return this.$t('message');
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.meunList[0] = this.i18n.TranRecord.text17
|
||
this.meunList[1] = this.i18n.TranRecord.text1
|
||
this.meunList[2] = this.i18n.TranRecord.text2
|
||
this.startTime = this.i18n.TranRecord.text18
|
||
this.endTime = this.i18n.TranRecord.text18
|
||
console.log(e)
|
||
if (e.symbol) {
|
||
this.coin = e.symbol
|
||
}
|
||
if (e.exchange_id) {
|
||
this.bourseIndex = e.exchange_id
|
||
}
|
||
// this.top()
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync("theme") == "dark") {
|
||
this.theme = this.$store.state.darkTheme
|
||
} else {
|
||
this.theme = this.$store.state.lightTheme
|
||
}
|
||
},
|
||
methods: {
|
||
chechOrder() {
|
||
// var obj = {
|
||
// coin: this.coin,
|
||
// bourseIndex: this.bourseIndex,
|
||
// startTime: this.startTime,
|
||
// endTime: this.endTime,
|
||
// exchange_id: this.bourseIndex
|
||
// }
|
||
// console.log(obj)
|
||
this.show = false
|
||
this.list = []
|
||
this.queryList(1, 10)
|
||
},
|
||
selectMeun(index) {
|
||
this.list = []
|
||
this.meunIndex = index
|
||
this.queryList(1, 10)
|
||
},
|
||
// selectStatus(index) {
|
||
// this.statusIndex = index
|
||
// },
|
||
selectBourse(index) {
|
||
this.bourseIndex = index + 1
|
||
},
|
||
startTimeChange: function(e) {
|
||
console.log('开始时间', e)
|
||
this.startTime = e.year + '-' + e.month + '-' + e.day
|
||
},
|
||
endTimeChange: function(e) {
|
||
console.log('结束时间', e)
|
||
this.endTime = e.year + '-' + e.month + '-' + e.day
|
||
},
|
||
reset() {
|
||
this.statusIndex = 0
|
||
this.bourseIndex = 1
|
||
this.coin = ''
|
||
this.startTime = this.i18n.TranRecord.text18
|
||
this.endTime = this.i18n.TranRecord.text18
|
||
},
|
||
queryList(pageNo, pageSize) {
|
||
let obj = {
|
||
page: pageNo,
|
||
page_num: pageSize,
|
||
type: this.meunIndex,
|
||
exchange_id: this.bourseIndex == '' ? '' : this.bourseIndex,
|
||
symbol: this.coin == '' ? '' : this.coin,
|
||
starttime: this.startTime == this.i18n.TranRecord.text18 ? '' : this.startTime,
|
||
endtime: this.endTime == this.i18n.TranRecord.text18 ? '' : this.endTime
|
||
}
|
||
setTimeout(() => {
|
||
this.post('/strategy/get_order', obj).then(res => {
|
||
if (res.code == 1) {
|
||
console.log(res)
|
||
this.$refs.paging.complete(res.data.data);
|
||
}
|
||
})
|
||
}, 500)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.fixed1 {
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 1010;
|
||
}
|
||
|
||
.selectTime {
|
||
width: 300rpx;
|
||
height: 66rpx;
|
||
background: rgba(160, 171, 181, 0.2);
|
||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(255, 255, 255, 0.5);
|
||
border-radius: 10rpx;
|
||
color: #8B99A2;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
line-height: 66rpx;
|
||
}
|
||
|
||
.select_on {
|
||
width: 180rpx;
|
||
height: 66rpx;
|
||
margin-right: 20rpx;
|
||
line-height: 66rpx;
|
||
background: #0165EE;
|
||
border-radius: 10rpx;
|
||
color: #FFFFFF;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
.select_off {
|
||
width: 180rpx;
|
||
height: 66rpx;
|
||
margin-right: 20rpx;
|
||
line-height: 66rpx;
|
||
background: #8B99A2;
|
||
border-radius: 10rpx;
|
||
color: #FFFFFF;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
.resetBtn {
|
||
width: 300rpx;
|
||
height: 86rpx;
|
||
line-height: 86rpx;
|
||
background: rgba(160, 171, 181, 0.2);
|
||
border-radius: 10rpx;
|
||
color: #8B99A2;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.inquireBtn {
|
||
width: 300rpx;
|
||
height: 86rpx;
|
||
line-height: 86rpx;
|
||
background: #0165EE;
|
||
border-radius: 10rpx;
|
||
color: #FFFFFF;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
</style>
|