jiangyy
3 years ago
4 changed files with 619 additions and 1 deletions
@ -0,0 +1,168 @@ |
|||||
|
.bg-caiji { |
||||
|
|
||||
|
// background-color: rgba(189, 214, 255, 0.89); |
||||
|
height: 100%; |
||||
|
width: 100vw; |
||||
|
padding: 20px; |
||||
|
|
||||
|
.title { |
||||
|
text-align: center; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
.main { |
||||
|
padding-top: 20px; |
||||
|
// font-size: 40px; |
||||
|
|
||||
|
.div_tab{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.div_option{ |
||||
|
text-align: center; |
||||
|
color:#3e8ef7; |
||||
|
height:35px; |
||||
|
width:150px; |
||||
|
line-height: 35px; |
||||
|
padding:0 0; |
||||
|
border:1px solid #3e8ef7 ; |
||||
|
} |
||||
|
|
||||
|
.option_left{ |
||||
|
border-radius: 5px 0 0 5px; |
||||
|
} |
||||
|
.option_right{ |
||||
|
border-radius: 0 5px 5px 0; |
||||
|
} |
||||
|
|
||||
|
.option_select{ |
||||
|
color:#ffffff; |
||||
|
background-color:#3e8ef7 ; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
margin-top:10px; |
||||
|
border-radius: 5px; |
||||
|
background-color: rgba(255, 255, 255, 0.787); |
||||
|
|
||||
|
.member_title { |
||||
|
padding: 10px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
.content1 { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
border: 1px solid #e4e4e48e; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.div-btn { |
||||
|
margin-top: 30px; |
||||
|
padding-bottom: 20px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.btn { |
||||
|
width: 150px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.picker_content { |
||||
|
color: rgb(59, 59, 59); |
||||
|
} |
||||
|
|
||||
|
.bg-caiji-success { |
||||
|
background: url("../../assets/img/caiji-bc.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
height: 100vh; |
||||
|
width: 100vw; |
||||
|
text-align: center; |
||||
|
|
||||
|
.title { |
||||
|
// background-color: rgba(189, 214, 255, 0.89); |
||||
|
padding-top:30px; |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #333333; |
||||
|
display: flex; |
||||
|
height:25px; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
>img{ |
||||
|
width:27px; |
||||
|
height:25px; |
||||
|
} |
||||
|
.title_name{ |
||||
|
margin-left:5px; |
||||
|
margin-top:5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.div_tip{ |
||||
|
text-align: center; |
||||
|
margin-top:35px; |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #2E78E2; |
||||
|
line-height: 26px; |
||||
|
} |
||||
|
|
||||
|
.div_content{ |
||||
|
|
||||
|
margin:20px 10px 30px 10px; |
||||
|
padding:20px 16px; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 10px; |
||||
|
font-size: 16px; |
||||
|
font-family: Source Han Serif SC; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
|
||||
|
text-align: left; |
||||
|
|
||||
|
.content_long{ |
||||
|
display: flex; |
||||
|
justify-content: left; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.content_title{ |
||||
|
min-width: 85px; |
||||
|
// flex:0 0 85px; |
||||
|
flex-shrink: 0; |
||||
|
text-align: right; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.marginT10{ |
||||
|
margin-top:10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main { |
||||
|
margin-top: 100px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.icon-success { |
||||
|
font-size: 40px; |
||||
|
// width: 20px; |
||||
|
// height: 20px; |
||||
|
} |
||||
|
|
||||
|
.success-content { |
||||
|
margin-top: 10px; |
||||
|
font-size: 25px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,441 @@ |
|||||
|
<template> |
||||
|
<div class="bg-caiji"> |
||||
|
<div class="title"> |
||||
|
员工登记 |
||||
|
</div> |
||||
|
<div class="main"> |
||||
|
|
||||
|
<div class="div_tab"> |
||||
|
<div :class="['div_option','option_left',{'option_select':selectTab=='1'}]"> 员工登记</div> |
||||
|
<div :class="['div_option','option_right',{'option_select':selectTab=='2'}]">受众群体登记</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="content"> |
||||
|
|
||||
|
<mt-cell title="*企业名称"> |
||||
|
|
||||
|
<span style="margin-right:20px">{{shequName}}</span> |
||||
|
</mt-cell> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<mt-field class="my-field" |
||||
|
:disableClear="true" |
||||
|
:label="'*姓名'" |
||||
|
placeholder="请输入" |
||||
|
v-model="formData.name"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
<mt-field class="my-field" |
||||
|
:disableClear="true" |
||||
|
:label="'*手机号'" |
||||
|
placeholder="请输入" |
||||
|
type="tel" |
||||
|
v-model="formData.mobile"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
<mt-field class="my-field" |
||||
|
:disableClear="true" |
||||
|
:label="'*身份证'" |
||||
|
placeholder="请输入" |
||||
|
v-model="formData.idNum"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<div @click="handelSel('detNum')"> |
||||
|
<mt-cell :title="'*参加核酸检测次数'" |
||||
|
is-link> |
||||
|
<span class="picker_content" |
||||
|
v-if="formData.detNum">{{formData.detNumName}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
<div @click="handelSelData()"> |
||||
|
<mt-cell :title="'*最近一次核酸检测时间'" |
||||
|
is-link> |
||||
|
<span class="picker_content" |
||||
|
v-if="formData.detData">{{formData.detDataName}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="div-btn"> |
||||
|
<mt-button @click="handleSubmit" |
||||
|
type="primary" |
||||
|
class="btn" |
||||
|
:disabled="btnDisabled" |
||||
|
size="small">提交</mt-button> |
||||
|
</div> |
||||
|
|
||||
|
<mt-popup v-model="popupVisible" |
||||
|
popup-transition="popup-fade" |
||||
|
closeOnClickModal="true" |
||||
|
position="bottom"> |
||||
|
<mt-picker :slots="popupSlots" |
||||
|
value-key="label" |
||||
|
@change="onPickerChange" |
||||
|
showToolbar> |
||||
|
<div class="picker-toolbar-title"> |
||||
|
<div class="usi-btn-cancel" |
||||
|
@click="popupVisible = !popupVisible">取消</div> |
||||
|
<div class="">请选择</div> |
||||
|
<div class="usi-btn-sure" |
||||
|
@click="popupOk()">确定</div> |
||||
|
</div> |
||||
|
</mt-picker> |
||||
|
</mt-popup> |
||||
|
<mt-datetime-picker v-model="pickerVisible" |
||||
|
ref="pickerData" |
||||
|
type="date" |
||||
|
year-format="{value} 年" |
||||
|
month-format="{value} 月" |
||||
|
date-format="{value} 日" |
||||
|
@confirm="handleConfirm"> |
||||
|
</mt-datetime-picker> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
|
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import { Toast } from "mint-ui"; |
||||
|
import { MessageBox } from 'mint-ui'; |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import { messages } from '@/i18n' |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
selectTab: '1', |
||||
|
pickerVisible: '', |
||||
|
startDate: new Date(), |
||||
|
|
||||
|
formData: { |
||||
|
name: '', |
||||
|
idNum: '', |
||||
|
mobile: '', |
||||
|
detNum: null, |
||||
|
detNumName: '', |
||||
|
detData: '', |
||||
|
detDataName: '' |
||||
|
}, |
||||
|
|
||||
|
btnDisabled: false, |
||||
|
popupVisible: false, |
||||
|
|
||||
|
//二维码带来数据 |
||||
|
shequId: '',//社区id 6e511da6816e53af4cda952365a26eb9 德兴路 1202807601961984002 |
||||
|
shequName: '',//社区名称 |
||||
|
customerId: '',//客户id 45687aa479955f9d06204d415238f7cc |
||||
|
|
||||
|
selType: 'community',//弹出框所显示的数据类型：community、building、unit、room |
||||
|
pickerData: [], |
||||
|
|
||||
|
selObj: {}, |
||||
|
|
||||
|
showMessagsBox: false,//是否显示人员未填写提示弹出框 |
||||
|
|
||||
|
detNumList: [],//参加核酸次数list |
||||
|
|
||||
|
popupSlots: [//问题类型弹框数据 |
||||
|
{ |
||||
|
values: [] |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: {}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
created () { |
||||
|
console.log(this.$route) |
||||
|
|
||||
|
this.shequId = this.$route.params.id |
||||
|
this.customerId = this.$route.query.customerId |
||||
|
this.shequName = this.$route.query.name |
||||
|
document.title = this.shequName + '信息管理平台' |
||||
|
}, |
||||
|
mounted () { |
||||
|
|
||||
|
|
||||
|
let envShow = process.env.VUE_APP_NODE_ENV |
||||
|
console.log('环境', envShow) |
||||
|
|
||||
|
let internalShequId = ['1202807601961984002', '6e511da6816e53af4cda952365a26eb9', 'b058eb82d65d922fec9dc84f0348fc6a', '630c3c2dd1cd7a4d198c8558bce88324'] |
||||
|
// let internalShequId = ['1202807601961984002',] |
||||
|
// if (envShow === 'dev' || envShow === 'prod:sit') { // 开发环境 |
||||
|
// internalShequId = '6e511da6816e53af4cda952365a26eb9' |
||||
|
// } else if (envShow === 'prod:uat') { // 体验 |
||||
|
// internalShequId = '6e511da6816e53af4cda952365a26eb9' |
||||
|
// } else if (envShow === 'prod') { // 生产 |
||||
|
// 微笑崂山下的小寨子社区：b058eb82d65d922fec9dc84f0348fc6a |
||||
|
// 亿联街道下的亿联社区：630c3c2dd1cd7a4d198c8558bce88324 |
||||
|
// internalShequId = '1202807601961984002' |
||||
|
// } else if (envShow === 'shibei_prod') { // 生产 |
||||
|
// internalShequId = '1202807601961984002' |
||||
|
// } |
||||
|
|
||||
|
this.formData.customerId = this.customerId |
||||
|
if (internalShequId.indexOf(this.shequId) > -1) { |
||||
|
this.formData.origin = 'internal' |
||||
|
} else { |
||||
|
this.formData.origin = 'external' |
||||
|
} |
||||
|
|
||||
|
this.detNumList = [] |
||||
|
for (let i = 0; i < 5; i++) { |
||||
|
let obj = { |
||||
|
value: i + '', |
||||
|
label: i + '次', |
||||
|
} |
||||
|
this.detNumList.push(obj) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handelSelData () { |
||||
|
this.$refs.pickerData.open(); // 触发 |
||||
|
// this.$refs.pickerData.close() ; // 关闭 |
||||
|
}, |
||||
|
|
||||
|
handleConfirm (val) { |
||||
|
let time = new Date(val); |
||||
|
|
||||
|
let year = time.getFullYear() |
||||
|
console.log(year) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handelSel (selType) { |
||||
|
this.selType = selType |
||||
|
|
||||
|
if (selType === 'detNum') { |
||||
|
|
||||
|
this.pickerData = this.detNumList |
||||
|
} |
||||
|
|
||||
|
let obj = { |
||||
|
values: this.pickerData |
||||
|
} |
||||
|
|
||||
|
this.popupSlots = [] |
||||
|
this.popupSlots.push(obj) |
||||
|
this.popupVisible = !this.popupVisible |
||||
|
}, |
||||
|
|
||||
|
async handleSubmit () { |
||||
|
let message = this.validataFormData() |
||||
|
|
||||
|
if (message) { |
||||
|
if (this.showMessagsBox) { |
||||
|
MessageBox.confirm(message).then(action => { |
||||
|
this.submit() |
||||
|
}); |
||||
|
} else { |
||||
|
Toast({ |
||||
|
message: message, |
||||
|
duration: 3000 |
||||
|
}); |
||||
|
} |
||||
|
} else { |
||||
|
this.submit() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
async submit () { |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
console.log(this.formData) |
||||
|
|
||||
|
this.btnDisabled = true |
||||
|
this.startLoading() |
||||
|
const url = "/epmetuser/icresicollect/save" |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, this.formData) |
||||
|
this.endLoading() |
||||
|
this.btnDisabled = false |
||||
|
if (code === 0) { |
||||
|
this.formData.shequName = this.shequName |
||||
|
this.$router.replace({ |
||||
|
name: 'caijisuccess', |
||||
|
query: { |
||||
|
formData: this.formData |
||||
|
} |
||||
|
}) |
||||
|
// Toast({ |
||||
|
// message: '提交成功', |
||||
|
// duration: 3000 |
||||
|
// }); |
||||
|
|
||||
|
} else { |
||||
|
Toast({ |
||||
|
message: msg, |
||||
|
duration: 3000 |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//必填验证 |
||||
|
validataFormData () { |
||||
|
|
||||
|
let aletMessage = '' |
||||
|
this.showMessagsBox = false |
||||
|
if (this.formData.origin === 'internal') {//内部 |
||||
|
if (!this.selVillage) { |
||||
|
aletMessage = '请选择小区' |
||||
|
|
||||
|
return aletMessage |
||||
|
} |
||||
|
if (!this.selBuild) { |
||||
|
aletMessage = '请选择楼栋' |
||||
|
return aletMessage |
||||
|
} |
||||
|
|
||||
|
if (!this.selUnit) {//没有选择单元 |
||||
|
aletMessage = '请选择单元' |
||||
|
return aletMessage |
||||
|
|
||||
|
} else {//选择了单元 |
||||
|
if (this.selUnit.value === 'other') {//单元选择了其他 |
||||
|
if (!this.unitContent) { |
||||
|
aletMessage = '请填写单元号' |
||||
|
return aletMessage |
||||
|
} |
||||
|
|
||||
|
if (!this.homeContent) {//房屋必须填写内容 |
||||
|
aletMessage = '请填写房屋' |
||||
|
return aletMessage |
||||
|
} |
||||
|
|
||||
|
} else {//单元没有选择其他 |
||||
|
if (!this.selHome) { |
||||
|
aletMessage = '请选择房屋' |
||||
|
return aletMessage |
||||
|
|
||||
|
} else if (this.selHome.value === 'other' && !this.homeContent) { |
||||
|
aletMessage = '请填写房屋' |
||||
|
return aletMessage |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
} else { |
||||
|
if (!this.formData.address) { |
||||
|
aletMessage = '请填写地址' |
||||
|
return aletMessage |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (!this.selHomeType) { |
||||
|
aletMessage = '请选择房屋类型' |
||||
|
return aletMessage |
||||
|
} |
||||
|
if (!this.formData.houseHolderName) { |
||||
|
aletMessage = '请填写户主姓名' |
||||
|
return aletMessage |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
popupOk () { |
||||
|
|
||||
|
if (this.selType === 'detNum') { |
||||
|
this.formData.detNum = this.selObj.value |
||||
|
this.formData.detNumName = this.selObj.label |
||||
|
} |
||||
|
this.popupVisible = false |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
onPickerChange (picker, values) { |
||||
|
|
||||
|
this.selObj = values[0] |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
beforeDestroy () { |
||||
|
document.title = messages[val].brand.lg |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/pages/staffRegister.scss"; |
||||
|
/deep/ .mint-cell-wrapper { |
||||
|
padding: 0 5px 0 0; |
||||
|
} |
||||
|
.my-field /deep/ .mint-field-core { |
||||
|
text-align: right; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .mint-popup-bottom { |
||||
|
height: 300px; |
||||
|
width: 100vw; |
||||
|
} |
||||
|
|
||||
|
// /deep/ .picker { |
||||
|
// height: 300px; |
||||
|
// } |
||||
|
/deep/ .picker-items { |
||||
|
height: 250px; |
||||
|
width: 100vw; |
||||
|
} |
||||
|
/deep/ .picker-slot-center { |
||||
|
width: 100vw; |
||||
|
} |
||||
|
/deep/ .picker-center-highlight { |
||||
|
top: 35%; |
||||
|
} |
||||
|
.picker-toolbar-title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
background-color: #eee; |
||||
|
height: 44px; |
||||
|
line-height: 44px; |
||||
|
font-size: 16px; |
||||
|
.usi-btn-cancel, |
||||
|
.usi-btn-sure { |
||||
|
color: #26a2ff; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue