|
|
<template>
|
|
|
<view class="page">
|
|
|
<!-- 门岗访客管理页面 -->
|
|
|
<!-- 头部导航 -->
|
|
|
<view class="gate-header">
|
|
|
<view class="gate-left">
|
|
|
<view class="today-visitors" @click="openList">访客列表</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 主要内容区域 -->
|
|
|
<view class="gate-content">
|
|
|
<view class="form-container">
|
|
|
<view class="form-title">填写信息</view>
|
|
|
<!-- 拜访日期选择 - 时间段选择 -->
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">※ 拜访日期：</text>
|
|
|
<view class="date-range-container">
|
|
|
<picker
|
|
|
mode="date"
|
|
|
:value="select.start_date"
|
|
|
@change="onStartDateChange"
|
|
|
class="date-picker"
|
|
|
>
|
|
|
<view class="form-input date-input">
|
|
|
<text>{{ select.start_date || "开始日期" }}</text>
|
|
|
</view>
|
|
|
</picker>
|
|
|
<view class="date-separator">至</view>
|
|
|
<picker
|
|
|
mode="date"
|
|
|
:value="select.end_date"
|
|
|
@change="onEndDateChange"
|
|
|
class="date-picker"
|
|
|
>
|
|
|
<view class="form-input date-input">
|
|
|
<text>{{ select.end_date || "结束日期" }}</text>
|
|
|
</view>
|
|
|
</picker>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 核验销码输入 -->
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">※ 核验销码：</text>
|
|
|
<input
|
|
|
v-model="select.code"
|
|
|
placeholder="请扫描访客二维码"
|
|
|
@input="onCodeInput"
|
|
|
class="form-input input-field"
|
|
|
/>
|
|
|
</view>
|
|
|
|
|
|
<!-- 身份证输入 -->
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">※ 身份证件：</text>
|
|
|
<view class="id-input-group idcard-group">
|
|
|
<input
|
|
|
v-model="select.idcard"
|
|
|
placeholder="请输入身份证"
|
|
|
class="form-input input-field"
|
|
|
/>
|
|
|
<!-- #ifdef H5 -->
|
|
|
<view class="id-action" @click="getIdcard">查询身份证</view>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- ID卡输入 -->
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">※ ID卡：</text>
|
|
|
<view class="id-input-group">
|
|
|
<input
|
|
|
v-model="select.person_no"
|
|
|
placeholder="请输入ID卡"
|
|
|
class="form-input input-field"
|
|
|
/>
|
|
|
<!-- <button @click="getIdcard" class="btn btn-primary id-btn">查询身份证</button> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 查询按钮 -->
|
|
|
<view class="form-item query-btn-container">
|
|
|
<button
|
|
|
@click="getList"
|
|
|
class="btn btn-primary query-btn"
|
|
|
:disabled="loading"
|
|
|
>
|
|
|
{{ loading ? "查询中..." : "查询" }}
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 访客信息弹窗 -->
|
|
|
<view v-if="visitShow" class="modal-overlay" @click="closeVisitModal">
|
|
|
<view class="modal-content" @click.stop>
|
|
|
<view class="modal-header">
|
|
|
<text class="modal-title">访客信息</text>
|
|
|
</view>
|
|
|
<view class="modal-body">
|
|
|
<view class="visit-info" v-if="visitData">
|
|
|
<!-- 拜访信息 -->
|
|
|
<view class="info-section">
|
|
|
<text class="section-title">拜访信息</text>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">拜访类型：</text>
|
|
|
<text class="info-value">{{
|
|
|
getVisitTypeText(visitData.type)
|
|
|
}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">拜访日期：</text>
|
|
|
<text class="info-value">{{
|
|
|
getVisitDateRange(visitData)
|
|
|
}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">到访时间：</text>
|
|
|
<text class="info-value">{{
|
|
|
visitData.time ? visitData.time : ""
|
|
|
}}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="visitData.visit_time_detail">
|
|
|
<text class="info-label">到访时段：</text>
|
|
|
<text class="info-value"
|
|
|
>{{ visitData.visit_time_detail.start_time }} -
|
|
|
{{ visitData.visit_time_detail.end_time }}</text
|
|
|
>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="visitData.visit_area_detail">
|
|
|
<text class="info-label">前往区域：</text>
|
|
|
<text class="info-value">{{
|
|
|
visitData.visit_area_detail.name
|
|
|
}}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="visitData.reason">
|
|
|
<text class="info-label">到访事由：</text>
|
|
|
<text class="info-value">{{ visitData.reason }}</text>
|
|
|
</view>
|
|
|
<view
|
|
|
class="info-item"
|
|
|
v-if="visitData.cars && visitData.cars.length > 0"
|
|
|
>
|
|
|
<text class="info-label">到访车辆：</text>
|
|
|
<text class="info-value">{{ visitData.cars.join(", ") }}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="visitData.plate">
|
|
|
<text class="info-label">车辆类型：</text>
|
|
|
<text class="info-value">{{ visitData.plate }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 被访人信息 -->
|
|
|
<view class="info-section">
|
|
|
<text class="section-title">被访人信息</text>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">被访人：</text>
|
|
|
<text class="info-value">{{
|
|
|
visitData.accept_admin ? visitData.accept_admin.name : "-"
|
|
|
}}</text>
|
|
|
</view>
|
|
|
<!-- <view class="info-item" v-if="visitData.accompanyName">
|
|
|
<text class="info-label">陪同人：</text>
|
|
|
<text class="info-value">{{ visitData.accompanyName }}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="visitData.goodsName">
|
|
|
<text class="info-label">收货人：</text>
|
|
|
<text class="info-value">{{ visitData.goodsName }}</text>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
<!-- 拜访人信息 -->
|
|
|
<view class="info-section">
|
|
|
<text class="section-title">拜访人信息</text>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">姓名：</text>
|
|
|
<text class="info-value">{{ visitData.name }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">联系电话：</text>
|
|
|
<text class="info-value">{{ visitData.mobile }}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="visitData.credent">
|
|
|
<text class="info-label">证件类型：</text>
|
|
|
<text class="info-value">{{
|
|
|
visitData.credent == 1 ? "身份证" : "护照"
|
|
|
}}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="visitData.idcard">
|
|
|
<text class="info-label">{{
|
|
|
visitData.credent == 1 ? "身份证号：" : "护照号码："
|
|
|
}}</text>
|
|
|
<text class="info-value">{{ visitData.idcard }}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="visitData.company_name">
|
|
|
<text class="info-label">单位名称：</text>
|
|
|
<text class="info-value">{{ visitData.company_name }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">状态：</text>
|
|
|
<text class="info-value status-badge"
|
|
|
:class="getStatusInfo(visitData.audit_status).class">
|
|
|
{{ getStatusInfo(visitData.audit_status).text }}</text>
|
|
|
</view>
|
|
|
<!-- 人员编号输入 -->
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">ID卡：</text>
|
|
|
<view class="info-input-wrapper">
|
|
|
<input
|
|
|
v-model="personNoValue"
|
|
|
placeholder="请输入ID卡"
|
|
|
class="info-input"
|
|
|
/>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 随访人员信息 -->
|
|
|
<view
|
|
|
class="info-section"
|
|
|
v-if="visitData.follw_people && visitData.follw_people.length > 0"
|
|
|
>
|
|
|
<text class="section-title">随访人员</text>
|
|
|
<view
|
|
|
v-for="(person, index) in visitData.follw_people"
|
|
|
:key="index"
|
|
|
class="follow-person-item"
|
|
|
>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">姓名：</text>
|
|
|
<text class="info-value">{{ person.name }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">联系电话：</text>
|
|
|
<text class="info-value">{{ person.mobile }}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="person.credent">
|
|
|
<text class="info-label">证件类型：</text>
|
|
|
<text class="info-value">{{
|
|
|
person.credent == 1 ? "身份证" : "护照"
|
|
|
}}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-if="person.idcard">
|
|
|
<text class="info-label">{{
|
|
|
person.credent == 1 ? "身份证号：" : "护照号码："
|
|
|
}}</text>
|
|
|
<text class="info-value">{{ person.idcard }}</text>
|
|
|
</view>
|
|
|
<!-- ID卡输入框 -->
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">ID卡：</text>
|
|
|
<view class="info-input-wrapper">
|
|
|
<input
|
|
|
v-model="person.follw_people_person_no"
|
|
|
placeholder="请输入ID卡"
|
|
|
class="info-input"
|
|
|
/>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
class="separator"
|
|
|
v-if="index < visitData.follw_people.length - 1"
|
|
|
></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 备注输入 -->
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">备注：</text>
|
|
|
<view class="info-input-wrapper">
|
|
|
<textarea
|
|
|
rows="3"
|
|
|
v-model="remarkValue"
|
|
|
placeholder="请输入备注信息"
|
|
|
class="info-textarea"
|
|
|
></textarea>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 车辆照片上传 (仅type==3时显示) -->
|
|
|
<view
|
|
|
v-if="visitData.type == 3"
|
|
|
class="info-item photo-upload-section"
|
|
|
>
|
|
|
<text class="info-label">车辆照片：</text>
|
|
|
<view class="photo-upload-container">
|
|
|
<!-- 照片列表 -->
|
|
|
<view class="uploaded-photos">
|
|
|
<!-- 已上传的照片 -->
|
|
|
<view
|
|
|
v-for="(image, index) in vehicleImages"
|
|
|
:key="index"
|
|
|
class="photo-item"
|
|
|
>
|
|
|
<image
|
|
|
:src="image.url"
|
|
|
class="photo-preview"
|
|
|
mode="aspectFill"
|
|
|
@click="previewImage(image.url)"
|
|
|
></image>
|
|
|
<view class="photo-delete" @click="removeImage(index)"
|
|
|
>×</view
|
|
|
>
|
|
|
</view>
|
|
|
|
|
|
<!-- 添加照片按钮（最多9张） -->
|
|
|
<view
|
|
|
v-if="vehicleImages.length < 9"
|
|
|
class="photo-item add-photo-btn"
|
|
|
@click="showPhotoOptions"
|
|
|
>
|
|
|
<view class="add-photo-icon">+</view>
|
|
|
<view class="add-photo-text">添加照片</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部选择弹窗 -->
|
|
|
<view v-if="showPhotoActionSheet" class="photo-action-sheet">
|
|
|
<view
|
|
|
class="action-sheet-overlay"
|
|
|
@click="hidePhotoOptions"
|
|
|
></view>
|
|
|
<view class="action-sheet-content">
|
|
|
<view class="action-sheet-item" @click="chooseImage">
|
|
|
<text class="action-sheet-text">选择照片</text>
|
|
|
</view>
|
|
|
<view class="action-sheet-item" @click="takePhoto">
|
|
|
<text class="action-sheet-text">拍照</text>
|
|
|
</view>
|
|
|
<view class="action-sheet-cancel" @click="hidePhotoOptions">
|
|
|
<text class="action-sheet-cancel-text">取消</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modal-footer">
|
|
|
<button @click="closeVisitModal" class="btn btn-secondary">
|
|
|
关闭
|
|
|
</button>
|
|
|
<button
|
|
|
@click="updateVisitInfo"
|
|
|
class="btn btn-primary"
|
|
|
:disabled="updating"
|
|
|
>
|
|
|
{{ updating ? "更新并核销中..." : "更新并核销" }}
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 今日访客列表弹窗 -->
|
|
|
<view v-if="listShow" class="modal-overlay" @click="closeListModal">
|
|
|
<view class="modal-content" @click.stop>
|
|
|
<view class="modal-header">
|
|
|
<text class="modal-title">访客列表</text>
|
|
|
</view>
|
|
|
<view class="modal-body">
|
|
|
<view class="visitor-list">
|
|
|
<view v-if="todayVisitors.length === 0" class="empty-state">
|
|
|
<text>暂无访客记录</text>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
<view class="visitor-header">
|
|
|
<view class="visitor-col visitor-col-name">姓名</view>
|
|
|
<view class="visitor-col visitor-col-visited">被访人</view>
|
|
|
<view class="visitor-col visitor-col-status">状态</view>
|
|
|
</view>
|
|
|
<view
|
|
|
v-for="visitor in todayVisitors"
|
|
|
:key="visitor.id"
|
|
|
class="visitor-item"
|
|
|
>
|
|
|
<view class="visitor-name">{{ visitor.name }}</view>
|
|
|
<view class="visitor-visited">{{
|
|
|
visitor.accept_admin ? visitor.accept_admin.name : "-"
|
|
|
}}</view>
|
|
|
<view
|
|
|
class="visitor-status status-badge"
|
|
|
:class="getStatusInfo(visitor.audit_status).class"
|
|
|
>
|
|
|
{{ getStatusInfo(visitor.audit_status).text }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modal-footer">
|
|
|
<button @click="closeListModal" size="mini" class="btn btn-primary">
|
|
|
关闭
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { openDevice, readIdCard, closeDevice } from "@/common/reader.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
fullscreen: false,
|
|
|
loading: false,
|
|
|
dateRangeText: "",
|
|
|
select: {
|
|
|
page: 1,
|
|
|
rows: 999,
|
|
|
keyword: "",
|
|
|
audit_status: "",
|
|
|
start_date: "",
|
|
|
end_date: "",
|
|
|
is_export: 0,
|
|
|
code: "",
|
|
|
idcard: "",
|
|
|
person_no: "", // ID卡
|
|
|
},
|
|
|
visitShow: false,
|
|
|
visitData: null,
|
|
|
vehicleImages: [], // 车辆照片数组
|
|
|
remarkValue: "", // 备注值
|
|
|
personNoValue: "", // 人员编号
|
|
|
uploading: false, // 上传状态
|
|
|
updating: false, // 更新状态
|
|
|
showPhotoActionSheet: false, // 控制照片选择弹窗显示
|
|
|
listShow: false,
|
|
|
todayVisitors: [],
|
|
|
// 提交的核销数据
|
|
|
codeForm: {
|
|
|
code: "",
|
|
|
type: "",
|
|
|
},
|
|
|
statusList: [
|
|
|
{
|
|
|
id: -1,
|
|
|
value: "待学习",
|
|
|
},
|
|
|
{
|
|
|
id: 0,
|
|
|
value: "待审核",
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
value: "通过(待进厂)",
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
value: "驳回",
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
value: "已进厂",
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
value: "已离厂",
|
|
|
},
|
|
|
{
|
|
|
id: 5,
|
|
|
value: "已取消",
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.checkAuth();
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
// 上拉加载更多
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
// 下拉刷新
|
|
|
this.getToday();
|
|
|
uni.stopPullDownRefresh();
|
|
|
},
|
|
|
methods: {
|
|
|
// 链接读卡器
|
|
|
connectReader() {
|
|
|
openDevice().then((res) => {
|
|
|
console.log("链接读卡器", res);
|
|
|
if (res.data.resultFlag == 0) {
|
|
|
uni.showToast({
|
|
|
title: "身份证读卡器链接成功",
|
|
|
icon: "none",
|
|
|
});
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: "身份证读卡器链接失败",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 检查认证状态
|
|
|
async checkAuth() {
|
|
|
try {
|
|
|
// 检查是否有token
|
|
|
const lifeData = uni.getStorageSync("mkwcancel_lifeData");
|
|
|
const token = lifeData?.vuex_token || this.$store.state.vuex_token;
|
|
|
|
|
|
if (!token) {
|
|
|
// 没有token，直接跳转到登录页
|
|
|
uni.reLaunch({
|
|
|
url: "/pages/login/index",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
// 链接读卡器
|
|
|
this.connectReader();
|
|
|
// 有token，验证token有效性
|
|
|
const userRes = await this.$u.api.user();
|
|
|
console.log("用户信息验证:", userRes);
|
|
|
|
|
|
if (userRes) {
|
|
|
// token有效，存储用户信息
|
|
|
this.$u.vuex("vuex_user", userRes);
|
|
|
this.$u.vuex("vuex_token", token); // 确保在vuex中
|
|
|
// 初始化页面数据
|
|
|
this.getToday();
|
|
|
} else {
|
|
|
// token无效（但这种情况应该在http.interceptor.js中处理）
|
|
|
this.redirectToLogin();
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error("认证检查失败:", error);
|
|
|
// 错误情况下也跳转到登录页（通常由interceptor处理）
|
|
|
// 这里不需要手动跳转，因为40001错误会在interceptor中自动跳转
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 根据audit_status获取状态文本和样式类
|
|
|
getStatusInfo(auditStatus) {
|
|
|
const status = this.statusList.find((item) => item.id === auditStatus);
|
|
|
return {
|
|
|
text: status ? status.value : "未知状态",
|
|
|
class: this.getStatusClass(auditStatus),
|
|
|
};
|
|
|
},
|
|
|
|
|
|
// 根据audit_status获取样式类名
|
|
|
getStatusClass(auditStatus) {
|
|
|
const statusClasses = {
|
|
|
"-1": "status-study", // 待学习 - 橙色
|
|
|
0: "status-pending", // 待审核 - 蓝色
|
|
|
1: "status-approved", // 通过(待进厂) - 绿色
|
|
|
2: "status-rejected", // 驳回 - 红色
|
|
|
3: "status-entered", // 已进厂 - 深绿色
|
|
|
4: "status-left", // 已离厂 - 灰色
|
|
|
5: "status-cancelled", // 已取消 - 深灰色
|
|
|
};
|
|
|
return statusClasses[auditStatus.toString()] || "status-unknown";
|
|
|
},
|
|
|
|
|
|
// 根据type获取拜访类型文本
|
|
|
getVisitTypeText(type) {
|
|
|
const typeMap = {
|
|
|
1: "普通访客",
|
|
|
2: "施工访客",
|
|
|
3: "物流车辆",
|
|
|
};
|
|
|
return typeMap[type] || "未知类型";
|
|
|
},
|
|
|
|
|
|
// 获取拜访日期范围显示文本
|
|
|
getVisitDateRange(visitData) {
|
|
|
// 如果开始日期或结束日期为空，使用date字段
|
|
|
if (!visitData.start_date || !visitData.end_date) {
|
|
|
const date =
|
|
|
visitData.date || visitData.start_date || visitData.end_date;
|
|
|
return date ? `${date} 至 ${date}` : "-";
|
|
|
}
|
|
|
|
|
|
// 如果开始日期和结束日期相同，只显示一个日期
|
|
|
if (visitData.start_date === visitData.end_date) {
|
|
|
return visitData.start_date;
|
|
|
}
|
|
|
|
|
|
// 正常显示日期范围
|
|
|
return `${visitData.start_date} 至 ${visitData.end_date}`;
|
|
|
},
|
|
|
|
|
|
// 跳转到登录页
|
|
|
redirectToLogin() {
|
|
|
uni.reLaunch({
|
|
|
url: "/pages/login/index",
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 打开今日访客列表
|
|
|
openList() {
|
|
|
this.getTodayVisitors();
|
|
|
this.listShow = true;
|
|
|
},
|
|
|
|
|
|
// 获取今日日期
|
|
|
getToday() {
|
|
|
const now = new Date();
|
|
|
const year = now.getFullYear();
|
|
|
const month = String(now.getMonth() + 1).padStart(2, "0");
|
|
|
const day = String(now.getDate()).padStart(2, "0");
|
|
|
const today = `${year}-${month}-${day}`;
|
|
|
|
|
|
this.select.start_date = today;
|
|
|
this.select.end_date = today;
|
|
|
},
|
|
|
|
|
|
// 开始日期选择
|
|
|
onStartDateChange(e) {
|
|
|
const selectedDate = e.detail.value;
|
|
|
this.select.start_date = selectedDate;
|
|
|
|
|
|
// 如果结束日期早于开始日期，自动设置为开始日期
|
|
|
if (this.select.end_date && this.select.end_date < selectedDate) {
|
|
|
this.select.end_date = selectedDate;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 结束日期选择
|
|
|
onEndDateChange(e) {
|
|
|
const selectedDate = e.detail.value;
|
|
|
|
|
|
// 如果结束日期早于开始日期，提示用户
|
|
|
if (this.select.start_date && selectedDate < this.select.start_date) {
|
|
|
uni.showToast({
|
|
|
title: "结束日期不能早于开始日期",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.select.end_date = selectedDate;
|
|
|
},
|
|
|
|
|
|
// 核销码输入变化
|
|
|
onCodeInput(e) {
|
|
|
this.select.code = e.detail.value;
|
|
|
if (this.select.code) {
|
|
|
this.getList();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 清空输入
|
|
|
clearInputs() {
|
|
|
this.select.code = "";
|
|
|
this.select.idcard = "";
|
|
|
this.select.person_no = "";
|
|
|
},
|
|
|
|
|
|
// 查询访客信息
|
|
|
async getList() {
|
|
|
if (!this.select.code && !this.select.idcard && !this.select.person_no) {
|
|
|
uni.showToast({
|
|
|
title: "请输入核销码或身份证件或ID卡",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.loading = true;
|
|
|
try {
|
|
|
// 这里需要根据实际情况替换API调用
|
|
|
// 使用visitList接口查询访客
|
|
|
const searchParams = {
|
|
|
start_date: this.select.start_date,
|
|
|
end_date: this.select.end_date,
|
|
|
};
|
|
|
|
|
|
// 添加搜索条件
|
|
|
if (this.select.code) {
|
|
|
searchParams.code = this.select.code;
|
|
|
}
|
|
|
if (this.select.idcard) {
|
|
|
searchParams.idcard = this.select.idcard;
|
|
|
}
|
|
|
if (this.select.person_no) {
|
|
|
searchParams.person_no = this.select.person_no;
|
|
|
}
|
|
|
|
|
|
const res = await this.$u.api.visitList(searchParams);
|
|
|
|
|
|
if (res && res.data && res.data.length > 0) {
|
|
|
const visitor = res.data[0];
|
|
|
if (visitor.audit_status == 1 || visitor.audit_status == 3) {
|
|
|
// 设置访客数据，包含新增的拜访信息字段：
|
|
|
// type, start_date, end_date, visit_time_detail, visit_area_detail,
|
|
|
// reason, cars, plate, credent, idcard, company_name, cda,
|
|
|
// follw_people, accompanyName, goodsName
|
|
|
this.visitData = visitor;
|
|
|
|
|
|
// 确保每个随访人员都有follw_people_person_no字段
|
|
|
if (
|
|
|
this.visitData.follw_people &&
|
|
|
this.visitData.follw_people.length > 0
|
|
|
) {
|
|
|
this.visitData.follw_people.forEach((person) => {
|
|
|
if (!person.follw_people_person_no) {
|
|
|
person.follw_people_person_no = "";
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
this.personNoValue = visitor.person_no;
|
|
|
this.remarkValue = visitor.remark;
|
|
|
if (
|
|
|
visitor.vehicle_images_detail &&
|
|
|
visitor.vehicle_images_detail.length > 0
|
|
|
) {
|
|
|
let arr = [];
|
|
|
visitor.vehicle_images_detail.map((item) => {
|
|
|
arr.push({
|
|
|
id: item.id,
|
|
|
url: item.url,
|
|
|
});
|
|
|
});
|
|
|
this.vehicleImages = arr;
|
|
|
}
|
|
|
// 核销的值
|
|
|
this.codeForm.code = visitor.code;
|
|
|
this.codeForm.type = visitor.audit_status == 1 ? 1 : 2; //(visitor.audit_status == 3 && visitor.accept_admin_sign ? 2 : 0) 离厂陪同人员签字
|
|
|
|
|
|
this.visitShow = true;
|
|
|
} else {
|
|
|
const statusInfo = this.getStatusInfo(visitor.audit_status);
|
|
|
uni.showToast({
|
|
|
title: statusInfo.text,
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: "未查询到记录",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
uni.showToast({
|
|
|
title: "查询失败",
|
|
|
icon: "none",
|
|
|
});
|
|
|
} finally {
|
|
|
this.loading = false;
|
|
|
}
|
|
|
},
|
|
|
// 核销
|
|
|
cancelCode() {
|
|
|
console.log(this.codeForm);
|
|
|
if (this.codeForm.type == 0) {
|
|
|
uni.showToast({
|
|
|
title: "请提醒陪同人签字",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
this.$u.api.visitCancel(this.codeForm).then((res) => {
|
|
|
// if (res.code == 200) {
|
|
|
// this.$successMessage(res.msg, '', 'success')
|
|
|
// }
|
|
|
console.log(res);
|
|
|
uni.showToast({
|
|
|
title: "核销成功",
|
|
|
icon: "none",
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
// 读取身份证
|
|
|
getIdcard() {
|
|
|
this.select.idcard = "";
|
|
|
readIdCard().then((res) => {
|
|
|
console.log("读取身份证", res);
|
|
|
if (res.data.resultFlag == 0) {
|
|
|
this.select.idcard = res.data.certNumber;
|
|
|
this.getList();
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: "读取身份证失败",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 切换全屏
|
|
|
toggleFullscreen() {
|
|
|
// #ifdef H5
|
|
|
const element = document.documentElement;
|
|
|
if (this.fullscreen) {
|
|
|
if (document.exitFullscreen) {
|
|
|
document.exitFullscreen();
|
|
|
} else if (document.webkitCancelFullScreen) {
|
|
|
document.webkitCancelFullScreen();
|
|
|
} else if (document.mozCancelFullScreen) {
|
|
|
document.mozCancelFullScreen();
|
|
|
} else if (document.msExitFullscreen) {
|
|
|
document.msExitFullscreen();
|
|
|
}
|
|
|
} else {
|
|
|
if (element.requestFullscreen) {
|
|
|
element.requestFullscreen();
|
|
|
} else if (element.webkitRequestFullScreen) {
|
|
|
element.webkitRequestFullScreen();
|
|
|
} else if (element.mozRequestFullScreen) {
|
|
|
element.mozRequestFullScreen();
|
|
|
} else if (element.msRequestFullscreen) {
|
|
|
element.msRequestFullscreen();
|
|
|
}
|
|
|
}
|
|
|
this.fullscreen = !this.fullscreen;
|
|
|
// #endif
|
|
|
},
|
|
|
|
|
|
// 关闭访客信息弹窗
|
|
|
closeVisitModal() {
|
|
|
this.visitShow = false;
|
|
|
this.visitData = null;
|
|
|
// 清空输入数据
|
|
|
this.vehicleImages = [];
|
|
|
this.remarkValue = "";
|
|
|
this.personNoValue = "";
|
|
|
this.uploading = false;
|
|
|
this.updating = false;
|
|
|
this.showPhotoActionSheet = false;
|
|
|
},
|
|
|
|
|
|
// 显示照片选择选项
|
|
|
showPhotoOptions() {
|
|
|
this.showPhotoActionSheet = true;
|
|
|
},
|
|
|
|
|
|
// 隐藏照片选择选项
|
|
|
hidePhotoOptions() {
|
|
|
this.showPhotoActionSheet = false;
|
|
|
},
|
|
|
|
|
|
// 选择照片
|
|
|
chooseImage() {
|
|
|
this.hidePhotoOptions();
|
|
|
const remainingCount = 9 - this.vehicleImages.length;
|
|
|
uni.chooseImage({
|
|
|
count: remainingCount, // 根据已上传数量动态计算
|
|
|
sizeType: ["original", "compressed"],
|
|
|
sourceType: ["album"],
|
|
|
success: (res) => {
|
|
|
this.uploadImages(res.tempFilePaths);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 拍照
|
|
|
takePhoto() {
|
|
|
this.hidePhotoOptions();
|
|
|
uni.chooseImage({
|
|
|
count: 1,
|
|
|
sizeType: ["original", "compressed"],
|
|
|
sourceType: ["camera"],
|
|
|
success: (res) => {
|
|
|
this.uploadImages(res.tempFilePaths);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 上传图片
|
|
|
async uploadImages(filePaths) {
|
|
|
if (!filePaths || filePaths.length === 0) return;
|
|
|
|
|
|
this.uploading = true;
|
|
|
|
|
|
try {
|
|
|
for (const filePath of filePaths) {
|
|
|
const uploadRes = await this.uploadSingleImage(filePath);
|
|
|
console.log("uploadRes123", uploadRes);
|
|
|
if (uploadRes && uploadRes.id) {
|
|
|
this.vehicleImages.push({
|
|
|
id: uploadRes.id,
|
|
|
url: uploadRes.url || filePath, // 使用返回的URL或本地路径
|
|
|
});
|
|
|
}
|
|
|
console.log("this.vehicleImages", this.vehicleImages);
|
|
|
}
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "上传成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
} catch (error) {
|
|
|
console.error("上传失败:", error);
|
|
|
uni.showToast({
|
|
|
title: "上传失败",
|
|
|
icon: "none",
|
|
|
});
|
|
|
} finally {
|
|
|
this.uploading = false;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 上传单张图片
|
|
|
uploadSingleImage(filePath) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
uni.uploadFile({
|
|
|
url: this.$u.http.config.baseUrl + "/api/admin/upload-file",
|
|
|
filePath: filePath,
|
|
|
name: "file",
|
|
|
header: {
|
|
|
Authorization: `Bearer ${this.$store.state.vuex_token}`,
|
|
|
},
|
|
|
success: (uploadRes) => {
|
|
|
try {
|
|
|
console.log("uploadRes", uploadRes);
|
|
|
const data = JSON.parse(uploadRes.data);
|
|
|
if (data && data.id) {
|
|
|
resolve(data);
|
|
|
} else {
|
|
|
reject("上传响应格式错误");
|
|
|
}
|
|
|
} catch (error) {
|
|
|
reject("解析上传响应失败");
|
|
|
}
|
|
|
},
|
|
|
fail: (error) => {
|
|
|
reject(error);
|
|
|
},
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 删除图片
|
|
|
removeImage(index) {
|
|
|
uni.showModal({
|
|
|
title: "确认删除",
|
|
|
content: "确定要删除这张照片吗？",
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
this.vehicleImages.splice(index, 1);
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 预览图片
|
|
|
previewImage(url) {
|
|
|
const urls = this.vehicleImages.map((img) => img.url);
|
|
|
uni.previewImage({
|
|
|
urls: urls,
|
|
|
current: url,
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 更新访客信息
|
|
|
async updateVisitInfo() {
|
|
|
if (this.updating) return;
|
|
|
|
|
|
// 验证必填字段 - 由于去除action，暂无必填验证
|
|
|
|
|
|
this.updating = true;
|
|
|
console.log("this.visitData", this.visitData);
|
|
|
// return
|
|
|
try {
|
|
|
const updateParams = {
|
|
|
...this.visitData,
|
|
|
id: this.visitData.id,
|
|
|
remark: this.remarkValue,
|
|
|
person_no: this.personNoValue,
|
|
|
// follw_people 中包含了每个人员的 follw_people_person_no 字段
|
|
|
};
|
|
|
|
|
|
// 如果type==3，添加车辆照片数据
|
|
|
if (this.visitData.type == 3) {
|
|
|
updateParams.vehicle_images = this.vehicleImages.map((img) => img.id);
|
|
|
}
|
|
|
|
|
|
const res = await this.$u.api.visitUpdate(updateParams);
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "更新成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
// 更新成功后直接核销并关闭弹窗
|
|
|
this.cancelCode();
|
|
|
setTimeout(() => {
|
|
|
this.closeVisitModal();
|
|
|
}, 800);
|
|
|
} catch (error) {
|
|
|
console.error("更新失败:", error);
|
|
|
uni.showToast({
|
|
|
title: "更新失败",
|
|
|
icon: "none",
|
|
|
});
|
|
|
} finally {
|
|
|
this.updating = false;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 关闭访客列表弹窗
|
|
|
closeListModal() {
|
|
|
this.listShow = false;
|
|
|
},
|
|
|
|
|
|
// 获取今日访客列表
|
|
|
async getTodayVisitors() {
|
|
|
try {
|
|
|
// 这里需要根据实际情况替换API调用
|
|
|
const todayParam = {
|
|
|
start_date: this.select.start_date,
|
|
|
end_date: this.select.end_date,
|
|
|
};
|
|
|
const res = await this.$u.api.visitList(todayParam);
|
|
|
this.todayVisitors = res?.data || [];
|
|
|
} catch (error) {
|
|
|
console.error("获取今日访客列表失败:", error);
|
|
|
this.todayVisitors = [];
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
background: url("../../static/cancel_bg.png") no-repeat center center;
|
|
|
background-size: cover;
|
|
|
min-height: 100vh;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* 头部导航样式 */
|
|
|
.gate-header {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
padding: 4% 5%;
|
|
|
margin-bottom: 6%;
|
|
|
background: #18284b;
|
|
|
min-height: 12vh;
|
|
|
|
|
|
/* 移动端样式 */
|
|
|
@media (max-width: 750px) {
|
|
|
padding: 3% 4%;
|
|
|
margin-bottom: 5%;
|
|
|
min-height: 10vh;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.gate-left {
|
|
|
.today-visitors {
|
|
|
color: #ffffff;
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.gate-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 40rpx;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
justify-content: space-between;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.fullscreen-btn {
|
|
|
color: #ffffff;
|
|
|
cursor: pointer;
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 主要内容区域 */
|
|
|
.gate-content {
|
|
|
width: 100%;
|
|
|
max-width: 1800rpx;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 5%;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
max-width: 100%;
|
|
|
padding: 0 4%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-container {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.form-title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 4%;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
font-size: 28rpx;
|
|
|
margin-bottom: 3%;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-item {
|
|
|
margin-bottom: 5%;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
margin-bottom: 4%;
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-label {
|
|
|
display: block;
|
|
|
font-size: 32rpx;
|
|
|
color: #333;
|
|
|
margin-bottom: 2%;
|
|
|
font-weight: 500;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
font-size: 28rpx;
|
|
|
margin-bottom: 1.5%;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
font-size: 40rpx;
|
|
|
margin-bottom: 2.5%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 统一输入框样式 */
|
|
|
.form-input {
|
|
|
width: 100%;
|
|
|
height: 88rpx;
|
|
|
padding: 0 24rpx;
|
|
|
border: 2rpx solid #e4e7ed;
|
|
|
border-radius: 0;
|
|
|
font-size: 32rpx;
|
|
|
background-color: #fff;
|
|
|
box-sizing: border-box;
|
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
height: 76rpx;
|
|
|
font-size: 28rpx;
|
|
|
padding: 0 16rpx;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
height: 100rpx;
|
|
|
font-size: 36rpx;
|
|
|
padding: 0 28rpx;
|
|
|
}
|
|
|
|
|
|
&:focus {
|
|
|
border-color: #004593;
|
|
|
box-shadow: 0 0 0 2rpx rgba(0, 69, 147, 0.2);
|
|
|
outline: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 输入框类型的元素统一样式 */
|
|
|
.input-field {
|
|
|
color: #333;
|
|
|
|
|
|
&::placeholder {
|
|
|
color: #c0c4cc;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 日期输入框样式 */
|
|
|
.date-input {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
text-align: center;
|
|
|
|
|
|
text {
|
|
|
font-size: 32rpx;
|
|
|
color: #333;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
font-size: 36rpx;
|
|
|
}
|
|
|
|
|
|
&.icon {
|
|
|
font-size: 24rpx;
|
|
|
color: #c0c4cc;
|
|
|
margin-left: 8rpx;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
font-size: 20rpx;
|
|
|
margin-left: 6rpx;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
font-size: 28rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
border-color: #004593;
|
|
|
box-shadow: 0 0 0 2rpx rgba(0, 69, 147, 0.2);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 日期范围选择器容器 */
|
|
|
.date-range-container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 20rpx;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
gap: 12rpx;
|
|
|
}
|
|
|
|
|
|
.date-picker {
|
|
|
flex: 1;
|
|
|
min-width: 0; // 防止flex子项溢出
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
flex: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 日期分隔符 */
|
|
|
.date-separator {
|
|
|
font-size: 28rpx;
|
|
|
color: #666;
|
|
|
font-weight: 500;
|
|
|
min-width: 40rpx;
|
|
|
text-align: center;
|
|
|
white-space: nowrap;
|
|
|
flex-shrink: 0; // 防止压缩
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
font-size: 24rpx;
|
|
|
min-width: 30rpx;
|
|
|
padding: 0 8rpx;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
font-size: 32rpx;
|
|
|
min-width: 60rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.id-input-group {
|
|
|
display: flex;
|
|
|
gap: 20rpx;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
gap: 16rpx;
|
|
|
}
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
/* 身份证输入占比宽度设置 */
|
|
|
/* 默认（含APP打包）身份证输入宽度100% */
|
|
|
.idcard-group .form-input {
|
|
|
width: 100%;
|
|
|
flex: 1 1 auto;
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
|
|
|
/* #ifdef H5 */
|
|
|
/* H5下身份证输入宽度为70%，右侧显示查询入口 */
|
|
|
@media all {
|
|
|
.idcard-group .form-input {
|
|
|
width: 70%;
|
|
|
flex: 0 0 70%;
|
|
|
max-width: 70%;
|
|
|
}
|
|
|
.idcard-group .id-action {
|
|
|
width: 30%;
|
|
|
flex: 0 0 30%;
|
|
|
max-width: 30%;
|
|
|
}
|
|
|
}
|
|
|
/* #endif */
|
|
|
|
|
|
.id-input {
|
|
|
flex: 1;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.id-btn {
|
|
|
@media (max-width: 750px) {
|
|
|
width: auto;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
min-width: 240rpx;
|
|
|
}
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
/* 身份证查询行为元素，等高于输入框 */
|
|
|
.id-action {
|
|
|
height: 88rpx;
|
|
|
padding: 0 24rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background-color: #18284b;
|
|
|
color: #fff;
|
|
|
font-size: 28rpx;
|
|
|
border-radius: 0;
|
|
|
white-space: nowrap;
|
|
|
cursor: pointer;
|
|
|
transition: background-color 0.2s ease;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
height: 76rpx;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
height: 100rpx;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background-color: #0f1a3a;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.query-btn-container {
|
|
|
text-align: center;
|
|
|
margin-top: 10%;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
margin-top: 20%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.query-btn {
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 600;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
height: 88rpx;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
height: 120rpx;
|
|
|
font-size: 48rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 按钮样式 */
|
|
|
.btn {
|
|
|
padding: 20rpx 40rpx;
|
|
|
border: none;
|
|
|
border-radius: 0;
|
|
|
font-size: 28rpx;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&.btn-primary {
|
|
|
background-color: #18284b;
|
|
|
color: #fff;
|
|
|
|
|
|
&:disabled {
|
|
|
background-color: #c0c4cc;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
&:active:not(:disabled) {
|
|
|
background-color: #0f1a3a;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
padding: 16rpx 32rpx;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
padding: 24rpx;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 弹窗样式 */
|
|
|
.modal-overlay {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
z-index: 1000;
|
|
|
}
|
|
|
|
|
|
.modal-content {
|
|
|
background-color: #fff;
|
|
|
border-radius: 16rpx;
|
|
|
width: 95%;
|
|
|
max-width: 800rpx;
|
|
|
max-height: 85%;
|
|
|
overflow: hidden;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
width: 92%;
|
|
|
max-width: 700rpx;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
width: 75%;
|
|
|
max-width: 1000rpx;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 1024px) {
|
|
|
width: 65%;
|
|
|
max-width: 1200rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.modal-header {
|
|
|
padding: 40rpx 40rpx 20rpx;
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
|
|
.modal-title {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.modal-body {
|
|
|
padding: 40rpx;
|
|
|
max-height: 60vh;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.modal-footer {
|
|
|
padding: 20rpx 40rpx 40rpx;
|
|
|
display: flex;
|
|
|
gap: 20rpx;
|
|
|
justify-content: center;
|
|
|
border-top: 1rpx solid #f0f0f0;
|
|
|
|
|
|
.btn {
|
|
|
flex: 1;
|
|
|
max-width: 300rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.visit-info {
|
|
|
padding: 20rpx 0;
|
|
|
}
|
|
|
|
|
|
/* 信息区块样式 */
|
|
|
.info-section {
|
|
|
margin-bottom: 40rpx;
|
|
|
padding: 20rpx 0;
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
display: block;
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #004593;
|
|
|
margin-bottom: 20rpx;
|
|
|
padding-bottom: 10rpx;
|
|
|
border-bottom: 2rpx solid #004593;
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
bottom: -2rpx;
|
|
|
left: 0;
|
|
|
width: 60rpx;
|
|
|
height: 2rpx;
|
|
|
background-color: #004593;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
margin-bottom: 20rpx;
|
|
|
align-items: center;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
/* 特殊布局处理 */
|
|
|
&.photo-upload-section {
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 随访人员项样式 */
|
|
|
.follow-person-item {
|
|
|
background-color: #f8f9fa;
|
|
|
padding: 20rpx;
|
|
|
border-radius: 8rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.info-item {
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.separator {
|
|
|
height: 1rpx;
|
|
|
background-color: #e8e8e8;
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
|
|
|
.info-label {
|
|
|
font-size: 28rpx;
|
|
|
color: #666;
|
|
|
min-width: 120rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.info-value {
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
flex: 1;
|
|
|
word-break: break-all;
|
|
|
|
|
|
/* 状态标签特殊处理 */
|
|
|
&.status-badge {
|
|
|
flex: none; // 取消flex伸缩
|
|
|
align-self: flex-start; // 左对齐
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.visitor-list {
|
|
|
max-height: 60vh;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.visitor-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 12rpx 20rpx;
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
background-color: #fafafa;
|
|
|
color: #666;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
.visitor-col {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.visitor-col-name {
|
|
|
flex: 1.2;
|
|
|
}
|
|
|
|
|
|
.visitor-col-visited {
|
|
|
flex: 1.2;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.visitor-col-status {
|
|
|
flex: 0.8;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.empty-state {
|
|
|
text-align: center;
|
|
|
padding: 60rpx 20rpx;
|
|
|
color: #999;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.visitor-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 20rpx;
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.visitor-name {
|
|
|
flex: 1.2;
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.visitor-visited {
|
|
|
flex: 1.2;
|
|
|
font-size: 26rpx;
|
|
|
color: #555;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.visitor-status {
|
|
|
flex: 0.8;
|
|
|
font-size: 24rpx;
|
|
|
padding: 8rpx 16rpx;
|
|
|
border-radius: 12rpx;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
/* 状态标签样式 */
|
|
|
.status-badge {
|
|
|
display: inline-block;
|
|
|
padding: 6rpx 16rpx;
|
|
|
border-radius: 16rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
padding: 4rpx 12rpx;
|
|
|
font-size: 22rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 待学习 - 橙色 */
|
|
|
.status-study {
|
|
|
background-color: #fff7e6;
|
|
|
color: #fa8c16;
|
|
|
border: 1rpx solid #ffd591;
|
|
|
}
|
|
|
|
|
|
/* 待审核 - 蓝色 */
|
|
|
.status-pending {
|
|
|
background-color: #e6f7ff;
|
|
|
color: #1890ff;
|
|
|
border: 1rpx solid #91d5ff;
|
|
|
}
|
|
|
|
|
|
/* 通过(待进厂) - 绿色 */
|
|
|
.status-approved {
|
|
|
background-color: #f6ffed;
|
|
|
color: #52c41a;
|
|
|
border: 1rpx solid #b7eb8f;
|
|
|
}
|
|
|
|
|
|
/* 驳回 - 红色 */
|
|
|
.status-rejected {
|
|
|
background-color: #fff2f0;
|
|
|
color: #ff4d4f;
|
|
|
border: 1rpx solid #ffb3b3;
|
|
|
}
|
|
|
|
|
|
/* 已进厂 - 深绿色 */
|
|
|
.status-entered {
|
|
|
background-color: #f0f9f0;
|
|
|
color: #389e0d;
|
|
|
border: 1rpx solid #95de64;
|
|
|
}
|
|
|
|
|
|
/* 已离厂 - 灰色 */
|
|
|
.status-left {
|
|
|
background-color: #f5f5f5;
|
|
|
color: #8c8c8c;
|
|
|
border: 1rpx solid #d9d9d9;
|
|
|
}
|
|
|
|
|
|
/* 已取消 - 深灰色 */
|
|
|
.status-cancelled {
|
|
|
background-color: #f0f0f0;
|
|
|
color: #595959;
|
|
|
border: 1rpx solid #bfbfbf;
|
|
|
}
|
|
|
|
|
|
/* 未知状态 - 默认样式 */
|
|
|
.status-unknown {
|
|
|
background-color: #fafafa;
|
|
|
color: #666;
|
|
|
border: 1rpx solid #e8e8e8;
|
|
|
}
|
|
|
|
|
|
/* 输入框相关样式 */
|
|
|
.info-input-wrapper {
|
|
|
flex: 1;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.info-input {
|
|
|
width: 100%;
|
|
|
height: 60rpx;
|
|
|
padding: 0 16rpx;
|
|
|
border: 1rpx solid #e4e7ed;
|
|
|
border-radius: 6rpx;
|
|
|
font-size: 26rpx;
|
|
|
background-color: #fff;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.info-textarea {
|
|
|
width: 100%;
|
|
|
min-height: 80rpx;
|
|
|
padding: 12rpx 16rpx;
|
|
|
border: 1rpx solid #e4e7ed;
|
|
|
border-radius: 6rpx;
|
|
|
font-size: 26rpx;
|
|
|
background-color: #fff;
|
|
|
box-sizing: border-box;
|
|
|
resize: none;
|
|
|
}
|
|
|
|
|
|
/* 照片上传相关样式 */
|
|
|
.photo-upload-section {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
|
|
|
.info-label {
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.photo-upload-container {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.uploaded-photos {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 16rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.photo-item {
|
|
|
position: relative;
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
}
|
|
|
|
|
|
.photo-preview {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 8rpx;
|
|
|
border: 1rpx solid #e8e8e8;
|
|
|
}
|
|
|
|
|
|
.photo-delete {
|
|
|
position: absolute;
|
|
|
top: -8rpx;
|
|
|
right: -8rpx;
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
background-color: #ff4d4f;
|
|
|
color: #fff;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 20rpx;
|
|
|
font-weight: bold;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.upload-actions {
|
|
|
display: flex;
|
|
|
gap: 16rpx;
|
|
|
}
|
|
|
|
|
|
.upload-btn {
|
|
|
flex: 1;
|
|
|
height: 60rpx;
|
|
|
font-size: 26rpx;
|
|
|
/* 覆盖通用按钮的垂直选项，确保文字垂直居中 */
|
|
|
padding: 0 24rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
/* 添加照片按钮样式 */
|
|
|
.add-photo-btn {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background-color: #f8f9fa;
|
|
|
border: 2rpx dashed #d0d0d0;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
&:active {
|
|
|
background-color: #e9ecef;
|
|
|
border-color: #004593;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.add-photo-icon {
|
|
|
font-size: 48rpx;
|
|
|
color: #666;
|
|
|
margin-bottom: 8rpx;
|
|
|
font-weight: 300;
|
|
|
}
|
|
|
|
|
|
.add-photo-text {
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
/* 底部选择弹窗样式 */
|
|
|
.photo-action-sheet {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
z-index: 2000;
|
|
|
}
|
|
|
|
|
|
.action-sheet-overlay {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
|
|
|
.action-sheet-content {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
|
padding: 0 0 40rpx 0;
|
|
|
animation: slideUp 0.3s ease-out;
|
|
|
}
|
|
|
|
|
|
.action-sheet-item {
|
|
|
padding: 40rpx;
|
|
|
text-align: center;
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
cursor: pointer;
|
|
|
transition: background-color 0.2s ease;
|
|
|
|
|
|
&:active {
|
|
|
background-color: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
&:last-of-type {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.action-sheet-text {
|
|
|
font-size: 32rpx;
|
|
|
color: #333;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.action-sheet-cancel {
|
|
|
padding: 40rpx;
|
|
|
text-align: center;
|
|
|
margin-top: 20rpx;
|
|
|
cursor: pointer;
|
|
|
transition: background-color 0.2s ease;
|
|
|
|
|
|
&:active {
|
|
|
background-color: #f8f9fa;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.action-sheet-cancel-text {
|
|
|
font-size: 32rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
@keyframes slideUp {
|
|
|
from {
|
|
|
transform: translateY(100%);
|
|
|
}
|
|
|
to {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 按钮样式扩展 */
|
|
|
.btn-outline {
|
|
|
background-color: transparent;
|
|
|
color: #004593;
|
|
|
border: 1rpx solid #004593;
|
|
|
|
|
|
&:active:not(:disabled) {
|
|
|
background-color: rgba(0, 69, 147, 0.1);
|
|
|
}
|
|
|
|
|
|
&:disabled {
|
|
|
color: #c0c4cc;
|
|
|
border-color: #c0c4cc;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-secondary {
|
|
|
background-color: #f5f7fa;
|
|
|
color: #606266;
|
|
|
border: 1rpx solid #dcdfe6;
|
|
|
|
|
|
&:active:not(:disabled) {
|
|
|
background-color: #e4e7ed;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 响应式样式优化 */
|
|
|
@media (max-width: 750px) {
|
|
|
.form-container {
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.modal-content {
|
|
|
margin: 20rpx;
|
|
|
width: calc(100% - 40rpx);
|
|
|
}
|
|
|
}
|
|
|
</style> |
