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