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 type='number' class="uni-input" v-model="phone" focus placeholder="请输入你的手机号" />
			</view>
			<view class="item-box">
				<view class="title" style="width: 147rpx;">短信验证</view>
				<input type='number' class="uni-input" 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" color="#12CA00" style="transform:scale(0.7)" />
			</view>
			<view class="item-box" style="border: none;padding: 0;">
				<view class="title">配送职责（可多选）</view>
			</view>
			<view class="item-box" style="border-bottom: none;">
				<checkbox-group name="checkbox" style="margin-top: 38rpx;">
					<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>
		<view style="padding: 0 96rpx;margin: 96rpx 0 20rpx 0;">
			<label class="radio">
				<radio value="isAgree" @tap="isAgree = !isAgree" :checked="isAgree" />我已阅读相关条款
			</label>
		</view>
		<view style="padding: 0 96rpx;">
			<button class="sub" @tap="formSubmit">提交</button>
		</view>
		<!-- </form> -->
	</view>
</template>

<script>
	import {
		registerVerify,
	} from '@/api/api.js';
	import {
		Debounce
	} from '@/utils/validate.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	export default {
		data() {
			return {
				checkbox1: true,
				checkbox2: false,
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 112,
				isAgree: false,
				isSwitch: false,
				name: '',
				phone: '',
				bindingCaptcha: '',
				disabled: false,
				text: '发送验证码',
				nums: 60,
				timer: '',
			}
		},
		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: '请勾选相关条款！'
				});
				return true;
			},
			handBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			/**
			 * 发送验证码
			 *
			 */
			code: Debounce(function() {
				this.nums = 60;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				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: '请输入正确的手机号码！'
				});
				// registerVerify().then(res => {
				// 	that.$util.Tips({
				// 		title: res.message
				// 	});
				// 	that.timer = setInterval(that.getTimes, 1000);
				// 	that.disabled = true;
				uni.hideLoading();
				// })
			}),
			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) {
				console.log(e)
			},
			formSubmit: function() {
				if (this.onVerify()) {
					const params = {
						checkbox1: this.checkbox1, // 骑手
						checkbox2: this.checkbox2, // 快递员
						isSwitch: this.isSwitch, // 是否有配送经验
						name: this.name, // 姓名
						phone: this.phone, // 电话
						bindingCaptcha: this.bindingCaptcha // 验证码
					}
					console.log(params)
				}
			}
		},
		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;
		}
	}

	.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: #FF6702;
		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;
	}
</style>