shunfengche-sfd/my/wallet/baozhengjin.vue

<template>
	<view class="content">
		<view class="margin padding" style="background: #fff; border-radius: 16rpx;">
			<view class="flex" style="justify-content: space-between; margin: 20rpx 0; color: #999;">
				<view> 账户状态</view>
				<view style="padding: 8rpx 15rpx; border: 1rpx solid #00c18a; background: #e8fbf6; color: #00c18a; border-radius: 12rpx;">
					已认证
				</view>
			</view>
			<view class="flex" style="justify-content: space-between; margin: 20rpx 0; color: #999;">
				<view> 保证金状态</view>
				<view>
					账户余额
				</view>
			</view>
			<view class="flex" style="justify-content: space-between; margin: 20rpx 0;">
				<view style="font-size: 32rpx; color: #f56c6c;"> 未缴纳</view>
				<view style="font-size: 32rpx;" >
					¥ 0.00
				</view>
			</view>
		</view>
		<view class="padding margin" style="background: #fff; border-radius: 13rpx;">
			<view class="acount_type">设置保证金金额</view>
			<view class="flex" style="justify-content: space-between;margin-top: 30rpx;">
				<view style="color: #999;"> 建议金额</view>
				<view class="flex">
					<view v-for="(item,index) in moneyslist" :key="index" :class="moneyslists == item.id ? 'tabg' : 'tab'" style="margin-left: 20rpx;" @click="tabshj(item.value, index)">
						¥ {{ item.value }}
					</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;">
				<u-input v-model="earnestMoney" type="number" placeholder="请输入支付金额" :border="true" />
			</view>
			<view style="font-size: 26rpx; color: #999;margin-top: 20rpx;">保证金金额范围 ¥500 - ¥5000</view>
			<view class="text-right margin-top-sm margin-right-sm" @click="goDet">查看明细</view>
		<!-- 	<view class="part1_box">
				<view class="text-right margin-top-sm margin-right-sm" @click="goDet">查看明细</view>
				<view class="balance">
					<view class="balance_name">保证金余额(元)</view>
					<view class="balance_price">{{mayMoney}}</view>
				</view>
				<view class="part1_btn">
					<view class="btn_left" @click="tuiBtn()">退保证金</view>
					<view class="btn_right" @click="openPay()">缴纳保证金</view>
				</view>
			</view> -->
		</view>
		<view class="margin padding" style="background: #fff; border-radius: 16rpx;">
			<view class="acount_type">支付方式</view>
			<view style="margin-top: 30rpx;">
				<view class="flex align-center justify-between padding margin-bottom-sm" v-for="(item,index) in payList"
					style="border: 1rpx solid #f2f2f2; border-radius: 16rpx;"
					:key='index'>
					<image v-if="globalImages" :src="globalImages + item.image" style="width: 56rpx;height: 56rpx;" mode=""></image>
					<view class="flex-sub text-xl margin-left">{{item.name}}</view>
					<radio-group name="openWay" style="margin-left: 20upx;" @change='selectWay(item)'>
						<label class="tui-radio">
							<radio class="red" :checked="openWay === item.id ? true : false" />
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="margin padding" style="background: #fff; border-radius: 16rpx;">
			<view class="acount_type">保证及说明</view>
			<view class="acount_box flex" style="margin-top: 30rpx;" v-for="(item,index) in list" :key="item.id">
				<view>
					<image v-if="globalImages" :src="globalImages + item.imgurl" style="width: 56rpx;height: 56rpx;" mode=""></image>
				</view>
				<view style="margin-left: 20rpx;">
					<view class="name">{{item.name}}</view>
					<view class="tit">{{item.tit}}</view>
				</view>
			</view>
			<view class="acount_box flex padding" style="margin-top: 30rpx;border-radius: 16rpx; background: #fcf6ec;">
				<view>
					<image v-if="globalImages" :src="globalImages + 'imgs/exclamation.png'" style="width: 36rpx;height: 36rpx;" mode=""></image>
				</view>
				<view style="margin-left: 20rpx;">
					保证金仅用于保障服务质量，无违规行为可全额退还。
				</view>
			</view>
		</view>
		<view class="margin padding" style="background: #fff; border-radius: 16rpx;">
			<view class="acount_type">常见问题</view>
			<view class="u-page__item" style="margin-top: 20rpx;">
				<u-collapse
						accordion
				>
					<u-collapse-item
							title="为什么要缴纳保证金？"
					>
						<text class="u-collapse-content">缴纳保证金主要是为了 保障平台、乘客和司机的多方利益。通过保证金，平台可以有效约束司机行为，防止违规操作（如拒单、绕路等），同时为乘客提供更安全的服务保障。</text>
					</u-collapse-item>
					<u-collapse-item
							title="保证金可以退还吗？"
					>
						<text class="u-collapse-content">可以，停止接单30天后可申请退还保证金，审核通过后3个工作日内到账。</text>
					</u-collapse-item>
					<u-collapse-item
							title="退款需要多长时间？"
					>
						<text class="u-collapse-content">1-3个工作日</text>
					</u-collapse-item>
					<u-collapse-item
							title="什么情况下会扣除保证金？"
					>
						<text class="u-collapse-content">司机存在违规情况，例如：无正当理由拒绝接单、故意绕路增加乘客费用、故意绕路增加乘客费用、无故取消已接订单等。</text>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<view class="margin padding" style="background: #fff; border-radius: 16rpx;">
			<view class="flex" style="justify-content: space-between;">
				<view class="acount_type">交易记录</view>
				<view style="font-size: 26rpx; color: #999;" @click="goDet">查看全部</view>
			</view>
			<view style="margin-top: 30rpx;">
				<view class="content" v-if="list2.length" >
					<view class="list_box" v-for="(item,index) in list2" :key="index">
						<view class="list_left" style="padding: 30rpx 0;" :class="{ 'border-bottom': index !== list2.length - 1 }">
							<view class="name">{{item.title}}</view>
							<view class="flex justify-between align-center">
								<view style="color: red;">{{item.type==1?'+':'-'}} {{item.money}}</view>
								<view class="data">{{item.createTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="margin padding" style="background: #fff; border-radius: 16rpx;">
			<view class="acount_type">是否需要帮助？</view>
			
			<view class="flex justify-between align-center" style="padding: 30rpx; margin: 20rpx 0; background: #f9fafb; border-radius: 16rpx;">
				<view class="flex">
					<image v-if="globalImages" :src="globalImages + 'imgs/kefu.png'" style="width: 76rpx;height: 76rpx;" mode=""></image>
					<view style="margin-left: 20rpx;">
						<view class="name">在线客服</view>
						<view class="data">24小时服务</view>
					</view>
				</view>
				<view class="name">联系</view>
			</view>
			<view class="flex justify-between align-center" style="padding: 30rpx; margin: 20rpx 0; background: #f9fafb; border-radius: 16rpx;">
				<view class="flex">
					<image v-if="globalImages" :src="globalImages + 'imgs/xiaoxi.png'" style="width: 76rpx;height: 76rpx;" mode=""></image>
					<view style="margin-left: 20rpx;">
						<view class="name">意见反馈</view>
						<view class="data">帮助我们改进</view>
					</view>
				</view>
				<view class="name">反馈</view>
			</view>
	</view>
		<view class="margin padding" style="background: #fff; border-radius: 16rpx;">
			<view class="flex" style="margin-top: 30rpx;" >
				<view>
					<image v-if="globalImages" :src="globalImages + 'imgs/tishi.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
				</view>
				<view style="margin-left: 20rpx;">
					<view class="name">安全提示</view>
				</view>
			</view>
			<view class="flex" style="margin-top: 30rpx;" >
				<view>
					<image v-if="globalImages" :src="globalImages + 'imgs/answer.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
				</view>
				<view style="margin-left: 20rpx;">
					<view class="name">平台不会以任何理由要求您提供支付密码</view>
				</view>
			</view>
			<view class="flex" style="margin-top: 30rpx;" >
				<view>
					<image v-if="globalImages" :src="globalImages + 'imgs/answer.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
				</view>
				<view style="margin-left: 20rpx;">
					<view class="name">所有交易均通过加密通道完成</view>
				</view>
			</view>
			<view class="flex" style="margin-top: 30rpx;" >
				<view>
					<image v-if="globalImages" :src="globalImages + 'imgs/answer.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
				</view>
				<view style="margin-left: 20rpx;">
					<view class="name">保证金退还无需支付任何手续费</view>
				</view>
			</view>
		</view>
		<view class="sure" @click="jiaoBtn">立即缴纳</view>
		<!-- 支付方式 -->
		<!-- <u-popup v-model="shows" mode="center" width="640rpx" height="640rpx" border-radius="14" @close="closePopup()">
			<view style="width: 100%;height: 300upx;background: #FFFFFF;">
				<view class="receipt_code">
					<view class="code_title">请输入支付金额</view>
					<u-input v-model="earnestMoney" type="number" placeholder="请输入支付金额" :border="true" />
					<view class="margin-tb padding-lr radius bg-white" style="height: 220upx;">
						<view class="flex align-center justify-between padding-tb-sm" v-for="(item,index) in payList"
							:key='index'>
							<image :src="item.image" style="width: 80upx;height: 80upx;border-radius: 50upx;"></image>
							<view class="flex-sub text-xl text-bold margin-left">{{item.name}}</view>
							<radio-group name="openWay" style="margin-left: 20upx;" @change='selectWay(item)'>
								<label class="tui-radio">
									<radio class="red" :checked="openWay === item.id ? true : false" />
								</label>
							</radio-group>
						</view>
					</view>
					<view class="sure" @click="jiaoBtn">确定</view>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				shows: false,
				baozhengjin: 0,
				disabled: true,
				moneys: '',
				list: [{
					id: 1,
					name: '缴纳保证金',
					tit: '选择支付方式并完成支付，保证金即将冻结在您的账户中。',
					imgurl: 'imgs/one.png'
				}, {
					id: 2,
					name: '开始接单',
					tit: '缴纳保证金后，您将获得更多优质订单和平台权益。',
					imgurl: 'imgs/two.png'
				}, {
					id: 3,
					name: '申请退款',
					tit: '停止接单30天后可申请退还保证金，审核通过后3个工作日内到账。',
					imgurl: 'imgs/three.png'
				}],
				mayMoney: 0,
				openWay: 1,
				payList: [],
				earnestMoney: '',
				globalImages: '',
				moneyslists: 2,
				accordionVal:'1',
				list2: [],
				moneyslist: [
					{
						id: 0,
						value:500,
					},{
						id: 1,
						value:1000,
					},{
						id: 2,
						value:2000,
					},
				]
			}
		},
		onLoad() {
			this.taskData2()
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
			// uni.showToast({
			// 	title: '申请成功'
			// })
			//获取保证金
			this.$Request.getT('/app/common/type/261').then(res => {
				if (res.code === 0) {
					this.baozhengjin = res.data.value;

				}
			});

			// #ifdef MP-WEIXIN
			this.payList = [{
				id: 1,
				image: 'imgs/weixin.png',
				name: '微信'
			}]
			// #endif
			// #ifdef APP-PLUS
			this.payList = [{
					id: 1,
					image: 'imgs/weixin.png',
					name: '微信'
				},
				{
					id: 2,
					image: 'imgs/zhifubao.png',
					name: '支付宝'
				}
			]
			// #endif
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				//公众号是否自动登录  443
				this.$Request.get('/app/common/type/443').then(res => {
					if (res.data && res.data.value && res.data.value == '是') {
						this.payList = [{
							id: 1,
							image: '../static/weixin.png',
							name: '微信'
						}];
						this.openWay = 1;
					} else {
						this.payList = [{
							id: 2,
							image: '../static/zhifubao.png',
							name: '支付宝'
						}];
						this.openWay = 2;
					}
				})
			} else {
				this.payList = [{
					id: 2,
					image: '../static/zhifubao.png',
					name: '支付宝'
				}];
				this.openWay = 2;
			}
			// #endif

		},
		onShow() {
			this.taskData()

		},
		methods: {
			// 获取任务数据
			taskData2() {
				this.$Request.getT('/app/userMoney/selectUserMoneyDetails?classify=1&page=1&limit=15').then(res => {
					if(res.code==0){
						this.list2 = res.data.records
					}
				});
			},
			tabshj(value, index) {
				this.moneyslists = index
				this.earnestMoney = value
			},
			openPay() {
				let checkCertification = uni.getStorageSync('checkCertification')
				if (checkCertification == 2) {
					this.shows = true
				} else {
					this.$queue.showToast('请先实名认证后再来缴纳保证金！');
				}
			},
			// 跳转保证金明细
			goDet() {
				uni.navigateTo({
					url: '/my/wallet/bzjlist'
				})
			},
			selectWay: function(item) {
				this.openWay = item.id;
			},
			zhifu() {
				this.shows = true
			},
			// 关闭底部弹出层
			closePopup() {
				this.shows = false
			},

			// 获取任务数据
			taskData() {
				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 => {
						uni.hideLoading();
						if (res.code === 0 && res.data) {
							that.mayMoney = res.data.cashDeposit;
							if (!res.data.cashDeposit) {
								// this.earnestMoney=this.baozhengjin;
								// this.disabled=true;
							} else {
								// this.disabled=false;
							}

						} else if (res.code === -102) {
							this.$queue.showToast(res.msg);
							this.$queue.logout();
						} else {
							that.mayMoney = '0';
						}
					});
				}
			},

			// 缴纳
			jiaoBtn() {
				let that = this;
				if (!this.earnestMoney) {
					that.$queue.showToast('请输入支付金额');
					return;
				}
				uni.showLoading({
					title: '支付中'
				});
				// 微信支付
				if (that.openWay == 1) {
					// #ifdef APP-PLUS
					uni.hideLoading();
					// 微信APP支付 根据订单id获取支付信息
					this.$Request.postT('/app/wxPayRider/wxPayCashDeposit?money=' + that.earnestMoney + '&type=1').then(
						ret => {
							console.log(JSON.stringify(ret), '支付信息')
							if (ret.code == 0) {
								this.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
							} else {
								that.shows = false
								that.earnestMoney = ''
								that.$queue.showToast(ret.msg);
							}

						});

					// #endif

					// #ifdef H5
					let ua = navigator.userAgent.toLowerCase();
					console.log(ua.indexOf('micromessenger'))
					if (ua.indexOf('micromessenger') !== -1) {
						let openId = that.$queue.getData('openid') ? that.$queue.getData('openid') : '';
						that.$Request.postT('/app/wxPayRider/wxPayCashDeposit?money=' + that.earnestMoney + '&type=2')
							.then(res => {
								if (res.code == 0) {
									that.callPay(res);
								} else {
									that.shows = false
									that.earnestMoney = ''
									that.$queue.showToast(res.msg);
								}

							});
					}
					// #endif

					// #ifdef MP-WEIXIN
					that.$Request.postT('/app/wxPayRider/wxPayCashDeposit?money=' + that.earnestMoney + '&type=3').then(
						res => {
							console.log('res', res)
							if (res.code == 0) {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timestamp,
									nonceStr: res.data.noncestr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.sign,
									success: function(res) {
										that.shows = false
										this.earnestMoney = ''
										uni.hideLoading();


										that.taskData()
										that.$queue.showToast('支付成功');
										setTimeout(function() {
											uni.hideLoading();
										}, 1000);
									},
									fail: function(err) {
										that.shows = false
										this.earnestMoney = ''
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										that.$queue.showToast('支付失败');
									}
								});
							} else {
								that.shows = false
								that.earnestMoney = ''
								that.$queue.showToast(res.msg);
							}
						});
					// #endif
				} else if (this.openWay == 2) { //支付宝支付
					// #ifdef H5
					that.$Request.postT('/app/aliPay/aliPayRiderCashDeposit?cashDeposit=' + that.earnestMoney +
						'&classify=5').then(
						res => {
							if (res.code == 0) {
								const div = document.createElement('div')
								div.innerHTML = res.data //此处form就是后台返回接收到的数据
								document.body.appendChild(div)
								document.forms[0].submit()
							} else {
								uni.hideLoading();
								that.$queue.showToast(res.msg);
							}
						});
					// #endif
					// #ifdef APP
					this.$Request.postT('/app/aliPay/aliPayRiderCashDeposit?cashDeposit=' + that.earnestMoney +
						'&classify=4').then(
						ret => {
							console.log(JSON.stringify(ret), '支付信息')
							if (ret.code == 0) {
								this.isCheckPay(ret.code, 'alipay', ret.data);
							} else {
								that.shows = false
								that.earnestMoney = ''
								that.$queue.showToast(ret.msg);
							}
						});
					// #endif
				}
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				console.log(!response.package, '2222222')
				// if (!response.package) {
				// 	return;
				// }
				this.earnestMoney = ''
				this.shows = false
				console.log(response, '1111111111')
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.data.appid, //公众号名称，由商户传入
						"timeStamp": response.data.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.data.noncestr, //随机串
						"package": response.data.package,
						"signType": response.data.signType, //微信签名方式：
						"paySign": response.data.sign //微信签名
					},
					function(res) {
						console.log(res, '/*-/*-/*-')
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							that.taskData()
							uni.showLoading({
								title: '支付成功'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			isCheckPay(status, name, order) {
				this.earnestMoney = ''
				this.shows = false
				if (status == 0) {
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误',
						icon: 'none'
					});
				}
			},
			setPayment(name, order) {
				let that = this
				console.log(name, '*-*-*', order)
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						console.log(res)
						that.taskData()
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
					},
					fail: function(err) {
						console.log(err)
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 退保证金
			tuiBtn() {
				let that = this
				if (that.mayMoney == 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无保证金'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认退还保证金吗？如果存在未完成订单和未处理完成的投诉无法退还，需要先处理完毕后再申请',
					success: function(res) {
						if (res.confirm) {
							that.$Request.getT('/app/cash/cashDepositMoney').then(res => {
								console.log(res)
								if (res.code == 0) {
									uni.showToast({
										title: '申请成功'
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
								setTimeout(function() {
									that.taskData()
								}, 1000)
							});
						}
					},
				})

			}
		}
	}
</script>

<style>
	.border-bottom {
		border-bottom: 1rpx solid #e4e7ed; /* 下边框样式 */
	}
	.tab {
		padding: 10rpx 15rpx;
		border-radius: 12rpx;
		background: #f5f5f5;
	}
	.tabg {
		padding: 8rpx 15rpx;
		border-radius: 12rpx;
		background: #00c18a;
		color: #fff;
	}
	/* 支付金额弹框 */
	.receipt_code {
		width: 90%;
		margin: 0 auto;
	}

	.code_title {
		width: 100%;
		line-height: 100rpx;
		font-size: 31rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2rpx;
		margin-top: 21rpx;
		margin-bottom: 25rpx;
	}

	::v-deep .u-input--border {
		border: 1px solid #F2F2F2 !important;
		/* background: #F2F2F2 !important; */
		color: #999999 !important;
		font-weight: 500 !important;
		letter-spacing: 2rpx !important;
	}

	::v-deep .u-input__input {
		font-size: 30rpx;
		/* font-weight: bold; */
		flex: 1;
		color: #999999 !important;
		min-height: 85rpx !important;
		margin-top: 7rpx;
	}

	.sure {
		width: 90%;
		height: 80rpx;
		background: #00c18a;
		color: white;
		border-radius: 16rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
		margin-left: 5%;
		letter-spacing: 2rpx;
	}


	.content {
		width: 100%;
		position: relative;
	}

	.acont_part1 {
		width: 100%;

	}

	.balance {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		/* margin-top: 50rpx; */
		line-height: 55rpx;
	}

	.balance_name {
		font-size: 26rpx;
		letter-spacing: 2rpx;
	}

	.balance_price {
		margin-top: 10rpx;
		font-weight: bold;
		font-size: 60rpx;
	}

	.part1_btn {
		width: 90%;
		margin: 0 auto;
		margin-top: 80rpx;
		display: flex;
	}

	.btn_left {
		flex: 1;
		border: 1rpx solid #CCCCCC;
		text-align: center;
		line-height: 80rpx;
		color: black;
		font-size: 24rpx;
		border-radius: 12rpx;
		margin-right: 10rpx;
	}

	.btn_right {
		flex: 1;
		border: 1rpx solid #CCCCCC;
		text-align: center;
		line-height: 80rpx;
		background: #2474FF;
		color: white;
		font-size: 24rpx;
		border-radius: 12rpx;
		margin-left: 10rpx;
	}

	.acont_part2 {
		width: 90%;
		position: absolute;
		top: 500rpx;
		left: 37rpx;
	}

	.acount_type {
		font-size: 34rpx;
		/* font-weight: bold; */
		letter-spacing: 2rpx;
		margin-bottom: 10rpx;
		/* line-height: 75rpx; */
	}

	.name {
		font-size: 26rpx;
		/* font-weight: bold; */
		letter-spacing: 2rpx;
		margin-bottom: 10rpx;
	}

	.tit {
		color: #999;
		font-size: 25rpx;
	}
	
	
</style>