<template>
|
<view class="container">
|
<view class="visitor-form">
|
<view class="cell">
|
<view class="title">姓名<b>*</b></view>
|
<view class="content">
|
<input class="input" placeholder-style="color: #999999;" maxlength="30" v-model="visitorData.name" placeholder="请输入您的真实姓名" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">手机号<b>*</b></view>
|
<view class="content">
|
<input class="input" maxlength="11" placeholder-style="color: #999999;" v-model="visitorData.phone" placeholder="请输入您的手机号" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">证件类型<b>*</b></view>
|
<view class="content" @click="show = true">
|
<text :style="{color: visitorData.idcardTypeName ? '#000000' : ''}">{{visitorData.idcardTypeName ? visitorData.idcardTypeName : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">证件号码<b>*</b></view>
|
<view class="content">
|
<input class="input" maxlength="18" placeholder-style="color: #999999;" v-model="visitorData.idcardNo" placeholder="请输入您的证件号码" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">公司<b>*</b></view>
|
<view class="content">
|
<input class="input" maxlength="50" placeholder-style="color: #999999;" v-model="visitorData.companyName" placeholder="请输入您的公司名称" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title1">
|
<text class="title1_a">人脸照片<b style="color: red;">*</b></text>
|
<text class="title1_b">1、请提供五官清晰，人脸居中的正面人脸免冠照片；</text>
|
<text class="title1_b">2、照片无逆光、无PS、无过度美颜处理</text>
|
</view>
|
<view class="content">
|
<view class="content_uplaod" @click="upload('faceImg')" v-if="!visitorData.faceImgUrl">
|
<u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
|
</view>
|
<view class="content_uplaod" @click="upload('faceImg')" v-else>
|
<image :src="visitorData.faceImgUrl" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
<view style="height: 20rpx; background-color: #F7F7F7;"></view>
|
<view class="cell">
|
<view class="title">健康证<b v-if="visit === '1'">*</b></view>
|
<view class="content">
|
<view class="content_uplaod" @click="upload('imgurl')" v-if="!visitorData.imgurlUrl">
|
<u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
|
</view>
|
<view class="content_uplaod" @click="upload('imgurl')" v-else>
|
<image :src="visitorData.imgurlUrl" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="footer-box">
|
<view class="submit-button" @click="submit">下一步</view>
|
</view>
|
<u-picker keyName="name" :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
show: false,
|
visit: '',
|
type: '',
|
columns: [[{name: '身份证', id: 0}, {name: '港澳证件', id: 1},{name: '护照', id: 2}]],
|
fileList: [],
|
visitorData: {
|
userAnswerId: '',
|
name: '',
|
phone: '',
|
idcardType: '',
|
idcardTypeName: '',
|
idcardNo: '',
|
faceImg: '',
|
faceImgUrl: '',
|
imgurl: '',
|
imgurlUrl: ''
|
}
|
}
|
},
|
|
onLoad(option) {
|
this.visitorData.userAnswerId = option.userAnswerId
|
this.getVisit()
|
uni.$on('update', (data) => {
|
this.uploadImg(data.tempFilePath)
|
})
|
},
|
|
methods: {
|
submit() {
|
if (!this.visitorData.name) return uni.showToast({
|
title: '姓名不能为空',
|
icon: 'none'
|
})
|
if (!this.visitorData.phone) return uni.showToast({
|
title: '手机号不能为空',
|
icon: 'none'
|
})
|
const regExp = /^1[3456789]\d{9}$/;
|
if (!regExp.test(this.visitorData.phone)) return uni.showToast({
|
title: '手机号格式错误',
|
icon: 'none'
|
})
|
if (!String(this.visitorData.idcardType)) return uni.showToast({
|
title: '证件类型不能为空',
|
icon: 'none'
|
})
|
if (!this.visitorData.idcardNo) return uni.showToast({
|
title: '证件号码不能为空',
|
icon: 'none'
|
})
|
if (this.visitorData.idcardType === 0) {
|
const regex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dxX]$/;
|
if (!regex.test(this.visitorData.idcardNo)) return uni.showToast({
|
title: '证件号码格式错误',
|
icon: 'none'
|
})
|
}
|
if (!this.visitorData.companyName) return uni.showToast({
|
title: '公司不能为空',
|
icon: 'none'
|
})
|
if (!this.visitorData.faceImg) return uni.showToast({
|
title: '人脸照片不能为空',
|
icon: 'none'
|
})
|
if (this.visit === '1') {
|
if (!this.visitorData.imgurl) return uni.showToast({
|
title: '健康证不能为空',
|
icon: 'none'
|
})
|
}
|
uni.navigateTo({
|
url: `/pages/visitorApplication/visitorApplication?data=${JSON.stringify(this.visitorData)}`
|
});
|
},
|
getVisit() {
|
// 是否需要答题
|
this.$u.api.getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'HEALTH_CARD'
|
}).then(res => {
|
if (res.code === 200) {
|
this.visit = res.data.code
|
}
|
})
|
},
|
uploadImg(file) {
|
uni.showLoading({ title: '上传中', mask: true });
|
uni.uploadFile({
|
url: `${this.$baseUrl}public/api/uploadFtp.do`,
|
filePath: file,
|
name: 'file',
|
formData: {
|
folderCode: 'MEMBER_IMG'
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
if (this.type === 'faceImg') {
|
this.visitorData.faceImg = res.data.halfPath
|
this.visitorData.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
|
} else {
|
this.visitorData.imgurl = res.data.halfPath
|
this.visitorData.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
|
}
|
},
|
complete() {
|
uni.hideLoading();
|
}
|
});
|
},
|
upload(type) {
|
this.type = type
|
uni.chooseImage({
|
count: 1,
|
success: (chooseImageRes) => {
|
if (type === 'faceImg') {
|
uni.navigateTo({
|
url: `/pages/cropping/cropping?item=${JSON.stringify({ tempFilePath: chooseImageRes.tempFilePaths[0] })}`
|
})
|
return
|
}
|
uni.showLoading({ title: '上传中', mask: true });
|
for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
|
uni.uploadFile({
|
url: `${this.$baseUrl}public/api/uploadFtp.do`,
|
filePath: chooseImageRes.tempFilePaths[i],
|
name: 'file',
|
formData: {
|
folderCode: 'MEMBER_IMG'
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
if (type === 'faceImg') {
|
this.visitorData.faceImg = res.data.halfPath
|
this.visitorData.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
|
} else {
|
this.visitorData.imgurl = res.data.halfPath
|
this.visitorData.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
|
}
|
},
|
complete() {
|
if (i === chooseImageRes.tempFilePaths.length - 1) {
|
uni.hideLoading();
|
}
|
}
|
});
|
}
|
}
|
});
|
},
|
confirm(e) {
|
this.visitorData.idcardType = e.value[0].id
|
this.visitorData.idcardTypeName = e.value[0].name
|
this.show = false
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #F7F7F7 !important;
|
}
|
.u-upload__button {
|
margin: 0 !important;
|
}
|
.content_uplaod {
|
width: 120rpx;
|
height: 120rpx;
|
background-color: #ececec;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
}
|
.content_uplaod image {
|
width: 100%;
|
height: 100%;
|
}
|
.title {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
display: flex;
|
align-items: center;
|
}
|
|
.title b {
|
color: red;
|
font-weight: bold;
|
}
|
|
.title1 {
|
display: flex;
|
flex-direction: column;
|
.title1_a {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
b {
|
color: red;
|
font-weight: bold;
|
}
|
}
|
.title1_b {
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
|
.add-other {
|
border: 1rpx solid #025eef;
|
color: #025eef;
|
font-size: 11rpx;
|
padding: 0 12rpx;
|
height: 32rpx;
|
line-height: 32rpx;
|
width: 120rpx;
|
text-align: center;
|
border-radius: 24rpx;
|
margin: 20rpx auto;
|
}
|
|
.footer-box {
|
width: 100%;
|
position: fixed;
|
bottom: 30rpx;
|
height: 80rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.submit-button {
|
width: calc(100% - 60rpx);
|
height: 88rpx;
|
line-height: 88rpx;
|
background: #025eef;
|
border-radius: 4rpx;
|
color: #fff;
|
border-radius: 44rpx;
|
font-size: 32rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.popup-content {
|
padding: 20rpx;
|
height: 100%;
|
overflow: hidden;
|
display: flex;
|
flex-flow: column;
|
|
.input {
|
border: 1rpx solid #ccc;
|
border-radius: 4rpx;
|
padding: 4rpx 12rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
|
.respondent-item {
|
padding: 10rpx;
|
border-bottom: 1rpx solid #eee;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #eee;
|
}
|
}
|
|
.van-list {
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
</style>
|
