<template> <view> <!-- #ifdef MP --> <view class="cart_nav"> <nav-bar ref="navBarRef" navTitle="成为骑手" :isBackgroundColor="false"> </nav-bar> </view> <!-- #endif --> <view v-if="!successful"> <form @submit="formSubmit"> <view class="merchantsSettled"> <view class="merchantBg"> <image class="bag" src="http://39.105.58.247:20800/crmebimage/public/store/2025/05/20/bef91c7e7e5c45438256b775a555abd77fj8l44tr6.png" alt="" srcset="" /> </view> <view class="list"> <view style="padding: 21rpx 0 86rpx 39rpx;"> <view class="item-box"> <view class="title required" style="width: 147rpx;">姓名</view> <input class="uni-input" v-model="name" focus placeholder="请输入你的姓名" /> </view> <view class="item-box"> <view class="title required" style="width: 147rpx;">手机号</view> <input class="uni-input" type='number' v-model="phone" focus placeholder="请输入你的手机号" /> </view> <view class="item-box"> <view class="title required" 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 required">是否有过配送经验</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 required">配送职责(可多选)</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> <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> </view> </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> <view class='loadingicon acea-row row-center-wrapper' v-if="loading"> <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text> </view> </view> <view class="settledSuccessMain" v-else> <view class="settledSuccessful"> <image class="image" src="../static/images/settledSuccessful.svg" alt="" /> <view class="title">恭喜,您的资料提交成功!</view> <view class="info">预计15个工作日内审核完毕,平台客服会及时与您联系!</view> <view class="goHome" hover-class="none" @click="goHome"> 返回首页 </view> </view> </view> <Verify @success="handlerOnVerSuccess" :captchaType="'clickWord'" :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify> </view> </template> <script> import { mapGetters } from "vuex"; import { riderSettledCode, riderSettledApply } from '@/api/user.js' import { 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 { computed: { ...mapGetters(['isLogin', 'uid']) }, components: { Verify, navBar }, data() { return { successful: false, showProtocol: false, loading: false, protocol: '', tagStyle: { img: 'width:100%;display:block;' }, userInfo: {}, merchantData: { name: "", realName: "", phone: "", captcha: '', categoryId: 0, handlingFee: '', keywords: '', qualificationPicture: '', typeId: 0 }, pics: [], checkbox1: true, checkbox2: false, statusBarHeight: app.globalData.statusBarHeight, theme: app.globalData.theme, 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; }, getUserInfo() { this.$store.dispatch('USERINFO').then(res => { this.userInfo = res; console.log(this.userInfo) if(this.userInfo.isRider){ this.$util.navigateTo("/pages/rider_index/index"); }else{ this.$util.Tips({ title: "您未注册,请先注册成为骑手" }); } }); }, // 首页 goHome() { uni.switchTab({ url: '/pages/index/index' }); }, 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(data => { this.loading = true; this.timer = setTimeout(() => { this.successful = true; }, 1000) }).catch(res => { this.$util.Tips({ title: res }); }) // 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) { // this.getUserInfo(); }, mounted() { this.merchantBg = `../static/images/${this.theme}.jpg`; }, } </script> <style scoped lang="scss"> .required::before { content: '* '; color: red; margin-right: 4rpx; } .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: 28rpx; color: #666666; } 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%; // margin: 25px auto 25px auto; // background-color: $bg-color-primary; // font-weight: 600; // font-size: 35rpx; // color: #FFFFFF; // padding: 25rpx 0; width: 588rpx; margin: 25px auto 25px auto; height: 86rpx; border-radius: 25px; text-align: center; line-height: 86rpx; font-size: 15px; color: #FFFFFF; background-color: $bg-color-primary; //@include main_bg_color(theme); } .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; } .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); } .loadingicon { height: 100vh; overflow: hidden; position: absolute; top: 0; left: 0; } .settledSuccessMain { height: 100vh; display: flex; flex-direction: column; background: #fff; } .settledSuccessful { flex: 1; width: 100%; padding: 0 56px; height: auto; background: #fff; text-align: center; } .settledSuccessful .image { width: 189px; height: 157px; margin-top: 66px; } .settledSuccessful .title { color: #333333; font-size: 16px; font-weight: bold; margin-top: 35px; } .settledSuccessful .info { color: #A0A0A0; font-size: 13px; margin-top: 12px; } .settledSuccessful .goHome { margin: 60px auto 0; line-height: 43px; color: #282828; font-size: 15px; border: 1px solid #B4B4B4; border-radius: 60px; } </style>