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