chuangte_bike_newxcx/page_shanghu/gongzuotai/AccountDetails.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">
					{{userInfo.settlementAmount == null ? '0.00' : userInfo.settlementAmount}}元
				</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
			}
		},
		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
					} 
				})
			},
			// 输入提现金额计算
			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>