<template>
|
<view class="container">
|
<view class="visitor-form">
|
<view class="cell">
|
<view class="title"><b>*</b>姓名</view>
|
<view class="content">
|
<input class="input" @focus="showKeyboard = true" @blur="showKeyboard = false"
|
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 type="number" @focus="showKeyboard = true" @blur="showKeyboard = false" 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="16" class="ml6"></u-icon>
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">证件号码</view>
|
<view class="content">
|
<input class="input" maxlength="18" @focus="showKeyboard = true" @blur="showKeyboard = false"
|
placeholder-style="color: #999999;" v-model="visitorData.idcardNo" placeholder="请输入您的证件号码" />
|
</view>
|
</view>
|
<view class="empty"></view>
|
<view class="cell">
|
<view class="title"><b>*</b>公司名称</view>
|
<view class="content">
|
<input class="input" maxlength="50" @focus="showKeyboard = true" @blur="showKeyboard = false"
|
placeholder-style="color: #999999;" v-model="visitorData.companyName" placeholder="请输入您的公司名称" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title1">
|
<text class="title1_a"><b>*</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="20"></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>*</b>被访人</view>
|
<view class="content" @click="selName">
|
<text
|
:style="{ color: form1.receptMemberName ? '#000000' : '' }">{{form1.receptMemberName ? form1.receptMemberName : "请选择"}}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="16" class="ml6"></u-icon>
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title"><b>*</b>入园时间</view>
|
<view class="content" @click="show4 = true">
|
<text
|
:style="{color: form1.starttime ? '#000000' : ''}">{{form1.starttime ? form1.starttime : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="16" class="ml6"></u-icon>
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title"><b>*</b>离园时间</view>
|
<view class="content" @click="openLC">
|
<text
|
:style="{color: form1.endtime ? '#000000' : ''}">{{form1.endtime ? form1.endtime : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="16" class="ml6"></u-icon>
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title"><b>*</b>拜访事由</view>
|
<view class="content" @click="showReason = true">
|
<text
|
:style="{color: form1.reason ? '#000000' : ''}">{{form1.reason ? form1.reason : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="16" class="ml6"></u-icon>
|
</view>
|
</view>
|
<view class="cell" v-if="form1.type == 1">
|
<view class="title">施工内容</view>
|
<view class="content">
|
<input class="input" @focus="showKeyboard = true" @blur="showKeyboard = false"
|
placeholder-style="color: #999999;" maxlength="30" v-model="form1.constructionReason" placeholder="请输入施工内容" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">随行车辆</view>
|
<view class="content" @click="openInput(1)">
|
<text :style="{color: form1.carNos ? '#000000' : ''}">{{form1.carNos ? form1.carNos : '请输入车牌号码'}}</text>
|
</view>
|
</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 style="width: 100%; height: 110rpx;" v-if="!showKeyboard"></view>
|
<view v-if="!showKeyboard" class="footer-box">
|
<view class="submit-button" @click="submit">下一步</view>
|
</view>
|
<!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->
|
<u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker>
|
<qf-image-cropper ref="cropper" :width="280" :height="280" :radius="0" fileType="jpg"
|
@crop="uploadImg"></qf-image-cropper>
|
<keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
|
<!-- 入园时间 -->
|
<u-datetime-picker :show="show4" :minDate="new Date().getTime()" :formatter="formatter" mode="datetime"
|
@cancel="show4 = false" @confirm="setstarttime"></u-datetime-picker>
|
<!-- 离园时间 -->
|
<u-datetime-picker v-if="form1.starttime" :show="show5" :formatter="formatter"
|
:minDate="formatTimeStamp(form1.starttime)" :maxDate="formatTimeStamp(form1.starttime.slice(0,10) + ' 23:59')"
|
mode="datetime" @cancel="show5 = false" @confirm="setendtime"></u-datetime-picker>
|
<u-picker keyName="title" :show="showReason" :columns="VisitReason" @confirm="selectedReason"
|
@cancel="showReason = false"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import tlyPictureCut from "@/components/tly-picture-cut/tlyPictureCut.vue";
|
import keyboardInput from "@/components/keyboard-input/keyboard-input.vue"
|
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
|
import {
|
mapState
|
} from 'vuex'
|
import {
|
uploadAvatar
|
} from "@/utils/config"
|
import {
|
getSystemDictData,
|
visitorSub,
|
getVisitedVisitReason,
|
createFk
|
} from '@/api'
|
export default {
|
data() {
|
return {
|
photoSrc: "",
|
inputType: '',
|
show: false,
|
showKeyboard: false,
|
visit: '',
|
type: '',
|
show4: false,
|
show5: false,
|
showReason: false,
|
personnel: [],
|
VisitReason: [],
|
columns: [
|
[{
|
name: '身份证',
|
id: 0
|
}, {
|
name: '港澳证件',
|
id: 1
|
}, {
|
name: '护照',
|
id: 2
|
}]
|
],
|
fileList: [],
|
visitorData: {
|
userAnswerId: '',
|
name: '',
|
phone: '',
|
idcardType: 0,
|
idcardTypeName: '身份证',
|
idcardNo: '',
|
faceImg: '',
|
faceImgUrl: '',
|
imgurl: '',
|
imgurlUrl: '',
|
companyName: ''
|
},
|
form1: {
|
phone1: '',
|
receptMemberId: '',
|
receptMemberName: '',
|
starttime: '',
|
endtime: '',
|
doors: '',
|
doorSelectName: '',
|
reason: '',
|
carNos: '',
|
type: 0
|
},
|
withUserList: {
|
name: '',
|
phone: '',
|
idcardType: '',
|
idcardTypeName: '',
|
companyName: '',
|
idcardNo: '',
|
faceImg: '',
|
faceImgUrl: '',
|
imgurl: '',
|
imgurlUrl: ''
|
},
|
}
|
},
|
components: {
|
tlyPictureCut,
|
QfImageCropper,
|
keyboardInput
|
},
|
|
onLoad(option) {
|
this.getUser()
|
const visitorData = uni.getStorageSync('member')
|
if (visitorData.faceImg) {
|
visitorData.faceImgUrl = visitorData.prefixUrl + visitorData.faceImg
|
}
|
if (visitorData && visitorData.name) {
|
this.visitorData = visitorData
|
}
|
this.visitorData.companyName = visitorData.visitCompanyName
|
this.visitorData.idcardNo = visitorData.idcardDecode
|
if (this.visitorData.idcardType === 0) {
|
this.visitorData.idcardTypeName = '身份证'
|
} else if (this.visitorData.idcardType === 1) {
|
this.visitorData.idcardTypeName = '港澳证件'
|
} else if (this.visitorData.idcardType === 2) {
|
this.visitorData.idcardTypeName = '护照'
|
}
|
if (this.visitorData.imgurl) {
|
this.visitorData.imgurlUrl = this.visitorData.prefixUrl + this.visitorData.imgurl
|
}
|
// if (this.member ) {
|
// this.visitorData.name = this.member.name
|
// this.visitorData.phone = this.member.phone
|
// this.visitorData.idcardNo = this.member.idcardDecode
|
// this.visitorData.companyName = this.member.visitCompanyName
|
// this.visitorData.faceImg = this.member.faceImg
|
// if (this.member.faceImg) {
|
// this.visitorData.faceImgUrl = this.member.prefixUrl + this.member.faceImg
|
// }
|
// this.visitorData.imgurl = this.member.imgurl
|
// if (this.member.imgurl) {
|
// this.visitorData.imgurlUrl = this.member.prefixUrl + this.member.imgurl
|
// }
|
// this.visitorData.idcardType = this.member.idcardType
|
// if (this.member.idcardType === 0) {
|
// this.visitorData.idcardTypeName = '身份证'
|
// } else if (this.member.idcardType === 1) {
|
// this.visitorData.idcardTypeName = '港澳证件'
|
// } else if (this.member.idcardType === 2) {
|
// this.visitorData.idcardTypeName = '护照'
|
// }
|
// }
|
this.visitorData.userAnswerId = option.answerId || ''
|
// this.getVisit()
|
// uni.$on('update', (data) => {
|
// this.uploadImg(data.tempFilePath)
|
// })
|
},
|
mounted() {
|
this.$eventBus.$on('svisitorAppSel', (option) => {
|
// this.$set(this.param, 'checkUserId', option.id)
|
// this.$set(this.param, 'applyCheckUserId', option.id)
|
// this.$set(this.param, 'checkorName', option.name)
|
|
this.form1.receptMemberName = option.name
|
this.form1.receptMemberId = option.id
|
this.form1.receptMemberDepartment = option.companyName
|
})
|
},
|
methods: {
|
selectedReason(e) {
|
this.form1.reason = e.value[0].title
|
this.form1.type = e.value[0].constructionType
|
this.showReason = false
|
},
|
// 查询用户
|
getUser() {
|
getVisitedVisitReason({}).then(res => {
|
this.VisitReason = [res.data || []]
|
})
|
},
|
setendtime(e) {
|
this.form1.endtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
|
this.show5 = false
|
},
|
formatTimeStamp(date) {
|
return Date.parse(new Date(`${date}`)) || Date.parse(new Date(`${date.replace(/-/g, '/')}`))
|
},
|
openLC() {
|
if (!this.form1.starttime) return uni.showToast({
|
title: '请先选择入园时间',
|
icon: 'none'
|
})
|
this.show5 = true
|
},
|
setstarttime(e) {
|
this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
|
this.maxTime = this.form1.starttime
|
this.show4 = false
|
},
|
formatter(type, value) {
|
if (type === 'year') {
|
return `${value}年`
|
}
|
if (type === 'month') {
|
return `${value}月`
|
}
|
if (type === 'day') {
|
return `${value}日`
|
}
|
if (type === 'hour') {
|
return `${value}时`
|
}
|
if (type === 'minute') {
|
return `${value}分`
|
}
|
return value
|
},
|
closeInput() {
|
this.$refs.keyboard.close()
|
},
|
setPlate(e) {
|
if (this.inputType === 1) {
|
this.form1.carNos = e
|
} else if (this.inputType === 2) {
|
this.withUserList.carNos = e
|
}
|
this.$forceUpdate()
|
this.closeInput()
|
},
|
openInput(type) {
|
this.inputType = type
|
this.$refs.keyboard.open()
|
},
|
selName() {
|
uni.navigateTo({
|
url: '/pages/visitorApplication/memberSel'
|
})
|
},
|
submit() {
|
const {
|
visitorData
|
} = this
|
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 && this.visitorData.idcardNo) {
|
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'
|
// })
|
// }
|
if (!this.form1.receptMemberId) return uni.showToast({
|
title: '请填写有效的访问人',
|
icon: 'none'
|
})
|
if (!this.form1.starttime) return uni.showToast({
|
title: '入园时间不能为空',
|
icon: 'none'
|
})
|
if (!this.form1.endtime) return uni.showToast({
|
title: '离园时间不能为空',
|
icon: 'none'
|
})
|
if (!this.form1.doorSelectName && this.accessControl == 1) return uni.showToast({
|
title: '访问门禁不能为空',
|
icon: 'none'
|
})
|
if (!this.form1.reason) return uni.showToast({
|
title: '拜访事由不能为空',
|
icon: 'none'
|
})
|
let data = JSON.parse(JSON.stringify(this.form1))
|
data.starttime = data.starttime + ':00'
|
data.endtime = data.endtime + ':00'
|
createFk({
|
...this.visitorData,
|
...data,
|
withUserList: this.personnel
|
}).then(res => {
|
if (res.code === 200) {
|
uni.navigateTo({
|
url: `/pages/appointmentDetails/appointmentDetails?id=${res.data}`
|
})
|
}
|
})
|
// uni.setStorageSync('visitorData', this.visitorData)
|
// uni.navigateTo({
|
// url: `/pages/visitorApplication/visitorApplication?data=${JSON.stringify(this.visitorData)}`
|
// });
|
},
|
getVisit() {
|
// 是否需要 健康证
|
getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'HEALTH_CARD'
|
}).then(res => {
|
if (res.code === 200) {
|
this.visit = res.data.code
|
}
|
})
|
},
|
uploadImg(file) {
|
var that = this
|
that.$refs.cropper.close()
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
uni.uploadFile({
|
url: uploadAvatar,
|
filePath: file.tempFilePath,
|
name: 'file',
|
formData: {
|
folderCode: 'MEMBER_IMG',
|
isFace: 0
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
if(res.code !== 200){
|
return this.showToast(res.message)
|
}
|
this.visitorData.faceImg = res.data.halfPath
|
this.visitorData.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
|
},
|
fail: (err) => {
|
// this.showToast(err)
|
},
|
complete() {
|
uni.hideLoading();
|
}
|
});
|
},
|
deleUser(i) {
|
this.personnel.splice(i, 1)
|
},
|
upload(type) {
|
var that = this
|
that.type = type
|
if (type === 'faceImg') {
|
that.$refs.cropper.chooseImage()
|
return
|
}
|
uni.chooseImage({
|
count: 1,
|
success: (chooseImageRes) => {
|
// if (type === 'faceImg') {
|
// that.photoSrc = chooseImageRes.tempFilePaths[0];
|
// that.$refs.tlyPictureCut.showPop();
|
// }
|
if (type === 'imgurl') {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
uni.uploadFile({
|
url: uploadAvatar,
|
filePath: chooseImageRes.tempFilePaths[0],
|
name: 'file',
|
formData: {
|
folderCode: 'MEMBER_IMG'
|
},
|
timeout: 60000,
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
that.visitorData.imgurl = res.data.halfPath
|
that.visitorData.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
|
},
|
complete() {
|
uni.hideLoading();
|
}
|
});
|
}
|
},
|
fail(err) {
|
alert('api报错')
|
}
|
});
|
},
|
confirm(e) {
|
this.visitorData.idcardType = e.value[0].id
|
this.visitorData.idcardTypeName = e.value[0].name
|
this.show = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #F7F7F7 !important;
|
}
|
|
.u-upload__button {
|
margin: 0 !important;
|
}
|
|
.content_uplaod {
|
width: 120rpx;
|
height: 120rpx;
|
background: #F7F7F7;
|
border-radius: 8rpx;
|
border: 2rpx solid #E5E5E5;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
}
|
|
.content_uplaod image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.empty {
|
width: 750rpx;
|
height: 20rpx;
|
margin: 0 -30rpx;
|
background-color: #f7f7f7;
|
;
|
}
|
|
.title {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
display: flex;
|
align-items: center;
|
}
|
|
.title b {
|
color: #E42D2D;
|
margin-right: 4rpx;
|
}
|
|
.title1 {
|
display: flex;
|
flex-direction: column;
|
|
.title1_a {
|
font-size: 30rpx !important;
|
font-weight: 400;
|
color: #222222;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
b {
|
color: #E42D2D;
|
margin-right: 4rpx;
|
|
}
|
}
|
|
.title1_b {
|
font-size: 24rpx !important;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
|
.add-other {
|
border: 1rpx solid #4d99a8;
|
color: #4d99a8;
|
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: #4d99a8;
|
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>
|
