321 lines
9.3 KiB
Vue
321 lines
9.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="container">
|
||
|
||
<view class="form-sub">
|
||
<u-form :model="model1" ref="uForm" label-width="90px" class="demo-ruleForm" size="mini">
|
||
<view style="position: relative;">
|
||
<view style="position: absolute;left: -10px;color: #3d4b70;top: -3px;">*</view>
|
||
</view>
|
||
|
||
<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">基本信息填写</view>
|
||
<u-form-item label="姓名" prop="userInfo.Name" borderBottom ref="item1">
|
||
<u--input v-model="model1.userInfo.Name" border="none" customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="性别" prop="userInfo.Sex" borderBottom @click="showSex = true;" ref="item1">
|
||
<u--input v-model="model1.userInfo.Sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none" suffixIcon="arrow-right" fontSize="14px"
|
||
customStyle="margin:0px;display:flex;padding:3px 9px" suffixIconStyle="font-size:12px"></u--input>
|
||
<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
|
||
</u-form-item>
|
||
<u-form-item label="手机号码" prop="userInfo.Phone" borderBottom ref="item1">
|
||
<u--input v-model="model1.userInfo.Phone" border="none" customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="身份证号码" prop="userInfo.ID_CARD" borderBottom ref="item1">
|
||
<u--input v-model="model1.userInfo.ID_CARD" border="none" customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="入职时间" prop="userInfo.InTime" borderBottom ref="item1" @click="showCheckDate()">
|
||
<u--input disabledColor="#fff" v-model="model1.userInfo.InTime" disabled placeholder="请选择入职时间" suffixIcon="arrow-right" suffixIconStyle="font-size:12px" fontSize="14px"
|
||
customStyle="margin:0px;display:flex;padding:3px 9px" border="none">
|
||
</u--input>
|
||
|
||
<!-- <u--input v-model="model1.userInfo.InTime" border="none"></u--input> -->
|
||
</u-form-item>
|
||
<u-form-item label="工龄" prop="userInfo.WORKINGYEAR" borderBottom ref="item1" @click="pickerShow = true">
|
||
<u--input disabledColor="#fff" disabled v-model="model1.userInfo.WORKINGYEAR" border="none" suffixIcon="arrow-right" suffixIconStyle="font-size:12px" fontSize="14px"
|
||
customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
|
||
</u-form-item>
|
||
</u-form>
|
||
<view style="display: flex;flex-direction: row;" class="bottom-button">
|
||
<u-button type="primary" @click="reset" color="#3d4b70" :plain="true" style="margin-right: 5px;">重置</u-button>
|
||
<u-button type="primary" @click="submit" color="#3d4b70" style="margin-left: 5px;" v-if="loading == false">提交</u-button>
|
||
<u-button type="primary" loading loadingText="加载中" color="#3d4b70" style="margin-left: 5px;" v-if="loading == true">提交</u-button>
|
||
</view>
|
||
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
|
||
</u-action-sheet>
|
||
<u-datetime-picker :show="dateTimePickerInfo.showCheckDate" mode="date" v-model='dateTimePickerInfo.defaultDateTime' :formatter="formatter" @confirm="handleCheckDate"
|
||
@close="dateTimePickerInfo.showCheckDate = false;" @cancel="dateTimePickerInfo.showCheckDate = false;"></u-datetime-picker>
|
||
<u-picker :show="pickerShow" :columns="pickerColumns" @confirm="pickerConfirm" @cancel="pickerCancel"></u-picker>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
RegisterUser
|
||
} from '../../services/apply.js'
|
||
import {
|
||
isChinaMobilePhone,
|
||
easyCheckID,
|
||
getNowFormatDate
|
||
} from '../../utils/common.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
showSex: false,
|
||
formatter: null,
|
||
pickerShow: false,
|
||
loading:false,
|
||
pickerColumns: [Array(60).fill(null).map((_, i) => i)],
|
||
model1: {
|
||
userInfo: {
|
||
Name: '',
|
||
Sex: '',
|
||
Phone: '',
|
||
ID_CARD: '',
|
||
InTime: getNowFormatDate(),
|
||
WORKINGYEAR: '',
|
||
},
|
||
},
|
||
dateTimePickerInfo: {
|
||
showCheckDate: false,
|
||
defaultDateTime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
|
||
value: '',
|
||
},
|
||
actions: [{
|
||
name: '男',
|
||
},
|
||
{
|
||
name: '女',
|
||
},
|
||
],
|
||
rules: {
|
||
'userInfo.Name': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写姓名',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'userInfo.Sex': {
|
||
type: 'string',
|
||
max: 1,
|
||
required: true,
|
||
message: '请选择男或女',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'userInfo.Phone': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写手机号',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'userInfo.ID_CARD': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写身份证号',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'userInfo.InTime': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择入职时间',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
},
|
||
radio: '',
|
||
switchVal: false
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
methods: {
|
||
sexSelect(e) {
|
||
this.model1.userInfo.Sex = e.name
|
||
this.$refs.uForm.validateField('userInfo.Sex')
|
||
},
|
||
showCheckDate() {
|
||
if (this.model1.userInfo.InTime == null) {
|
||
this.model1.userInfo.InTime = uni.$u.timeFormat(new Date(),
|
||
'yyyy-mm-dd')
|
||
}
|
||
this.dateTimePickerInfo = {
|
||
showCheckDate: true,
|
||
defaultDateTime: this.model1.userInfo.InTime,
|
||
}
|
||
},
|
||
handleCheckDate(e) {
|
||
// let v = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
||
this.model1.userInfo.InTime = uni.$u.timeFormat(e.value,
|
||
'yyyy-mm-dd')
|
||
this.dateTimePickerInfo.showCheckDate = false
|
||
},
|
||
pickerConfirm(e) {
|
||
this.model1.userInfo.WORKINGYEAR = e.value.toString()
|
||
this.pickerShow = false
|
||
},
|
||
pickerCancel(e) {
|
||
this.pickerShow = false
|
||
},
|
||
reset() {
|
||
this.model1.userInfo = {
|
||
Name: '',
|
||
Sex: '',
|
||
Phone: '',
|
||
ID_CARD: '',
|
||
InTime: '',
|
||
WORKINGYEAR: '',
|
||
}
|
||
},
|
||
submit() {
|
||
if (this.model1.userInfo.Name == '' ||
|
||
this.model1.userInfo.Sex == '' ||
|
||
this.model1.userInfo.Phone == '' ||
|
||
this.model1.userInfo.ID_CARD == '' ||
|
||
this.model1.userInfo.InTime == '') {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '信息不能为空'
|
||
})
|
||
return
|
||
}
|
||
if (isChinaMobilePhone(this.model1.userInfo.Phone) == false) {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '手机号码格式不正确'
|
||
})
|
||
return
|
||
}
|
||
if (easyCheckID(this.model1.userInfo.ID_CARD) == false) {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '身份证号码格式不正确'
|
||
})
|
||
return
|
||
}
|
||
this.loading = true
|
||
const json = {
|
||
Name: this.model1.userInfo.Name,
|
||
Sex: this.model1.userInfo.Sex == '男'?'1':'0',
|
||
Phone: this.model1.userInfo.Phone,
|
||
ID_CARD: this.model1.userInfo.ID_CARD,
|
||
InTime: this.model1.userInfo.InTime,
|
||
WORKINGYEAR: this.model1.userInfo.WORKINGYEAR,
|
||
}
|
||
// const json = {
|
||
// Name: '云',
|
||
// Sex: '0',
|
||
// Phone: '18480141719',
|
||
// ID_CARD: '230182200000000000',
|
||
// InTime: '2024-07-25',
|
||
// WORKINGYEAR: '0',
|
||
// }
|
||
RegisterUser(json).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log('成功', res);
|
||
this.loading = false
|
||
uni.navigateTo({
|
||
url: '/pages/apply/complete?type=success'
|
||
})
|
||
} else {
|
||
this.loading = false
|
||
uni.navigateTo({
|
||
url: `/pages/apply/complete?type=failed&title=${res.msg}`
|
||
})
|
||
}
|
||
|
||
}).catch((err) => {
|
||
this.loading = false
|
||
uni.navigateTo({
|
||
url: `/pages/apply/complete?type=failed&title=${err.msg}`
|
||
})
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
background-color: #f4f7ff;
|
||
width: 100%;
|
||
/* #ifndef APP-PLUS */
|
||
height: calc(100vh - 44px - 50px); // 非APP平台下生效
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS */
|
||
height: calc(100vh); // APP平台下生效
|
||
/* #endif */
|
||
}
|
||
|
||
.container {
|
||
padding: 20px 16px 10px 16px;
|
||
}
|
||
|
||
.form-sub {
|
||
/* margin: 20px 16px 10px 16px; */
|
||
/* border: 1px solid #EBEEF5; */
|
||
padding: 20px 30px 10px 30px;
|
||
/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.demo-ruleForm>>>.u-form-item__body__left__content__label {
|
||
font-size: 14px;
|
||
color: #8e8b9c;
|
||
/* justify-content: flex-start; */
|
||
}
|
||
|
||
.demo-ruleForm>>>.u-form-item__body__left__content__ {
|
||
left: -11px;
|
||
top: 0px
|
||
}
|
||
|
||
.demo-ruleForm>>>.u-textarea__field {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.demo-ruleForm>>>.u-cell__title-text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-textarea {
|
||
padding: 9px 9px 25px 9px;
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-form-item__body__left__content__label {
|
||
font-size: 14px;
|
||
color: #8e8b9c;
|
||
/* justify-content: flex-start; */
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-form-item__body__left__content__ {
|
||
left: -11px;
|
||
top: 0px
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-textarea__field {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.demo-ruleForm-thr>>>.u-cell__title-text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.bottom-button {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 10px 16px;
|
||
box-sizing: border-box;
|
||
background: #f4f7ff;
|
||
z-index: 999;
|
||
}
|
||
</style> |