shunfengche-sfd/my/wallet/index.vue

<template>
	<view class="">
		<view class="padding">
			<view class="box">
				<view class="tit">账户余额</view>
				<view class="pri"><text>¥{{balance?balance:'0'}}</text> </view>
				<view style="font-size: 26rpx; color: #999;padding-bottom: 20rpx;"><text>可提现金额：¥{{balance?balance:'0'}}</text> </view>
	 			<!-- <view class="flex align-center justify-between margin-top-xl"> -->
					<!-- <view class="">
						<view>总资金</view>
						<view style="font-size: 44rpx;">{{money?money:'0'}}</view>
					</view> -->
					<!-- <view class="">
						<view>冻结资金</view>
						<view style="font-size: 44rpx;">2.00</view>
					</view> -->
				<!-- </view> -->
			</view>
	<!-- 		<view class="flex align-center justify-between padding-top">
				<view>
					<view class="padding-bottom-xs">总资产（元）</view>
					<view class="text-bold" style="font-size: 48rpx;">{{balance?balance:'0'}}</view>
				</view>
				<view class="flex align-center">
					<view class="cz" @click="goTo('/my/wallet/Txmoney')">提现</view>
					<view class="tx" @click="gocz()">充值</view>
				</view>
			</view> -->
		</view>
		<view style="padding: 0 30rpx;">
			<view class="padding" style="background: #fff; border-radius: 16rpx;">
				<view class="title">
					提现
				</view>
				<view style="padding: 20rpx 0;">
					提现金额
				</view>
				<view class="two_box">
					<view style="border-radius: 13rpx 0rpx 0rpx 13rpx;width: 80rpx; height: 80rpx; font-size: 40rpx; background: #ffe9e9; color: #f56c6c;text-align: center;line-height: 80rpx;border-top: 1rpx solid #ccc;border-left: 1rpx solid #ccc;border-bottom: 1rpx solid #ccc;">
						¥
					</view>
					<u-input style="width: 100%;height: 80rpx;" v-model="money" type="number" :clearable="false" placeholder="请输入提现金额" />
				</view>
				<view class="part_three">
					<view style="padding: 20rpx 0;">提现方式</view>
					<view class="btn">
						<view class="btn_right" :class="current==1?'btna':''" @click="bindToindex(1)">
							<image src="../static/zhifubao.png"></image>
							<text>支付宝</text>
						</view>
						<view v-if="isWxAway == '是'" class="btn_left" :class="current==2?'btna':''" @click="bindToindex(2)">
							<image src="../static/weixin.png"></image>
							<text>微信</text>
						</view>
					</view>
				</view>
				<view class="submit" @click="getOut()">立即提现</view>
				<view style="font-size: 26rpx; color: #999;text-align: center;">
					预计到账时间： 1-3个工作日
				</view>
			</view>
		</view>
		
		<view style="padding: 0 30rpx;margin-top: 30rpx;">
			<view class="padding" style="background: #fff; border-radius: 16rpx;">
				<view class="flex" style="justify-content: space-between;">
					<view class="title">
						交易记录
					</view>
					<view class="flex" style="padding: 10rpx; border-radius: 12rpx;background: #f5f5f5;">
						<view v-for="(item, index) in listtab" :key="index" @click="tablists(index)" :class="tabvalue == index ? 'tabg' : 'tab'">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view style="margin-top: 20rpx;">
					<view>
						<view class="list_box2" v-for="(item,index) in list.slice(0, 5)" :key="index">
							<view class="name flex align-center" @click="copyClick(item.title)" v-if="item.type==1">
								{{item.title}}
								<image src="../static/copy.png" style="width: 30upx;height: 30upx;"></image>
							</view>
							<view v-else>{{item.title}}</view>
							<!-- <view>{{item.content}}</view> -->
							<view class="data">{{item.createTime}}</view>
						</view>
					</view>
				</view>
				<view @click="goTo('/my/wallet/Acontlist')" style="margin-top: 20rpx; font-size: 26rpx; color: #999; text-align: center;">查看更多记录</view>
			</view>
		</view>
		<!-- 我的列表 -->
		<!-- <view class="mylist">
			<view class="list_box" @click="goTo('/my/wallet/Acontlist')">
				<view class="list_left">
					<view class="margin-right-xs">
						<image src="../static/zijin.png" style="width: 52rpx;height: 52rpx;"></image>
					</view>
					<view class="t">资金明细</view>
				</view>
				<view class="">
					<image src="../static/icon_go.png" style="width: 18rpx;height: 32rpx;"></image>
				</view>
			</view>
			<view class="list_box" @click="goTo('/my/wallet/zhifubao')">
				<view class="list_left">
					<view class="margin-right-xs">
						<image src="../static/zhanghao.png" style="width: 52rpx;height: 52rpx;"></image>
					</view>
					<view class="t">提现账号</view>
				</view>
				<view class="">
					<image src="../static/icon_go.png" style="width: 18rpx;height: 32rpx;"></image>
				</view>
			</view>
			<view class="list_box" @click="goTo('/my/wallet/cashList')">
				<view class="list_left">
					<view class="margin-right-xs">
						<image src="../static/tixian.png" style="width: 52rpx;height: 52rpx;"></image>
					</view>
					<view class="t">提现记录</view>
				</view>
				<view class="">
					<image src="../static/icon_go.png" style="width: 18rpx;height: 32rpx;"></image>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: '1',
				money: 0,
				mylist: [{
					id: 1,
					name: '保证金',
					image: '../../../static/rider/qqq.png'
				}, {
					id: 2,
					name: '账户明细',
					image: '../../../static/rider/qq.png'
				}],
				shangxian: '是',
				balance:0,
				isWxAway: '是',
				listtab: [
					{
						value: 1,
						title: '全部'
					},
					{
						value: 2,
						title: '收入'
					},
					{
						value: 3,
						title: '支出'
					},
				],
				tabvalue: 0,
				list: [],
				page: 1,
				totalCount: 0,
				zhiFuBaoName: '',
				zhifubao: ''
			}
		},
		onLoad() {
			this.shangxian = uni.getStorageSync('shangxian')
			this.taskData2()
		},
		onShow() {
			// this.taskData()
			this.getUserInfo()
			this.zhiFuBao = uni.getStorageSync('zhiFuBao')
			this.zhiFuBaoName = uni.getStorageSync('zhiFuBaoName')
		},
		methods: {
			tablists(index) {
				this.tabvalue = index
				this.taskData2()
			},
			bindToindex(e) {
			
				this.current = e
				console.log(e, this.current)
			},
			// 获取任务数据
			taskData2() {
				this.$Request.getT('/app/userMoney/selectUserMoneyDetails?classify=4&page=' + this.page + '&limit=15&userType=2&type=' + this.tabvalue).then(res => {
					if (res.code == 0) {
						this.list = res.data.records
					}
				});
			},
			// 获取个人信息
			getUserInfo() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT("/app/user/selectUserDetails?userId=" + userId).then(res => {
					if (res.code == 0) {
						this.balance = res.data.balance
					} else {
						this.$queue.logout();
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg,
						});
					}
				});
			},
			goTo(url){
				uni.navigateTo({
					url
				})
			},
			// 获取任务数据
			taskData() {
				this.$Request.getT('/app/userinfo/findBalance').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.money = res.data
						}

					}
					console.log('res', res)

				});
			},
			bindTxmoney() {
				uni.navigateTo({
					url: '/pages/riderMy/myAccount/Txmoney/Txmoney'
				})
			},
			getMoney() {
				let that = this;
				let token = this.$queue.getData('token');
				let userId = this.$queue.getData('userId');
				if (token) {
					//this.$queue.showLoading("加载中...");
					//可以提现金额查询预估收入查询
					let userId = this.$queue.getData('userId');
					this.$Request.getT("/app/user/selectUserDetails?userId=" + userId).then(res => {
						if (res.code === 0 && res.data) {
							that.mayMoney = res.data.balance;
							that.zhifubao = res.data.zhiFuBao;
							that.zhifubaoName = res.data.zhiFuBaoName;
							that.wximg = res.data.cashQrCode
						} else if (res.code === -102) {
							this.$queue.showToast(res.msg);
							this.$queue.logout();
							// uni.navigateTo({
							// 	url: '/pages/public/login'
							// });
						} else {
							that.mayMoney = '0';
							//this.$queue.showToast(res.msg);
						}
					});
				}
			},
			getOut() {
				let that = this;
				let token = that.$queue.getData('token');
				let userId = that.$queue.getData('userId');
				if (token) {
					if (that.current == 1) {
						if (!that.zhifubao || !that.zhifubaoName) {
							uni.navigateTo({
								url: '/my/wallet/zhifubao'
							});
							return
						}
						if (!/^\d+$/.test(that.money)) {
							uni.showToast({
								icon: 'none',
								title: '请输入正确金额,不能包含中文,英文,特殊字符和小数'
							});
							return;
						}
						if (Number(that.money) < Number(that.minMoney)) {
							uni.showToast({
								icon: 'none',
								title: '提现金额不能小于' + that.minMoney + '元'
							});
							return;
						}
			
						if (Number(that.money) > Number(that.manMoney)) {
							uni.showToast({
								icon: 'none',
								title: '提现金额不能大于' + that.manMoney + '元'
							});
							return;
						}
						uni.showModal({
							title: '提现申请提示',
							content: '请仔细确认收款人信息\n姓名:' + that.zhifubaoName + '\n提现金额:' + that.money + '\n提现手续费:' +
								parseFloat(that.money * that.shouxufei).toFixed(2) + '元' + '\n收款账号：' + that
								.zhifubao + '',
							success: e => {
								if (e.confirm) {
									that.$queue.showLoading('提现中...');
			
									that.$Request.getT('/app/cash/cashMoney?userType=2&classify=' + that
										.current +
										'&money=' + that.money).then(res => {
										if (res.code === 0) {
											that.$queue.showToast('提现申请成功，预计三个工作日到账');
											that.money = ''
											that.getMoney();
											that.mayMoney = ''
										} else {
											uni.showModal({
												title: '温馨提示',
												content: res.msg,
												showCancel: false,
												cancelText: '取消',
												confirmText: '确认'
											});
										}
										uni.hideLoading();
									});
								}
							}
						});
			
					} else {
						if (!/^\d+$/.test(that.money)) {
							uni.showToast({
								icon: 'none',
								title: '请输入正确金额,不能包含中文,英文,特殊字符和小数'
							});
							return;
						}
						if (Number(that.money) < Number(that.minMoney)) {
							uni.showToast({
								icon: 'none',
								title: '提现金额不能小于' + that.minMoney + '元'
							});
							return;
						}
			
						if (Number(that.money) > Number(that.manMoney)) {
							uni.showToast({
								icon: 'none',
								title: '提现金额不能大于' + that.manMoney + '元'
							});
							return;
						}
						if (this.values == 2) { //如果是微信手动提现才判断微信收款码
							if (!that.wximg) {
								uni.showModal({
									title: '提现提示',
									content: '请上传微信收款码',
									showCancel: true,
									cancelText: '取消',
									confirmText: '上传',
									success: res => {
										if (res.confirm) {
											that.show = true;
										}
									},
									fail: () => {},
									complete: () => {}
								});
								return;
							}
						}
						uni.showModal({
							title: '提现申请提示',
							content: '请仔细确认收款信息\n金额:' + that.money + '元' + '\n提现手续费:' + parseFloat(that.money *
								that.shouxufei).toFixed(2) + '元',
							success: e => {
								if (e.confirm) {
									that.$queue.showLoading('提现中...');
									that.$Request.getT('/app/cash/cashMoney?userType=2&classify=' + that.current +
										'&money=' + that.money).then(res => {
										if (res.code === 0) {
											that.$queue.showToast('提现申请成功，预计三个工作日到账');
											that.money = ''
											that.getMoney();
											that.mayMoney = ''
										} else {
											uni.showModal({
												title: '温馨提示',
												content: res.msg,
												showCancel: false,
												cancelText: '取消',
												confirmText: '确认'
											});
										}
										uni.hideLoading();
									});
								}
							}
						});
					}
				} else {
					uni.showToast({
						title: '提现失败',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}
	
	.list_box2 {
		width: 100%;
		margin: 0 auto;
		/* display: flex; */
		line-height: 45rpx;
		padding-top: 20rpx;
		padding-bottom: 20upx;
		border-bottom: 1rpx solid #f8f8f8;
	}
	
	.list_left {
		/* flex: 2; */
	}
	
	.name {
		width: 500rpx;
		font-size: 26rpx;
		color: #333333;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	
	.data {
		color: #999999;
		font-size: 24rpx;
	}
	
	.tabg {
		padding: 8rpx 20rpx;
		border-radius: 12rpx;
		background: #00c18a;
		color: #fff;
	}
	.tab {
		padding: 8rpx 20rpx;
		border-radius: 12rpx;
		color: #999999;
		background: #f5f5f5;
	}

	.box {
		width: 690rpx;
		// height: 312rpx;
		background: #fff;
		border-radius: 16rpx;
		text-align: center;
		padding: 50rpx 40rpx 30rpx;


		.tit {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}

		.pri {
			margin: 20rpx;

			text {
				font-size: 68rpx;
				font-family: DINPro;
				font-weight: 600;
				color: #00c18a;
				margin-right: 10rpx;
			}
		}
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.part_three {
		width: 100%;
		margin: 0 auto;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	
	.three_name {
		width: 100%;
		margin: 0 auto;
		font-size: 33rpx;
		color: black;
		line-height: 80rpx;
	}
	
	.btn {
		width: 100%;
		margin: 0 auto;
		// display: flex;
		// justify-content: space-between;
		padding-bottom: 30rpx;
	}
	
	.btn_left {
		flex: 1;
		/* width: 240rpx; */
		height: 90rpx;
		border: 1rpx solid #ccc;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	
	.btn_right {
		flex: 1;
		/* width: 240rpx; */
		height: 90rpx;
		border: 1rpx solid #ccc;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
	}
	
	.btna {
		border: 1rpx solid #00c18a !important;
	}
	
	.submit {
		width: 100%;
		height: 80rpx;
		background: #00c18a;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		font-size: 34rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	
	
	.btn_left image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 12rpx;
	}
	
	.btn_right image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 12rpx;
	}
	
	.two_box {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.u-input__input {
		height: 80rpx !important;
		padding: 0 30rpx;
		// font-size: 50rpx !important;
		// color: #747474 !important;
		border-top: 1rpx solid #cccccc;
		border-bottom: 1rpx solid #cccccc;
		border-right: 1rpx solid #cccccc;
		border-radius: 0rpx 13rpx 13rpx 0rpx;
	}

	.tx {
		width: 160rpx;
		height: 70rpx;
		border: 3rpx solid #0186FF;
		border-radius: 8rpx;
		text-align: center;
		line-height: 70rpx;
		color: #0186FF;
	}

	.cz {
		width: 160rpx;
		height: 70rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
		background: #0186FF;
	}


	/* 我的列表 */
	.mylist {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx 28rpx;
	}

	.list_box {
		display: flex;
		height: 95rpx;
		align-items: center;
	}

	.list_left {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
		.t{
			letter-spacing: 1rpx;
		}
	}
</style>