moxuan_takeaway_qishou_1/pages/riderMy/approve/approve.vue

<template>
	<view v-if="XCXIsSelect !='否'">
		<view class="padding">
			<view class=" padding-lr bg-white radius">
				<u-form :model="form" ref="uForm" label-position="top" :label-style='lableStyle'>
					<u-form-item label="真实姓名" :border-bottom='false'>
						<u-input :disabled="disabled" placeholder="请输入真实姓名" v-model="form.userName" />
					</u-form-item>
					<u-form-item label="证件号码" :border-bottom='false'>
						<u-input :disabled="disabled" placeholder="请输入身份证号码" v-model="form.identityCardNumber" />
					</u-form-item>
				</u-form>
			</view>
			<view class=" padding bg-white radius margin-top">
				<view class="margin-top"
					style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
					<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(1)"
						v-if="!form.identityCardFront">
						<image src="../../../static/my/photo.png" mode="widthFix" style="width: 73rpx;"></image>
						<view class="text-sm text-gray margin-top-sm">请拍摄身份证正面</view>
					</view>
					<image @click="disabled? '':addImages(1)" v-else :src="form.identityCardFront"
						style="width: 100%;height: 320rpx;"></image>
				</view>
				<!-- <view class="text-lg">上传身份证反面</view> -->
				<view class="margin-top"
					style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
					<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(2)"
						v-if="!form.identityCardVerso">
						<image src="../../../static/my/photo.png" mode="widthFix" style="width: 73rpx;"></image>
						<view class="text-sm text-gray margin-top-sm">请拍摄身份证反面</view>
					</view>
					<image @click="disabled? '':addImages(2)" v-else :src="form.identityCardVerso"
						style="width: 100%;height: 320rpx;"></image>
				</view>
				<view class="margin-top"
					style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
					<view style="text-align: center;margin: 80rpx auto 0;" @click="addImages(3)"
						v-if="!form.selfIdentityCard">
						<image src="../../../static/my/photo.png" mode="widthFix" style="width: 73rpx;"></image>
						<view class="text-sm text-gray margin-top-sm">请拍摄手持身份证正面</view>
					</view>
					<image @click="disabled? '':addImages(3)" v-else :src="form.selfIdentityCard"
						style="width: 100%;height: 320rpx;"></image>
				</view>
			</view>
			<view class="padding bg-white radius margin-top">
				<view class="text-bold">缴纳保证金</view>
				<view class="flex justify-between margin-top-sm">
					<view class="text-gray">满足订单量及好评率即可申请退还保证金</view>
					<view class="text-bold" style="color: #FF6A04;">¥{{money}}</view>
				</view>
			</view>
			<view class="padding margin-top footer text-xxl">
				<text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'">同意并接受</text>
				<!-- 协议地址 -->
				<navigator url="/pages/riderMy/paotuixieyi" open-type="navigate">《跑腿代购用户协议》</navigator>
			</view>
			<view style="height: 120rpx;"></view>
		</view>
		<view class="bg-white flex justify-between align-center padding-lr"
			style="position: fixed;bottom: 0;width: 100%;height: 120rpx;">
			<view class="">
				<text class="text-lg text-bold text-black">支付：</text>
				<text class="text-red">¥{{money}}</text>
			</view>
			<view>
				<u-button v-if="!disabled" @click="submit" class="" :custom-style="customStyle" shape="circle"
					:hair-line="false">提交认证</u-button>
			</view>
		</view>

		<u-popup v-model="showpay" mode="bottom" close-icon="close-circle" close-icon-pos="top-right"
			close-icon-color="#8f9298" close-icon-size="50">
			<view class="popup_pay">
				<view class="bg margin-top padding-lr radius">
					<view style="padding: 0 20upx;margin-top: 36rpx;">
						<view
							style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
							v-for="(item,index) in openLists" :key='index'>
							<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
							</image>
							<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
								{{item.name}}
							</view>
							<radio-group name="openWay" style="margin-left: 45rpx;" @tap='selectWay(item)'>
								<label class="tui-radio">
									<radio color="#FF7F00" :checked="openWay == item.id ? true : false" />
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="pay_btns" @click="pay()">确认支付</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import configdata from '@/common/config.js';
	import configurl from '../../../common/config.js'
	export default {
		data() {
			return {
				form: {
					userName: '',
					// phone: '',
					identityCardNumber: '',
					identityCardFront: '',
					identityCardVerso: '',
					selfIdentityCard: '',
					cashDeposit: ''
				},
				disabled: false,
				lableStyle: {
					color: '#000',
					fontSize: '36upx',
					fontWeight: 700
				},
				customStyle: {
					backgroundColor: '#FF6A04',
					color: '#FFFFFF',
					border: 0,
					width: '200rpx'
				},
				btnStyle: {
					backgroundColor: '#FF6A04',
					color: '#FFFFFF',
				},
				money: 0,
				showAgree: false, //协议是否选择
				sessionkey: '',

				showpay: false,
				openWay: 1,
				openLists: [],
				indentNumber: '',
				XCXIsSelect:'否'
			}
		},
		onLoad() {
			this.XCXIsSelect = this.$queue.getData('XCXIsSelect');
			if(this.XCXIsSelect =='否'){
				uni.setNavigationBarTitle({
				    title: '隐私政策'
				});
			}else{
				uni.setNavigationBarTitle({
				    title: '实名认证'
				});
			}
			// #ifdef MP-WEIXIN
			this.openLists = [{
				id: 1,
				image: '../../../static/my/weixin.png',
				name: '微信'
			}]
			this.openWay = 1
			// #endif
			// #ifdef H5
			this.openLists = [
				 {
				 	id: 1,
				 	image: '../../../static/my/weixin.png',
				 	name: '微信'
			     },
				{
					id: 2,
					image: '../../../static/my/zhifubao.png',
					name: '支付宝'
				}
				
			]
			this.openWay = 1
			// #endif
			// #ifdef APP-PLUS
			this.openLists = [{
					id: 1,
					image: '../../../static/my/weixin.png',
					name: '微信'
				},
				{
					id: 2,
					image: '../../../static/my/zhifubao.png',
					name: '支付宝'
				}
			]
			// #endif

			this.getRZmoney()
			this.sessionkey = this.$queue.getData("sessionkey");
		},
		methods: {
			isShowAgree() {
				this.showAgree = !this.showAgree
			},
			getRZmoney() {
				this.$Request.get("/app/common/type/273").then(res => {
					if (res.code == 0) {
						this.money = res.data.value
						this.form.cashDeposit = res.data.value
					}
				});
			},
			selectWay: function(item) {
				this.openWay = item.id;
			},
			submit() {
				let that = this
				console.log(that.form)
				if (!that.form.userName) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!that.form.identityCardNumber) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!that.form.identityCardFront) {
					uni.showToast({
						title: '请上传身份证正面',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!that.form.identityCardVerso) {
					uni.showToast({
						title: '请上传身份证反面',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!that.form.selfIdentityCard) {
					uni.showToast({
						title: '请上传手持身份证正面',
						icon: 'none',
						duration: 1000
					})
					return;
				}

				if (!this.showAgree) {
					uni.showToast({
						title: '请勾选跑腿代购用户协议',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				// #ifdef MP-WEIXIN
				that.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/3", that.form).then(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) {
								console.log('实名'+res)
								uni.hideLoading();
								uni.showToast({
									title: '实名认证提交成功',
									icon: 'none'
								});
								setTimeout(function() {
									uni.navigateBack(1)
								}, 1000)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.hideLoading();
								that.$queue.showToast('支付失败');
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				// #endif
				// #ifdef H5
				this.showpay = true

				// #endif
				// #ifdef APP-PLUS
				this.showpay = true
				// #endif

			},
			getUserInfo() {
				this.$Request.get("/app/userinfo/findUserInfoById").then(res => {
					if (res.code == 0) {
						this.form.name = res.data.name ? res.data.name : ''
						this.form.idNumber = res.data.idNumber ? res.data.idNumber : ''
						this.form.front = res.data.front ? res.data.front : ''
						this.form.back = res.data.back ? res.data.back : ''

						if (res.data.status == 1) {
							this.disabled = true
						}
						if (res.data.status == 2) {
							this.form.remek = res.data.remek ? res.data.remek : ''
						}
					}
				});
			},
			addImages(e) {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < 1; i++) {
							let token = uni.getStorageSync('token');
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								url: configurl.APIHOST2 + '/alioss/upload', //真实的接口地址
								// url: 'https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								header: {
									token: token
								},
								name: 'file',
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									if (e == 1) {
										that.form.identityCardFront = JSON.parse(uploadFileRes
											.data).data
									} else if (e == 2) {
										that.form.identityCardVerso = JSON.parse(uploadFileRes
											.data).data
									} else if (e == 3) {
										that.form.selfIdentityCard = JSON.parse(uploadFileRes.data)
											.data
									}
									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			pay() {
				if (this.openWay == 0) {
					this.$queue.showToast('请选择支付方式!')
					return;
				}
				if (this.openWay == 1) {
					// #ifdef H5
					 this.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/2", this.form).then(
					 	res => {
					 		console.log(res)
					 		if (res.code == 0) {
					 			console.log()
					 			this.callPay(res.data);
					 		} else {
					 			uni.showToast({
					 				icon: 'none',
					 				title: '支付失败!'
					 			});
					 		}
					 	});
					// #endif

					// #ifdef APP-PLUS
					// 微信APP支付 根据订单id获取支付信息
					this.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/1", this.form).then(
						res => {
							console.log(JSON.stringify(res), '微信支付信息')
							this.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
						});
					// #endif

				} else if (this.openWay == 2) { //支付宝支付
					// #ifdef H5
					this.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/5", this.form).then(
						res => {
							console.log(res)
							if (res.code == 0) {
								console.log()
								const div = document.createElement('div')
								div.innerHTML = res.data //此处form就是后台返回接收到的数据
								document.body.appendChild(div)
								document.forms[0].submit()
							} else {
								uni.showToast({
									icon: 'none',
									title: '支付失败!'
								});
							}
						});
					// #endif
					console.log('支付宝')
					// APP支付宝支付
					// #ifdef APP
					this.$Request.postJson("/app/wxPayErrRider/wxPayJsApiRiderCertification/4", this.form).then(
						res => {
							console.log(JSON.stringify(res), '支付宝支付信息')
							this.setPayment('alipay', res.data);
						});
					// #endif
				}
			},
			callPay: function(response) {
				console.log(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;
				// if (!response.package) {
				// 	return;
				// }
				console.log(response, 111111)
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						console.log(res, '/*-/*-/*-')
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: '支付成功',
							});
							setTimeout(function() {
								uni.hideLoading();
								uni.navigateBack()
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			isCheckPay(status, name, order) {
				if (status == 0) {
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误',
						icon: 'none'
					});
				}
			},
			setPayment(name, order) {
				console.log(name, '*-*-*', order)
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						console.log(res)
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
						setTimeout(function() {
							uni.navigateBack()
						}, 1000);
					},
					fail: function(err) {
						console.log(err)
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
		}
	}
</script>

<style>
	.footer {
		/* // padding-left: 140upx; */
		/* justify-content: center; */
		margin-top: 32upx;
		font-size: 24upx;
		color: #666666;
		display: flex;
		text-align: center;
		align-items: center;
	}

	/* 支付弹框 */
	.popup_pay {
		width: 100%;
	}

	.pay_btns {
		width: 90%;
		margin: 0 auto 40rpx;
		text-align: center;
		background: #FF7F00;
		height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		line-height: 80rpx;
		margin-top: 20rpx;
	}
</style>