li
6b02df55ab
- Asset page: add Contract account row + tab, show num_lh balance - Total Assets = Spot + Contract + Fiat - All Chinese text eliminated (z-paging, loadmore, colorui, pages) - Password/payword pages use image captcha instead of OTP - Home page PC: full-width stretch layout - Register captcha input type fix, invite code lock
465 lines
14 KiB
Vue
465 lines
14 KiB
Vue
<template>
|
|
<view class="">
|
|
<z-paging ref="paging" v-model="list" @query="queryList"
|
|
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
|
<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
|
|
</custom-refresher>
|
|
|
|
<!-- 头部 tab -->
|
|
<view slot="top" class="width-100b flex align-center justify-between padding-w-40" :style="{height: `calc(${statusBar}px + 100rpx)`,paddingTop: `calc(${statusBar}px )`}">
|
|
<view @click="tabsChange(index)" class="flex-1 height-100b flex align-center justify-center"
|
|
v-for="(item,index) in tabList" :key="index">
|
|
<text :class="current==index?theme.selectcolor:theme.color" class="font-32">{{item}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="padding-w-30">
|
|
<!-- 用户信息卡片 -->
|
|
<view class="userCard" :style="'background:'+theme.assetbg">
|
|
<view class="width-100b flex align-center justify-between">
|
|
<view class="flex align-center">
|
|
<image class="width-80 height-80 radiu-50b margin-r-20" :src="userinfo.avatar || '/static/imgs/my/head_ico.png'" mode="aspectFill"></image>
|
|
<view class="flex direction-column">
|
|
<text class="font-28 color-white bold-font">{{userinfo.email || userinfo.nickname || '--'}}</text>
|
|
<text class="font-22 color-white" style="opacity:0.7;">ID: {{userinfo.id || '--'}}</text>
|
|
</view>
|
|
</view>
|
|
<view @click="router.push('/pages/asset/record')" class="recordBtn">
|
|
<text class="font-24 color-white">{{i18n.assets.index.record || 'Record'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 资产总览 -->
|
|
<view class="width-100b margin-t-30 flex align-center justify-between">
|
|
<view class="flex-1">
|
|
<view class="flex align-center">
|
|
<text class="font-22 color-white" style="opacity:0.7;">{{i18n.assets.index.totalAssets || 'Account Total Assets'}}</text>
|
|
<view class="margin-l-16" @click="ifcover=!ifcover">
|
|
<image class="width-32 height-26" :src="ifcover?ZY:BY" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center margin-t-10">
|
|
<text v-if="ifcover" class="font-40 numbold-font color-white">${{formatNum(all.count_usdt)}}</text>
|
|
<text v-else class="font-40 numbold-font color-white">****</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-1 text-right">
|
|
<text class="font-22 color-white" style="opacity:0.7;">{{i18n.assets.index.totalPnl || 'Account Total P&L'}}</text>
|
|
<view class="flex align-center justify-end margin-t-10">
|
|
<text v-if="ifcover" class="font-32 numbold-font color-white">$ {{formatNum(totalPnl)}}</text>
|
|
<text v-else class="font-32 numbold-font color-white">****</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 总利润 -->
|
|
<view class="width-100b margin-t-16">
|
|
<text class="font-22 color-white" style="opacity:0.7;">{{i18n.assets.index.totalProfit || 'Account Total Profit'}}</text>
|
|
<view class="margin-t-6">
|
|
<text v-if="ifcover" class="font-34 numbold-font" :style="'color:'+(totalProfit>=0?'#00C481':'#FF4040')">$ {{formatNum(totalProfit)}}</text>
|
|
<text v-else class="font-34 numbold-font color-white">****</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 存款/取款/转账 -->
|
|
<view class="height-170 flex align-center justify-between" :style="'color: '+theme.text">
|
|
<view @click="router.push('/pages/index/recharge')" class="flex-1 height-100b flex direction-column align-center justify-center">
|
|
<image class="width-90 height-90" :src="theme.imgs+'/Group34154@2x.png'" mode=""></image>
|
|
<text class="font-26 margin-t-6">{{i18n.assets.index.reg}}</text>
|
|
</view>
|
|
<view @click="router.push('/pages/index/withdraw')" class="flex-1 height-100b flex direction-column align-center justify-center">
|
|
<image class="width-90 height-90" :src="theme.imgs+'/Group34153@2x.png'" mode=""></image>
|
|
<text class="font-26 margin-t-6">{{i18n.assets.index.wid}}</text>
|
|
</view>
|
|
<view @click="router.push('/pages/asset/transfer?id='+current)" class="flex-1 height-100b flex direction-column align-center justify-center">
|
|
<image class="width-90 height-90" :src="theme.imgs+'/Group34155@2x.png'" mode=""></image>
|
|
<text class="font-26 margin-t-6">{{i18n.assets.index.tran}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 总览页面 -->
|
|
<view v-if="current==0" class="padding-w-30">
|
|
<!-- Spot 余额 -->
|
|
<view @click="current=1" class="accountRow" :style="'background-color:'+theme.fu_bg+';color:'+theme.text">
|
|
<view class="flex align-center justify-between">
|
|
<text class="font-28 bold-font">{{i18n.assets.index.title2}}</text>
|
|
<i class="cuIcon-right font-26 color-C3C3C3"></i>
|
|
</view>
|
|
<view class="margin-t-10">
|
|
<text class="font-38 numbold-font">{{ifcover?all.count_xh_usdt:'****'}} <text class="font-24 color-C3C3C3">USDT</text></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Contract 余额 -->
|
|
<view @click="current=3" class="accountRow" :style="'background-color:'+theme.fu_bg+';color:'+theme.text">
|
|
<view class="flex align-center justify-between">
|
|
<text class="font-28 bold-font">Contract</text>
|
|
<i class="cuIcon-right font-26 color-C3C3C3"></i>
|
|
</view>
|
|
<view class="margin-t-10">
|
|
<text class="font-38 numbold-font">{{ifcover?all.count_lh_usdt:'****'}} <text class="font-24 color-C3C3C3">USDT</text></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Fiat 余额 -->
|
|
<view @click="current=2" class="accountRow" :style="'background-color:'+theme.fu_bg+';color:'+theme.text">
|
|
<view class="flex align-center justify-between">
|
|
<text class="font-28 bold-font">{{i18n.assets.index.title3}}</text>
|
|
<i class="cuIcon-right font-26 color-C3C3C3"></i>
|
|
</view>
|
|
<view class="margin-t-10">
|
|
<text class="font-38 numbold-font">{{ifcover?all.count_fb_usdt:'****'}} <text class="font-24 color-C3C3C3">USDT</text></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 资金流水 -->
|
|
<view class="margin-t-20">
|
|
<view v-for="(item,index) in list" :key="index" class="flowRow" :style="'border-bottom:1rpx solid '+(theme.bg=='#FFFFFF'?'#F0F0F0':'rgba(255,255,255,0.06)')">
|
|
<view class="flex align-center justify-between">
|
|
<text class="font-26 bold-font">{{item.description}}</text>
|
|
<text v-if="item.cart==1" class="numbold-font font-26 color-00C481">{{item.price}} USDT</text>
|
|
<text v-if="item.cart==2" class="numbold-font font-26 color-FF4040">-{{item.price}} USDT</text>
|
|
</view>
|
|
<text class="font-22 color-C3C3C3 margin-t-6">{{item.createtime}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="loading" class="width-100b padding-c-50 flex align-center justify-center">
|
|
<u-loading show mode="flower" size="40"></u-loading>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Spot / Fiat / Contract / Invest 子页面 -->
|
|
<view v-if="current==1||current==2||current==3||current==4" class="">
|
|
<view class="padding-w-30 height-90 flex align-center line-height-90">
|
|
<u-switch v-model="ifHideCoin" size="30" active-color="#2DD1AF"></u-switch>
|
|
<text class="font-24 margin-l-20">{{i18n.assets.index.hide}}</text>
|
|
</view>
|
|
<view
|
|
:class="[toggleDelay?'animation-slide-bottom':'']"
|
|
class="coinBox" v-for="(item,index) in datalist" :key="index"
|
|
:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
|
<view @click="naviTo(item)"
|
|
class="width-100b height-82 padding-w-22 flex align-center justify-between"
|
|
style="border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
|
|
<view class="flex align-center">
|
|
<image class="width-36 height-36" :src="item.thumb_image" mode=""></image>
|
|
<text class="font-32 numbold-font margin-w-15">{{item.name}}</text>
|
|
<text class="font-24 nummedium-font color-C3C3C3">{{item.full_name}}</text>
|
|
</view>
|
|
<i class="cuIcon-right font-22 color-D1D3D8"></i>
|
|
</view>
|
|
<view class="width-100b height-100 padding-w-20 flex align-center justify-between">
|
|
<view class="flex-1 height-80 flex direction-column align-start justify-around">
|
|
<text class="font-24">{{i18n.assets.index.usable}}</text>
|
|
<text class="font-26 numbold-font">{{ifcover?item.num:'****'}}</text>
|
|
</view>
|
|
<view class="flex-1 height-80 flex direction-column align-center justify-around">
|
|
<text class="font-24">{{i18n.assets.index.freeze}}</text>
|
|
<text class="font-26 numbold-font">{{ifcover?item.num_dj:'****'}}</text>
|
|
</view>
|
|
<view class="flex-1 height-80 flex direction-column align-end justify-around">
|
|
<text class="font-24">{{i18n.assets.index.convert}}</text>
|
|
<text class="font-26 numbold-font">{{ifcover?item.usdt_price:'****'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="datalist.length == 0" class="height-100 flex align-center justify-center">
|
|
<text class="font-24 color-999999 ">{{i18n.assets.index.nodata}}</text>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBar: uni.getSystemInfoSync().statusBarHeight,
|
|
tabList: ['Overview', 'Spot','Fiat','Contract','Invest'],
|
|
current: 0,
|
|
|
|
userinfo: {},
|
|
totalPnl: 0,
|
|
totalProfit: 0,
|
|
|
|
all:{
|
|
count_btc: "0.0000",
|
|
count_usdt: "0.0000",
|
|
count_xh_usdt: "0.00",
|
|
count_lh_usdt: "0.00",
|
|
count_fb_usdt: "0.00"
|
|
},
|
|
xh:{
|
|
count_btc: "0.0000",
|
|
count_usdt: "0.0000",
|
|
xh_arr:[]
|
|
},
|
|
fb:{
|
|
count_btc: "0.0000",
|
|
count_usdt: "0.0000",
|
|
fb_arr:[]
|
|
},
|
|
lh:{
|
|
count_btc: "0.0000",
|
|
count_usdt: "0.0000",
|
|
lh_arr:[]
|
|
},
|
|
qq:{
|
|
count_btc: "0.0000",
|
|
count_usdt: "0.0000",
|
|
qq_arr:[]
|
|
},
|
|
|
|
ZY: '/static/imgs/asset/zhenyan.png',
|
|
BY: '/static/imgs/asset/biyan.png',
|
|
ifcover: true,
|
|
|
|
ifHideCoin:false,
|
|
|
|
toggleDelay: false,
|
|
|
|
list:[],
|
|
loading:true,
|
|
|
|
theme: '',
|
|
}
|
|
},
|
|
computed:{
|
|
i18n() {
|
|
return this.$t('message');
|
|
},
|
|
count_obj() {
|
|
let obj = {};
|
|
var that = this
|
|
switch (this.current) {
|
|
case 0:
|
|
obj = that.all
|
|
break;
|
|
case 1:
|
|
obj = that.xh
|
|
break;
|
|
case 2:
|
|
obj = that.fb
|
|
break;
|
|
case 3:
|
|
obj = that.lh
|
|
break;
|
|
case 4:
|
|
obj = that.qq
|
|
break;
|
|
case 5:
|
|
obj = that.all
|
|
break;
|
|
default:
|
|
obj = that.all
|
|
break;
|
|
}
|
|
return obj
|
|
},
|
|
datalist() {
|
|
let obj = [];
|
|
var that = this
|
|
switch (this.current) {
|
|
case 0:
|
|
obj = []
|
|
break;
|
|
case 1:
|
|
if(that.ifHideCoin==true){
|
|
if(that.xh.xh_arr){
|
|
obj = that.xh.xh_arr.filter((item)=>{
|
|
return item.num != 0
|
|
})
|
|
}
|
|
}else{
|
|
obj = that.xh.xh_arr
|
|
}
|
|
break;
|
|
case 2:
|
|
if(that.ifHideCoin==true){
|
|
if(that.fb.fb_arr){
|
|
obj = that.fb.fb_arr.filter((item)=>{
|
|
return item.num != 0
|
|
})
|
|
}
|
|
}else{
|
|
obj = that.fb.fb_arr
|
|
}
|
|
break;
|
|
case 3:
|
|
if(that.ifHideCoin==true){
|
|
if(that.lh && that.lh.lh_arr){
|
|
obj = that.lh.lh_arr.filter((item)=>{
|
|
return item.num != 0
|
|
})
|
|
}
|
|
}else{
|
|
obj = (that.lh && that.lh.lh_arr) ? that.lh.lh_arr : []
|
|
}
|
|
break;
|
|
case 4:
|
|
if(that.ifHideCoin==true){
|
|
if(that.qq.qq_arr){
|
|
obj = that.qq.qq_arr.filter((item)=>{
|
|
return item.num != 0
|
|
})
|
|
}
|
|
}else{
|
|
obj = that.qq.qq_arr
|
|
}
|
|
break;
|
|
default:
|
|
obj = []
|
|
break;
|
|
}
|
|
return obj
|
|
},
|
|
},
|
|
watch:{
|
|
ifHideCoin(item){
|
|
uni.setStorageSync('ifHideCoin',item)
|
|
}
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync("theme") == "dark") {
|
|
this.theme = this.$store.state.darkTheme
|
|
}else{
|
|
this.theme = this.$store.state.lightTheme
|
|
}
|
|
this.tabList[0]=this.i18n.assets.index.title1
|
|
this.tabList[1]=this.i18n.assets.index.title2
|
|
this.tabList[2]=this.i18n.assets.index.title3
|
|
this.tabList[3]='Contract'
|
|
this.tabList[4]=this.i18n.licai.text1
|
|
if(uni.getStorageSync('ifHideCoin')){
|
|
this.ifHideCoin = uni.getStorageSync('ifHideCoin')
|
|
}
|
|
this.getWallet()
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
formatNum(val) {
|
|
let n = Number(val || 0)
|
|
return n.toFixed(2)
|
|
},
|
|
queryList(pageNo, pageSize) {
|
|
this.loading = true
|
|
this.post('/wallet/index_detail', {
|
|
page: pageNo,
|
|
}).then(res => {
|
|
this.loading = false
|
|
console.log('资金动态',res)
|
|
if (res.code == 1) {
|
|
this.$refs.paging.complete(res.data.data);
|
|
}
|
|
})
|
|
},
|
|
getUserInfo() {
|
|
this.post('/my/get_userinfo').then((res) => {
|
|
if (res.code == 1) {
|
|
this.userinfo = res.data
|
|
}
|
|
})
|
|
},
|
|
calcProfit() {
|
|
// totalPnl 固定为 0，不作计算
|
|
// totalProfit 由 getWallet 从后端同步
|
|
},
|
|
getWallet(){
|
|
this.post('/wallet/wallet_index').then((res) => {
|
|
console.log('我的资产',res)
|
|
if (res.code == 1) {
|
|
this.all = res.data.all
|
|
this.xh = res.data.xh
|
|
this.fb = res.data.fb
|
|
this.lh = res.data.lh
|
|
this.qq = res.data.qq
|
|
// Account Total Profit 与合约交易利润实时同步
|
|
this.totalProfit = res.data.total_profit || 0
|
|
// Account Total P&L 固定为 0
|
|
this.totalPnl = 0
|
|
}
|
|
})
|
|
},
|
|
naviTo(item){
|
|
console.log(this.$u.queryParams(item))
|
|
uni.navigateTo({
|
|
url:'/pages/asset/details'+this.$u.queryParams(item)
|
|
})
|
|
},
|
|
tabsChange(index) {
|
|
if(index==4){
|
|
uni.navigateTo({
|
|
url:'/pages/index/money/index'
|
|
})
|
|
}else{
|
|
this.current = index;
|
|
this.ToggleDelay()
|
|
}
|
|
},
|
|
ToggleDelay() {
|
|
this.toggleDelay = true;
|
|
setTimeout(() => {
|
|
this.toggleDelay = false
|
|
}, 1000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.userCard {
|
|
width: 100%;
|
|
padding: 30rpx 28rpx;
|
|
border-radius: 16rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.recordBtn {
|
|
padding: 10rpx 24rpx;
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 30rpx;
|
|
border: 1rpx solid rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.accountRow {
|
|
width: 100%;
|
|
padding: 28rpx 30rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.flowRow {
|
|
padding: 24rpx 0;
|
|
}
|
|
|
|
.topBox {
|
|
width: 100%;
|
|
padding: 22rpx 28rpx;
|
|
display: flex;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.juxing {
|
|
flex: 1;
|
|
margin: 0 18rpx;
|
|
height: 56rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
|
background: rgba(255, 255, 255, 0.09);
|
|
border-radius: 10rpx;
|
|
line-height: 56rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.coinBox {
|
|
width: 690rpx;
|
|
box-shadow: 0rpx 4rpx 4rpx rgba(205, 206, 219, 0.2);
|
|
border-radius: 10rpx;
|
|
margin: 0rpx auto 30rpx;
|
|
}
|
|
</style>
|