Files
h5-uniapp/pages/quantify/TransactionRecord.vue
li 5f40e4e1b5 feat: 前端全量更新 - 含所有本次需求
- 移除秒合约页面及UI
- 合约页Tab改为Position Held/Transaction Record
- 存款/提款/转账页增加BTC/ETH
- 资产页重构(用户信息+盈亏+多语言)
- 注册页改版(匹配新设计稿)
- 日文全面翻译+首页菜单多语言
- 代理专属注册链接支持(?code=)
- 10个locale文件同步更新
2026-03-30 20:14:20 +08:00

320 lines
10 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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>