<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"
|
size="20px"
|
:customStyle="{ marginBottom: '8px' }"
|
v-for="(item, index) in radiolist1"
|
:key="index"
|
:label="item.name"
|
:name="item.name"
|
@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>
|
<u-form-item prop="idCard"
|
label="身份证"
|
labelWidth="20%"
|
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>
|
<u-form-item prop="password"
|
label="密码"
|
labelWidth="20%"
|
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>
|
</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>
|
<u-form-item prop="carImg"
|
label="车辆照片"
|
labelWidth="20%"
|
borderBottom
|
v-if="radiovalue1 == '司机'"
|
required
|
@click="beforeRead">
|
<u-upload :fileList="fileList1"
|
deletable
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="1"
|
multiple
|
:maxCount="1"
|
width="250"
|
height="150"
|
:previewFullImage="true">
|
</u-upload>
|
</u-form-item>
|
<u-form-item prop="drivingImg"
|
label="行驶证"
|
labelWidth="20%"
|
borderBottom
|
v-if="radiovalue1 == '司机'"
|
required
|
@click="beforeRead">
|
<u-upload :fileList="fileList2"
|
deletable
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="2"
|
multiple
|
:maxCount="1"
|
width="250"
|
height="150"
|
:previewFullImage="true">
|
</u-upload>
|
</u-form-item>
|
<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 label="推荐人账号"
|
labelWidth="25%"
|
borderBottom>
|
<u--input v-model="registerFormModel.tuiJianMa"
|
placeholder="请输入内容"
|
clearable></u--input>
|
</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>
|
</view>
|
<view class="registerBtn"><u-button text="注册"
|
type="primary"
|
@click="registerClick"
|
:loading="registerClickloading"></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>
|
</template>
|
|
<script>
|
import { apiRegister } from '@/api/publicInterface.js';
|
import { BaseUrl } from '@/api/publicInterface.js';
|
import { mapMutations } from 'vuex';
|
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);
|
}
|
},
|
data() {
|
return {
|
// 车牌号键盘控制
|
carNumShow: false,
|
keyValue: '',
|
registerFormModel: {
|
phone: '',
|
password: '',
|
name: '',
|
username: '',
|
openId: '',
|
type: 2,
|
idCard: '',
|
carNo: '',
|
carImg: '',
|
drivingImg: '',
|
tuiJianMa: '',
|
confirmPassword: '',
|
tradeQualificationImg: '',
|
roadTransportImg: ''
|
},
|
fileList1: [],
|
fileList2: [],
|
fileList3: [],
|
fileList4: [],
|
rules: {
|
name: {
|
type: 'string',
|
required: true,
|
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']
|
},
|
{
|
min: 6,
|
max: 12,
|
message: '长度在6-12个字符之间'
|
}
|
],
|
confirmPassword: [{
|
required: true,
|
message: '请设置初始密码',
|
trigger: ['blur', 'change']
|
},
|
{
|
min: 6,
|
max: 12,
|
message: '长度在6-12个字符之间'
|
}
|
],
|
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']
|
}
|
},
|
// 基本案列数据
|
radiolist1: [{
|
name: '货代',
|
disabled: false
|
},
|
{
|
name: '司机',
|
disabled: false
|
}
|
],
|
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
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) {
|
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']),
|
registerClick() {
|
if (this.registerFormModel.password == this.registerFormModel.confirmPassword) {
|
this.$refs.regesterFormRef
|
.validate()
|
.then(res => {
|
console.log(this.registerFormModel);
|
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('请规范输入内容');
|
});
|
} else {
|
this.$u.toast('两次密码不一致');
|
}
|
},
|
// 单选框事件
|
groupChange(e) {},
|
radioChange(e) {
|
if (
|
this.registerFormModel.name == '' &&
|
this.registerFormModel.idCard == '' &&
|
this.registerFormModel.phone == '' &&
|
this.registerFormModel.carNo == '' &&
|
this.registerFormModel.password == ''
|
) {
|
this.$refs.regesterFormRef.clearValidate();
|
this.beforeChangeValue = e;
|
}
|
},
|
jiaoYanPassword() {
|
if (this.registerFormModel.password != this.registerFormModel.confirmPassword) {
|
this.$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: '上传中'
|
});
|
});
|
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}`);
|
} 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}`);
|
}
|
}
|
});
|
});
|
},
|
// 更换角色弹出框
|
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(() => {
|
this.editRoleModelShow = false;
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss"
|
scoped>
|
::v-deep.register {
|
width: 94%;
|
padding: 0 0 vww(20) 0;
|
margin: 0 auto;
|
|
.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);
|
}
|
}
|
}
|
</style>
|
