| | |
| | | <template> |
| | | <view class="register"> |
| | | <view class="registerForm"> |
| | | <u--form :rules="rules" :model="registerFormModel" ref="regesterFormRef"> |
| | | <u-form-item labelWidth="20%" label="选择身份" borderBottom ref="roleRef" required> |
| | | <u-radio-group v-model="radiovalue1" placement="row" @change="groupChange" size="30" shape="circle" iconSize="20"> |
| | | <u-radio |
| | | labelSize="14px" |
| | | <u--form :rules="rules" |
| | | :model="registerFormModel" |
| | | ref="regesterFormRef"> |
| | | <u-form-item labelWidth="22%" |
| | | label="选择身份" |
| | | borderBottom |
| | | ref="roleRef" |
| | | required> |
| | | <u-radio-group v-model="radiovalue1" |
| | | placement="row" |
| | | @change="groupChange" |
| | | size="30" |
| | | shape="circle" |
| | | iconSize="20"> |
| | | <u-radio labelSize="14px" |
| | | size="20px" |
| | | :customStyle="{ marginBottom: '8px' }" |
| | | v-for="(item, index) in radiolist1" |
| | | :key="index" |
| | | :label="item.name" |
| | | :name="item.name" |
| | | @change="radioChange" |
| | | ></u-radio> |
| | | @change="radioChange"></u-radio> |
| | | </u-radio-group> |
| | | </u-form-item> |
| | | <u-form-item prop="name" label="姓名" labelWidth="20%" borderBottom required> |
| | | <u--input v-model="registerFormModel.name" placeholder="请输入内容" clearable></u--input> |
| | | <u-form-item prop="name" |
| | | label="姓名" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | required> |
| | | <u--input v-model="registerFormModel.name" |
| | | placeholder="请输入内容" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="idCard" label="身份证" labelWidth="20%" borderBottom required> |
| | | <u--input v-model="registerFormModel.idCard" placeholder="请输入内容" clearable></u--input> |
| | | <u-form-item prop="idCard" |
| | | label="身份证" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | required> |
| | | <u--input v-model="registerFormModel.idCard" |
| | | placeholder="请输入内容" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="phone" label="手机号" labelWidth="20%" borderBottom required> |
| | | <u--input v-model="registerFormModel.phone" placeholder="请输入内容" clearable></u--input> |
| | | <u-form-item prop="phone" |
| | | label="手机号" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | required> |
| | | <u--input v-model="registerFormModel.phone" |
| | | placeholder="请输入内容" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="password" label="密码" labelWidth="20%" borderBottom required> |
| | | <u--input v-model="registerFormModel.password" placeholder="请输入内容" password clearable></u--input> |
| | | <u-form-item prop="password" |
| | | label="密码" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | required> |
| | | <u--input v-model="registerFormModel.password" |
| | | placeholder="请输入内容" |
| | | password |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="confirmPassword" label="确认密码" labelWidth="20%" borderBottom required> |
| | | <u--input v-model="registerFormModel.confirmPassword" placeholder="请输入内容" password clearable @blur="jiaoYanPassword"></u--input> |
| | | <view class="intensity"> |
| | | <view class="psdText">密码强度</view> |
| | | <view |
| | | class="line" |
| | | :class="[level.includes('low') ? 'low' : '']"></view> |
| | | <view |
| | | class="line" |
| | | :class="[level.includes('middle') ? 'middle' : '']"></view> |
| | | <view |
| | | class="line" |
| | | :class="[level.includes('high') ? 'high' : '']"></view> |
| | | <div class="warningtext"> |
| | | 密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码 |
| | | </div> |
| | | </view> |
| | | <u-form-item prop="confirmPassword" |
| | | label="确认密码" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | required> |
| | | <u--input v-model="registerFormModel.confirmPassword" |
| | | placeholder="请输入内容" |
| | | password |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="carNo" label="车牌号" labelWidth="20%" borderBottom v-if="radiovalue1 == '司机'" required> |
| | | <u--input v-model="registerFormModel.carNo" placeholder="请输入内容" clearable></u--input> |
| | | <u-form-item prop="carNo" |
| | | label="车牌号" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required> |
| | | <u--input v-model="registerFormModel.carNo" |
| | | placeholder="请输入内容" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="carImg" label="车辆照片" labelWidth="20%" borderBottom v-if="radiovalue1 == '司机'" required> |
| | | <u-upload |
| | | :fileList="fileList1" |
| | | <u-form-item prop="truckLength" |
| | | label="车长" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required> |
| | | <u--input v-model="registerFormModel.truckLength" |
| | | @change="inputchange($event,1)" |
| | | placeholder="请输入内容" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="truckWidth" |
| | | label="车宽" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required> |
| | | <u--input v-model="registerFormModel.truckWidth" |
| | | placeholder="请输入内容" |
| | | @change="inputchange($event,2)" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="truckHeight" |
| | | label="车高" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required> |
| | | <u--input v-model="registerFormModel.truckHeight" |
| | | placeholder="请输入内容" |
| | | @change="inputchange($event,3)" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | <u-form-item prop="totalLoad" |
| | | label="车货总重" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required> |
| | | <u--input v-model="registerFormModel.totalLoad" |
| | | @change="inputchange($event,5)" |
| | | placeholder="请输入内容" |
| | | clearable></u--input><span style="position: absolute;right: 120rpx;line-height: 40px">吨</span> |
| | | </u-form-item> |
| | | <u-form-item prop="maximumPayload" |
| | | label="最大载重" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required> |
| | | <u--input v-model="registerFormModel.maximumPayload" |
| | | @change="inputchange($event,4)" |
| | | placeholder="请输入内容" |
| | | clearable></u--input><span style="position: absolute;right: 120rpx;line-height: 40px">吨</span> |
| | | </u-form-item> |
| | | |
| | | <u-form-item prop="axleNum" |
| | | label="车轴数" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required> |
| | | <u--input v-model="registerFormModel.axleNum" |
| | | @change="inputchange($event,6)" |
| | | placeholder="请输入内容" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | |
| | | <u-form-item prop="certification" |
| | | label="从业资格证号" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required> |
| | | <u--input v-model="registerFormModel.certification" |
| | | placeholder="请输入内容" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | |
| | | <u-form-item prop="freightCompany" |
| | | label="承运单位" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | > |
| | | <u--input v-model="registerFormModel.freightCompany" |
| | | placeholder="请输入内容" |
| | | clearable></u--input> |
| | | </u-form-item> |
| | | |
| | | <u-form-item prop="carImg" |
| | | label="车辆照片" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required |
| | | @click="beforeRead"> |
| | | <u-upload :fileList="fileList1" |
| | | deletable |
| | | @afterRead="afterRead" |
| | | @delete="deletePic" |
| | |
| | | :maxCount="1" |
| | | width="250" |
| | | height="150" |
| | | :previewFullImage="true" |
| | | > |
| | | <!-- <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" |
| | | mode="widthFix" style="width: 250px;height: 150px;"></image> --> |
| | | :previewFullImage="true"> |
| | | </u-upload> |
| | | </u-form-item> |
| | | <u-form-item prop="drivingImg" label="行驶证" labelWidth="20%" borderBottom v-if="radiovalue1 == '司机'" required> |
| | | <u-upload |
| | | :fileList="fileList2" |
| | | <u-form-item prop="drivingImg" |
| | | label="行驶证" |
| | | labelWidth="22%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required |
| | | @click="beforeRead"> |
| | | <u-upload :fileList="fileList2" |
| | | deletable |
| | | @afterRead="afterRead" |
| | | @delete="deletePic" |
| | |
| | | :maxCount="1" |
| | | width="250" |
| | | height="150" |
| | | :previewFullImage="true" |
| | | > |
| | | <!-- <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" |
| | | mode="widthFix" style="width: 250px;height: 150px;"></image> --> |
| | | :previewFullImage="true"> |
| | | </u-upload> |
| | | </u-form-item> |
| | | <u-form-item label="推荐人账号" labelWidth="25%" borderBottom> |
| | | <u--input v-model="registerFormModel.tuiJianMa" placeholder="请输入内容" clearable></u--input> |
| | | <u-form-item prop="roadTransportImg" |
| | | label="道路运输证" |
| | | labelWidth="24%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required |
| | | @click="beforeRead"> |
| | | <u-upload :fileList="fileList3" |
| | | deletable |
| | | @afterRead="afterRead" |
| | | @delete="deletePic" |
| | | name="3" |
| | | multiple |
| | | :maxCount="1" |
| | | width="250" |
| | | height="150" |
| | | :previewFullImage="true"> |
| | | </u-upload> |
| | | </u-form-item> |
| | | <u-form-item prop="tradeQualificationImg" |
| | | label="从业资格证" |
| | | labelWidth="24%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | required |
| | | @click="beforeRead"> |
| | | <u-upload :fileList="fileList4" |
| | | deletable |
| | | @afterRead="afterRead" |
| | | @delete="deletePic" |
| | | name="4" |
| | | multiple |
| | | :maxCount="1" |
| | | width="250" |
| | | height="150" |
| | | :previewFullImage="true"> |
| | | </u-upload> |
| | | </u-form-item> |
| | | <u-form-item prop="inventoryImg" |
| | | label="环保清单" |
| | | labelWidth="24%" |
| | | borderBottom |
| | | v-if="radiovalue1 == '司机'" |
| | | @click="beforeRead"> |
| | | <u-upload :fileList="fileList5" |
| | | deletable |
| | | @afterRead="afterRead" |
| | | @delete="deletePic" |
| | | name="5" |
| | | multiple |
| | | :maxCount="3" |
| | | width="250" |
| | | height="150" |
| | | :previewFullImage="true"> |
| | | </u-upload> |
| | | </u-form-item> |
| | | <u-form-item label="是否非煤车辆" |
| | | v-if="radiovalue1 == '司机'" |
| | | labelWidth="30%" |
| | | borderBottom |
| | | prop="isNonCoal"> |
| | | <u-checkbox-group v-model="registerFormModel.isNonCoal" |
| | | placement="row" |
| | | size="40" |
| | | @change="isNonCoalChange"> |
| | | <u-checkbox name="是" |
| | | label-size="30"> |
| | | </u-checkbox> |
| | | </u-checkbox-group> |
| | | </u-form-item> |
| | | <u-form-item labelWidth="22%" |
| | | v-if="radiovalue1 == '司机'" |
| | | label="车辆类型" |
| | | borderBottom |
| | | prop="countryNumberCar"> |
| | | <u-radio-group v-model="registerFormModel.countryNumberCar" |
| | | placement="row" |
| | | size="30" |
| | | shape="circle" |
| | | iconSize="20"> |
| | | <u-radio labelSize="14px" |
| | | size="20px" |
| | | v-for="(item, index) in countryNumberCarList" |
| | | :key="index" |
| | | :label="item.label" |
| | | :name="item.name"></u-radio> |
| | | </u-radio-group> |
| | | </u-form-item> |
| | | </u--form> |
| | | </view> |
| | | <view class="roleModel"> |
| | | <u-modal :show="editRoleModelShow" :title="title" :content="content" :showCancelButton="true" @confirm="roleConfirm" @cancel="roleCancel"></u-modal> |
| | | <u-modal :show="editRoleModelShow" |
| | | :title="title" |
| | | :content="content" |
| | | :showCancelButton="true" |
| | | @confirm="roleConfirm" |
| | | @cancel="roleCancel"></u-modal> |
| | | </view> |
| | | <view class="registerBtn"><u-button text="注册" type="primary" @click="registerClick"></u-button></view> |
| | | <!-- 图片预览弹出框 --> |
| | | <!-- <view class="previewImage-container"> |
| | | <u-popup :show="previewImageShow" mode="center" @close="previewImageClose" @open="previewImageOpen"> |
| | | <u--image :src="previewImageSrc != null ? BaseUrl + previewImageSrc : ''" width="400px" height="400px"></u--image> |
| | | </u-popup> |
| | | </view> --> |
| | | <view class="registerBtn"><u-button text="注册" |
| | | type="primary" |
| | | @click="registerClick" |
| | | :loading="registerClickloading"></u-button></view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { apiRegister } from '@/api/publicInterface.js'; |
| | | import { BaseUrl } from '@/api/publicInterface.js'; |
| | | export default { |
| | | // onLoad: function() { |
| | | // // 查看是否授权 |
| | | // wx.getSetting({ |
| | | // success (res){ |
| | | // if (res.authSetting['scope.userInfo']) { |
| | | // // 已经授权,可以直接调用 getUserInfo 获取头像昵称 |
| | | // wx.getUserInfo({ |
| | | // success: function(res) { |
| | | // console.log('res.userInfo',res.userInfo) |
| | | // } |
| | | // }) |
| | | // } |
| | | // } |
| | | // }) |
| | | // }, |
| | | // 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 |
| | | onReady() { |
| | | // this.$refs.regesterFormRef.setRules(this.rules); |
| | | // this.$refs.regesterFormRef.validate().then(res => {}).catch(err => { |
| | | // console.log(err); |
| | | // }) |
| | | }, |
| | | onLoad(params) { |
| | | if (params) { |
| | | this.registerFormModel.openId = params.code; |
| | | console.log('页面加载', this.registerFormModel.openId); |
| | | import { apiRegister } from '@/api/publicInterface.js'; |
| | | import { BaseUrl } from '@/api/publicInterface.js'; |
| | | import { mapMutations } from 'vuex'; |
| | | export default { |
| | | // 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 |
| | | onReady() { |
| | | this.$refs.regesterFormRef.setRules(this.rules); |
| | | }, |
| | | onLoad(params) { |
| | | if (params) { |
| | | this.registerFormModel.openId = params.code; |
| | | console.log('页面加载', this.registerFormModel.openId); |
| | | } |
| | | }, |
| | | data() { |
| | | const validatePass = (rule, value, callback) => { |
| | | if (this.registerFormModel.confirmPassword !== "") { |
| | | if (value !== this.registerFormModel.password) { |
| | | callback(new Error("两次输入密码不一致!")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | //验证最大总重不能超过车货载重 |
| | | const maxVstotalFun1 = (rule, value, callback) =>{ |
| | | console.log('触发',this.registerFormModel.maximumPayload ,this.registerFormModel.totalLoad,this.registerFormModel.maximumPayload <= this.registerFormModel.totalLoad) |
| | | if(!value || !this.registerFormModel.maximumPayload)callback() |
| | | if(Number(value) >= Number(this.registerFormModel.maximumPayload)){ |
| | | callback() |
| | | }else{ |
| | | callback(new Error("车货总重不能小于最大载重")) |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | registerFormModel: { |
| | | phone: '', |
| | | password: '', |
| | | name: '', |
| | | username: '', |
| | | openId: '', |
| | | type: 2, |
| | | idCard: '', |
| | | carNo: '', |
| | | carImg: '', |
| | | drivingImg: '', |
| | | tuiJianMa: '', |
| | | confirmPassword: '' |
| | | }, |
| | | fileList1: [], |
| | | fileList2: [], |
| | | rules: { |
| | | name: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请填写姓名', |
| | | trigger: ['blur', 'change'] |
| | | |
| | | } |
| | | |
| | | const maxVstotalFun2 = (rule, value, callback) =>{ |
| | | console.log('触发',this.registerFormModel.maximumPayload ,this.registerFormModel.totalLoad,this.registerFormModel.maximumPayload <= this.registerFormModel.totalLoad) |
| | | if(!value || !this.registerFormModel.totalLoad)callback() |
| | | if(Number(value) <= Number(this.registerFormModel.totalLoad)){ |
| | | callback() |
| | | }else{ |
| | | callback(new Error("最大载重不能超过车货总重")) |
| | | } |
| | | |
| | | } |
| | | const checkPassword = (rule, value, callback) => { |
| | | // let roles = this.$store.getters.roles;//当前用户角色id |
| | | // let passL = 8; |
| | | // if (roles.concat(1)){ |
| | | // passL = 10 |
| | | // } |
| | | let passL = 8; |
| | | this.level = [] |
| | | if(!value) { |
| | | return callback('密码不能为空') |
| | | } |
| | | if(value.length < passL) { |
| | | return callback(`密码不能少于${passL}位`) |
| | | } |
| | | if(value.length > 16) { |
| | | return callback('密码不能大于16位') |
| | | } |
| | | //校验是数字 |
| | | const regex1 = /^\d+$/ |
| | | // 校验字母 |
| | | const regex2 = /^[A-Za-z]+$/ |
| | | // 校验符号 |
| | | const regex3 = |
| | | /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]+$/; |
| | | if(regex1.test(value)) { |
| | | this.level.push('low') |
| | | return callback('密码强度过低') |
| | | }else if(regex2.test(value)) { |
| | | this.level.push('low') |
| | | return callback('密码强度过低') |
| | | }else if(regex3.test(value)) { |
| | | this.level.push('low') |
| | | return callback('密码强度过低') |
| | | }else if(/^[A-Za-z\d]+$/.test(value)) { |
| | | this.level.push('low') |
| | | this.level.push('middle') |
| | | return callback('密码强度过低') |
| | | }else if( |
| | | /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、\d]+$/.test( |
| | | value |
| | | ) |
| | | ) { |
| | | this.level.push('low') |
| | | this.level.push('middle') |
| | | return callback('密码强度过低') |
| | | }else if( |
| | | /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、A-Za-z]+$/.test( |
| | | value |
| | | ) |
| | | ) { |
| | | this.level.push('low') |
| | | this.level.push('middle') |
| | | return callback('密码强度过低') |
| | | } else if ( |
| | | /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、A-Za-z\d]+$/.test( |
| | | value |
| | | ) |
| | | ) { |
| | | this.level.push('low') |
| | | this.level.push('middle') |
| | | this.level.push('high') |
| | | } |
| | | return callback() |
| | | }; |
| | | return { |
| | | level:[], //密码强度数组 |
| | | // 车牌号键盘控制 |
| | | carNumShow: false, |
| | | keyValue: '', |
| | | registerFormModel: { |
| | | phone: '', |
| | | password: '', |
| | | name: '', |
| | | username: '', |
| | | openId: '', |
| | | type: 3, |
| | | idCard: '', |
| | | carNo: '', |
| | | truckLength:null, |
| | | truckWidth:null, |
| | | truckHeight:null, |
| | | maximumPayload:null, |
| | | totalLoad:null, |
| | | carImg: '', |
| | | drivingImg: '', |
| | | tuiJianMa: '', |
| | | confirmPassword: '', |
| | | tradeQualificationImg: '', |
| | | roadTransportImg: '', |
| | | isNonCoal: [], |
| | | isCoalCar: 1, //是否为煤炭车辆(司机使用字段) 1 是 2 不是 |
| | | inventoryImg: '', |
| | | countryNumberCar: 0, //车辆类型;国五 1,国六 2, |
| | | certification:'', |
| | | freightCompany:'', |
| | | axleNum:"", |
| | | |
| | | }, |
| | | idCard: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请输入身份证号', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | phone: [ |
| | | { |
| | | required: true, |
| | | message: '此为必填字段', |
| | | // blur和change事件触发检验 |
| | | trigger: ['blur', 'change'] |
| | | fileList1: [], |
| | | fileList2: [], |
| | | fileList3: [], |
| | | fileList4: [], |
| | | fileList5: [], |
| | | fileList6: [], |
| | | rules: { |
| | | inventoryImg: { |
| | | required: false, |
| | | }, |
| | | { |
| | | min: 11, |
| | | max: 11, |
| | | message: '请输入合法手机号' |
| | | } |
| | | ], |
| | | password: [ |
| | | { |
| | | required: true, |
| | | message: '请设置初始密码', |
| | | trigger: ['blur', 'change'] |
| | | countryNumberCar: { |
| | | required: false, |
| | | }, |
| | | { |
| | | min: 6, |
| | | max: 12, |
| | | message: '长度在6-12个字符之间' |
| | | } |
| | | ], |
| | | confirmPassword: [ |
| | | { |
| | | required: true, |
| | | message: '请设置初始密码', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | { |
| | | min: 6, |
| | | max: 12, |
| | | message: '长度在6-12个字符之间' |
| | | } |
| | | ], |
| | | carNo: [ |
| | | { |
| | | name: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请输入车牌号', |
| | | message: '请填写姓名', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | idCard: [{ |
| | | type: 'string', |
| | | required: true, |
| | | message: '请输入身份证号', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | { |
| | | pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, |
| | | message: '身份证号格式不正确', |
| | | trigger: ['blur', 'change'] |
| | | } |
| | | ], |
| | | phone: [{ |
| | | required: true, |
| | | message: '请输入手机号', |
| | | // blur和change事件触发检验 |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | { |
| | | min: 11, |
| | | max: 11, |
| | | message: '请输入合法手机号' |
| | | }, |
| | | { |
| | | validator: (rule, value, callback) => { |
| | | return uni.$u.test.mobile(value); |
| | | }, |
| | | message: '手机号码格式不正确', |
| | | trigger: ['change', 'blur'] |
| | | } |
| | | ], |
| | | password: [{ |
| | | required: true, |
| | | message: '请设置初始密码', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | { |
| | | validator: checkPassword, |
| | | trigger: 'change' |
| | | } |
| | | ], |
| | | confirmPassword: [{ |
| | | required: true, |
| | | validator: validatePass, |
| | | trigger: "blur" |
| | | }], |
| | | carNo: [{ |
| | | type: 'string', |
| | | required: true, |
| | | message: '请输入车牌号', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | { |
| | | transform(value) { |
| | | return String(value); |
| | | }, |
| | | validator: (rule, value, callback) => { |
| | | return uni.$u.test.carNo(value); |
| | | }, |
| | | message: '请输入正确的车牌号', |
| | | trigger: ['change', 'blur'] |
| | | } |
| | | ], |
| | | carImg: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请上传车辆图片', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | drivingImg: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请上传行驶证照片', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | roadTransportImg: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请上传道路运输证照片', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | tradeQualificationImg: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请上传从业资格证照片', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | truckLength: { |
| | | type: 'number', |
| | | required: true, |
| | | message: '请输入车长', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | truckWidth: { |
| | | type: 'number', |
| | | required: true, |
| | | message: '请输入车宽', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | truckHeight: { |
| | | type: 'number', |
| | | required: true, |
| | | message: '请输入车高', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | maximumPayload: { |
| | | type: 'number', |
| | | required: true, |
| | | // message: '请输入最大载重', |
| | | validator: maxVstotalFun2, |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | totalLoad:{ |
| | | type: 'number', |
| | | required: true, |
| | | // message: '请输入车货总重', |
| | | validator: maxVstotalFun1, |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | axleNum:{ |
| | | type: 'number', |
| | | required: false, |
| | | message: '请输入车轴数', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | freightCompany:{ |
| | | type: 'string', |
| | | required: false, |
| | | message: '请输入承运单位', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | certification:{ |
| | | type: 'string', |
| | | required: false, |
| | | message: '请输入从业资格证号', |
| | | trigger: ['blur', 'change'] |
| | | }, |
| | | }, |
| | | radiolist1: [{ |
| | | name: '司机', |
| | | disabled: false |
| | | }, |
| | | { |
| | | name: '货代', |
| | | disabled: false |
| | | } |
| | | ], |
| | | carImg: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请上传车辆图片', |
| | | trigger: ['blur', 'change'] |
| | | countryNumberCarList: [{ |
| | | name: 1, |
| | | label: '国五', |
| | | }, |
| | | { |
| | | name: 2, |
| | | label: '国六', |
| | | }, |
| | | { |
| | | name: 3, |
| | | label: '新能源', |
| | | } |
| | | ], |
| | | radiovalue1: '司机', |
| | | beforeChangeValue: '', |
| | | // 更换角色弹框 |
| | | editRoleModelShow: false, |
| | | title: '提示', |
| | | content: '当前填入信息,切换角色后,即清除,是否切换?', |
| | | wxcode: '', |
| | | openid: '', |
| | | registerClickloading: false, |
| | | }; |
| | | }, |
| | | watch: { |
| | | radiovalue1(newV) { |
| | | if (this.registerFormModel.name || this.registerFormModel.idCard || this.registerFormModel.phone || this |
| | | .registerFormModel.carNo || this.registerFormModel.password || this.registerFormModel.truckLength |
| | | || this.registerFormModel.truckWidth || this.registerFormModel.truckHeight || this.registerFormModel.maximumPayload |
| | | ||this.registerFormModel.totalLoad ) { |
| | | if (this.editRoleModelShow == true) { |
| | | this.editRoleModelShow = false; |
| | | } else { |
| | | this.editRoleModelShow = true; |
| | | } |
| | | } |
| | | switch (newV) { |
| | | case '货代': |
| | | this.registerFormModel.type = 2; |
| | | break; |
| | | case '司机': |
| | | this.registerFormModel.type = 3; |
| | | break; |
| | | default: |
| | | break; |
| | | } |
| | | return; |
| | | } |
| | | }, |
| | | methods: { |
| | | ...mapMutations(['changeisUploadimg']), |
| | | inputchange(e, num) { |
| | | const inputType =/[^\d.]/g |
| | | switch (num) { |
| | | case 1: |
| | | this.$nextTick(() => { |
| | | this.registerFormModel.truckLength = e.replace(inputType, ''); |
| | | }) |
| | | break; |
| | | case 2: |
| | | this.$nextTick(() => { |
| | | this.registerFormModel.truckWidth = e.replace(inputType, ''); |
| | | }) |
| | | break; |
| | | case 3: |
| | | this.$nextTick(() => { |
| | | this.registerFormModel.truckHeight = e.replace(inputType, ''); |
| | | }) |
| | | break; |
| | | case 4: |
| | | this.$nextTick(() => { |
| | | this.registerFormModel.maximumPayload = e.replace(inputType, ''); |
| | | }) |
| | | break; |
| | | case 5: |
| | | this.$nextTick(() => { |
| | | this.registerFormModel.totalLoad = e.replace(inputType, ''); |
| | | }) |
| | | |
| | | break; |
| | | case 6: |
| | | this.$nextTick(() => { |
| | | this.registerFormModel.axleNum = e.replace(inputType, ''); |
| | | }) |
| | | } |
| | | }, |
| | | drivingImg: { |
| | | type: 'string', |
| | | required: true, |
| | | message: '请上传行驶证照片', |
| | | trigger: ['blur', 'change'] |
| | | registerClick() { |
| | | this.$refs.regesterFormRef |
| | | .validate() |
| | | .then(res => { |
| | | if(this.radiovalue1 === '司机' && this.registerFormModel.totalLoad<=this.registerFormModel.maximumPayload){ |
| | | uni.showToast({ |
| | | title: '车货总重需要大于最大载重', |
| | | icon: 'none', |
| | | duration: 2000 |
| | | }); |
| | | }else{ |
| | | this.registerClickloading = true; |
| | | this.registerFormModel.username = this.registerFormModel.phone; |
| | | apiRegister(this.registerFormModel) |
| | | .then(res => { |
| | | this.registerClickloading = false; |
| | | if (res.data.code == 0) { |
| | | uni.showToast({ |
| | | title: '注册成功,即将返回登录页', |
| | | icon: 'none', |
| | | duration: 1000 |
| | | }); |
| | | setTimeout(() => { |
| | | uni.redirectTo({ url: '/pages/login/login' }); |
| | | }, 1000); |
| | | } else { |
| | | this.$u.toast(res.data.msg ? res.data.msg : '添加失败'); |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | console.log('错误', err); |
| | | }); |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | console.log('err', err); |
| | | this.$u.toast('请规范输入内容'); |
| | | }); |
| | | }, |
| | | // 单选框事件 |
| | | groupChange(e) {}, |
| | | radioChange(e) { |
| | | if ( |
| | | this.registerFormModel.name == '' && |
| | | this.registerFormModel.idCard == '' && |
| | | this.registerFormModel.phone == '' && |
| | | this.registerFormModel.carNo == '' && |
| | | this.registerFormModel.password == '' && |
| | | this.registerFormModel.truckLength == '' && |
| | | this.registerFormModel.truckWidth == '' && |
| | | this.registerFormModel.truckHeight == '' && |
| | | this.registerFormModel.maximumPayload == '' && |
| | | this.registerFormModel.totalLoad == '' |
| | | ) { |
| | | this.$refs.regesterFormRef.clearValidate(); |
| | | this.beforeChangeValue = e; |
| | | } |
| | | }, |
| | | // 基本案列数据 |
| | | radiolist1: [ |
| | | { |
| | | name: '货代', |
| | | disabled: false |
| | | }, |
| | | { |
| | | name: '司机', |
| | | disabled: false |
| | | } |
| | | ], |
| | | // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中 |
| | | radiovalue1: '货代', |
| | | beforeChangeValue: '', |
| | | // 更换角色弹框 |
| | | editRoleModelShow: false, |
| | | title: '提示', |
| | | content: '当前填入信息,切换角色后,即清除,是否切换?', |
| | | wxcode: '', |
| | | openid: '' |
| | | }; |
| | | }, |
| | | watch: { |
| | | radiovalue1(newV) { |
| | | if (this.registerFormModel.name || this.registerFormModel.idCard || this.registerFormModel.phone || this.registerFormModel.carNo || this.registerFormModel.password) { |
| | | if (this.editRoleModelShow == true) { |
| | | this.editRoleModelShow = false; |
| | | } else { |
| | | this.editRoleModelShow = true; |
| | | } |
| | | } |
| | | switch (newV) { |
| | | case '货代': |
| | | this.registerFormModel.type = 2; |
| | | break; |
| | | case '司机': |
| | | this.registerFormModel.type = 3; |
| | | break; |
| | | default: |
| | | break; |
| | | } |
| | | return; |
| | | } |
| | | }, |
| | | methods: { |
| | | registerClick() { |
| | | if (this.registerFormModel.password == this.registerFormModel.confirmPassword) { |
| | | this.$refs.regesterFormRef |
| | | .validate() |
| | | .then(res => { |
| | | console.log(this.registerFormModel); |
| | | this.registerFormModel.username = this.registerFormModel.phone; |
| | | apiRegister(this.registerFormModel) |
| | | .then(res => { |
| | | if (res.data.code == 0) { |
| | | uni.showToast({ |
| | | title: '注册成功,即将返回登录页', |
| | | icon: 'none', |
| | | duration: 1000 |
| | | }); |
| | | setTimeout(() => { |
| | | uni.redirectTo({ url: '/pages/login/login' }); |
| | | }, 1000); |
| | | } else { |
| | | this.$u.toast(res.data.data ? res.data.data : '添加失败'); |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | console.log('错误', err); |
| | | }); |
| | | }) |
| | | .catch(err => { |
| | | console.log('err', err); |
| | | uni.$u.toast('请规范输入内容'); |
| | | // 上传图片方法 |
| | | beforeRead() { |
| | | this.changeisUploadimg(true); |
| | | }, |
| | | // 删除图片 |
| | | deletePic(event) { |
| | | this.changeisUploadimg(true); |
| | | this[`fileList${event.name}`].splice(event.index, 1); |
| | | }, |
| | | // 新增图片 |
| | | async afterRead(event) { |
| | | // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式 |
| | | let lists = [].concat(event.file); |
| | | let fileListLen = this[`fileList${event.name}`].length; |
| | | lists.map(item => { |
| | | this[`fileList${event.name}`].push({ |
| | | ...item, |
| | | status: 'uploading', |
| | | message: '上传中' |
| | | }); |
| | | } else { |
| | | this.$u.toast('两次密码不一致'); |
| | | } |
| | | }, |
| | | // 单选框事件 |
| | | groupChange(e) { |
| | | console.log('单选框小组', e); |
| | | }, |
| | | radioChange(e) { |
| | | console.log('单选框', e); |
| | | if ( |
| | | this.registerFormModel.name == '' && |
| | | this.registerFormModel.idCard == '' && |
| | | this.registerFormModel.phone == '' && |
| | | this.registerFormModel.carNo == '' && |
| | | this.registerFormModel.password == '' |
| | | ) { |
| | | console.log('变了'); |
| | | this.$refs.regesterFormRef.clearValidate(); |
| | | this.beforeChangeValue = e; |
| | | } |
| | | }, |
| | | jiaoYanPassword() { |
| | | if (this.registerFormModel.password != this.registerFormModel.confirmPassword) { |
| | | this.$u.toast('两次密码不一致'); |
| | | } |
| | | }, |
| | | // 上传图片方法 |
| | | // 删除图片 |
| | | deletePic(event) { |
| | | this[`fileList${event.name}`].splice(event.index, 1); |
| | | }, |
| | | // 新增图片 |
| | | async afterRead(event) { |
| | | // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式 |
| | | let lists = [].concat(event.file); |
| | | let fileListLen = this[`fileList${event.name}`].length; |
| | | lists.map(item => { |
| | | this[`fileList${event.name}`].push({ |
| | | ...item, |
| | | status: 'uploading', |
| | | message: '上传中' |
| | | }); |
| | | }); |
| | | for (let i = 0; i < lists.length; i++) { |
| | | const result = await this.uploadFilePromise(lists[i].url, event.name); |
| | | let item = this[`fileList${event.name}`][fileListLen]; |
| | | this[`fileList${event.name}`].splice( |
| | | fileListLen, |
| | | 1, |
| | | Object.assign(item, { |
| | | status: 'success', |
| | | message: '上传成功', |
| | | url: result |
| | | }) |
| | | ); |
| | | fileListLen++; |
| | | } |
| | | }, |
| | | uploadFilePromise(url, num) { |
| | | return new Promise((resolve, reject) => { |
| | | let a = uni.uploadFile({ |
| | | url: BaseUrl + '/admin/sys-file/uploadUnToken', |
| | | filePath: url, |
| | | name: 'file', |
| | | formData: { |
| | | // user: '' |
| | | }, |
| | | success: res => { |
| | | if (num == 1) { |
| | | this.registerFormModel.carImg = JSON.parse(res.data).data.url; |
| | | resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`); |
| | | } else if (num == 2) { |
| | | this.registerFormModel.drivingImg = JSON.parse(res.data).data.url; |
| | | resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`); |
| | | for (let i = 0; i < lists.length; i++) { |
| | | const result = await this.uploadFilePromise(lists[i].url, event.name); |
| | | let item = this[`fileList${event.name}`][fileListLen]; |
| | | this[`fileList${event.name}`].splice( |
| | | fileListLen, |
| | | 1, |
| | | Object.assign(item, { |
| | | status: 'success', |
| | | message: '上传成功', |
| | | url: result |
| | | }) |
| | | ); |
| | | fileListLen++; |
| | | } |
| | | }, |
| | | uploadFilePromise(url, num) { |
| | | return new Promise((resolve, reject) => { |
| | | let a = uni.uploadFile({ |
| | | url: BaseUrl + '/admin/sys-file/uploadUnToken', |
| | | filePath: url, |
| | | name: 'file', |
| | | success: res => { |
| | | if (num == 1) { |
| | | this.registerFormModel.carImg = JSON.parse(res.data).data.url; |
| | | resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`); |
| | | } else if (num == 2) { |
| | | this.registerFormModel.drivingImg = JSON.parse(res.data).data.url; |
| | | resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`); |
| | | } else if (num == 3) { |
| | | this.registerFormModel.roadTransportImg = JSON.parse(res.data).data |
| | | .url; |
| | | resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`); |
| | | } else if (num == 4) { |
| | | this.registerFormModel.tradeQualificationImg = JSON.parse(res.data) |
| | | .data.url; |
| | | resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`); |
| | | } else if (num == 5) { |
| | | this.registerFormModel.inventoryImg = JSON.parse(res.data) |
| | | .data.url; |
| | | resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | // 更换角色弹出框 |
| | | roleConfirm() { |
| | | console.log('遍历对象', Object.keys(this.registerFormModel)); |
| | | Object.keys(this.registerFormModel).forEach(item => { |
| | | if (item !== 'type') { |
| | | if (this.registerFormModel[item]) this.registerFormModel[item] = ''; |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | // 更换角色弹出框 |
| | | roleConfirm() { |
| | | console.log('遍历对象', Object.keys(this.registerFormModel)); |
| | | Object.keys(this.registerFormModel).forEach(item => { |
| | | if (item !== 'type') { |
| | | if (this.registerFormModel[item]) this.registerFormModel[item] = ''; |
| | | } |
| | | }); |
| | | /** |
| | | * @resetFields 不管用时候用上边的代替 |
| | | */ |
| | | this.$refs.regesterFormRef.resetFields(); |
| | | this.editRoleModelShow = false; |
| | | }, |
| | | roleCancel() { |
| | | this.radiovalue1 = this.beforeChangeValue; |
| | | this.$nextTick(() => { |
| | | /** |
| | | * @resetFields 不管用时候用上边的代替 |
| | | */ |
| | | this.$refs.regesterFormRef.resetFields(); |
| | | this.editRoleModelShow = false; |
| | | }); |
| | | }, |
| | | roleCancel() { |
| | | this.radiovalue1 = this.beforeChangeValue; |
| | | this.$nextTick(() => { |
| | | this.editRoleModelShow = false; |
| | | }); |
| | | }, |
| | | isNonCoalChange() { |
| | | this.registerFormModel.isCoalCar = this.registerFormModel.isNonCoal.length !== 0 ? 1 : 2 |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | ::v-deep.register { |
| | | width: 94%; |
| | | padding: 0 0 vww(20) 0; |
| | | margin: 0 auto; |
| | | .registerForm { |
| | | <style lang="scss" |
| | | scoped> |
| | | ::v-deep.register { |
| | | width: 94%; |
| | | padding: 0 0 vww(20) 0; |
| | | margin: 0 auto; |
| | | font-size: 16px !important; |
| | | .u-form { |
| | | .u-radio { |
| | | width: 33%; |
| | | |
| | | .registerForm { |
| | | width: 94%; |
| | | margin: 0 auto; |
| | | font-size: 16px !important; |
| | | |
| | | .u-form { |
| | | .u-radio { |
| | | width: 33%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .registerBtn { |
| | | width: 94%; |
| | | margin: vww(50) auto 0; |
| | | } |
| | | |
| | | .utils { |
| | | line-height: vww(30); |
| | | text-align: center; |
| | | |
| | | text:nth-of-type(1) { |
| | | margin-right: vww(10); |
| | | } |
| | | } |
| | | } |
| | | .registerBtn { |
| | | width: 94%; |
| | | margin: vww(50) auto 0; |
| | | } |
| | | .utils { |
| | | line-height: vww(30); |
| | | text-align: center; |
| | | text:nth-of-type(1) { |
| | | margin-right: vww(10); |
| | | } |
| | | } |
| | | } |
| | | .intensity { |
| | | width: 100%; |
| | | margin-top: 10rpx; |
| | | .psdText { |
| | | font-size: 14px; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .line { |
| | | display: inline-block; |
| | | width: 70rpx; |
| | | height: 8rpx; |
| | | background: #d8d8d8; |
| | | border-radius: 6rpx; |
| | | margin-right: 16rpx; |
| | | |
| | | &.low { |
| | | background: #f4664a; |
| | | } |
| | | |
| | | &.middle { |
| | | background: #ffb700; |
| | | } |
| | | |
| | | &.high { |
| | | background: #2cbb79; |
| | | } |
| | | } |
| | | |
| | | .level { |
| | | margin: 0 32rpx 0 16rpx; |
| | | } |
| | | |
| | | .warningtext { |
| | | color: #5a5a5a; |
| | | font-size: 24rpx; |
| | | margin-top: 10rpx; |
| | | } |
| | | } |
| | | </style> |