324 lines
9.6 KiB
Vue
324 lines
9.6 KiB
Vue
<template>
|
||
<view>
|
||
<view class="visitor-info">
|
||
<u--form class="visitor-form" :model="visitorInfo" :rules="rules" ref="vForm" :errorType="errorType">
|
||
<view class="visitor-input-box mb-40">
|
||
<text>访客姓名</text><text style="color: red;">*</text>
|
||
<u-form-item prop='temporaryName' style="width:100%;height: 100%;" borderBottom>
|
||
<u--input
|
||
v-model="visitorInfo.temporaryName"
|
||
type="text" placeholder="请输入"
|
||
maxlength="15" border="none"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>手机号</text><text style="color: red;">*</text>
|
||
<u-form-item prop='userPhone' style="width:100%;height: 100%;" borderBottom>
|
||
<u--input
|
||
v-model="visitorInfo.userPhone"
|
||
type="number" placeholder="手机号"
|
||
maxlength="11" border="none"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>来访者单位</text><text style="color: red;">*</text>
|
||
<u-form-item prop='userUnit' style="width:100%;height: 100%;" borderBottom>
|
||
<u--input
|
||
v-model="visitorInfo.userUnit"
|
||
type="text" placeholder="请输入"
|
||
maxlength="20" border="none"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>被访人</text><text style="color: red;">*</text>
|
||
<u-form-item prop='userName' style="width:100%;height: 100%;" borderBottom>
|
||
<u--input
|
||
v-model="visitorInfo.userName"
|
||
type="text" placeholder="请输入"
|
||
maxlength="15" border="none"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
<!-- <view class="visitor-input-box mb-40">
|
||
<text>被访人部门</text><text style="color: red;">*</text>
|
||
<u-form-item prop='IntervieweeDepartment' style="width:100%;height: 100%;" borderBottom>
|
||
<u--input
|
||
v-model="visitorInfo.IntervieweeDepartment"
|
||
type="text" placeholder="请输入"
|
||
maxlength="15" border="none"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view> -->
|
||
<view class="visitor-input-box mb-40" >
|
||
<text>来访日期</text><text style="color: red;">*</text>
|
||
<u-form-item prop='temporaryTime' style="width:100%;height: 100%;" borderBottom @click="showDate=true;hideKeyboard()">
|
||
<u--input disabled disabledColor="#ffffff" v-model="visitorInfo.temporaryTime"
|
||
type="text" placeholder="请选择" border="none"
|
||
clearable ></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
|
||
</view>
|
||
<view class="visitor-input-box mb-40">
|
||
<text>来访事由</text><text style="color: red;">*</text>
|
||
<u-form-item prop='reason' style="width:100%;height: 100%;" borderBottom>
|
||
<u--input
|
||
v-model="visitorInfo.reason"
|
||
type="text" placeholder="请输入"
|
||
maxlength="20" border="none"
|
||
clearable></u--input>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="visitor-input-box mb-40 ">
|
||
<text>人脸照片</text><text style="color: red;">*</text>
|
||
<u-form-item prop='imageUrl' style="width:100%;height: 100%;">
|
||
<view class="flex" style="margin-top: 20rpx;">
|
||
<img :src="chosenImg" style="width: 120rpx;height: 120rpx; margin-right: 20rpx;" alt="" v-show="chosenImg!=''">
|
||
<u-avatar src="../../static/chosenImg.png" size="120" shape="square" v-show="chosenImg==''"
|
||
@click="chooseTheImg()"></u-avatar>
|
||
<u-avatar src="../../static/rechosenImg.png" size="120" shape="square" v-show="chosenImg!=''"
|
||
@click="chooseTheImg()"></u-avatar>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="visitor-input-box mb-40">
|
||
<text>备注</text>
|
||
<u-form-item prop='remarks' style="width:100%;height: 100%;">
|
||
<u--textarea style="min-height: 100rpx;" placeholder="备注" v-model="visitorInfo.remarks" maxlength="100" count autoHeight ></u--textarea>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="submit-box">
|
||
<u-button type="primary" shape="circle" class="submit-btn" @click="formSubmit">提 交</u-button>
|
||
</view>
|
||
</u--form>
|
||
<u-datetime-picker :show="showDate" :value="dateValue" mode="date" closeOnClickOverlay :minDate="Number(new Date())"
|
||
@confirm="dateConfirm" @cancel="dateClose" @close="dateClose"></u-datetime-picker>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import {
|
||
addVisitor
|
||
} from '@/service/url.js';
|
||
import AES from "@/utils/cryptoJs/aes.js";
|
||
import CONFIG from '@/service/config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
showDate:false,
|
||
dateValue: Number(new Date()),
|
||
errorType: 'message',
|
||
visitorInfo: {
|
||
temporaryName:'',
|
||
userPhone: '',
|
||
userUnit: '',
|
||
userName: '',
|
||
IntervieweeDepartment: '',
|
||
temporaryTime: '',
|
||
reason: '',
|
||
remarks:'',
|
||
imageUrl:'',
|
||
|
||
},
|
||
chosenImg:'',
|
||
rules: {
|
||
temporaryName: [{required: true,
|
||
message: '请输入访客姓名',
|
||
trigger: ['blur','change']
|
||
}],
|
||
userPhone: [{
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['blur','change']
|
||
},
|
||
// 正则判断为数字
|
||
{
|
||
pattern: /^[0-9]*$/g,
|
||
// 正则检验前先将值转为字符串
|
||
transform(value) {
|
||
return String(value);
|
||
},
|
||
message: '手机号是11位数字',
|
||
trigger: 'blur'
|
||
},
|
||
// 字符判断
|
||
{
|
||
min: 11,
|
||
max: 11,
|
||
message: '手机号是11位数字',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
userUnit: [{required: true,
|
||
message: '请输入来访者单位',
|
||
trigger: ['blur','change']
|
||
}],
|
||
userName: [{required: true,
|
||
message: '请输入被访人姓名',
|
||
trigger: ['blur','change']
|
||
}],
|
||
// IntervieweeDepartment: [{required: true,
|
||
// message: '请输入被访人部门',
|
||
// trigger: ['blur','change']
|
||
// }],
|
||
temporaryTime: [{required: true,
|
||
message: '请输入来访日期',
|
||
trigger: ['blur','change']
|
||
}],
|
||
reason: [{required: true,
|
||
message: '请输入来访事由',
|
||
trigger: ['blur','change']
|
||
}],
|
||
imageUrl: [{required: true,
|
||
message: '请上传人脸图片',
|
||
trigger: ['blur','change']
|
||
}],
|
||
|
||
},
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
console.log(option)
|
||
this.visitorInfo.userPhone = ''
|
||
this.visitorInfo.userPhone = option.phone;
|
||
},
|
||
methods: {
|
||
// 隐藏键盘
|
||
hideKeyboard() {
|
||
uni.hideKeyboard()
|
||
},
|
||
dateConfirm(e) {
|
||
this.showDate = false
|
||
this.visitorInfo.temporaryTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
||
this.$refs.vForm.validateField('visitorInfo.temporaryTime')
|
||
},
|
||
dateClose() {
|
||
this.showDate = false
|
||
this.$refs.vForm.validateField('visitorInfo.temporaryTime')
|
||
},
|
||
//选择图片
|
||
chooseTheImg() {
|
||
uni.chooseImage({
|
||
count: 1, //图片可选择数量
|
||
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
|
||
sourceType: ['album', 'camera',], //album 从相册选图，camera 使用相机，默认二者都有。
|
||
success: res => {
|
||
console.log(res)
|
||
let imgFiles = res.tempFilePaths //图片的本地文件路径列表
|
||
console.log('本地地址', imgFiles)
|
||
this.chosenImg = imgFiles[0]
|
||
this.uploadTheImg(imgFiles)
|
||
}
|
||
})
|
||
},
|
||
//上传图片
|
||
uploadTheImg(imgFiles) {
|
||
uni.uploadFile({
|
||
url: CONFIG.TEST_URL+'/zhly_web_back/system/visitor/uploadFile', //后端用于处理图片并返回图片地址的接口
|
||
filePath: imgFiles[0],
|
||
name: 'file',
|
||
success: res => {
|
||
console.log(res)
|
||
let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式，打印data如下图
|
||
if (data.code == 200) {
|
||
this.visitorInfo.imageUrl = data.data;
|
||
console.log(this.visitorInfo.imageUrl)
|
||
}else{
|
||
uni.$u.toast('上传失败，'+data.msg)
|
||
}
|
||
},
|
||
fail: () => {}
|
||
})
|
||
},
|
||
|
||
formSubmit() {
|
||
this.$refs.vForm.validate().then(res => {
|
||
|
||
uni.$u.toast('校验通过')
|
||
|
||
console.log(this.visitorInfo)
|
||
let option = {
|
||
contentType:'upload',
|
||
header:{
|
||
Authorization:'',
|
||
}
|
||
}
|
||
this.$http.postForm(addVisitor,this.visitorInfo,false,option).then(res => {
|
||
if (res) {
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
uni.$u.toast('提交成功')
|
||
uni.navigateTo ({
|
||
url: '/pages/visitor/visitor?phone='+this.visitorInfo.userPhone
|
||
})
|
||
}else{
|
||
uni.$u.toast('提交失败')
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
// this.$utils.showHttpError(error)
|
||
})
|
||
|
||
|
||
// uni.reLaunch ({
|
||
// url: '/pages/index/index'
|
||
// })
|
||
|
||
// uni.hideHomeButton();
|
||
}).catch(errors => {
|
||
console.log(errors)
|
||
uni.$u.toast('校验失败')
|
||
})
|
||
// return false
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mb-40{
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
}
|
||
.visitor-info{
|
||
width: 100%;
|
||
height: auto;
|
||
// padding: 10rpx 30rpx;
|
||
}
|
||
.visitor-form{
|
||
width: auto;
|
||
padding: 0 30rpx;
|
||
}
|
||
.visitor-input-box{
|
||
|
||
}
|
||
.submit-box {
|
||
margin-top: 86rpx;
|
||
margin-bottom: 100rpx;
|
||
.submit-btn {
|
||
width: 450rpx;
|
||
height: 66rpx;
|
||
border: none;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
background-color: #0145A6;
|
||
border-radius: 32rpx;
|
||
}
|
||
}
|
||
</style>
|