OfficeApp/pages/oaLogin/oaEnroll.vue

746 lines
21 KiB
Vue
Raw Normal View History

2023-12-27 19:21:26 +08:00
<template>
2023-12-27 21:58:55 +08:00
<view class="">
<u-loading-page :loading="showLoading"></u-loading-page>
<view class="" style="width: 100vw; overflow: hidden;" v-show="!showLoading">
<view class="card">
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
<view class="cards">
<view class="avter">
<view class="">
<text style="color: #f76c7f;font-weight: bold;">*</text>用户头像:
</view>
<view class="">
<view class="" v-if="formData.avatar">
<!-- {{formData.avatar}} -->
<image :src="formData.avatar" alt="" style="width:150rpx;height:150rpx;">
</image>
</view>
<view class="uplode" v-else>
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
上传头像
<view class="up" style="opacity: 0;">
<u-upload :fileList="formData.avatar?[{url:formData.avatar}]:[]"
@afterRead="afterReadAvatar" @delete="formData.avatar=''" :maxCount="1">
</u-upload>
</view>
</view>
</view>
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
</view>
<view class="cards">
<u-form-item label="电话" required prop="account" borderBottom>
<u--input v-model="formData.account" placeholder="请输入手机号" type="number"></u--input>
</u-form-item>
2024-01-02 13:35:52 +08:00
<u-form-item label="密码" required prop="account" borderBottom>
<u--input v-model="formData.password" placeholder="请输入密码" type="password"></u--input>
</u-form-item>
<u-form-item label="确认密码" labelWidth="auto" required prop="account" borderBottom>
<u--input v-model="formData.password_confirm" placeholder="请确认密码"
type="password"></u--input>
</u-form-item>
<u-form-item label="性别" required prop="sex" borderBottom>
<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
<u-radio v-for="(item, index) in radiolist1" :customStyle="{marginLeft: '20px'}"
:key="index" :label="item.name" :name="item.name">
</u-radio>
</u-radio-group>
<!-- <u--input v-model="formData.sex" placeholder="请输入姓名"></u--input> -->
</u-form-item>
2023-12-27 21:58:55 +08:00
<u-form-item label="姓名" required prop="nickname" borderBottom>
<u--input v-model="formData.nickname" placeholder="请输入姓名"></u--input>
</u-form-item>
2024-01-02 13:35:52 +08:00
<u-form-item label="用户角色" labelWidth="auto" required prop="group_name" borderBottom
2023-12-27 21:58:55 +08:00
@click="showRole=true" ref="item1">
<u--input v-model="formData.group_name" placeholder="请选择"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
<u--input v-model="formData.id_card" placeholder="请输入身份证号" @input="c_idcard"
type="idcard"></u--input>
</u-form-item>
<u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
<u--input :value="formData.province" disabled disabledColor="#fff"
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="formData.city" disabled disabledColor="#fff"
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="formData.area" disabled disabledColor="#fff"
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="formData.street" disabled disabledColor="#fff"
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="formData.village" type="text" disabled disabledColor="#fff"
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="formData.brigade" disabled disabledColor="#fff"
placeholder="请选择小队"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
</view>
<view class="cards">
<view style="margin-bottom:30rpx ;">
<text style="color: #f76c7f;font-weight: bold;">*</text>身份证照:
</view>
<view class="up_list">
<view class="" v-if="formData.qualification.id_card">
<image :src="formData.qualification.id_card" alt=""
style="width:243.57rpx;height:150rpx;">
2023-12-27 19:21:26 +08:00
</image>
</view>
<view class="uplode" v-else>
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
2023-12-27 21:58:55 +08:00
身份证正面
2023-12-27 19:21:26 +08:00
<view class="up" style="opacity: 0;">
2023-12-27 21:58:55 +08:00
<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="300rpx" height="200rpx"
style="margin-top: 10rpx;">
2023-12-27 19:21:26 +08:00
</u-upload>
</view>
</view>
2023-12-27 21:58:55 +08:00
<view class="" v-if="formData.qualification.id_card_b">
<!-- {{formData.avatar}} -->
<image :src="formData.qualification.id_card_b" alt=""
style="width:243.57rpx;height:150rpx;">
</image>
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
<view class="uplode" v-else>
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
身份证反面
<view class="up" style="opacity: 0;">
<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="300rpx" height="200rpx"
style="margin-top: 10rpx;">
</u-upload>
</view>
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
2023-12-27 19:21:26 +08:00
</view>
</view>
2023-12-27 21:58:55 +08:00
<view class="cards">
<view style="margin-bottom:30rpx ;">
<text style="color: #f76c7f;font-weight: bold;">*</text>银行卡照:
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
<view class="up_list">
<view class="" v-if="formData.qualification.bank_account">
<!-- {{formData.avatar}} -->
<image :src="formData.qualification.bank_account" alt=""
style="width:243.57rpx;height:150rpx;">
</image>
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
<view class="uplode" v-else>
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
银行卡正面
<view class="up" style="opacity: 0;">
<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="300rpx" height="200rpx"
style="margin-top: 10rpx;">
</u-upload>
</view>
</view>
<view class="" v-if="formData.qualification.bank_account_b">
<!-- {{formData.avatar}} -->
<image :src="formData.qualification.bank_account_b" alt=""
style="width:243.57rpx;height:150rpx;">
</image>
</view>
<view class="uplode" v-else>
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
银行卡反面
<view class="up" style="opacity: 0;">
<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="300rpx" height="200rpx"
style="margin-top: 10rpx;">
</u-upload>
</view>
2023-12-27 19:21:26 +08:00
</view>
</view>
</view>
2023-12-27 21:58:55 +08:00
<view class="cards">
<view style="margin-bottom:30rpx ;">
驾驶证照:
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
<view class="up_list">
<view class="" v-if="formData.qualification.car_card">
<!-- {{formData.avatar}} -->
<image :src="formData.qualification.car_card" alt=""
style="width:243.57rpx;height:150rpx;">
</image>
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
<view class="uplode" v-else>
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
驾驶证一页
<view class="up" style="opacity: 0;">
<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="300rpx" height="200rpx"
style="margin-top: 10rpx;">
</u-upload>
</view>
</view>
<view class="" v-if="formData.qualification.car_card_b">
<!-- {{formData.avatar}} -->
<image :src="formData.qualification.car_card_b" alt=""
style="width:243.57rpx;height:150rpx;">
</image>
</view>
<view class="uplode" v-else>
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
驾驶证二页
<view class="up" style="opacity: 0;">
<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="300rpx" height="200rpx"
style="margin-top: 10rpx;">
</u-upload>
</view>
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
2023-12-27 19:21:26 +08:00
</view>
</view>
2023-12-27 21:58:55 +08:00
</u--form>
<button @click="modelShow=true" type="primary" class="btn" style="margin: 28rpx;">注册</button>
</view>
<u-modal :show="modelShow" title="提示" content='请确认人员信息无误后再创建' closeOnClickOverlay showCancelButton
@close="modelShow=false" @cancel="modelShow=false" @confirm="$u.throttle(addAcountNum, 2000)"></u-modal>
2023-12-27 19:21:26 +08:00
2023-12-27 21:58:55 +08:00
<u-action-sheet :show="showRole" :actions="actions" title="请选择性别" @close="showRole = false"
@select="sexSelect">
</u-action-sheet>
2023-12-27 19:21:26 +08:00
2023-12-27 21:58:55 +08:00
<u-picker @close='showPicker=false' :defaultIndex='defaultIndex' @cancel='showPicker=false'
:show="showPicker" ref="uPicker" :columns="columns" :keyName='keyName' @confirm="confirm"></u-picker>
2023-12-27 19:21:26 +08:00
2023-12-27 21:58:55 +08:00
<!-- <u-picker :show="showPicker" :columns="columns" keyName="province_name"></u-picker> -->
2023-12-27 19:21:26 +08:00
2023-12-27 21:58:55 +08:00
</view>
2023-12-27 19:21:26 +08:00
</view>
2023-12-27 21:58:55 +08:00
2023-12-27 19:21:26 +08:00
</template>
<script>
import {
commonProvince,
commonCity,
commonArea,
commonStreet,
commonVillage,
commonBrigade,
register
} from "@/api/enroll.js"
import {
upLoadImage
} from "@/api/file.js"
import {
loginAdd,
} from "@/api/oaUser.js"
import {
Toast
} from "../../libs/uniApi"
export default {
2023-12-27 21:58:55 +08:00
2023-12-27 19:21:26 +08:00
data() {
return {
2024-01-02 13:35:52 +08:00
radiolist1: [{
name: '男',
value: 1,
},
{
name: '女',
value: 2
},
],
// u-radio-group的v-model绑定的值如果设置为某个radio的name就会被默认选中
radiovalue1: '男',
2023-12-27 21:58:55 +08:00
defaultIndex: [0],
showLoading: true,
2023-12-27 19:21:26 +08:00
keyName: 'province_name',
showRole: false,
showPicker: false,
areaList: [],
proList: [],
cityList: [],
streetList: [],
villageList: [],
brigadeList: [],
columns: [],
actions: [{
name: '镇/街合伙人',
id: 22
},
{
name: '社区合伙人',
id: 21
},
{
name: '小区队长',
id: 20
},
{
name: '村合伙人',
id: 19
},
{
name: '生产队长',
id: 18
},
],
modelShow: false,
formData: {
2024-01-02 13:35:52 +08:00
company_id: 0,
2023-12-27 19:21:26 +08:00
account: '', //账号
2024-01-02 13:35:52 +08:00
password: '', //密码
password_confirm: '', //确认密码
channel: 6, //注册渠道[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
2023-12-27 19:21:26 +08:00
id_card: '',
2023-12-27 21:58:55 +08:00
// is_captain: '', // 队长标识
2023-12-27 19:21:26 +08:00
// is_service_manager: '', //服务部长标识
2024-01-02 13:35:52 +08:00
sex: '',
2023-12-27 19:21:26 +08:00
avatar: '',
nickname: '',
2023-12-27 21:58:55 +08:00
// address: '',
2023-12-27 19:21:26 +08:00
group_id: "",
group_name: "",
province: "",
city: "",
area: "",
street: "",
village: "",
brigade: "",
2023-12-27 21:58:55 +08:00
// provinceCode: "",
2023-12-27 19:21:26 +08:00
cityCode: "",
areaCode: "",
streetCode: "",
villageCode: "",
brigadeCode: "",
qualification: {
id_card: "",
id_card_b: "",
car_card: "",
car_card_b: "",
bank_account: "",
bank_account_b: ""
},
},
rules: {
account: {
required: true,
pattern: /^(1[3456789]\d{9})$/,
message: '请输入正确的手机号码',
trigger: ['change', 'blur']
},
id_card: {
required: true,
pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dxX]$/,
message: '请输入正确的身份证号',
trigger: ['change', 'blur']
},
},
}
},
onLoad() {
2024-01-02 13:35:52 +08:00
this.getChannel()
2023-12-27 21:58:55 +08:00
this.setRules()
2023-12-27 19:21:26 +08:00
commonProvince().then(res => {
this.proList = res.data
this.columns = [this.proList]
2023-12-27 21:58:55 +08:00
this.showLoading = false
2023-12-27 19:21:26 +08:00
})
},
onReady() {
//如果需要兼容微信小程序并且校验规则中含有方法等只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
onShow() {},
methods: {
2024-01-02 13:35:52 +08:00
getChannel() {
switch (uni.getSystemInfoSync().platform) {
case 'android':
this.formData.channel = 6
break;
case 'ios':
this.formData.channel = 5
break;
case "windows":
this.formData.channel = 4
break;
default:
this.formData.channel = 1
break;
}
//#ifdef MP
this.formData.channel = 1
//#endif
},
groupChange(n) {
n == "男" ? this.formData.sex = 1 : this.formData.sex = 2
console.log(this.formData);
},
2023-12-27 21:58:55 +08:00
setRules() {
2024-01-02 13:35:52 +08:00
let ruleKeyList = ['avatar', 'nickname', 'group_name', 'province', 'city', 'area', 'village', 'street',
2023-12-27 21:58:55 +08:00
'qualification.id_card', 'qualification.bank_account', 'qualification.id_card_b',
'qualification.bank_account_b'
]
ruleKeyList.forEach(item => {
this.rules[item] = {
type: 'string',
required: true,
message: '不能为空',
trigger: ['change', 'blur']
}
})
},
2023-12-27 19:21:26 +08:00
confirm(e) {
if (this.keyName == 'province_name') {
2023-12-27 21:58:55 +08:00
uni.showLoading({
title: '获取下级区域中'
})
2023-12-27 19:21:26 +08:00
this.formData.province = e.value[0].province_name
this.formData.province_code = e.value[0].province_code
commonCity({
city: this.formData.province_code
}).then(res => {
this.cityList = res.data
2023-12-27 21:58:55 +08:00
uni.hideLoading()
this.defaultIndex = [0]
2023-12-27 19:21:26 +08:00
})
}
if (this.keyName == 'city_name') {
2023-12-27 21:58:55 +08:00
uni.showLoading({
title: '获取下级区域中'
})
2023-12-27 19:21:26 +08:00
this.formData.city = e.value[0].city_name
this.formData.cityCode = e.value[0].city_code
commonArea({
area: this.formData.cityCode
}).then(res => {
this.areaList = res.data
2023-12-27 21:58:55 +08:00
uni.hideLoading()
this.defaultIndex = [0]
2023-12-27 19:21:26 +08:00
})
}
if (this.keyName == 'area_name') {
2023-12-27 21:58:55 +08:00
uni.showLoading({
title: '获取下级区域中'
})
2023-12-27 19:21:26 +08:00
this.formData.area = e.value[0].area_name
this.formData.areaCode = e.value[0].area_code
commonStreet({
street: this.formData.areaCode
}).then(res => {
this.streetList = res.data
2023-12-27 21:58:55 +08:00
uni.hideLoading()
this.defaultIndex = [0]
2023-12-27 19:21:26 +08:00
})
}
if (this.keyName == 'street_name') {
2023-12-27 21:58:55 +08:00
uni.showLoading({
title: '获取下级区域中'
})
2023-12-27 19:21:26 +08:00
this.formData.street = e.value[0].street_name
this.formData.streetCode = e.value[0].street_code
commonVillage({
village: this.formData.streetCode
}).then(res => {
this.villageList = res.data
2023-12-27 21:58:55 +08:00
uni.hideLoading()
this.defaultIndex = [0]
2023-12-27 19:21:26 +08:00
})
}
if (this.keyName == 'village_name') {
2023-12-27 21:58:55 +08:00
uni.showLoading({
title: '获取下级区域中'
})
2023-12-27 19:21:26 +08:00
this.formData.village = e.value[0].village_name
this.formData.villageCode = e.value[0].village_code
commonBrigade({
brigade: this.formData.villageCode
}).then(res => {
this.brigadeList = res.data
2023-12-27 21:58:55 +08:00
uni.hideLoading()
this.defaultIndex = [0]
2023-12-27 19:21:26 +08:00
})
}
if (this.keyName == 'brigade_name') {
this.formData.brigade = e.value[0].brigade_name
this.formData.brigadeCode = e.value[0].id
2023-12-27 21:58:55 +08:00
this.defaultIndex = [0]
2023-12-27 19:21:26 +08:00
}
this.showPicker = false
},
changeCity(type, toast = false) {
this.showPicker = true
if (type == 'role') {
this.actionList = this.actions
}
if (type == 'province') {
2023-12-27 21:58:55 +08:00
this.keyName = 'province_name'
2023-12-27 19:21:26 +08:00
this.columns = [this.proList]
2023-12-27 21:58:55 +08:00
2023-12-27 19:21:26 +08:00
}
if (type == 'city') {
this.keyName = 'city_name'
this.columns = [this.cityList]
}
if (type == 'area') {
this.keyName = 'area_name'
this.columns = [this.areaList]
}
if (type == 'street') {
this.keyName = 'street_name'
this.columns = [this.streetList]
}
if (type == 'village') {
this.keyName = 'village_name'
this.columns = [this.villageList]
}
if (type == 'brigade') {
this.keyName = 'brigade_name'
this.columns = [this.brigadeList]
}
// this.actionList=
// if (this[type + 'List'].length == 0) {
// if (type == 'brigade') return Toast('小队已经建立完毕');
// return Toast('请先选择上一级地区');
// }
// this.changeType = type;
// this.showProvince = true;
},
sexSelect(e) {
this.formData.group_id = e.id
this.formData.group_name = e.name
this.showRole = false
},
c_idcard(e) {
this.$nextTick(() => {
this.formData.id_card = e.replace(/[^0-9X]/g, '')
})
},
// 上传头像
async afterReadAvatar(event) {
uni.showLoading({
title: '上传中'
})
upLoadImage({
filePath: event.file.url,
name: 'file'
}).then(res => {
this.formData.avatar = res.data.uri;
}).finally(() => {
uni.hideLoading();
})
},
// 新增图片
async afterRead(event) {
this.upLoad(event.file.url, event.name)
},
// 上传图片
upLoad(url, type) {
uni.showLoading({
title: '上传中请稍后'
})
upLoadImage({
filePath: url,
name: 'file'
}).then(res => {
this.formData.qualification[type] = res.data.uri
}).finally(() => {
uni.hideLoading();
})
},
// 创建账号
async addAcountNum() {
this.modelShow = false;
await this.$nextTick();
if (!this.formData.avatar) return Toast('头像未上传');
if (!this.formData.qualification.id_card || !this.formData.qualification.id_card_b) return Toast(
'身份证未上传');
if (!this.formData.qualification.bank_account || !this.formData.qualification.bank_account_b)
return Toast(
'银行卡未上传');
this.$refs.uForm.validate().then(async (e) => {
2023-12-27 21:58:55 +08:00
if (e) {
2023-12-27 19:21:26 +08:00
uni.showLoading()
2023-12-27 21:58:55 +08:00
console.log(this.formData)
2024-01-02 13:35:52 +08:00
2023-12-27 19:21:26 +08:00
let res = await register({
...this.formData,
});
2024-01-02 13:35:52 +08:00
console.log(res, 'res')
2023-12-27 19:21:26 +08:00
uni.hideLoading()
uni.showToast({
icon: "none",
title: "添加成功",
success: () => {
// setTimeout(() => {
// uni.$emit('initPersonnel');
// uni.navigateBack();
// }, 1000)
}
})
}
})
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.card {
// background-color: #fff;
// margin: 28rpx;
// padding: 28rpx;
// border-radius: 14rpx;
.cards {
margin: 28rpx;
padding: 28rpx;
border-radius: 14rpx;
background-color: #fff;
.avter {
display: flex;
justify-content: space-between;
// line-height: 150rpx;
align-items: center;
}
.up_list {
display: flex;
justify-content: space-between;
}
.uplode {
width: 243.57rpx;
height: 173.48rpx;
box-sizing: border-box;
padding-top: 30rpx;
border-radius: 15rpx;
border: 1px solid $theme-oa-color;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
color: $theme-oa-color;
position: relative;
.up {
position: absolute;
color: transparent;
}
}
}
.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: #0122c7;
content: "";
display: inline-block;
margin-right: 8rpx;
}
}
.btn {
margin-top: 32rpx;
// margin-bottom: 40rpx;
// width: 100%;
height: 84rpx;
background: $theme-oa-color;
border-radius: 42rpx 42rpx 42rpx 42rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
}
}
</style>