<template>
|
<view class="visit">
|
<view class="list">
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>被访人姓名</text>
|
</view>
|
<!-- <view class="list_item_content" @click="showName = true"> -->
|
<view class="list_item_content">
|
<text :style="{ color: form1.receptMemberName ? '#000000' : '' }">{{
|
form1.receptMemberName
|
? form1.receptMemberName + " " + form1.receptCompanyName
|
: "请选择"
|
}}</text>
|
<!-- <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon> -->
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>入园时间</text>
|
</view>
|
<view class="list_item_content" @click="show4 = true">
|
<text :style="{ color: form1.starttime ? '#000000' : '' }">{{
|
form1.starttime ? form1.starttime : "请选择"
|
}}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>离园时间</text>
|
</view>
|
<view class="list_item_content" @click="openLC">
|
<text :style="{ color: form1.endtime ? '#000000' : '' }">{{
|
form1.endtime ? form1.endtime : "请选择"
|
}}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<div class="empty"></div>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>联系人</text>
|
</view>
|
<view class="list_item_content"
|
><input
|
type="text"
|
v-model="form1.name"
|
placeholder="请输入联系人姓名"
|
placeholder-style="color: #999999;"
|
/></view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>手机号</text>
|
</view>
|
<view class="list_item_content">
|
<input
|
type="number"
|
maxlength="13"
|
v-model="form1.phone"
|
:placeholder="'请输入联系人手机号'"
|
placeholder-style="color: #999999;"
|
/>
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>来访单位</text>
|
</view>
|
<view class="list_item_content"
|
><input
|
type="text"
|
v-model="form1.companyName"
|
placeholder="请输入来访单位的全称"
|
placeholder-style="color: #999999;"
|
/></view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>入园车辆</text>
|
</view>
|
<view class="list_item_content" @click="openInput(1)">
|
<text :style="{ color: form1.carNos ? '#000000' : '' }">{{
|
form1.carNos ? form1.carNos : "请输入车牌号码"
|
}}</text>
|
<!-- <input type="text" placeholder="请输入车牌号" v-model="form1.carNos" maxlength="8" placeholder-style="color: #999999;" /> -->
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>随车人数</text>
|
</view>
|
<view class="list_item_content"
|
><input
|
type="number"
|
v-model="form1.memberNum"
|
placeholder="请输入随车人员总数"
|
placeholder-style="color: #999999;"
|
/></view>
|
</view>
|
<view class="list_item" @click="isShowReason = true">
|
<view class="list_item_label">
|
<text>*</text>
|
<text>来访事由</text>
|
</view>
|
<view class="list_item_content">
|
<text
|
class="mr6"
|
:style="{ color: form1.reason ? '#000000' : '#999999' }"
|
>{{ form1.reason ? form1.reason : "请选择" }}</text
|
>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
<!-- <view class="list_item_content"
|
><input
|
type="text"
|
v-model="form1.reason"
|
placeholder="请输入来访事由"
|
placeholder-style="color: #999999;"
|
/></view> -->
|
</view>
|
</view>
|
<view class="zw"></view>
|
<view class="footer"
|
><view class="footer_btn" @click="submit">提交</view></view
|
>
|
<!-- 入园时间 -->
|
<u-datetime-picker
|
:show="show4"
|
:minDate="new Date().getTime()"
|
mode="datetime"
|
:formatter="formatter"
|
@cancel="show4 = false"
|
@confirm="setinDate"
|
></u-datetime-picker>
|
<!-- 离园时间 -->
|
<u-datetime-picker
|
v-if="form1.starttime"
|
:show="show5"
|
:formatter="formatter"
|
:minDate="formatTimeStamp(form1.starttime)"
|
:maxDate="formatTimeStamp(maxTime)"
|
mode="datetime"
|
@cancel="show5 = false"
|
@confirm="setoutDate"
|
></u-datetime-picker>
|
<!-- 车辆 -->
|
<u-popup
|
:show="show2"
|
:round="10"
|
:safeAreaInsetBottom="true"
|
:closeable="true"
|
mode="bottom"
|
@close="show2 = false"
|
>
|
<view class="addcar">
|
<view class="addcar_head">添加车辆</view>
|
<view class="addcar_ipt"
|
><input type="text" v-model="carName" placeholder="请输入车牌号"
|
/></view>
|
<view class="addcar_footer">
|
<view class="addcar_footer_item" @click="show2 = false">取消</view>
|
<view class="addcar_footer_item t" @click="submitCart">提交</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 来访是由 -->
|
<u-picker
|
keyName="title"
|
:show="isShowReason"
|
closeOnClickOverlay
|
:columns="reasonList"
|
@confirm="reasonSel"
|
@close="isShowReason = false"
|
@cancel="isShowReason = false"
|
></u-picker>
|
|
<u-picker
|
keyName="name"
|
:show="showName"
|
closeOnClickOverlay
|
:columns="memberList"
|
@confirm="seleteName"
|
@cancel="showName = false"
|
@close="showName = false"
|
></u-picker>
|
<!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->
|
<keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
|
<qf-image-cropper
|
ref="cropper"
|
:width="280"
|
:height="280"
|
:radius="30"
|
@crop="uploadImg"
|
></qf-image-cropper>
|
</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 { getDaysAfterDate } from '@/utils/utils.js'
|
import { createVisit, getVisitedMember, getVisitReason } from '@/api'
|
export default {
|
data() {
|
return {
|
photoSrc: '',
|
type: '',
|
inputType: '',
|
show1: false,
|
show2: false,
|
show4: false,
|
show5: false,
|
show7: false,
|
isShowReason: false,
|
showName: false,
|
fileList: [],
|
reasonList: [],
|
memberList: [[{ name: '身份证', id: 0 }, { name: '港澳证件', id: 1 }, { name: '护照', id: 2 }]],
|
columnsNames: [[{ name: '张三', id: 0 }, { name: '张三', id: 1 }, { name: '张三', id: 2 }]],
|
columns: [],
|
cars: [],
|
day: null,
|
maxTime: '',
|
carName: '',
|
personnel: [],
|
userAnswerId: '',
|
form1: {
|
receptMemberId: '',
|
receptMemberName: '',
|
starttime: '',
|
endtime: '',
|
reason: '',
|
carNos: ''
|
},
|
visit: '',
|
form: {},
|
accessControl: '',
|
verify: ''
|
}
|
},
|
components: { tlyPictureCut, keyboardInput, QfImageCropper },
|
onLoad(options) {
|
if (options.data) {
|
this.form = JSON.parse(options.data)
|
}
|
this.getUser()
|
const userInfo = uni.getStorageSync('userInfo') || {}
|
this.$set(this.form1, 'receptMemberName', userInfo.realname)
|
this.$set(this.form1, 'receptMemberId', userInfo.id || '')
|
this.$set(this.form1, 'receptCompanyName', userInfo.company.name || '')
|
// this.getvisit()
|
// this.getVisit1()
|
// this.getUserValid()
|
},
|
methods: {
|
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
|
},
|
openInput(type) {
|
this.inputType = type
|
this.$refs.keyboard.open()
|
},
|
setPlate(e) {
|
if (this.inputType === 1) {
|
this.form1.carNos = e
|
} else if (this.inputType === 2) {
|
this.withUserList.carNos = e
|
}
|
this.$forceUpdate()
|
this.closeInput()
|
},
|
seleteName(e) {
|
this.$set(this.form1, 'receptMemberName', e.value[0].name)
|
this.$set(this.form1, 'receptMemberId', e.value[0].id)
|
this.$set(this.form1, 'receptCompanyName', e.value[0].companyName)
|
this.showName = false
|
},
|
reasonSel(e) {
|
console.log('e',e);
|
this.$set(this.form1, 'reason', e.value[0].title)
|
this.isShowReason = false
|
},
|
getUser() {
|
getVisitedMember().then(res => {
|
this.memberList = [res.data || []]
|
})
|
getVisitReason().then(res => {
|
this.reasonList = [res.data || []]
|
})
|
},
|
closeInput() {
|
this.$refs.keyboard.close()
|
},
|
submit() {
|
const { form1 } = this
|
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.name) return uni.showToast({
|
title: '联系人不能为空',
|
icon: 'none'
|
})
|
if (!this.form1.phone) return uni.showToast({
|
title: '手机号不能为空',
|
icon: 'none'
|
})
|
var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
|
var result = re.test(this.form1.phone);
|
if (!result) return uni.showToast({
|
title: '手机号格式不正确',
|
icon: 'none'
|
})
|
if (!this.form1.companyName) return uni.showToast({
|
title: '来访单位不能为空',
|
icon: 'none'
|
})
|
if (!this.form1.carNos) return uni.showToast({
|
title: '入园车辆不能为空',
|
icon: 'none'
|
})
|
if (!this.form1.memberNum) return uni.showToast({
|
title: '随车人数不能为空',
|
icon: 'none'
|
})
|
if (!this.form1.reason) return uni.showToast({
|
title: '拜访事由不能为空',
|
icon: 'none'
|
})
|
// this.form1.starttime = this.form1.starttime + ':00'
|
// this.form1.endtime = this.form1.endtime + ':00'
|
let data = JSON.parse(JSON.stringify(this.form1))
|
data.starttime = data.starttime + ':00'
|
data.endtime = data.endtime + ':00'
|
createVisit({
|
...data,
|
type: '2',
|
openid: this.$store.state.openId
|
})
|
.then(res => {
|
if (res.code === 200) {
|
setTimeout(() => {
|
uni.showToast({
|
title: '提交成功',
|
icon: 'success'
|
})
|
})
|
uni.reLaunch({
|
url: `/pages/staff/index`
|
})
|
}
|
})
|
},
|
deleUser(i) {
|
this.personnel.splice(i, 1)
|
},
|
getVisit1() {
|
// 是否需要答题
|
this.$u.api
|
.getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'HEALTH_CARD'
|
})
|
.then(res => {
|
if (res.code === 200) {
|
this.visit = res.data.code
|
}
|
})
|
// 起始时间时长
|
this.$u.api
|
.getSystemDictData({
|
dictCode: 'VISIT_CONFIG',
|
label: 'VALIDATE_VISIT'
|
})
|
.then(res => {
|
if (res.code === 200) {
|
this.day = Number(res.data.code)
|
// console.log(nextDay('after', true, this.day))
|
}
|
})
|
},
|
submitCart() {
|
if (!this.carName)
|
return uni.showToast({
|
title: '请输入车牌号码',
|
icon: 'none'
|
})
|
this.cars.push(this.carName)
|
this.form1.carNos = this.cars.join(',')
|
this.carName = ''
|
this.show2 = false
|
},
|
deleCars(i) {
|
this.cars.splice(i, 1)
|
this.form1.carNos = this.cars.join(',')
|
},
|
seleMJ(i) {
|
this.columns.forEach((item, index) => {
|
if (index === i) {
|
item.active = !item.active
|
}
|
})
|
},
|
openLC() {
|
if (!this.form1.starttime)
|
return uni.showToast({
|
title: '请先选择入园时间',
|
icon: 'none'
|
})
|
this.show5 = true
|
},
|
setinDate(e) {
|
this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
|
// this.maxTime = getDaysAfterDate(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM'), this.day)
|
this.maxTime = this.form1.starttime.slice(0, 11) + '23:59'
|
this.form1.endtime = ''
|
this.show4 = false
|
},
|
setoutDate(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, '/')}`))
|
},
|
// 被拜访人信息校验方式（0手机号单独校验 1手机号和姓名组合校验）
|
getUserValid() {
|
this.$u.api
|
.getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'BEVISITED_USER_VALID'
|
})
|
.then(res => {
|
if (res.code === 200) {
|
this.verify = res.data.code
|
}
|
})
|
},
|
// 获取是否需要选择门禁/门禁列表
|
getvisit() {
|
this.$u.api
|
.getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'SELECT_DOORS_VISIT_REQUIRED'
|
})
|
.then(res => {
|
if (res.code === 200) {
|
this.accessControl = res.data.code
|
if (res.data.code === '1') {
|
this.$u.api.deviceRoleList({ type: 1 }).then(device => {
|
if (device.code === 200) {
|
if (device.data.length > 0) {
|
device.data.forEach(item => {
|
item.active = false
|
})
|
this.columns = device.data
|
}
|
}
|
})
|
}
|
}
|
})
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
page {
|
background-color: #f7f7f7 !important;
|
}
|
.u-upload__button {
|
margin: 0 !important;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.visit {
|
width: 100%;
|
padding-top: 10rpx 0;
|
.menjin {
|
width: 100%;
|
.respondent-title {
|
width: 100%;
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #222222;
|
}
|
.list {
|
width: 100%;
|
height: 400rpx;
|
display: flex;
|
flex-direction: column;
|
.list_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-size: 28rpx;
|
color: #000000;
|
}
|
image {
|
width: 30rpx;
|
height: 30rpx;
|
}
|
}
|
}
|
.menjin_footer {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.menjin_footer_item {
|
flex: 1;
|
height: 80rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 10rpx;
|
background-color: #025eef;
|
color: #ffffff;
|
font-size: 26rpx;
|
margin-left: 30rpx;
|
&:first-child {
|
margin-left: 0 !important;
|
}
|
}
|
}
|
}
|
|
.addcar {
|
padding: 30rpx;
|
width: 100%;
|
box-sizing: border-box;
|
.addcar_head {
|
text-align: center;
|
font-size: 32rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
.addcar_ipt {
|
width: 100%;
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
background: #f7f7f7;
|
border-radius: 50rpx;
|
margin-top: 60rpx;
|
input {
|
width: 100%;
|
height: 100%;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #000000;
|
text-align: center;
|
}
|
}
|
.addcar_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 60rpx;
|
.t {
|
background: #025eef !important;
|
color: #ffffff !important;
|
}
|
.addcar_footer_item {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 32rpx;
|
font-weight: 400;
|
color: #025eef;
|
text-align: center;
|
border-radius: 44rpx;
|
border: 1rpx solid #025eef;
|
margin-right: 18rpx;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
.empty {
|
width: 750rpx;
|
height: 20rpx;
|
background-color: #f7f7f7;
|
margin: 0 -30rpx;
|
}
|
.list_item {
|
width: 100%;
|
// min-height: 98rpx;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #e5e5e5;
|
|
.list_item_label {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
|
text {
|
&:nth-child(2) {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
|
&:nth-child(1) {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #e42d2d;
|
}
|
}
|
}
|
|
.list_item_content {
|
flex: 1;
|
height: 100%;
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
|
text {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 6rpx;
|
}
|
|
input {
|
width: 100%;
|
height: 100%;
|
text-align: right;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
|
.zw {
|
width: 100%;
|
height: calc(env(safe-area-inset-bottom) + 118rpx);
|
}
|
|
.footer {
|
width: 100%;
|
padding: 0 30rpx;
|
padding-bottom: env(safe-area-inset-bottom);
|
box-sizing: border-box;
|
margin-top: 80rpx;
|
.footer_btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: $uni-color-primary;
|
border-radius: 44rpx;
|
font-size: 32rpx;
|
color: #ffffff;
|
}
|
}
|
}
|
</style>
|
