chuangte_bike_newxcx/page_shanghu/gongzuotai/AccountDetails.vue

<template>
	<view class="page">
		<u-navbar title="资金管理" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='45'
			back-icon-color='#fff'></u-navbar>
        <image src="https://api.ccttiot.com/smartmeter/img/static/urVZZ8DNLsukDZ7dG6cs" class="bj" mode=""></image>
		<view class="account_box">
			<image class="img" src="https://api.ccttiot.com/smartmeter/img/static/uhQDzC3F3whpKracW043" mode=""></image>
			<view class="li_box">
				<view class="txt">
					账户总余额
				</view>
				<view class="num">
					￥{{userInfo.balance == null ? '0.00' : (Number(userInfo.balance) + Number(waitDivideAmount)).toFixed(2)}}
				</view>
			</view>	
			<view class="li_box">
				<view class="txt">
					累计提现
				</view>
				<view class="num">
					￥{{successAmount == null ? '0.00' : successAmount.toFixed(2)}}
				</view>
			</view>
		</view>
		
		<view class="gongn">
			<image @click="btnsz" style="width: 104rpx;height: 98rpx;" src="https://api.ccttiot.com/smartmeter/img/static/ucvGjbNwmqQyG5Iqp4li" mode=""></image>
			<image @click="btnzh" style="width: 154rpx;height: 98rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uSSltbuT7538UlDjhwbx" mode=""></image>
			<image @click="btntx" style="width: 104rpx;height: 98rpx;" src="https://api.ccttiot.com/smartmeter/img/static/ui8SedAzwqlLQttlAO6C" mode=""></image>
		</view>
		
		<view class="pay_type">
			<view class="top">
				提现方式
			</view>
			<view class="section-card">
			    <!-- <view class="section-title">选择收款方式</view> -->
			    <view class="type-options">
			      <view v-for="(item,index) in zhanghulist" :key="index"
			        class="type-option" 
			        :class="{active: currentindex == index}"
			        @click="payxz(index,item)">
			        <u-icon :name="item.channelPicture" size="44" color="#409EFF"></u-icon>
			        <view class="option-text">
			          <text class="option-name">{{item.channelOutName}}</text>
			          <text class="option-desc">{{item.channelRemark == null ? '' : item.channelRemark}}</text>
			        </view>
			      <text style="font-size: 26rpx;color: #333;" v-if="txlist.find(val => val.channelId == item.channelId)">已绑定</text>
			      <text style="font-size: 26rpx;color: #999;" v-else>未绑定</text>
			      </view>
			    </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: " ",
				},
				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:'',
				successAmount:'',
				zhanghulist:[]
			}
		},
		onLoad(e) {


		},
		onShow() {
			this.getqudao()
			if (uni.getStorageSync('adminAreaid')) {
				this.areaId = uni.getStorageSync('adminAreaid')
			}
			this.getUserInfo()
		},
		// onReachBottom() {
		// 	if(this.total > this.list.length){
		// 		this.getlist()
		// 	}else{
		// 		console.log(11);
		// 	}
		// },
		methods: {
			// 点击跳转到提现记录
			btntx(){
				uni.navigateTo({
					url:'/page_fenbao/tixianjl?userId=' + this.userInfo.userId
				})
			},
			// 点击跳转到账户管理
			btnzh(){
				if(this.userInfo.isReal == true){
					uni.navigateTo({
						url:'/page_user/shoukuan/index'
					})
				}else{
					uni.showModal({
						title: '提示',
						content: '您还未通过实名认证，是否前往？',
						showCancel: true,
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/page_user/shiming'
								})
							} else if (res.cancel) {
							    console.log('取消'); // 用户点击取消
							}
						}
					})
				}
			},
			// 点击跳转收支明细
			btnsz(){
				uni.navigateTo({
					url:'/page_shanghu/mingxi'
				})
			},
			// 点击绑定提现方式
			payxz(index, val) {
			    if (this.userInfo.authTypes.some(item => item == 1)) { //判断是否有实名认证
			       const hasMatched = this.txlist.some(item => item.channelId == val.channelId)
			       if (hasMatched) {
			          const matchedItem = this.txlist.find(item => item.channelId == val.channelId)
			          this.channelId = matchedItem.id
			          this.currentindex = index
			          if (this.amount != '') {
			              this.ckinpt()
			          }
			       } else {
			          uni.navigateTo({
			            url: '/page_user/shoukuan/addsk?activeType=' + val.channelApiType + '&id=' + val.channelId
			          })
			       }
			    } else {
			       uni.navigateTo({
			       	url:'/page_user/shiming'
			       })
			    }
			},
			// 获取渠道列表
			getqudao(){
				this.$u.get(`/app/userWithdrawChannel/enabledList?appId=${this.$store.state.appid}`).then(res =>{
				    if(res.code == 200){
				        this.zhanghulist = res.data
				    }
				})
			},
			// 请求提现方式
			gettxfs(){
				this.$u.get(`/bst/account/list?userId=${this.userInfo.userId}`).then((res) => {
					if (res.code == 200) {
					    this.txlist = res.rows
					} 
				})
			},
			// 点击却添加收款方式
			btnadd(){
				uni.navigateTo({
					url:'/page_user/shoukuan/addsk'
				})
			},
			
			
			// 请求个人信息
			getUserInfo(){
				this.$u.get(`/getInfo`).then((res) => {
					if (res.code == 200) {
					    this.userInfo = res.user
					    this.gettxfs()
					    this.successAmount = res.stat.withdraw.successAmount == null ? 0 : res.stat.withdraw.successAmount
					    this.waitDivideAmount = res.stat.bonus.waitDivideAmount == null ? 0 : res.stat.bonus.waitDivideAmount
					} 
				})
			},
			// 输入提现金额计算
			ckinpt() {
				console.log(this.amount);
				this.$u.get(`/bst/withdraw/calcAmount?amount=${this.amount}&accountId=${this.channelId}`).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.getUserInfo()
							uni.showToast({
								title: '提现成功',
								icon: 'none',
								duration: 2000
							})
						}else if(res.code == 50001){
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: true,
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/page_fenbao/tousu/shlist?areaId=' + this.areaId
										})
									} else if (res.cancel) {
													
									}
								}
							})
						}else if(res.code == 60001){
							let that = this
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: true,
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/page_shanghu/guanli/invoice_list?userId=' + that.userInfo.userId
										})
									} else if (res.cancel) {
													
									}
								}
							})
						}else if(res.code == 10004){
							uni.navigateTo({
								url:'/page_shanghu/upload_license'
							})
						} 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&orderByColumn=createTime&isAsc=desc&userId=${this.userInfo.userId}`).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">
	.bj{
		width: 750rpx;
		height: 704rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.gongn{
		width: 690rpx;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 68rpx;
		margin: auto;
		margin-top: 14rpx;
	}
page {
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: 300rpx;
  box-sizing: border-box;
}
/* 通用卡片样式 */
.section-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 36rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
}

/* 通用标题样式 */
.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 30rpx;
}

/* 账户类型选择 */
.type-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.type-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #F7F9FC;
  border-radius: 16rpx;
  transition: all 0.2s ease-in-out;
}
.type-option.active {
  background: #EEF5FF;
  border: 1rpx solid #409EFF;
}
.type-option:active {
  transform: scale(0.98);
}
.option-text {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
  flex: 1;
}
.option-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
}
.option-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
  width: 330rpx;
}
/* 账户余额卡片 */
.account_box {
	position: relative;
	.img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
  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;
	  font-size: 28rpx;
	  color: #3D3D3D;
    }
    .num {
      font-size: 48rpx;
      font-weight: 600;
      margin-top: 10rpx;
	  color: #4297F3;
    }
  }
}
/* 提现方式选择 */
.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;
    ::v-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>