qrcode-app/pages/apply/index.vue

356 lines
10 KiB
Vue
Raw Normal View History

2024-07-24 14:45:27 +08:00
<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>
2024-07-31 09:59:56 +08:00
<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>
2024-07-24 14:45:27 +08:00
</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'
2024-09-02 17:37:50 +08:00
import config from '../../config/common.js'
2024-07-25 11:35:20 +08:00
import {
isChinaMobilePhone,
easyCheckID,
getNowFormatDate
2024-07-25 11:35:20 +08:00
} from '../../utils/common.js'
2024-07-24 14:45:27 +08:00
export default {
data() {
return {
showSex: false,
2024-09-02 17:37:50 +08:00
appurl: config.uni_app_url,
2024-07-24 14:45:27 +08:00
formatter: null,
pickerShow: false,
2024-09-02 17:37:50 +08:00
loading: false,
2024-07-24 14:45:27 +08:00
pickerColumns: [Array(60).fill(null).map((_, i) => i)],
model1: {
userInfo: {
Name: '',
Sex: '',
Phone: '',
ID_CARD: '',
InTime: getNowFormatDate(),
2024-07-25 11:35:20 +08:00
WORKINGYEAR: '',
},
},
2024-07-24 14:45:27 +08:00
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']
},
2024-07-25 11:35:20 +08:00
'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']
},
2024-07-24 14:45:27 +08:00
},
radio: '',
switchVal: false
}
},
onLoad(option) {
// this.model.ID = option.ID
// this.model.TaskID = option.taskID
// this.TaskID = option.taskID
// this.tableKey = option.tableKey
// this.ORG_ID = uni.getStorageSync('orgId')
// if (option.ID != null && option.ID != 'null') {
// this.loadData()
// } else {
// this.isLoadOK = true
// this.model.ID = guid()
// this.model.ORG_ID = this.ORG_ID
// this.isDIY = true
// this.listPropValUpload.push(this.model.ID)
// // this.model.Nav_ListSafeCheckDetail = null
// }
},
2024-07-24 14:45:27 +08:00
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() {
2024-07-25 11:35:20 +08:00
if (this.model1.userInfo.Name == '' ||
this.model1.userInfo.Sex == '' ||
this.model1.userInfo.Phone == '' ||
this.model1.userInfo.ID_CARD == '' ||
this.model1.userInfo.InTime == '') {
2024-07-25 11:35:20 +08:00
uni.showToast({
icon: 'error',
title: '信息不能为空'
})
return
2024-07-24 14:45:27 +08:00
}
2024-07-25 11:35:20 +08:00
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
}
2024-07-31 09:59:56 +08:00
this.loading = true
const json = {
2024-09-02 17:37:50 +08:00
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,
}
2024-07-25 14:55:26 +08:00
// const json = {
// Name: '云',
// Sex: '0',
// Phone: '18480141719',
// ID_CARD: '230182200000000000',
// InTime: '2024-07-25',
// WORKINGYEAR: '0',
// }
2024-07-24 14:45:27 +08:00
RegisterUser(json).then((res) => {
2024-07-25 11:35:20 +08:00
if (res.code == 200) {
2024-07-31 09:59:56 +08:00
this.loading = false
2024-09-02 17:37:50 +08:00
uni.showToast({
title: '注册成功!',
icon: 'none'
2024-07-25 11:35:20 +08:00
})
2024-09-02 17:37:50 +08:00
setTimeout(() => {
uni.hideToast();
location.href = this.appurl
// uni.redirectTo({
// url: '/pages/webview/webview?url=' + this.appurl
// })
},1500)
// uni.navigateTo({
// url: '/pages/apply/complete?type=success'
// })
2024-07-25 11:35:20 +08:00
} else {
2024-07-31 09:59:56 +08:00
this.loading = false
2024-09-02 17:37:50 +08:00
uni.showToast({
title: res.msg,
icon: 'none'
2024-07-25 11:35:20 +08:00
})
2024-09-02 17:37:50 +08:00
// uni.navigateTo({
// url: `/pages/apply/complete?type=failed&title=${res.msg}`
// })
2024-07-25 11:35:20 +08:00
}
2024-07-24 14:45:27 +08:00
}).catch((err) => {
2024-07-31 09:59:56 +08:00
this.loading = false
2024-07-25 11:35:20 +08:00
uni.navigateTo({
url: `/pages/apply/complete?type=failed&title=${err.msg}`
})
2024-07-24 14:45:27 +08:00
})
},
}
}
</script>
<style>
.content {
background-color: #f4f7ff;
width: 100%;
2024-07-25 11:35:20 +08:00
/* #ifndef APP-PLUS */
height: calc(100vh - 44px - 50px); // 非APP平台下生效
/* #endif */
/* #ifdef APP-PLUS */
height: calc(100vh); // APP平台下生效
/* #endif */
2024-07-24 14:45:27 +08:00
}
.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>