ydd_front/mer_uniapp/pages/users/user_rider/index.vue

<template>
	<view>
		<!-- 状态栏高度 -->
		<view :style="{ height: `${statusBarHeight}px`, backgroundColor: '#FF6702' }"></view>

		<!-- 导航栏 -->
		<view :style="{ height: `${navigationBarHeight}rpx`,lineHeight: `${navigationBarHeight}rpx`}" class="order-nav">
			<view class="back-button" @tap="handBack()"></view>
			成为骑手
		</view>
		<!-- <form @submit="formSubmit"> -->
		<view style="background-color: #fff;padding: 21rpx 0 86rpx 39rpx;">
			<view class="item-box">
				<view class="title" style="width: 147rpx;">姓名</view>
				<input class="uni-input" v-model="name" focus placeholder="请输入你的姓名" />
			</view>
			<view class="item-box">
				<view class="title" style="width: 147rpx;">手机号</view>
				<input class="uni-input" type='number' v-model="phone" focus placeholder="请输入你的手机号" />
			</view>
			<view class="item-box">
				<view class="title" style="width: 147rpx;">短信验证</view>
				<input class="uni-input" type='number' maxlength="6" v-model="bindingCaptcha" focus placeholder="请输入验证码" />
				<button class="code" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code">
					{{ text }}
				</button>
			</view>
			<view class="item-box" style="justify-content: space-between;">
				<view class="title">是否有过配送经验</view>
				<switch :value="isSwitch" :checked="isSwitch" @change="isSwitch = !isSwitch" color="#12CA00" style="transform:scale(0.9)">
					<text style="margin-top: 3rpx;">{{isSwitch ? '是' : '否'}}</text>
				</switch>
			</view>
			<view class="item-box" style="border: none;padding: 0;">
				<view class="title">配送职责（可多选）</view>
			</view>
			<view class="item-box" style="justify-content: space-between;">
				<view class="item-job" :class="checkbox1 ? 'job-border-color' : ''" @tap="checkbox1 = !checkbox1">
					<view v-if="checkbox1">
						<view class="sjx"></view>
						<text class="dg-icon"></text>
					</view>
					<text class="title">骑手</text>
					<view class="job-remark">负责校园外卖配送</view>
				</view>
				<view class="item-job" :class="checkbox2 ? 'job-border-color' : ''" @tap="checkbox2 = !checkbox2">
					<view v-if="checkbox2">
						<view class="sjx"></view>
						<text class="dg-icon"></text>
					</view>
					<text class="title">快递员</text>
					<view class="job-remark">负责快递代取/代寄</view>
				</view>
				<!-- <checkbox-group name="checkbox" style="margin-top: 38rpx;" @change="checkboxChange">
					<label style="margin-left: 96rpx">
						<checkbox class="mycheck" value="1" :checked="checkbox1" /> <text style="margin-left: 10rpx"> 骑手</text>
					</label>
					<label style="margin-left: 96rpx">
						<checkbox class="mycheck" value="2" :checked="checkbox2" /> <text style="margin-left: 10rpx"> 快递员</text>
					</label>
				</checkbox-group> -->

			</view>
			<view class="item no-border">
				<text class="acea-row row-middle required item-title">请上传身份证证件照正反照</text>
				<text v-if="merchantTypeInfo" class="item-title">( {{merchantTypeInfo}} )</text>
				<text class="item-desc">(图片最多可上传5张，格式支持JPG、PNG、JPEG)</text>
				<view class="upload">
					<view class='pictrue' v-for="(item,index) in pics" :key="index" :data-index="index" @click="getPhotoClickIdx">
						<image :src='item'></image>
						<text v-if="(isKey&&parseFloat(merchantData.auditStatus)>2) || (!isKey&&!merchantData.auditStatus)" class='iconfont icon-guanbi1'
						 @click.stop='DelPic(index)'></text>
					</view>
					<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic' v-if="pics.length < 5 && ((isKey&&parseFloat(merchantData.auditStatus)>2) || (!isKey&&!merchantData.auditStatus))">
						<text class='iconfont icon-icon25201'></text>
						<view>上传凭证</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 96rpx;margin: 96rpx 0 20rpx 0;">
			<label class="radio">
				<radio activeBackgroundColor="$bg-color-primary" value="isAgree" @tap="isAgree = !isAgree" :checked="isAgree" />我已阅读相关条款
			</label>
			<button class="settleAgree" @click="showProtocol = true">《入驻协议》</button>
		</view>
		<view style="padding: 0 96rpx;">
			<button class="sub" @tap="formSubmit">提交</button>
		</view>
		<!-- </form> -->

		<view class="settlementAgreement" v-if="showProtocol">
			<view class="setAgCount">
				<i class="icon iconfont icon-guanbi" @click="showProtocol = false"></i>
				<div class="title">骑手入驻协议</div>
				<view class="content">
					<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
				</view>
			</view>
		</view>

		<Verify @success="handlerOnVerSuccess" :captchaType="'clickWord'" :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
	</view>
</template>

<script>
	import {
		riderSettledCode,
		riderSettledApply
	} from '@/api/user.js'
	import {
		Debounce
	} from '@/utils/validate.js'
	import Verify from '../components/verifition/verify.vue';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	export default {
		components: {
			Verify
		},
		data() {
			return {
				showProtocol: false,
				protocol: '',
				tagStyle: {
					img: 'width:100%;display:block;'
				},
				pics: [],
				checkbox1: true,
				checkbox2: false,
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 112,
				isAgree: false,
				isSwitch: false,
				name: '',
				phone: '',
				bindingCaptcha: '',
				disabled: false,
				text: '发送验证码',
				nums: 60,
				timer: '',
				merchantTypeInfo: '',
				isKey: '',
				picsStr: ''
			}
		},
		methods: {
			onVerify() {
				let that = this;

				if (!that.name) return that.$util.Tips({
					title: '请填写姓名！'
				});
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
					title: '请输入正确的手机号码！'
				});
				if (!that.bindingCaptcha) return that.$util.Tips({
					title: '请填写验证码！'
				});
				if (!that.checkbox1 && !that.checkbox2) return that.$util.Tips({
					title: '请选择配送职责！'
				});
				if (!that.isAgree) return that.$util.Tips({
					title: '请勾选相关条款！'
				});
				if (that.pics.length == 0) return that.$util.Tips({
					title: "请上传资质图片"
				});
				if (that.pics) {
					that.picsStr = JSON.stringify(that.pics)
				}
				return true;
			},
			handBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//滑块验证成功后
			handlerOnVerSuccess(data) {
				this.$refs.verify.hide();
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				riderSettledCode({
					phone: +that.phone
				}).then(res => {
					that.$util.Tips({
						title: res.message
					});
					that.timer = setInterval(that.getTimes, 1000);
					that.disabled = true;
					uni.hideLoading();
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
					uni.hideLoading();
				});
			},
			/**
			 * 发送验证码
			 *
			 */
			code: Debounce(function() {
				this.nums = 60;
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
					title: '请输入正确的手机号码！'
				});

				this.$refs.verify.show();
			}),
			getTimes() {
				this.nums = this.nums - 1;
				this.text = "剩余 " + this.nums + "s";
				if (this.nums < 0) {
					clearInterval(this.timer);
				}
				this.text = "剩余 " + this.nums + "s";
				if (this.text < "剩余 " + 0 + "s") {
					this.disabled = false;
					this.text = "重新获取";
				}
			},
			checkboxChange(e) {
				const arr = e.detail.value
				this.checkbox1 = arr.includes('1')
				this.checkbox2 = arr.includes('2')
			},
			formSubmit: function() {
				if (this.onVerify()) {
					const params = {
						jobScope: `${this.checkbox1 ? 1 : 0},${this.checkbox2 ? 1 : 0}`, // 骑手  // 快递员
						isExped: this.isSwitch, // 是否有配送经验
						name: this.name, // 姓名
						phone: this.phone, // 电话
						captcha: +this.bindingCaptcha, // 验证码
						qualificationPicture: this.picsStr
					}
					console.log(params)
					riderSettledApply(params).then(res => {
						this.$util.Tips({
							title: '提交成功，等待审核'
						});
						this.handBack()
					}).catch(err => {
						return this.$util.Tips({
							title: err
						});
					});
				}
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					console.log(res)
					that.pics.push(res);
					that.$set(that, 'pics', that.pics);
				});
			},
			/**
			 * 删除图片
			 *
			 */
			DelPic: function(index) {
				let that = this,
					pic = this.pics[index];
				that.pics.splice(index, 1);
				that.$set(that, 'pics', that.pics);
			},
			// 图片预览
			// 获得相册 idx
			getPhotoClickIdx(e) {
				let _this = this;
				let idx = e.currentTarget.dataset.index;
				_this.imgPreview(_this.pics, idx);
			},
			// 图片预览
			imgPreview: function(list, idx) {
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容
						urls: list
					});
				}
			},
		},
		onLoad(options) {},
		mounted() {

		},
	}
</script>

<style scoped lang="scss">
	/* 可以使用 !important 来确保样式覆盖 */
	uni-checkbox .uni-checkbox-input {
		border-radius: 5rpx !important;
	}

	.item-box {
		display: flex;
		align-items: center;
		border-bottom: 3rpx solid #D7D8DD;
		margin-bottom: 21rpx;
		padding-bottom: 21rpx;
		margin-right: 38rpx;

		.title {
			font-weight: 600;
			font-size: 27rpx;
			color: #141414;
		}

		input {
			flex: 1;
		}
	}

	.item-job {
		border-radius: 8rpx;
		position: relative;
		padding: 15rpx 25rpx;
		text-align: center;
		border: 2rpx solid #D7D8DD;

		.sjx {
			position: absolute;
			width: 0;
			height: 0;
			top: 0;
			right: 0;
			border-top: 60rpx solid $bg-color-primary;
			border-left: 60rpx solid transparent;
		}

		.dg-icon {
			position: absolute;
			top: -5rpx;
			right: 5rpx;
			transform: rotate(14deg);

			::before {
				content: '\2713';
				color: #fff;
			}
		}
	}

	.job-remark {
		margin-top: 25rpx;
		font-weight: 400;
		font-size: 23rpx;
		color: #333;
	}

	.code {
		padding: 13rpx 23rpx;
		font-weight: 400;
		font-size: 21rpx;
		color: #FFFFFF;
		background-color: $bg-color-primary;
	}

	.code.on {
		color: #b9b9bc !important;
	}

	.sub {
		width: 100%;
		background-color: $bg-color-primary;
		font-weight: 600;
		font-size: 35rpx;
		color: #FFFFFF;
		padding: 25rpx 0;
	}

	.order-nav {
		font-weight: 500;
		font-size: 35rpx;
		color: #FFFFFF;
		position: relative;
		background-color: #FF6702;
		display: flex;
		align-items: center;
		justify-content: center;

		.back-button {
			position: absolute;
			left: 20rpx;
		}
	}

	.back-button {

		width: 30rpx;

		height: 30rpx;

		border-right: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;

		transform: rotate(135deg);

		margin-left: 10rpx;

		display: inline-block;

		position: relative;
	}


	.settlementAgreement {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}

	.settlementAgreement .setAgCount {
		background: #fff;
		width: 656rpx;
		height: 458px;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 20rpx 52rpx !important;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow-y: scroll;

		.content {
			height: 740rpx !important;
			overflow-y: scroll;

			/deep/ p {
				font-size: 13px;
				line-height: 22px;
			}

			/deep/ img {
				max-width: 100%;
			}
		}
	}

	.settlementAgreement .setAgCount .icon {
		font-size: 24rpx;
		color: #b4b1b4;
		position: absolute;
		top: 40rpx;
		right: 15rpx;

	}

	.settlementAgreement .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}

	.settlementAgreement .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}

	uni-checkbox-group,
	.settleAgree {
		display: inline-block;
		font-size: 24rpx;
	}

	.settleAgree {
		@include main_color(theme);
	}

	.acea-row,
	.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.upload {
		margin-top: 20rpx;
	}

	.pictrue {
		width: 130rpx;
		height: 130rpx;
		margin: 24rpx 22rpx 0 0;
		position: relative;
		font-size: 11px;
		color: #bbb;

		&:nth-child(4n) {
			margin-right: 0;
		}

		&:nth-last-child(1) {
			border: 0.5px solid #ddd;
			box-sizing: border-box;
		}

		uni-image,
		image {
			width: 100%;
			height: 100%;
			border-radius: 1px;

			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		}

		.icon-guanbi1 {
			font-size: 33rpx;
			position: absolute;
			top: -10px;
			right: -10px;
		}
	}
	
	.job-border-color {
		border-color: $bg-color-primary;
	}
</style>