464 lines
16 KiB
Vue
464 lines
16 KiB
Vue
|
<template>
|
||
|
|
<view class="">
|
||
|
|
<view class="card">
|
||
|
|
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
|
||
|
|
<view class="title">基本信息</view>
|
||
|
|
<u-form-item label="电话" required prop="account" borderBottom>
|
||
|
|
<u--input v-model="formData.account" placeholder="请输入手机号" type="number"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="姓名" required prop="name" borderBottom>
|
||
|
|
<u--input v-model="formData.name" placeholder="请输入姓名"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="性别" required prop="sex" borderBottom>
|
||
|
|
<u-radio-group v-model="formData.sex" style="margin-left: 16px;">
|
||
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
||
|
|
v-for="(item, index) in [{value:1,label:'男'},{value:0,label:'女'}]" :key="index" :label="item.label"
|
||
|
|
:name="item.value">
|
||
|
|
</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="头像" required prop="avatar" borderBottom>
|
||
|
|
<u-upload :fileList="formData.avatar?[{url:formData.avatar}]:[]" @afterRead="afterReadAvatar"
|
||
|
|
@delete="formData.avatar=''" name="avatar" :maxCount="1" width="150rpx" height="150rpx"
|
||
|
|
style="margin-top: 10rpx;">
|
||
|
|
</u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
|
||
|
|
<u--input v-model="formData.id_card" placeholder="请输入身份证号" type="idcard"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
<!-- <u-form-item labelWidth="auto" label="登录密码" prop="formData.name" borderBottom>
|
||
|
|
<u--input v-model="formData.password" placeholder="不输入密码则默认为手机号" password></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item labelWidth="auto" label="确认密码" prop="formData.name" borderBottom>
|
||
|
|
<u--input v-model="formData.password_confirm" placeholder="不输入密码则默认为手机号" password></u--input>
|
||
|
|
</u-form-item> -->
|
||
|
|
<view class="title">地区信息</view>
|
||
|
|
<u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
|
||
|
|
<u--input :value="formDataText.province" placeholder="请选择省"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
|
||
|
|
<u--input :value="formDataText.city" placeholder="请选择市"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
|
||
|
|
<u--input :value="formDataText.area" placeholder="请选择区县"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="镇" required prop="street" @click="changeCity('street')" borderBottom>
|
||
|
|
<u--input :value="formDataText.street" placeholder="请选择镇"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="村" required prop="village" @click="changeCity('village')" borderBottom>
|
||
|
|
<u--input :value="formDataText.village" placeholder="请选择村"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="小队" required prop="brigade" @click="changeCity('brigade')" borderBottom>
|
||
|
|
<u--input :value="formDataText.brigade" placeholder="请选择小队"></u--input>
|
||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<view class="title">资质信息</view>
|
||
|
|
<u-form-item label="身份证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card" borderBottom>
|
||
|
|
<u-upload :fileList="formData.qualification.id_card?[{url:formData.qualification.id_card}]:[]"
|
||
|
|
@afterRead="afterRead" @delete="formData.qualification.id_card=''" name="id_card" :maxCount="1"
|
||
|
|
width="638rpx" height="300rpx" style="margin-top: 10rpx;">
|
||
|
|
</u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="身份证反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card_b" borderBottom>
|
||
|
|
<u-upload :fileList="formData.qualification.id_card_b?[{url:formData.qualification.id_card_b}]:[]"
|
||
|
|
@afterRead="afterRead" @delete="formData.qualification.id_card_b=''" name="id_card_b" :maxCount="1"
|
||
|
|
width="638rpx" height="300rpx" style="margin-top: 10rpx;">
|
||
|
|
</u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="驾驶证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.car_card" borderBottom>
|
||
|
|
<u-upload :fileList="formData.qualification.car_card?[{url:formData.qualification.car_card}]:[]"
|
||
|
|
@afterRead="afterRead" @delete="formData.qualification.car_card=''" name="car_card" :maxCount="1"
|
||
|
|
width="638rpx" height="300rpx" style="margin-top: 10rpx;">
|
||
|
|
</u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="驾驶证反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.car_card_b" borderBottom>
|
||
|
|
<u-upload :fileList="formData.qualification.car_card_b?[{url:formData.qualification.car_card_b}]:[]"
|
||
|
|
@afterRead="afterRead" @delete="formData.qualification.car_card_b=''" name="car_card_b" :maxCount="1"
|
||
|
|
width="638rpx" height="300rpx" style="margin-top: 10rpx;">
|
||
|
|
</u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="银行卡正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.bank_account"
|
||
|
|
borderBottom>
|
||
|
|
<u-upload :fileList="formData.qualification.bank_account?[{url:formData.qualification.bank_account}]:[]"
|
||
|
|
@afterRead="afterRead" @delete="formData.qualification.bank_account=''" name="bank_account" :maxCount="1"
|
||
|
|
width="638rpx" height="300rpx" style="margin-top: 10rpx;">
|
||
|
|
</u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="银行卡反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.bank_account_b"
|
||
|
|
borderBottom>
|
||
|
|
<u-upload :fileList="formData.qualification.bank_account_b?[{url:formData.qualification.bank_account_b}]:[]"
|
||
|
|
@afterRead="afterRead" @delete="formData.qualification.bank_account_b=''" name="bank_account_b"
|
||
|
|
:maxCount="1" width="638rpx" height="300rpx" style="margin-top: 10rpx;">
|
||
|
|
</u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
</u--form>
|
||
|
|
<u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
|
||
|
|
@cancel="showProvince = false" @close="showProvince = false"></u-picker>
|
||
|
|
<button @click="addAcountNum" type="primary" class="btn">创建</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { upLoadImage } from "@/api/file.js"
|
||
|
|
import { commonProvince, commonCity, commonArea, commonStreet, commonVillage, commonBrigade } from "@/api/oaPbulic.js"
|
||
|
|
import { loginAdd } from "@/api/oaUser.js"
|
||
|
|
import { Toast } from "../../libs/uniApi"
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showProvince: false,
|
||
|
|
formData: {
|
||
|
|
account: '', //账号
|
||
|
|
password: '123456', //密码
|
||
|
|
password_confirm: '', //确认密码
|
||
|
|
// channel: 6, //注册渠道[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
|
||
|
|
id_card: '',
|
||
|
|
sex: '',
|
||
|
|
avatar: '',
|
||
|
|
name: '',
|
||
|
|
province: '',
|
||
|
|
city: '',
|
||
|
|
area: '',
|
||
|
|
street: '',
|
||
|
|
village: '',
|
||
|
|
brigade: '',
|
||
|
|
address: '测试地址',
|
||
|
|
qualification: {
|
||
|
|
id_card: "",
|
||
|
|
id_card_b: "",
|
||
|
|
car_card: "",
|
||
|
|
car_card_b: "",
|
||
|
|
bank_account: "",
|
||
|
|
bank_account_b: ""
|
||
|
|
},
|
||
|
|
},
|
||
|
|
formDataText: {
|
||
|
|
province: '',
|
||
|
|
city: '',
|
||
|
|
area: '',
|
||
|
|
street: '',
|
||
|
|
village: '',
|
||
|
|
brigade: '',
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
account: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
id_card: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
sex: {
|
||
|
|
type: 'string',
|
||
|
|
max: 1,
|
||
|
|
required: true,
|
||
|
|
message: '请选择男或女',
|
||
|
|
trigger: ['blur','change']
|
||
|
|
},
|
||
|
|
avatar: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
province: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
city: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
area: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
street: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
village: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
brigade: {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
'qualification.id_card': {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
'qualification.id_card_b': {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
'qualification.car_card': {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
'qualification.car_card_b': {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
'qualification.bank_account': {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
'qualification.bank_account_b': {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '不能为空',
|
||
|
|
trigger: ['blur']
|
||
|
|
},
|
||
|
|
},
|
||
|
|
provinceList: [],
|
||
|
|
cityList: [],
|
||
|
|
areaList: [],
|
||
|
|
streetList: [],
|
||
|
|
villageList: [],
|
||
|
|
brigadeList: [],
|
||
|
|
changeType: '', //当前选择的城市类型
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.initProvinceAndCity()
|
||
|
|
},
|
||
|
|
onShow() {},
|
||
|
|
methods: {
|
||
|
|
async initProvinceAndCity() {
|
||
|
|
let res = await commonProvince();
|
||
|
|
this.provinceList = res.data;
|
||
|
|
this.provinceList.forEach(item => {
|
||
|
|
if (item.province_name.indexOf('四川') !== -1) {
|
||
|
|
this.formData.province = item.province_code;
|
||
|
|
this.formDataText.province = item.province_name;
|
||
|
|
commonCity({
|
||
|
|
city: item.province_code
|
||
|
|
}).then(cityRes => {
|
||
|
|
this.cityList = cityRes.data;
|
||
|
|
this.cityList.forEach(item => {
|
||
|
|
if (item.city_name.indexOf('泸州') !== -1) {
|
||
|
|
this.formData.city = item.city_code;
|
||
|
|
this.formDataText.city = item.city_name;
|
||
|
|
commonArea({
|
||
|
|
area: item.city_code
|
||
|
|
}).then(areaRes => {
|
||
|
|
this.areaList = areaRes.data;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
// 选择城市
|
||
|
|
changeCity(type) {
|
||
|
|
this.changeType = type;
|
||
|
|
this.showProvince = true;
|
||
|
|
},
|
||
|
|
// 选择列表
|
||
|
|
changeList() {
|
||
|
|
return this[this.changeType + 'List'];
|
||
|
|
},
|
||
|
|
// 选中城市
|
||
|
|
confirm(e) {
|
||
|
|
if (this.changeType == 'brigade') {
|
||
|
|
this.formData[this.changeType] = e.value[0].id;
|
||
|
|
this.formDataText[this.changeType] = e.value[0].brigade_name;
|
||
|
|
this.showProvince = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
|
||
|
|
this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
|
||
|
|
switch (this.changeType) {
|
||
|
|
case 'province':
|
||
|
|
this.loadCity(this.formData['province']);
|
||
|
|
break;
|
||
|
|
case 'city':
|
||
|
|
this.loadArea(this.formData['city']);
|
||
|
|
break;
|
||
|
|
case 'area':
|
||
|
|
this.loadStreet(this.formData['area']);
|
||
|
|
break;
|
||
|
|
case 'street':
|
||
|
|
this.loadVillage(this.formData['street']);
|
||
|
|
break;
|
||
|
|
case 'village':
|
||
|
|
this.loadBrigade(this.formData['village']);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
this.showProvince = false;
|
||
|
|
},
|
||
|
|
loadCity(code) {
|
||
|
|
commonCity({
|
||
|
|
city: code
|
||
|
|
}).then(res => {
|
||
|
|
this.cityList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadArea(code) {
|
||
|
|
commonArea({
|
||
|
|
area: code
|
||
|
|
}).then(res => {
|
||
|
|
this.areaList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadStreet(code) {
|
||
|
|
commonStreet({
|
||
|
|
street: code
|
||
|
|
}).then(res => {
|
||
|
|
this.streetList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadVillage(code) {
|
||
|
|
commonVillage({
|
||
|
|
village: code
|
||
|
|
}).then(res => {
|
||
|
|
this.villageList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadBrigade(code) {
|
||
|
|
commonBrigade({
|
||
|
|
brigade: code
|
||
|
|
}).then(res => {
|
||
|
|
this.brigadeList = res.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 上传头像
|
||
|
|
async afterReadAvatar(event) {
|
||
|
|
upLoadImage({
|
||
|
|
filePath: event.file.url,
|
||
|
|
name: 'file'
|
||
|
|
}).then(res => {
|
||
|
|
this.formData.avatar = res.data.uri
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 新增图片
|
||
|
|
async afterRead(event) {
|
||
|
|
this.upLoad(event.file.url, event.name)
|
||
|
|
},
|
||
|
|
// 上传图片
|
||
|
|
upLoad(url, type) {
|
||
|
|
upLoadImage({
|
||
|
|
filePath: url,
|
||
|
|
name: 'file'
|
||
|
|
}).then(res => {
|
||
|
|
this.formData.qualification[type] = res.data.uri
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 创建账号
|
||
|
|
addAcountNum() {
|
||
|
|
this.$refs.uForm.validate().then(async (e) => {
|
||
|
|
console.log(e);
|
||
|
|
// let res = await loginAdd(this.formData);
|
||
|
|
// Toast('添加成功')
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
// // 获取机型,[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
|
||
|
|
// initTerminal() {
|
||
|
|
// // #ifndef APP-PLUS
|
||
|
|
// this.formData.terminal = 6;
|
||
|
|
// // #endif
|
||
|
|
// uni.getSystemInfo({
|
||
|
|
// success: (res) => {
|
||
|
|
// const platform = res.platform.toLowerCase();
|
||
|
|
// if (platform === 'ios') {
|
||
|
|
// this.formData.terminal = 5;
|
||
|
|
// } else if (platform === 'windows') {
|
||
|
|
// this.formData.terminal = 4;
|
||
|
|
// } else if (platform === 'mac') {
|
||
|
|
// this.formData.terminal = 4;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// // #ifdef H5
|
||
|
|
// this.formData.terminal = 3;
|
||
|
|
// // #endif
|
||
|
|
// // #ifdef MP-WEIXIN
|
||
|
|
// this.formData.terminal = 1;
|
||
|
|
// // #endif
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
onPullDownRefresh() {
|
||
|
|
uni.stopPullDownRefresh()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.card {
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 28rpx;
|
||
|
|
padding: 28rpx;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 34rpx;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
|
||
|
|
&:nth-child(1) {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
width: 8rpx;
|
||
|
|
height: 26rpx;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
background-color: #3175f9;
|
||
|
|
content: "";
|
||
|
|
display: inline-block;
|
||
|
|
margin-right: 8rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card_img {
|
||
|
|
width: 600rpx;
|
||
|
|
height: 300rpx;
|
||
|
|
background-color: #efefef;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|