<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-25 09:59:53
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-07-20 09:47:46
|
* @Description: 信息填写页面
|
-->
|
<template>
|
<div class="upload-userinfo-page">
|
<v-navbar title="订单申请"></v-navbar>
|
<div class="steps-box">
|
<div class="steps">
|
<p></p>
|
<div class="step-1">1</div>
|
<div class="step-2">2</div>
|
<div class="step-3">3</div>
|
<div class="step-4">4</div>
|
<div class="step-5">5</div>
|
</div>
|
</div>
|
<div class="mation-box">
|
<p>个人信息填写</p>
|
<p>请确保资料填写的准确性，以便顺利申请</p>
|
</div>
|
<div class="user-info-box">
|
<h-cell
|
v-model="degree"
|
placeholder="请选择"
|
label="最高学历"
|
readonly
|
isLink
|
isMust
|
@click.native="getSelect(1)"
|
></h-cell>
|
<h-cell
|
v-model="socialIdentity"
|
placeholder="请选择"
|
label="社会身份"
|
readonly
|
isLink
|
isMust
|
@click.native="getSelect(2)"
|
></h-cell>
|
<h-cell
|
v-model="areListHome"
|
placeholder="请选择"
|
label="现居住地址"
|
readonly
|
isLink
|
isMust
|
@click.native="getSelect(3)"
|
></h-cell>
|
<h-cell max="30" v-model="userMation.homeAddr" isMust placeholder="请输入居住详细地址" label="居住详细地址"></h-cell>
|
<h-cell max="20" v-model="userMation.email" isMust placeholder="请输入电子邮箱" label="电子邮箱" @blur="changeEmail"></h-cell>
|
<h-cell
|
v-if="userMation.socialIdentity != 2&&userMation.socialIdentity != 3"
|
max="20"
|
isMust
|
v-model="userMation.companyName"
|
placeholder="请输入公司名称"
|
label="公司名称"
|
></h-cell>
|
<h-cell
|
v-if="userMation.socialIdentity != 2&&userMation.socialIdentity != 3"
|
v-model="userMation.companyPhone"
|
isMust
|
placeholder="请输入公司电话"
|
label="公司电话"
|
max="11"
|
></h-cell>
|
<h-cell
|
v-if="userMation.socialIdentity != 2&&userMation.socialIdentity != 3"
|
v-model="areListMer"
|
placeholder="请选择"
|
label="公司地址"
|
readonly
|
isLink
|
isMust
|
@click.native="getSelect(4)"
|
></h-cell>
|
<h-cell
|
v-if="userMation.socialIdentity != 2&&userMation.socialIdentity != 3"
|
max="30"
|
isMust
|
v-model="userMation.companyAddr"
|
placeholder="请输入公司详细地址"
|
label="公司详细地址"
|
></h-cell>
|
<h-cell v-model="userMation.contactName1" isMust placeholder="请输入第一联系人姓名" label="第一联系人姓名"></h-cell>
|
<h-cell
|
v-model="contactRelation1"
|
placeholder="请选择"
|
label="第一联系人关系"
|
readonly
|
isLink
|
isMust
|
@click.native="getSelect(5)"
|
></h-cell>
|
<h-cell
|
v-model="userMation.contactMblNo1"
|
placeholder="请输入第一联系人手机号"
|
label="第一联系人手机号"
|
isMust
|
max="11"
|
></h-cell>
|
<h-cell v-model="userMation.contactName2" :isMust='isMustReq' placeholder="请输入第二联系人姓名" label="第二联系人姓名"></h-cell>
|
<h-cell
|
v-model="contactRelation2"
|
placeholder="请选择"
|
label="第二联系人关系"
|
:isMust='isMustReq'
|
readonly
|
isLink
|
@click.native="getSelect(6)"
|
></h-cell>
|
<h-cell
|
v-model="userMation.contactMblNo2"
|
:isMust='isMustReq'
|
placeholder="请输入第二联系人手机号"
|
label="第二联系人手机号"
|
max="11"
|
></h-cell>
|
<h-cell
|
v-if=" projId == 100001"
|
v-model="contactRelation3"
|
placeholder="请选择"
|
label="第三联系人关系"
|
readonly
|
isLink
|
@click.native="getSelect(7)"
|
></h-cell>
|
<h-cell v-if=" projId == 100001" v-model="userMation.contactName3" placeholder="请输入第三联系人姓名" label="第三联系人姓名"></h-cell>
|
<h-cell
|
v-if=" projId == 100001"
|
v-model="userMation.contactMblNo3"
|
placeholder="请输入第三联系人手机号"
|
label="第三联系人手机号"
|
max="11"
|
></h-cell>
|
</div>
|
<div class="btn-box">
|
<button @click="goNext">下一步</button>
|
</div>
|
<van-popup v-model="showPickerOne" round position="bottom">
|
<van-picker
|
value-key="name"
|
show-toolbar
|
:columns="columnsOne"
|
@cancel="showPickerOne = false"
|
@confirm="onConfirmOne"
|
/>
|
</van-popup>
|
<van-popup v-model="showPickerTwo" round position="bottom">
|
<van-picker
|
value-key="text"
|
show-toolbar
|
item-height="50"
|
visible-item-count="5"
|
:columns="columnsTwo"
|
@cancel="showPickerTwo = false"
|
@confirm="onConfirmTwo"
|
/>
|
</van-popup>
|
<van-popup v-model="showPickerThree" round position="bottom">
|
<van-picker
|
value-key="name"
|
show-toolbar
|
item-height="50"
|
visible-item-count="5"
|
:columns="columnsThree"
|
@cancel="showPickerThree = false"
|
@confirm="onConfirmThree"
|
/>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { Picker } from "vant";
|
import { Popup } from "vant";
|
|
Vue.use(Popup);
|
Vue.use(Picker);
|
export default {
|
data() {
|
return {
|
showPickerOne: false,
|
showPickerTwo: false,
|
showPickerThree:false,
|
columnsOne: [], //其他选择
|
columnsTwo: [], //地区选择
|
columnsThree:[],
|
userMation: {}, //个人信息对象
|
areListHome: "", //显示的居中地址
|
areListMer: "", //显示的公司地址
|
homeOrMer: "", //用于判断弹出层附值
|
degree: "",
|
socialIdentity: "",
|
contactRelation1: "",
|
contactRelation2: "",
|
contactRelation3:"",
|
isMustReq:false
|
};
|
},
|
computed: {
|
projId() {
|
return localStorage.getItem("projId");
|
},
|
},
|
created() {
|
this.columnsTwo = this.$store.state.areaList;
|
this.$api.initUserInfo().then(res => {
|
this.userMation = res.body;
|
this.isMustReq = res.body.projId == 100001;
|
//返显最高学历
|
res.body.degreeList.forEach(e => {
|
if (e.code == res.body.degree) {
|
this.degree = e.name;
|
}
|
});
|
//返显社会角色
|
res.body.socialIdentityList.forEach(e => {
|
if (e.code == res.body.socialIdentity) {
|
this.socialIdentity = e.name;
|
}
|
});
|
//返显联系一关系
|
res.body.contactRelation1List.forEach(e => {
|
if (e.code == res.body.contactRelation1) {
|
this.contactRelation1 = e.name;
|
}
|
});
|
//返显联系二关系
|
res.body.contactRelation2List.forEach(e => {
|
if (e.code == res.body.contactRelation2) {
|
this.contactRelation2 = e.name;
|
}
|
});
|
res.body.contactRelation3List.forEach(e => {
|
if (e.code == res.body.contactRelation3) {
|
this.contactRelation3 = e.name;
|
}
|
});
|
// 返显居住地区
|
var pr = "",
|
ci = "",
|
ar = "";
|
this.$store.state.areaList.forEach(e => {
|
if (e.code == res.body.homeProv) {
|
pr = e.text;
|
e.children.forEach(i => {
|
if (i.code == res.body.homeCity) {
|
ci = i.text;
|
i.children.forEach(c => {
|
if (c.code == res.body.homeArea) {
|
ar = c.text;
|
}
|
});
|
}
|
});
|
}
|
});
|
if (pr && ci && ar) {
|
this.areListHome = pr + "/" + ci + "/" + ar;
|
}
|
|
//返显公司地址
|
var pr2 = "",
|
ci2 = "",
|
ar2 = "";
|
this.$store.state.areaList.forEach(e => {
|
if (e.code == res.body.companyProv) {
|
pr2 = e.text;
|
e.children.forEach(i => {
|
if (i.code == res.body.companyCity) {
|
ci2 = i.text;
|
i.children.forEach(c => {
|
if (c.code == res.body.companyArea) {
|
ar2 = c.text;
|
}
|
});
|
}
|
});
|
}
|
});
|
if (pr2 && ci2 && ar2) {
|
this.areListHome = pr2 + "/" + ci2 + "/" + ar2;
|
}
|
});
|
},
|
methods: {
|
changeEmail(){
|
let isHave = this.userMation.email.indexOf("＠");
|
let email = this.userMation.email;
|
if(isHave>-1&&email){
|
let beforeStr = email.substring(0,isHave);
|
let afterStr = email.substring(isHave+1,email.length);
|
this.userMation.email = beforeStr+"@"+afterStr;
|
}
|
},
|
// 下一步
|
goNext() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.degree)) {
|
v.toast("请选择最高学历");
|
return;
|
}
|
if (v.checkValEmpty(this.socialIdentity)) {
|
v.toast("请选择社会身份");
|
return;
|
}
|
if (v.checkValEmpty(this.areListHome)) {
|
v.toast("请选择居住地址");
|
return;
|
}
|
if (v.checkValEmpty(this.userMation.homeAddr)) {
|
v.toast("请输入居住详细地址");
|
return;
|
}
|
// if (!v.checkAddress(this.userMation.homeAddr)) {
|
// v.toast("请输入正确的居住详细地址");
|
// return;
|
// }
|
if (v.checkValEmpty(this.userMation.email)) {
|
v.toast("请输入电子邮箱");
|
return;
|
}
|
if (!v.checkEmail(this.userMation.email)) {
|
v.toast("请输入正确的电子邮箱");
|
return;
|
}
|
if (this.userMation.socialIdentity != 2 && this.userMation.socialIdentity != 3) {
|
if (v.checkValEmpty(this.userMation.companyName)) {
|
v.toast("请输入公司名称");
|
return;
|
}
|
if (!v.checkCompany(this.userMation.companyName)) {
|
v.toast("请输入正确的公司名称");
|
return;
|
}
|
if (v.checkValEmpty(this.userMation.companyPhone)) {
|
v.toast("请输入公司电话");
|
return;
|
}
|
// if (!v.checkCompanyPhone(this.userMation.companyPhone)) {
|
// v.toast("请输入正确的公司电话");
|
// return;
|
// }
|
if (v.checkValEmpty(this.areListMer)) {
|
v.toast("请选择公司地址");
|
return;
|
}
|
if (v.checkValEmpty(this.userMation.companyAddr)) {
|
v.toast("请输入公司详细地址");
|
return;
|
}
|
// if (!v.checkAddress(this.userMation.companyAddr)) {
|
// v.toast("请输入正确的公司详细地址");
|
// return;
|
// }
|
}
|
if (v.checkValEmpty(this.userMation.contactName1)) {
|
v.toast("请输入第一联系人姓名");
|
return;
|
}
|
// if (!v.checkRealName(this.userMation.contactName1)) {
|
// v.toast("请输入正确的第一联系人姓名");
|
// return;
|
// }
|
if (v.checkValEmpty(this.contactRelation1)) {
|
v.toast("请选择第一联系人关系");
|
return;
|
}
|
if (v.checkValEmpty(this.userMation.contactMblNo1)) {
|
v.toast("请输入第一联系人手机号");
|
return;
|
}
|
if (!v.checkPhone(this.userMation.contactMblNo1)) {
|
v.toast("请输入正确的第一联系人手机号");
|
return;
|
}
|
|
// F1项目添加第二联系人必填
|
if(this.isMustReq){
|
if (v.checkValEmpty(this.userMation.contactName2)) {
|
v.toast("请输入第二联系人姓名");
|
return;
|
}
|
// if (!v.checkRealName(this.userMation.contactName2)) {
|
// v.toast("请输入正确的第二联系人姓名");
|
// return;
|
// }
|
if (v.checkValEmpty(this.contactRelation2)) {
|
v.toast("请选择第二联系人关系");
|
return;
|
}
|
if (v.checkValEmpty(this.userMation.contactMblNo2)) {
|
v.toast("请输入第二联系人手机号");
|
return;
|
}
|
if (!v.checkPhone(this.userMation.contactMblNo2)) {
|
v.toast("请输入正确的第二联系人手机号");
|
return;
|
}
|
// 第三联系人
|
if (v.checkValEmpty(this.userMation.contactName2)) {
|
v.toast("请输入第二联系人姓名");
|
return;
|
}
|
// if (!v.checkRealName(this.userMation.contactName2)) {
|
// v.toast("请输入正确的第二联系人姓名");
|
// return;
|
// }
|
// if (v.checkValEmpty(this.contactRelation3)) {
|
// v.toast("请选择第二联系人关系");
|
// return;
|
// }
|
// if (v.checkValEmpty(this.userMation.contactMblNo3)) {
|
// v.toast("请输入第二联系人手机号");
|
// return;
|
// }
|
// if (!v.checkPhone(this.userMation.contactMblNo3)) {
|
// v.toast("请输入正确的第二联系人手机号");
|
// return;
|
// }
|
}
|
this.$api.saveUserInfo({...this.userMation}).then(res => {
|
this.$router.push({
|
path: "/order-handling/contract-signing",
|
});
|
window.sessionStorage.backUrl = "/order-handling/upload-userInfo"
|
});
|
},
|
// 弹出层选择
|
getSelect(i) {
|
this.homeOrMer = i;
|
if (i == 1) {
|
this.showPickerOne = true;
|
this.columnsOne = this.userMation.degreeList;
|
}
|
if (i == 2) {
|
this.showPickerOne = true;
|
this.columnsOne = this.userMation.socialIdentityList;
|
}
|
if (i == 3) {
|
this.showPickerTwo = true;
|
// this.columnsTwo = this.$store.state.areaList;
|
}
|
if (i == 4) {
|
this.showPickerTwo = true;
|
// this.columnsTwo = this.$store.state.areaList;
|
}
|
if (i == 5) {
|
this.showPickerOne = true;
|
this.columnsOne = this.userMation.contactRelation1List;
|
|
}
|
if (i == 6) {
|
this.showPickerOne = true;
|
this.columnsOne = this.userMation.contactRelation2List;
|
console.log(this.userMation.contactRelation2List);
|
}
|
if (i == 7) {
|
this.showPickerThree = true;
|
this.columnsThree = this.userMation.contactRelation3List;
|
console.log(this.userMation.contactRelation3List);
|
}
|
},
|
// 其他选择确定
|
onConfirmOne(picker, value, index) {
|
if (this.homeOrMer == 1) {
|
this.userMation.degree = picker.code;
|
this.degree = picker.name;
|
}
|
if (this.homeOrMer == 2) {
|
this.userMation.socialIdentity = picker.code;
|
this.socialIdentity = picker.name;
|
}
|
if (this.homeOrMer == 5) {
|
this.userMation.contactRelation1 = picker.code;
|
this.contactRelation1 = picker.name;
|
}
|
if (this.homeOrMer == 6) {
|
this.userMation.contactRelation2 = picker.code;
|
this.contactRelation2 = picker.name;
|
}
|
this.showPickerOne = false;
|
},
|
// 地区选择确定
|
onConfirmTwo(picker, value, index) {
|
if (this.homeOrMer == 3) {
|
this.userMation.homeProv = this.columnsTwo[value[0]].code;
|
this.userMation.homeCity = this.columnsTwo[value[0]].children[
|
value[1]
|
].code;
|
this.userMation.homeArea = this.columnsTwo[value[0]].children[
|
value[1]
|
].children[value[2]].code;
|
this.areListHome = picker[0] + "/" + picker[1] + "/" + picker[2];
|
}
|
if (this.homeOrMer == 4) {
|
this.userMation.companyProv = this.columnsTwo[value[0]].code;
|
this.userMation.companyCity = this.columnsTwo[value[0]].children[
|
value[1]
|
].code;
|
this.userMation.companyArea = this.columnsTwo[value[0]].children[
|
value[1]
|
].children[value[2]].code;
|
this.areListMer = picker[0] + "/" + picker[1] + "/" + picker[2];
|
}
|
this.showPickerTwo = false;
|
},
|
onConfirmThree(picker, value, index){
|
this.userMation.contactRelation3 = picker.code;
|
this.contactRelation3 = picker.name;
|
this.showPickerThree = false;
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.upload-userinfo-page {
|
& {
|
min-height: 100vh;
|
}
|
.steps-box {
|
.steps {
|
width: 100%;
|
height: 65px;
|
position: relative;
|
padding: 0 18px;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
-webkit-align-items: center;
|
p {
|
border-bottom: 1px dashed #b3b3b3;
|
width: 90%;
|
position: absolute;
|
z-index: -1;
|
}
|
.step-1 {
|
text-align: center;
|
line-height: 30px;
|
color: #fff;
|
width: 30px;
|
height: 30px;
|
background: rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
// position: absolute;
|
// left: 18px;
|
// top: 19px;
|
}
|
.step-2 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(113, 123, 133, 1);
|
border: 0;
|
border-radius: 50%;
|
color: #fff;
|
// position: absolute;
|
// left: 90px;
|
// top: 19px;
|
}
|
.step-3 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(81, 148, 254, 1);
|
box-shadow: 0px 0px 8px 0px rgba(81, 148, 254, 0.64);
|
border-radius: 50%;
|
// position: absolute;
|
// left: 170px;
|
// top: 19px;
|
color: #fff;
|
}
|
.step-4 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
// position: absolute;
|
// left: 250px;
|
// top: 19px;
|
}
|
.step-5 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
// position: absolute;
|
// right: 18px;
|
// top: 19px;
|
}
|
}
|
}
|
.mation-box {
|
width: 343px;
|
height: 79px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
|
border-radius: 5px;
|
margin: auto;
|
box-sizing: border-box;
|
padding: 16px 17px;
|
p:nth-of-type(1) {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
margin-bottom: 10px;
|
}
|
p:nth-of-type(2) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
}
|
.user-info-box {
|
& {
|
box-sizing: border-box;
|
padding: 0 16px;
|
margin-top: 15px;
|
}
|
}
|
.btn-box {
|
& {
|
text-align: center;
|
margin-top: 32px;
|
padding-bottom: 46px;
|
}
|
button {
|
width: 320px;
|
height: 44px;
|
background: rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
outline: none;
|
border: 0;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
