<template>
<view class="upload-content">
<view class="upload-item" v-for="(item, index) in imageList" :key="index">
<image class="upload-img" :src="item.filePath" mode="aspectFill" @click="previewImage(index)"></image>
<!-- 删除按钮 -->
<image class="upload-del-btn" @click.stop.prevent="delImage(index)"
src="data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZGNjhCRTZFMzgwRTExRUFCNkUwOEM2Q0Y3RjUzQTE2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZGNjhCRTZGMzgwRTExRUFCNkUwOEM2Q0Y3RjUzQTE2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkY2OEJFNkMzODBFMTFFQUI2RTA4QzZDRjdGNTNBMTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkY2OEJFNkQzODBFMTFFQUI2RTA4QzZDRjdGNTNBMTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAoACgDAREAAhEBAxEB/8QAawABAQEBAQAAAAAAAAAAAAAABggEAQIBAQEAAAAAAAAAAAAAAAAAAAABEAAABQMCAwgBBAMAAAAAAAABEQIDBBMFBgASIRQVMVFhcSIyBwhi8EFCM1M0FhEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AovNs2sWHWJy8XhwUspHYyyghdedEBFLbaREDES8gDiOglbNfsBn2RSHEwpi7JbREaUWEoUObfzfAnFD3kQeGqgH/ANBf6/MdSlV+yrXc39p+7cegeYV9gM+x2Q2mbMXe7aAhVizVCtzb+D4m4ke4zDw0FU4VmtjzGxt3izuCplQih5lYE404HubcTxIQPyENRUrfYDNZGRZ9MhpcEbbZFqhRWj9NRAk+vzU4BH3AGqjH8fYFj2Z2S4W+LPXFzllYvW2I8KUxpUdKAFTaRI6pmPb2FwLcIAP6DeutdE5J7q9bl+R2DVqmWzb36Bp8hfHuPYVj1vhzbguTnUlaXp0FlSVRo0ZSRJCxLdU3bSHdx48CIRDR9f8ANZGO59DhqcELbe1phSmj9NRYkwvzS4JH3COgB5BX69cuY/v5p+qR++ord2+Og82Vu7uXeGizA8N1F5HJBHOrVP0bNvEz0FZpVS2NuLtCvm1VoEEqECMv2H+FXZ+qeoqTr91rrU3rdbq9ZfPcwdWqfq3n++qjuPcx1+2ct/sc2xR7ffUTt7OPboHf2AwqRjufzJiWxC23tapsV0vTUWJvo80uCZdwhoM3x58h2DCrBcZkO3LkZzIWLMCe8CFRo0ZSANSQPdU3GYFx4cSMBAU5e7u5dxvK5jw3UXuYGbvGrVPdv39pnoGGffIVmzOwW6TPtymc3irBmbc2QQmPJipQIApxIDuq7i/iQAfEiSAbvr/hUjIs/hzFNiNtsi0zZTpemogTYR5qcAy7gHQVTmuFWPMbG5Z7w2KmVCC2XkCTjTge1xtXEhA/IQ1FStmv1/z/AB2Q4qHDXe7aAjSlQkitzb+bAG4ke8jDx1UAwx6/i/y4W2VzH+Gg5v7S9u09A8wr6/5/kUhtUyGuyW0RCrKmpFDm38GBJxQ9xkHjoKpwrCrHh1jbs9nbFLKRFbzyxNx1wfc44rgYiXkAaiv/2Q=="
mode="scaleToFill"></image>
<!-- 进度 -->
<view class="upload-progress" v-if="item.progress < 100">{{ item.progress }}%</view>
</view>
<!-- 新增按钮 -->
<view class="upload-add-btn" v-if="rduLength > 0" @click="chooseImage">
<uni-icons type="plusempty" size="20"></uni-icons>
选择图片
</view>
</view>
</template>
<script>
import { picturecheck } from "@/api/visitor.js";
import Compressor from "compressorjs";
let urlAPI = require("@/static/config.js");
export default {
data() {
return {
imageList: [],
imgbase64: ""
};
},
props: {
count: {
type: Number,
default: 5 //单次可选择的图片数量
},
length: {
type: Number,
default: 1 //可上传总数量
},
index: {
type: Number,
default: 0
},
editImg: {
type: String,
default: ''
}
},
computed: {
rduLength() {
return this.length - this.imageList.length;
}
},
watch: {
editImg: {
handler() {
this.bindImg();
},
deep: true
}
},
mounted() {
this.bindImg();
// this.main('https://www.wyy-supor.com.cn/gateway/sdfs/static/image/a7877821-65c1-4891-a2ee-e762b8d24ff4.png')
// this.openbase('https://www.wyy-supor.com.cn/gateway/sdfs/static/image/42d00415-d453-45a8-b2b5-449abc93ce07.jpg')
},
methods: {
bindImg() {
if (this.editImg) {
this.imageList = [{
filePath: this.editImg,
progress: 100,
url: this.editImg
}];
// console.log('this.imageList==>', this.imageList);
}
},
//选择图片
chooseImage() {
let _this = this;
uni.chooseImage({
count: this.rduLength < this.count ? this.rduLength : this.count, //最多可以选择的图片张数，默认9
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
success: res => {
// console.log(res)
let fileSize = res.tempFiles[0].size; //照片尺寸大小
let imgsize = fileSize / 1024;
if (imgsize < 10) {
uni.showToast({
title: '不能小于10kb',
icon: "none",
duration: 1000,
mask: true
});
} else if (imgsize < 200) {
// console.log("图片不超过200k不压缩")
_this.uploadFiles(res.tempFiles[0], res.tempFilePaths[0])
} else if (fileSize < 5 * 1024 * 1024) {
new Compressor(res.tempFiles[0], {
quality: 0.6,
width: 380,
success(result) {
let blob = new Blob([result], {
type: 'image/jpeg'
})
var url = window.URL.createObjectURL(blob)
// console.log(url)
_this.uploadFiles(result, url)
},
error(err) {
console.log(err.message);
},
})
} else {
uni.showToast({
title: '超出允许的文件大小',
icon: "none",
duration: 1000,
mask: true
});
}
}
});
},
//上传图片
async uploadFiles(files, file) {
const item = {
filePath: file,
file: files,
progress: 0
};
let _this = this;
this.imageList.push(item);
const uploadTask = await uni.uploadFile({
url: urlAPI.baseUrl_applet + "/sdfs/file/uploadImage",
file: item.file,
name: 'file',
formData: {
//file: item.filePath
},
success: uploadFileRes => {
let _data = JSON.parse(uploadFileRes.data);
_this.openbase(_data.data)
setTimeout(() => {
if (_this.imgbase64) {
//先海康验证
picturecheck({
facePicBinaryData: '/' + _this.getCaption(_this.imgbase64, 1, '/9j')
}).then(res => {
if (res.data.code == "00000") {
uni.showToast({
icon: 'none',
title: '上传成功',
duration: 3000
});
console.log('res.data.data',res.data.data)
if (res.data.data.checkResult && res.data.data.faceScore >= 75) {
item.url = _data.data || '';
_this.$emit('onChange', {
list: this.imageList,
index: this.index,
base64: '/' + _this.getCaption(_this.imgbase64, 1, '/9j')
});
} else {
uni.showToast({
icon: 'none',
title: res.data.data,
duration: 3000
});
}
} else {
uni.showToast({
icon: 'none',
title: res.data.desc,
duration: 3000
});
}
})
} else {
uni.showToast({
icon: 'none',
title: '图片上传失败',
duration: 3000
});
return;
}
}, 1000)
},
fail: () => {
uni.showToast({
icon: 'none',
title: '图片上传失败',
duration: 3000
});
this.imageList.pop();
return;
}
});
uploadTask.onProgressUpdate(res => {
item.progress = res.progress;
});
},
// 设置头像base64
setAvatarBase64(src, callback) {
let _this = this;
let image = new Image();
// 处理缓存
image.src = src + '?v=' + Math.random();
// 支持跨域图片
image.crossOrigin = "*";
image.onload = function () {
let base64 = _this.transBase64FromImage(image);
callback && callback(base64);
}
},
// 将网络图片转换成base64格式
transBase64FromImage(image) {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
// 可选其他值 image/jpeg
return canvas.toDataURL("image/jpeg");
},
openbase(url) {
let _this = this;
_this.setAvatarBase64(url, (base64) => {
_this.imgbase64 = base64;
});
},
//删除图片
delImage(index) {
this.imageList.splice(index, 1);
this.$emit('onChange', {
list: this.imageList,
index: index,
base64: ""
});
},
//预览图片
previewImage(index) {
const urls = this.imageList.map(item => item.filePath);
uni.previewImage({
current: index,
urls: urls
});
},
//截取
getCaption(obj, state, strname) {
var index = obj.lastIndexOf(strname);
if (state == 0) {
obj = obj.substring(0, index);
} else {
obj = obj.substring(index + 1, obj.length);
}
return obj;
}
}
};
</script>
<style lang="scss">
.upload-content {
display: flex;
flex-wrap: wrap;
background-color: #fff;
}
.upload-item {
position: relative;
width: 200rpx;
height: 200rpx;
margin-right: 28rpx;
margin-top: 20rpx;
&:nth-child(4n) {
margin-right: 0;
}
.upload-img {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.upload-del-btn {
position: absolute;
right: -16rpx;
top: -14rpx;
z-index: 5;
width: 36rpx;
height: 36rpx;
border: 4rpx solid #fff;
border-radius: 100px;
}
.upload-progress {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 24rpx;
border-radius: 8rpx;
}
}
.upload-add-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
float: left;
width: 200rpx;
height: 200rpx;
margin-top: 10rpx;
z-index: 85;
border-radius: 8rpx;
background: #f7f7f7;
/* &:before,
&:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 4rpx;
height: 60rpx;
background-color: #d6d6d6;
}
&:after {
width: 60rpx;
height: 4rpx;
} */
}
</style><template>
<view class="contain-box">
<u-navbar :title="title" :is-back="true" back-icon-color="#fff" :background="background" :border-bottom="false"
title-color="#fff" :custom-back="backPre">
</u-navbar>
<view class="form-box">
<u-form :model="form" ref="uForm" labelWidth="220" :toast="false">
<u-form-item label="来访人姓名" prop="visitName" required>
<u-input v-model="form.visitName" placeholder="请输入" />
</u-form-item>
<u-form-item label="手机号码" prop="visitMoblie" required>
<u-input v-model="form.visitMoblie" placeholder="请输入" />
</u-form-item>
<!-- <u-form-item label="人脸照片" prop="visitImg" borderBottom required>
<u-input
v-model="form.visitImg"
disabled
disabledColor="#ffffff"
placeholder="添加"
@click="showPhoto"
></u-input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item> -->
<!-- <u-form-item label="人脸照片" prop="visitImg" required>
<u-upload
:max-count="1"
upload-text="请上传照片"
@on-success="successUpload"
@on-change="changeUpload"
@on-error="errorUpload"
@on-remove="removeUpload"
:action="action_"
:file-list="fileList"
:max-size="5 * 1024 * 1024"
:header="header_"
ref="imgref"
>
</u-upload>
</u-form-item> -->
<u-form-item label="人脸照片" prop="visitImg" required>
<sq-upload-image :length="1" :index="0" @onChange="onImageChange($event)" :editImg="form.visitImg">
</sq-upload-image>
</u-form-item>
<u-form-item label="身份证号" prop="visitCard" required>
<u-input v-model="form.visitCard" placeholder="请输入" />
</u-form-item>
<u-form-item label="性别" prop="gender" required>
<u-radio-group v-model="form.gender" @change="getradio">
<u-radio name="1"> 男 </u-radio>
<u-radio name="2"> 女 </u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="访客单位">
<u-input v-model="form.visitUnits" placeholder="请输入" />
</u-form-item>
<u-form-item label="来访时间" prop="visitTime" required>
<u-input placeholder="请选择来访时间" :clearable="false" v-model="form.visitTime" @click="showDate = true"
type="select" />
<!-- <u-calendar
v-model="showDate"
mode="date"
@change="dateChange"
></u-calendar> -->
<u-picker mode="time" v-model="showDate" @confirm="dateChange" :params="timeparams"></u-picker>
</u-form-item>
<!-- 来访截止时间 -->
<u-form-item label="来访截止时间" prop="visitEndTime" required>
<u-input placeholder="请选择来访截止时间" :clearable="false" v-model="form.visitEndTime"
@click="showDatevisitEndTime = true" type="select" />
<u-picker mode="time" v-model="showDatevisitEndTime" @confirm="dateChangevisitEndTime"
:params="timeparams"></u-picker>
</u-form-item>
<u-form-item label="被访人姓名" prop="intervieweeName" required v-if="dtype !== 2">
<u-input v-model="form.intervieweeName" placeholder="请输入" />
</u-form-item>
<u-form-item label="被访人手机号码" prop="intervieweeMoblie" required v-if="dtype !== 2">
<u-input v-model="form.intervieweeMoblie" placeholder="请输入" :maxlength="11" @input="getNumber()" />
</u-form-item>
<u-form-item label="被访人部门" v-if="dtype !== 2">
<u-input v-model="form.intervieweeUnits" placeholder="请输入" />
</u-form-item>
<u-form-item label="拜访地址" prop="projectId" required v-if="phoneShow">
<u-input placeholder="请选择拜访地址" :clearable="false" v-model="projectIdLabel"
@click="projectManagementListShowType = true" type="select" />
<u-select :list="projectManagementList" v-model="projectManagementListShowType"
@confirm="getprojectManagementList" value-name="id" label-name="projectName">
</u-select>
</u-form-item>
<u-form-item label="事由" prop="visitReason" required>
<u-input v-model="form.visitReason" type="textarea" height="150" :auto-height="true" :border="true"
placeholder="请输入（限100字）" :maxlength="100" />
</u-form-item>
<u-form-item label="随访人数(不含自己)" :label-width="200" type="number">
<u-input v-model="form.visitNumber" placeholder="请输入" />
</u-form-item>
<u-form-item label="是否开车" prop="visitCar" required>
<u-radio-group v-model="form.visitCar" @change="getradio">
<u-radio name="1"> 是 </u-radio>
<u-radio name="0"> 否 </u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="车牌号码" prop="licensePlate" required v-if="cshow">
<u-input v-model="form.licensePlate" placeholder="请输入" />
</u-form-item>
</u-form>
<u-button @click="formClear('uForm')" style="margin-top: 15px">表单清空</u-button>
<u-button @click="submit('uForm')" type="primary" style="margin-top: 15px">提交</u-button>
</view>
<u-modal v-model="toptipshow" :mask-close-able="true" title="提示" content="是否确认清空表单?" :show-cancel-button="true"
@confirm="confirClear">
</u-modal>
</view>
</template>
<script>
import { getUser, insert } from "@/api/visitor.js";
let urlAPI = require("@/static/config.js");
export default {
data() {
const validatelicensePlate = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入车牌号码"));
} else {
let dvalue = value.toLocaleUpperCase();
if (
!/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(
dvalue
)
) {
callback(new Error("请输入正确的车牌格式"));
} else {
callback();
}
}
};
return {
toptipshow: false,
title: "",
background: {
backgroundColor: "#558eff",
},
cshow: false,
showDate: false,
showDatevisitEndTime: false,
timeparams: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
},
form: {
visitName: "",
visitMoblie: "",
visitImg: "",
faceImagesBase64: "",
visitCard: "",
gender: "",
visitUnits: "",
visitTime: "",
visitEndTime: "",
intervieweeName: "",
intervieweeMoblie: "",
visitNumber: 0,
visitCar: "", //0 否 1是
licensePlate: "",
visitOpenId: "",
projectId: "",
},
rules: {
visitName: [
{
required: true,
message: "请输入来访人姓名",
trigger: ["blur", "change"],
},
],
visitMoblie: [
{
required: true,
message: "请输入联系方式",
trigger: ["blur", "change"],
},
{
pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
// 正则检验前先将值转为字符串
transform(value) {
return String(value);
},
message: "联系方式输入有误",
},
],
intervieweeMoblie: [
{
required: true,
message: "请输入被访人联系方式",
trigger: ["blur", "change"],
},
{
pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
// 正则检验前先将值转为字符串
transform(value) {
return String(value);
},
message: "联系方式输入有误",
},
],
visitImg: [
{
required: true,
message: "请上传照片",
trigger: ["blur", "change"],
},
],
visitCard: [
{
required: true,
message: "请输入身份证号",
trigger: ["blur", "change"],
},
{
pattern:
/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
// 正则检验前先将值转为字符串
transform(value) {
return String(value);
},
message: "身份证号输入有误",
},
],
gender: [
{
required: true,
message: "请选择性别",
trigger: ["blur", "change"],
},
],
visitTime: [
{
required: true,
message: "请选择来访时间",
trigger: ["change", "blur"],
},
],
visitEndTime: [
{
required: true,
message: "请选择来访截止时间",
trigger: ["change", "blur"],
},
],
intervieweeName: [
{
required: true,
message: "请输入被访人姓名",
trigger: ["blur", "change"],
},
],
visitCar: [
{
required: true,
message: "请选择",
trigger: ["blur", "change"],
},
],
licensePlate: [
// {
// required: true,
// message: "请输入车牌号码",
// trigger: ["blur", "change"],
// },
// {
// pattern:
// /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/,
// // 正则检验前先将值转为字符串
// transform(value) {
// return String(value);
// },
// message: "车牌号码格式不对",
// },
{
required: true,
validator: validatelicensePlate,
trigger: ["blur", "change"],
},
],
visitReason: [
{
required: true,
message: "请输入事由",
trigger: ["blur", "change"],
},
{
max: 100,
message: "字数超出限制，请重新输入",
trigger: ["blur", "change"],
},
],
projectId: [
{
required: true,
message: "选择拜访地址",
trigger: ["blur", "change"],
},
],
},
// action_: dev.imgUrl + "/sdfs/file/uploadImage",
action_: urlAPI.baseUrl_applet + "/sdfs/file/uploadImage",
header_: {
"author-token-key": uni.getStorageSync("token"),
},
fileList: [],
warrantyTypeList: [],
items_: "",
dtype: "",
listType: [
{
label: "室内",
value: "1",
},
{
label: "室外",
value: "2",
},
],
showType: false,
projectManagementList: [],
projectManagementListShowType: false,
projectIdLabel: "",
phoneShow: false,
toptipshow: false,
};
},
onHide(e) {
//离开就缓存数据
uni.setStorageSync("formItem", JSON.stringify(this.form));
},
onLoad(e) {
this.items_ = JSON.parse(e.items);
this.dtype = this.items_.type;
this.title = this.items_.type == 1 ? "访客预约" : "来宾邀约";
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
if (this.$refs.uForm) {
this.$refs.uForm.setRules(this.rules);
}
if (uni.getStorageSync("formItem")) {
this.form = JSON.parse(uni.getStorageSync("formItem"));
//头像图片回显
if (this.form.visitImg && this.form.visitImg !== null) {
this.fileList = [
{
url: this.form.visitImg,
},
];
}
//是否开车显示车牌
if (this.form.visitCar == "1") {
this.cshow = true;
} else {
this.cshow = false;
}
//拜访地址回显
if (this.form.intervieweeMoblie && this.form.intervieweeMoblie !== null) {
this.getNumber();
this.projectIdLabel = uni.getStorageSync("projectIdLabel");
}
}
},
watch: {},
methods: {
formClear() {
this.toptipshow = true;
},
confirClear() {
//清空缓存和表单
uni.removeStorageSync("formItem");
uni.removeStorageSync("projectIdLabel");
Object.keys(this.form).forEach((key) => {
this.form[key] = "";
});
// this.form.visitOpenId = "sss";
if (uni.getStorageSync("_USER_OPENID")) {
this.form.visitOpenId = uni.getStorageSync("_USER_OPENID");
}
this.form.visitNumber = 0;
this.fileList = [];
this.$refs.imgref.lists.splice(0);
},
//返回按钮是否点击
backPre() {
//缓存数据
uni.setStorageSync("formItem", JSON.stringify(this.form));
uni.navigateTo({
url: "/pages/visitor/index",
});
},
successUpload(data, index, lists, name) {
if (data.code == "00000") {
let imgarr = [];
imgarr = lists.map((item) => {
return item.response.data;
});
// console.log("imgarr", imgarr);
this.form.visitImg = imgarr.join(",");
}
},
onImageChange(val) {
if (val) {
this.form.visitImg = val.list[0]?val.list[0].url:'';
this.form.faceImagesBase64 = val.base64;
}
},
changeUpload(res, index, lists, name) {
// console.log("changeUpload", lists);
},
errorUpload(res, index, lists, name) { },
removeUpload(index, lists, name) {
let imgarr = [];
imgarr = lists.map((item) => {
return item.response.data;
});
this.form.imgPath = imgarr.join(",");
},
//----------
getradio(v) {
if (v == 1) {
this.cshow = true;
} else {
this.cshow = false;
this.form.licensePlate = "";
}
},
dateChange(data) {
// this.formData.visitTime = data.result + " 00:00:00";
// this.form.visitTime = "2025-07-02 13:01:00";
this.form.visitTime =
data.year +
"-" +
data.month +
"-" +
data.day +
" " +
data.hour +
":" +
data.minute +
":" +
data.second;
},
dateChangevisitEndTime(data) {
this.form.visitEndTime =
data.year +
"-" +
data.month +
"-" +
data.day +
" " +
data.hour +
":" +
data.minute +
":" +
data.second;
},
showPhoto(e) {
// this.showType2 = true;
// console.log(111);
},
getShowtype(e) {
// this.form.areaType = e[0].value;
// this.areaTypeLabel = e[0].label;
// console.log("e", e);
},
submit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
//我的预约
if (this.dtype == 1) {
const params = Object.assign({}, this.form);
if (uni.getStorageSync("_USER_OPENID")) {
params.visitOpenId = uni.getStorageSync("_USER_OPENID");
}
insert(params).then((res) => {
if (res.data.code == "00000") {
// uni.showToast({
// title: "预约成功",
// });
this.confirClear();
setTimeout(() => {
uni.navigateTo({
url:
`/pages/visitor/compoment/sucess?item=` +
JSON.stringify(res.data.data),
});
}, 1000);
} else {
uni.showToast({
icon: "none",
title: res.data.desc,
});
}
});
} else {
//来宾邀约
let params = {
visitName: this.form.visitName,
visitMoblie: this.form.visitMoblie,
visitImg: this.form.visitImg,
visitCard: this.form.visitCard,
gender: this.form.gender,
visitUnits: this.form.visitUnits,
visitTime: this.form.visitTime,
visitEndTime: this.form.visitEndTime,
visitReason: this.form.visitReason,
visitNumber: this.form.visitNumber,
visitCar: this.form.visitCar,
licensePlate: this.form.licensePlate,
faceImagesBase64: this.form.faceImagesBase64,
};
inviteinsert(params).then((res) => {
if (res.data.code == "00000") {
setTimeout(() => {
uni.navigateTo({
url:
`/pages/visitor/compoment/sucess?item=` +
JSON.stringify(res.data.data),
});
}, 1000);
} else {
uni.showToast({
icon: "none",
title: res.data.desc,
});
}
});
}
} else {
console.log("验证失败");
}
});
},
//拜访地址请求
_getUser() {
getUser({
intervieweeMoblie: this.form.intervieweeMoblie,
}).then((res) => {
if (res.data.code == 200) {
if (res.data.data) {
if (res.data.data.projectManagementList) {
this.projectManagementList =
res.data.data.projectManagementList || [];
}
} else {
this.projectManagementList = [];
this.form.projectId = "";
this.projectIdLabel = "";
}
}
});
},
getNumber() {
if (
this.form.intervieweeMoblie &&
this.form.intervieweeMoblie.length == 11
) {
let regExp = new RegExp("^1[3|4|5|6|7|8|9][0-9]{9}$");
if (regExp.test(this.form.intervieweeMoblie)) {
this.phoneShow = true;
this._getUser();
} else {
this.phoneShow = false;
uni.showToast({
icon: "none",
title: "请输入正确的手机号",
});
}
}
},
getprojectManagementList(v) {
if (v) {
this.form.projectId = v[0].value.toString();
this.projectIdLabel = v[0].label;
uni.setStorageSync("projectIdLabel", this.projectIdLabel);
}
},
},
};
</script>
<style lang="scss">
.contain-box {
height: 100vh;
background-color: #fff;
.form-box {
padding: 18px;
}
}
</style>
