You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
8.3 KiB
368 lines
8.3 KiB
<template>
|
|
<view class="wallet-page container-with-lines full-height-with-titile">
|
|
<!-- 余额卡片 -->
|
|
<view class="balance-card">
|
|
<view class="balance-header">
|
|
<view class="balance-label">
|
|
<view style="display: flex; align-items: center; font-size: 16px;">
|
|
<view>e</view>
|
|
<view>-KIP</view>
|
|
</view>
|
|
</view>
|
|
<view class="safety-tag">
|
|
<uni-icons type="info-filled" size="14" color="#FF9500"></uni-icons>
|
|
<text>{{languageData.account.quota + '(' + quota +')'}}</text>
|
|
<!-- <text>{{languageData.wallet.moneySafe}}</text> -->
|
|
</view>
|
|
</view>
|
|
<view class="balance-amount">
|
|
<view style="font-size: 29px;">{{accountId}}</view>
|
|
<view class="balance-label" style="margin-top: 20px;">
|
|
<text>{{languageData.wallet.availableBalance}} (KIP)</text>
|
|
<uni-icons :type="showDetail ? 'eye-filled' : 'eye-slash-filled'" @click="showDetail = !showDetail"
|
|
size="20" color="#333333"></uni-icons>
|
|
</view>
|
|
<view style="">{{ showDetail ? formatNumber(userAmount) : '*****' }}</view>
|
|
</view>
|
|
<view class="action-buttons">
|
|
<button class="withdraw-btn" @click.stop="navigatoCashOut()">{{languageData.wallet.withdrawal}}</button>
|
|
<button class="recharge-btn" @click.stop="navigatoTopUp()">{{languageData.wallet.toUp}}</button>
|
|
</view>
|
|
</view>
|
|
<!-- 交易记录 -->
|
|
<view class="list-background">
|
|
<view class="transaction-list">
|
|
<view class="list-header">
|
|
<text>{{languageData.wallet.balanceChangeRecord}}</text>
|
|
<view class="view-all" @click.stop="navigatoRecord">
|
|
<text>{{languageData.wallet.all}}</text>
|
|
<uni-icons type="right" size="14" color="#999999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view class="message-list" scroll-y :refresher-triggered="triggered" @scrolltolower="onLoadMore">
|
|
<view class="list-main" v-for="(item, index) in recordList.splice(0,2)" :key="index">
|
|
<view class="transaction-item">
|
|
<view class="transaction-info">
|
|
<text class="transaction-type">{{ item.timeStr }}</text>
|
|
<text class="transaction-remark ellipsis-200">{{ item.billCode }}</text>
|
|
<text class="transaction-time">{{ item.time }}</text>
|
|
</view>
|
|
<view class="transaction-amount padding-right-xs">
|
|
<text class="amount positive" :class="{'negative' : item.changeBalance < 0 }">
|
|
{{ item.changeBalance > 0 ? '+' : '' }}{{ item.changeBalance }}
|
|
</text>
|
|
<view class="amount2">
|
|
<text class="balance">
|
|
{{languageData.wallet.balance}}：{{item.currentBalance == '' || item.currentBalance == null ? '-': formatNumber(item.currentBalance)}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getTransRecord,
|
|
getAmount
|
|
} from '@/api/account/transactionRecord.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
accountId: '',
|
|
languageData: {},
|
|
params: {
|
|
id: this.$store.state.user.userId,
|
|
userId: this.$store.state.user.userId,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
phonenumber: '',
|
|
key: '',
|
|
type: '1',
|
|
},
|
|
showDetail: false,
|
|
triggered: false,
|
|
userAmount: 5322200,
|
|
quota: 0,
|
|
recordList: [{
|
|
senderName: 'senderName1',
|
|
senderAccount: '22540212',
|
|
changeBalance: '250000',
|
|
time: '2025-01-22 21:05:33',
|
|
title: '',
|
|
remark: '',
|
|
currentBalance: ''
|
|
},
|
|
{
|
|
senderName: 'senderName2',
|
|
senderAccount: '22540212',
|
|
changeBalance: '-250000',
|
|
time: '2025-01-24 21:05:33',
|
|
title: '',
|
|
remark: '',
|
|
currentBalance: ''
|
|
}
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.selectRecordList();
|
|
},
|
|
onLoad() {
|
|
//TODO
|
|
if (false)
|
|
this.loadRecordList();
|
|
this.selectAmount();
|
|
this.languageData = this.$languageData;
|
|
uni.setNavigationBarTitle({
|
|
title: this.$languageData.navBar.wallet
|
|
});
|
|
},
|
|
methods: {
|
|
navigatoCashOut() {
|
|
this.$tab.navigateTo('/pages/account/withdrawDeposit')
|
|
|
|
},
|
|
navigatoTopUp() {
|
|
this.$tab.navigateTo('/pages/account/topUp')
|
|
|
|
},
|
|
navigatoRecord() {
|
|
this.$tab.navigateTo('/pages/account/transactionRecord')
|
|
},
|
|
loadRecordList() {
|
|
getRecordList(this.params).then(res => {
|
|
this.recordList = res.rows
|
|
})
|
|
},
|
|
selectAmount() {
|
|
getAmount(this.params.userId).then(res => {
|
|
this.userAmount = res.data.accountAmount
|
|
this.accountId = res.data.accountId
|
|
this.quota = res.data.walletLimit || 0
|
|
})
|
|
},
|
|
onLoadMore() {
|
|
// console.log("----懒加载----")
|
|
this.params.pageSize = this.params.pageSize + 10
|
|
this.loadRecordList();
|
|
},
|
|
selectRecordList() {
|
|
getTransRecord(this.params).then(res => {
|
|
this.recordList = res.data;
|
|
this.recordList.forEach(item => {
|
|
item.billCode = item.billCode.split("@")[0];
|
|
if (item.billCode == "BTR") {
|
|
item.billCode = this.$languageData.tmp.transferAccounts; //转账
|
|
} else if (item.billCode == "BPY") {
|
|
item.billCode = this.$languageData.tmp.proxyPayment; //代缴
|
|
} else if (item.billCode == "BPT") {
|
|
item.billCode = this.$languageData.tmp.payment; //付款
|
|
} else if (item.billCode == "BRT") {
|
|
item.billCode = this.$languageData.tmp.receivePayment; //收款
|
|
} else if (item.billCode == "BWL") {
|
|
item.billCode = this.$languageData.tmp.withdrawal; //提现
|
|
} else if (item.billCode == "BRE") {
|
|
item.billCode = this.$languageData.tmp.recharge; //充值
|
|
} else {
|
|
item.billCode = this.$languageData.tmp.other; //其他
|
|
}
|
|
})
|
|
}).catch(e => {
|
|
//this.$refs.loading.close();
|
|
})
|
|
//this.$refs.loading.close();
|
|
//TODO
|
|
if (false) {
|
|
this.$nextTick(() => {
|
|
this.$refs.loading.open();
|
|
})
|
|
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
.amount2 {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.wallet-page {
|
|
// min-height: 100%;
|
|
// background: linear-gradient(180deg, #FEE1A8 0%, #f9f8f8 30%);
|
|
// background-color: #2C53CA;
|
|
// background-image: url('/static/svgs/lines.svg');
|
|
// background-size: 200%;
|
|
// background-position: center;
|
|
}
|
|
|
|
.list-background {
|
|
background: rgba(248, 247, 246, 0);
|
|
// min-height: 500px;
|
|
}
|
|
|
|
.balance-card {
|
|
margin-bottom: 20rpx;
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
padding: 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.balance-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.balance-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
}
|
|
|
|
.safety-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
font-size: 12px;
|
|
color: #FF9500;
|
|
}
|
|
|
|
.balance-amount {
|
|
margin: 32rpx 0;
|
|
font-size: 76rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 100rpx;
|
|
}
|
|
|
|
.withdraw-btn,
|
|
.recharge-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.withdraw-btn {
|
|
background: #F5F5F5;
|
|
color: #333333;
|
|
}
|
|
|
|
.recharge-btn {
|
|
background: #FFE4BA;
|
|
color: #333333;
|
|
}
|
|
|
|
.transaction-list {
|
|
margin: 32rpx;
|
|
padding: 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
min-height: 270px;
|
|
}
|
|
|
|
.list-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
margin-top: -16rpx;
|
|
border-bottom: 1px solid #F5F5F5;
|
|
}
|
|
|
|
.view-all {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999999;
|
|
}
|
|
|
|
.transaction-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
}
|
|
|
|
// .transaction-item:last-child {
|
|
// border-bottom: none;
|
|
// }
|
|
|
|
.transaction-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.transaction-type {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.transaction-time {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.transaction-remark {
|
|
// width: 85%;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.transaction-amount {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.positive {
|
|
color: #07C160;
|
|
}
|
|
|
|
.negative {
|
|
color: #c73d3d;
|
|
}
|
|
|
|
.balance {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
float: left;
|
|
}
|
|
</style>
|