|
@@ -1,93 +1,98 @@
|
|
|
<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>
|
|
|
- 成为骑手
|
|
|
+ <!-- #ifdef MP -->
|
|
|
+ <view class="cart_nav">
|
|
|
+ <nav-bar ref="navBarRef" navTitle="成为骑手" :isBackgroundColor="false">
|
|
|
+ </nav-bar>
|
|
|
</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>
|
|
|
+ <!-- #endif -->
|
|
|
+ <form @submit="formSubmit">
|
|
|
+ <view class="merchantsSettled">
|
|
|
+ <view class="merchantBg">
|
|
|
+ <image class="bag" src="/static/img/rider.jpg" alt="" srcset="" />
|
|
|
</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 class="list">
|
|
|
+ <view style="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 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">
|
|
|
+ <text class='iconfont icon-icon25201'></text>
|
|
|
+ <view>上传凭证</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</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 class='iconfont icon-guanbi1'
|
|
|
- @click.stop='DelPic(index)'></text>
|
|
|
+ <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 class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic' v-if="pics.length < 5">
|
|
|
- <text class='iconfont icon-icon25201'></text>
|
|
|
- <view>上传凭证</view>
|
|
|
+ <view style="padding: 0 96rpx;">
|
|
|
+ <button class="sub" @tap="formSubmit">提交</button>
|
|
|
</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> -->
|
|
|
+ </form>
|
|
|
|
|
|
<view class="settlementAgreement" v-if="showProtocol">
|
|
|
<view class="setAgCount">
|
|
@@ -112,11 +117,13 @@
|
|
|
Debounce
|
|
|
} from '@/utils/validate.js'
|
|
|
import Verify from '../components/verifition/verify.vue';
|
|
|
+ import navBar from '@/components/navBar';
|
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
|
|
let app = getApp();
|
|
|
export default {
|
|
|
components: {
|
|
|
- Verify
|
|
|
+ Verify,
|
|
|
+ navBar
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -322,10 +329,6 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- /* 可以使用 !important 来确保样式覆盖 */
|
|
|
- uni-checkbox .uni-checkbox-input {
|
|
|
- border-radius: 5rpx !important;
|
|
|
- }
|
|
|
|
|
|
.item-box {
|
|
|
display: flex;
|
|
@@ -397,6 +400,7 @@
|
|
|
|
|
|
.sub {
|
|
|
width: 100%;
|
|
|
+ margin: 25px auto 25px auto;
|
|
|
background-color: $bg-color-primary;
|
|
|
font-weight: 600;
|
|
|
font-size: 35rpx;
|
|
@@ -579,8 +583,47 @@
|
|
|
right: -10px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.job-border-color {
|
|
|
border-color: $bg-color-primary;
|
|
|
}
|
|
|
+
|
|
|
+ .merchantsSettled {
|
|
|
+ position: relative;
|
|
|
+ background-color: $bg-color-primary;
|
|
|
+ height: 140vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .merchantsSettled .merchantBg {
|
|
|
+ width: 100%;
|
|
|
+ height: 900rpx;
|
|
|
+
|
|
|
+ .bag {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .merchantBg-title {
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 60rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .merchantBg-join {
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .merchantsSettled .list {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 18%;
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ }
|
|
|
</style>
|