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-item label="骑手所在站点" :border-bottom="false">
						<u-input v-model="form.qishouzhan" placeholder="请选择骑手所在站点" disabled @click="show = true" />
					</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>
		<!-- 站点分类列表 -->
		<u-select v-model="show" :list="zhandianList" valueName="id" labelName="stationName" @confirm="confirm"></u-select>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import configdata from '@/common/config.js'
import configurl from '../../../common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	data() {
		return {
			show: false,
			form: {
				qishouzhan: '', //骑手站点名
				riderStationId: '', //骑手站点id
				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: '否',
			zhandianList: [], //站点列表
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	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.getZhanList()
		this.getRZmoney()
		this.sessionkey = this.$queue.getData('sessionkey')
	},
	methods: {
		//选择站点分类
		confirm(e) {
			console.log(e)
			this.form.qishouzhan = e[0].label
			this.form.riderStationId = e[0].value
		},
		//站点下拉框
		getZhanList() {
			this.$Request.get('/admin/riderStation/stationList').then((res) => {
				console.log(res, '站点hhhh')
				if (res.code == 0) {
					this.zhandianList = res.data
				}
			})
		},
		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.qishouzhan) {
				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')

						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas'
						//原图的路径
						let imagePath = res.tempFiles[i].path
						//大小限制
						let limitSize = 1024 * 2
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						let that = this
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
							uni.showLoading({
								title: '上传中'
							})
							uni.uploadFile({
								url: configurl.APIHOST2 + '/alioss/upload',
								filePath: resPath,
								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()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		},
		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>