|
|
@@ -0,0 +1,255 @@
|
|
|
+<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>
|
ZZ