571 lines
13 KiB
Vue
571 lines
13 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="账户明细" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45'
|
||
back-icon-color='#000'></u-navbar>
|
||
|
||
<view class="account_box">
|
||
<view class="li_box">
|
||
<view class="txt">
|
||
账户总余额
|
||
</view>
|
||
<view class="num">
|
||
￥{{userInfo.balance == null ? '0.00' : userInfo.balance.toFixed(2)}}元
|
||
</view>
|
||
</view>
|
||
<view class="li_box">
|
||
<view class="txt">
|
||
待结算金额
|
||
</view>
|
||
<view class="num">
|
||
￥{{waitDivideAmount == null ? '0.00' : waitDivideAmount.toFixed(2)}}元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pay_type">
|
||
<view class="top">
|
||
提现方式
|
||
</view>
|
||
<view class="type_box" v-if="txlist.length > 0" v-for="(item,index) in txlist" :key="index"
|
||
@click="pay(index,item.id)">
|
||
<view class="box_left">
|
||
<view class="text">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="text" v-if="item.type == 'QR'">
|
||
线下二维码收款
|
||
</view>
|
||
<view class="text" v-if="item.type == 'BANK'">
|
||
银行卡收款（{{item.no.slice(-4)}}）
|
||
</view>
|
||
</view>
|
||
<view class="box_right" :class="currentindex==index?'act1':''">
|
||
<span v-if="currentindex==index" style="color: #fff;"> <u-icon name="checkbox-mark" color="#fff" size="28"></u-icon> </span>
|
||
</view>
|
||
</view>
|
||
<view v-if="txlist.length == 0" class="wutx" style="width: 100%;margin-top: 30rpx;text-align: center;">
|
||
<view class="" style="font-size: 32rpx;">
|
||
当前暂无提现方式
|
||
</view>
|
||
<view class="addtj" @click="btnadd">
|
||
去添加
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ipt_box">
|
||
<view class="ipt">
|
||
<u-input v-model="amount" :border="border" placeholder='请输入提现金额'
|
||
placeholder-style="font-size: 32rpx;color: #A6A6A6;" @input="ckinpt()" />
|
||
</view>
|
||
|
||
<view class="txt" style="margin-left: auto;margin-right: 20rpx;">
|
||
元
|
||
</view>
|
||
</view>
|
||
<view class="" style="margin: 0 auto;
|
||
margin-top: 38rpx;
|
||
width: 676rpx;color: #ccc;" >
|
||
可提现金额：{{userInfo.balance == null ? '0.00' : userInfo.balance.toFixed(2)}}元
|
||
</view>
|
||
<view class="info_card">
|
||
<view class="info_li">
|
||
<view class="text">提现金额：{{amount == '' ? '0.00' : amount}}元</view>
|
||
<view class="txt">
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info_li">
|
||
<view class="text">实际到账：{{realprice}}元</view>
|
||
</view>
|
||
<view class="info_li">
|
||
<view class="text">提现手续费：{{Quantity}}元</view>
|
||
</view>
|
||
<view class="tip" v-if="showtip">
|
||
<view class="tip_txt">
|
||
手续费：{{xsf}}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="patBtn" @click="payBtn()">
|
||
立即提现
|
||
</view>
|
||
<!-- 提现明细 -->
|
||
<view class="licot">
|
||
<view class="top">
|
||
提现记录
|
||
</view>
|
||
<view class="li_box" v-for="(item,index) in list" :key="index">
|
||
<view class="box_top">
|
||
<view class="bot_right">
|
||
提现状态：
|
||
<text v-if="item.status == 'WAIT_VERIFY'">提现中</text>
|
||
<text v-if="item.status == 'PAYING'">打款中</text>
|
||
<text v-if="item.status == 'SUCCESS'">已打款</text>
|
||
<text v-if="item.status == 'REJECTED'">已驳回</text>
|
||
<text v-if="item.status == 'FAILED'">打款失败</text>
|
||
</view>
|
||
<view class="top_right">
|
||
|
||
</view>
|
||
<view class="top_right"style="color: #3D3D3D;">
|
||
实际到账：{{'￥' +item.arrivalAmount}}
|
||
</view>
|
||
</view>
|
||
<view class="box_bot">
|
||
<view class="bot_left">
|
||
提现时间：{{item.createTime}}
|
||
</view>
|
||
<view class="top_left">
|
||
提现金额： {{'￥' + item.amount}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
当前没有更多提现订单啦...
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
showtip: false,
|
||
areaId: null,
|
||
amount: '',
|
||
list: [],
|
||
pageNum: 1,
|
||
pageSize: 25,
|
||
info: {},
|
||
price: 0,
|
||
realprice: 0,
|
||
Quantity: 0,
|
||
border: false,
|
||
isThrottled: false,
|
||
moneyInfo:{},
|
||
ownerInfo:{},
|
||
imglist:[],
|
||
token: '',
|
||
upurl:'',
|
||
userInfo:{},
|
||
currentindex: -1,
|
||
txlist:[],
|
||
listflag: true,
|
||
channelId:'',
|
||
objobj:{},
|
||
total:0,
|
||
waitDivideAmount:''
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
|
||
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync('adminAreaid')) {
|
||
this.areaId = uni.getStorageSync('adminAreaid')
|
||
}
|
||
this.gettxfs()
|
||
this.getUserInfo()
|
||
this.getlist()
|
||
},
|
||
onReachBottom() {
|
||
if(this.total > this.list.length){
|
||
this.getlist()
|
||
}else{
|
||
console.log(11);
|
||
}
|
||
},
|
||
methods: {
|
||
// 请求提现方式
|
||
gettxfs(){
|
||
this.$u.get(`/bst/account/list`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.txlist = res.rows
|
||
}
|
||
})
|
||
},
|
||
// 点击却添加收款方式
|
||
btnadd(){
|
||
uni.navigateTo({
|
||
url:'/page_user/shoukuan/addsk'
|
||
})
|
||
},
|
||
pay(index, id) {
|
||
this.channelId = id
|
||
this.currentindex = index
|
||
},
|
||
|
||
// 请求个人信息
|
||
getUserInfo(){
|
||
this.$u.get(`/getInfo`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.userInfo = res.user
|
||
this.waitDivideAmount = res.stat.bonus.waitDivideAmount
|
||
}
|
||
})
|
||
},
|
||
// 输入提现金额计算
|
||
ckinpt() {
|
||
console.log(this.amount);
|
||
this.$u.get(`/bst/withdraw/calcAmount?amount=${this.amount}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.realprice = res.data.amount
|
||
this.Quantity = res.data.serviceCharge
|
||
this.objobj = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
status(type) {
|
||
if (type == 1) {
|
||
return '骑行订单'
|
||
} else if (type == 2) {
|
||
return '押金订单'
|
||
} else if (type == 3) {
|
||
return '押金订单退款'
|
||
} else if (type == 4) {
|
||
return '骑行订单退款'
|
||
} else if (type == 5) {
|
||
return '提现'
|
||
} else if (type == 6) {
|
||
return '提现失败'
|
||
} else if (type == 7) {
|
||
return '车损收入'
|
||
}else if (type == 8) {
|
||
return '短信扣费'
|
||
}
|
||
|
||
},
|
||
formatDate(value) {
|
||
if (!value) return '';
|
||
let date = new Date(value);
|
||
let month = date.getMonth() + 1; // 月份从0开始计数，所以加1
|
||
let day = date.getDate();
|
||
let hours = date.getHours();
|
||
let minutes = date.getMinutes();
|
||
// 确保月份、日期、小时和分钟都是两位数
|
||
month = month < 10 ? '0' + month : month;
|
||
day = day < 10 ? '0' + day : day;
|
||
hours = hours < 10 ? '0' + hours : hours;
|
||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||
return `${month}-${day} ${hours}:${minutes}`;
|
||
},
|
||
|
||
// 点击提现
|
||
payBtn() {
|
||
if(this.channelId == ''){
|
||
uni.showToast({
|
||
title: '提现方式不能为空',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}else{
|
||
let data = {
|
||
accountId:this.channelId,
|
||
amount: this.amount,
|
||
arrivalAmount:this.realprice,
|
||
serviceType:this.objobj.type,
|
||
serviceCharge:this.objobj.serviceCharge,
|
||
servicePoint:this.objobj.point
|
||
}
|
||
this.$u.post('/bst/withdraw', data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.amount = ''
|
||
this.Quantity = 0
|
||
this.realprice = 0
|
||
this.price = 0
|
||
this.list = []
|
||
this.pageNum = 1
|
||
this.getlist()
|
||
this.getUserInfo()
|
||
uni.showToast({
|
||
title: '提现成功',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
console.error("Error fetching area data:", error);
|
||
}).finally(() => {
|
||
// 三秒后解除节流
|
||
setTimeout(() => {
|
||
this.isThrottled = false
|
||
}, 3000)
|
||
})
|
||
}
|
||
},
|
||
// 请求提现记录
|
||
getlist() {
|
||
this.$u.get(`/bst/withdraw/list?pageNum=${this.pageNum}&pageSize=10`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.total = res.total
|
||
if(this.pageNum == 1){
|
||
this.list = res.rows
|
||
}else{
|
||
this.list = this.list.concat(res.rows)
|
||
}
|
||
this.pageNum++
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f5f7fa;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
padding-bottom: 300rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 账户余额卡片 */
|
||
.account_box {
|
||
margin: 30rpx;
|
||
padding: 40rpx;
|
||
background: linear-gradient(135deg, #4297F3, #4C97E7);
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(66, 151, 243, 0.2);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: white;
|
||
.li_box {
|
||
flex: 1;
|
||
text-align: center;
|
||
.txt {
|
||
font-size: 28rpx;
|
||
opacity: 0.9;
|
||
}
|
||
.num {
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
/* 提现方式选择 */
|
||
.pay_type {
|
||
margin: 30rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
overflow: hidden;
|
||
.top {
|
||
padding: 30rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #262B37;
|
||
border-bottom: 1rpx solid #f0f2f5;
|
||
}
|
||
.type_box {
|
||
padding: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #f0f2f5;
|
||
transition: all 0.3s;
|
||
&:active {
|
||
background-color: #f8f9fa;
|
||
}
|
||
.box_left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
.text {
|
||
margin-left: 20rpx;
|
||
font-size: 30rpx;
|
||
color: #3D3D3D;
|
||
&:last-child {
|
||
font-size: 26rpx;
|
||
color: #909090;
|
||
}
|
||
}
|
||
}
|
||
.box_right {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #d9d9d9;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s;
|
||
&.act1 {
|
||
background-color: #4297F3;
|
||
border-color: #4297F3;
|
||
}
|
||
}
|
||
}
|
||
.wutx {
|
||
padding: 40rpx 0;
|
||
text-align: center;
|
||
view {
|
||
font-size: 28rpx;
|
||
color: #909090;
|
||
}
|
||
.addtj {
|
||
margin: 30rpx auto 0;
|
||
width: 80%;
|
||
height: 80rpx;
|
||
background: #4297F3;
|
||
border-radius: 40rpx;
|
||
color: white;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(66, 151, 243, 0.3);
|
||
}
|
||
}
|
||
}
|
||
/* 提现金额输入 */
|
||
.ipt_box {
|
||
margin: 30rpx;
|
||
padding: 0 30rpx;
|
||
height: 100rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
.ipt {
|
||
flex: 1;
|
||
/deep/.u-input__input {
|
||
font-size: 36rpx !important;
|
||
color: #262B37 !important;
|
||
}
|
||
}
|
||
.txt {
|
||
font-size: 32rpx;
|
||
color: #262B37;
|
||
}
|
||
}
|
||
/* 可提现金额提示 */
|
||
.available-amount {
|
||
margin: 0 30rpx;
|
||
font-size: 28rpx;
|
||
color: #909090;
|
||
}
|
||
/* 提现信息卡片 */
|
||
.info_card {
|
||
margin: 30rpx;
|
||
padding: 30rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
.info_li {
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
.text {
|
||
color: #6b7785;
|
||
}
|
||
.value {
|
||
color: #262B37;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.tip {
|
||
margin-top: 20rpx;
|
||
padding: 16rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
color: #6b7785;
|
||
}
|
||
}
|
||
/* 提现按钮 */
|
||
.patBtn {
|
||
margin: 40rpx 30rpx;
|
||
height: 90rpx;
|
||
background: #4297F3;
|
||
border-radius: 45rpx;
|
||
color: white;
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(66, 151, 243, 0.3);
|
||
transition: all 0.3s;
|
||
&:active {
|
||
opacity: 0.9;
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
/* 提现记录 */
|
||
.licot {
|
||
margin: 30rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
padding-bottom: 30rpx;
|
||
box-sizing: border-box;
|
||
.bot{
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
text-align: center;
|
||
color: #ccc;
|
||
}
|
||
.top {
|
||
padding: 30rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #262B37;
|
||
border-bottom: 1rpx solid #f0f2f5;
|
||
}
|
||
.li_box {
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f0f2f5;
|
||
.box_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
.bot_right {
|
||
font-size: 28rpx;
|
||
color: #6b7785;
|
||
text {
|
||
color: #262B37;
|
||
}
|
||
}
|
||
.top_right {
|
||
font-size: 28rpx;
|
||
color: #262B37;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.box_bot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 26rpx;
|
||
color: #909090;
|
||
}
|
||
}
|
||
}
|
||
/* 状态颜色 */
|
||
.status-wait {
|
||
color: #FFC107;
|
||
}
|
||
.status-success {
|
||
color: #28A745;
|
||
}
|
||
.status-failed {
|
||
color: #DC3545;
|
||
}
|
||
</style> |