完成邀约接口
This commit is contained in:
@@ -95,7 +95,8 @@ const install = (Vue, vm) => {
|
||||
// APP公共服务
|
||||
upgradeCheck: () => vm.$u.post('/app/upgrade/check', {appCode: config.appCode, appVersion: config.appVersion}),
|
||||
commentSave: (params = {}) => vm.$u.post('/app/comment/save', params),
|
||||
|
||||
//获取访客类型
|
||||
getType:(params = {}) => vm.$u.get(config.adminPath+'/property/xcx/system/type/'+params),
|
||||
// 个人信息修改
|
||||
user: {
|
||||
saveUserInfo: (params = {}) => vm.$u.post(config.adminPath+'/mobile/user/saveUserInfo', params),
|
||||
@@ -118,6 +119,19 @@ const install = (Vue, vm) => {
|
||||
queryEmployeeById:(params = {}) => vm.$u.get(config.adminPath+'/property/xcx/person/'+ params.id),
|
||||
queryEmployee:(params = {}) => vm.$u.get(config.adminPath+'/property/xcx/person/list', params),
|
||||
updateEmployee:(params = {}) => vm.$u.put(config.adminPath+'/property/xcx/person', params),
|
||||
},
|
||||
// 单位管理
|
||||
repair:{
|
||||
addRepair:(params = {}) => vm.$u.post(config.adminPath+'/property/xcx/workOrders', params),
|
||||
getWorkOrdersType:(params = {}) => vm.$u.get(config.adminPath+'/property/xcx/workOrdersType/typeTree/'+ params.parentId),
|
||||
getMyOrderList:(params = {})=>vm.$u.get(config.adminPath+'/property/xcx/workOrders/list',params),
|
||||
updateOrder:(params = {})=>vm.$u.put(config.adminPath+'/property/xcx/workOrders',params),
|
||||
},
|
||||
visitor:{
|
||||
//我的访客列表
|
||||
getMyVisitor:(params = {})=>vm.$u.get(config.adminPath+'/property/xcx/visitorManagement/list/'+params.type),
|
||||
addVisitor:(params = {})=>vm.$u.post(config.adminPath+'/property/xcx/visitorManagement',params),
|
||||
qrCodeVisitor:(params = {})=>vm.$u.get(config.adminPath+'/property/xcx/visitorManagement/qrCode/'+params.id),
|
||||
},
|
||||
// 增删改查例子
|
||||
testData: {
|
||||
|
||||
@@ -82,28 +82,28 @@
|
||||
// }
|
||||
],
|
||||
current: 0,
|
||||
gridList: [
|
||||
{
|
||||
icon: '/static/aaaa_gd.png',
|
||||
text: '工单',
|
||||
url:'/pages/sys/workbench/order/order'
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_yjcl.png',
|
||||
text: '预警处理',
|
||||
url:'/pages/sys/workbench/earlyWarning/earlyWarning'
|
||||
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_jk.png',
|
||||
text: '监控',
|
||||
url:'/pages/sys/workbench/monitor/monitors'
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_bsbx.png',
|
||||
text: '报事报修',
|
||||
url:'/pages/sys/user/myRepair/myRepair'
|
||||
},
|
||||
gridList: [
|
||||
{
|
||||
icon: '/static/aaaa_gd.png',
|
||||
text: '工单',
|
||||
url:'/pages/sys/workbench/order/order'
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_yjcl.png',
|
||||
text: '预警处理',
|
||||
url:'/pages/sys/workbench/earlyWarning/earlyWarning'
|
||||
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_jk.png',
|
||||
text: '监控',
|
||||
url:'/pages/sys/workbench/monitor/monitors'
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_bsbx.png',
|
||||
text: '报事报修',
|
||||
url:'/pages/sys/user/myRepair/myRepair'
|
||||
},
|
||||
// {
|
||||
// icon: '/static/aaa_bsbx.png',
|
||||
// text: '报事报修',
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
},
|
||||
{
|
||||
icon: '/static/ic_mine_visitor.png',
|
||||
text: '我的访客1111'
|
||||
text: '我的访客'
|
||||
},
|
||||
{
|
||||
icon: '/static/ic_mine_check.png',
|
||||
|
||||
@@ -41,10 +41,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入MediaSelector和MediaType
|
||||
import MediaSelector, {
|
||||
MediaType
|
||||
} from '@/utils/mediaSelector';
|
||||
import {
|
||||
uploadFiles
|
||||
} from '@/common/upload.js';
|
||||
@@ -54,7 +50,7 @@
|
||||
return {
|
||||
repairInfo: {
|
||||
location: '',
|
||||
type: '1942879389453230082',
|
||||
type: '',
|
||||
orderImgUrl: '',
|
||||
remark: ''
|
||||
},
|
||||
@@ -70,17 +66,48 @@
|
||||
selectType(item) {
|
||||
this.selectedType = item;
|
||||
},
|
||||
async getOrderType() {
|
||||
let params = {
|
||||
parentId: '1952989217332658178'
|
||||
}
|
||||
let res = await this.$u.api.getRepairTypes(params);
|
||||
if (res.code == '200') {
|
||||
this.repairTypes = res.data
|
||||
this.repairInfo.type = res.data[0].id;
|
||||
this.selectType(res.data[0].orderTypeName)
|
||||
}
|
||||
},
|
||||
async getOrderType() {
|
||||
try {
|
||||
let params = {
|
||||
parentId: '1952989217332658178'
|
||||
};
|
||||
let params1 = {
|
||||
parentId: '1943128289816682498'
|
||||
};
|
||||
// 使用Promise.all同时发起两次请求
|
||||
const [res1, res2] = await Promise.all([
|
||||
this.$u.api.repair.getWorkOrdersType(params),
|
||||
this.$u.api.repair.getWorkOrdersType(params1)
|
||||
]);
|
||||
|
||||
if (res1.code === 200 && res2.code === 200) {
|
||||
// 合并children数组
|
||||
const combinedChildren = [
|
||||
...(res1.data[0]?.children || []),
|
||||
...(res2.data[0]?.children || [])
|
||||
];
|
||||
// 创建合并后的数据结构
|
||||
const combinedData = [{
|
||||
...res1.data[0],
|
||||
children: combinedChildren,
|
||||
childrenid: res1.data[0].childrenid || res2.data[0].childrenid
|
||||
}];
|
||||
this.repairTypes = combinedChildren;
|
||||
this.repairInfo.type = combinedData[0].id;
|
||||
this.selectType(combinedChildren[0]?.orderTypeName || '');
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取工单类型失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '获取工单类型异常',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this.selectedImages.splice(event.index, 1);
|
||||
@@ -131,7 +158,8 @@
|
||||
},
|
||||
|
||||
async realSubmit() {
|
||||
let res = await this.$u.api.addOrder2(this.repairInfo);
|
||||
this.repairInfo.orderName="工单"
|
||||
let res = await this.$u.api.repair.addRepair(this.repairInfo);
|
||||
if (res.code == '200') {
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myRepair/repaired'
|
||||
|
||||
@@ -1,466 +1,511 @@
|
||||
<template>
|
||||
<view class="repair-container">
|
||||
<!-- 可滚动内容区 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="repair-scroll-content"
|
||||
refresher-background="#f7f7f7"
|
||||
@scroll="handleScroll"
|
||||
@scrolltolower="loadMore"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh">
|
||||
<view class="repair-container">
|
||||
<!-- 可滚动内容区 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="repair-scroll-content"
|
||||
refresher-background="#f7f7f7"
|
||||
@scroll="handleScroll"
|
||||
@scrolltolower="loadMore"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh">
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-if="records.length === 0 && !loading" class="repair-empty-box">
|
||||
<view class="repair-empty-img-box">
|
||||
<image src="/static/ic_my_repair_01.png" class="repair-empty-img" />
|
||||
</view>
|
||||
<view class="repair-add-btn-box">
|
||||
<image src="/static/ic_my_repair_02.png" class="repair-add-btn" @click="addRepair" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 空状态 -->
|
||||
<view v-if="records.length === 0 && !loading" class="repair-empty-box">
|
||||
<view class="repair-empty-img-box">
|
||||
<image src="/static/ic_my_repair_01.png" class="repair-empty-img"/>
|
||||
</view>
|
||||
<view class="repair-add-btn-box">
|
||||
<image src="/static/ic_my_repair_02.png" class="repair-add-btn" @click="addRepair"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 有数据时 -->
|
||||
<view v-else class="repair-list-box">
|
||||
<view v-for="(item, idx) in records" :key="idx" class="repair-card" @click="goDetail(item)">
|
||||
<view class="repair-row">
|
||||
<view class="repair-no">工单号：{{ item.orderNo }}</view>
|
||||
<view class="repair-status" :class="getStatusColor(item.status)">
|
||||
{{ getStatusLabel(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="repair-line-image" src="/static/ic_my_repair_03.png" />
|
||||
<view class="repair-info">建立时间：{{ item.createTime }}</view>
|
||||
<view class="repair-info">报事内容：{{ item.typeName }}</view>
|
||||
<view class="repair-info">报事位置：{{ item.location }}</view>
|
||||
<view v-if="getStatusLabel(item.status) === '已结束'" class="repair-eval-btn eval-btn-right">服务评价</view>
|
||||
</view>
|
||||
<!-- 有数据时 -->
|
||||
<view v-else class="repair-list-box">
|
||||
<view v-for="(item, idx) in records" :key="idx" class="repair-card" @click="goDetail(item)">
|
||||
<view class="repair-row">
|
||||
<view class="repair-no">工单号：{{ item.orderNo }}</view>
|
||||
<view class="repair-status" :class="getStatusColor(item.status)">
|
||||
{{ getStatusLabel(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="repair-line-image" src="/static/ic_my_repair_03.png"/>
|
||||
<view class="repair-info">建立时间：{{ item.createTime }}</view>
|
||||
<view class="repair-info">报事内容：{{ item.typeName }}</view>
|
||||
<view class="repair-info">报事位置：{{ item.location }}</view>
|
||||
<view v-if="getStatusLabel(item.status) === '已结束'&&item.serviceEvalua===null" class="repair-eval-btn eval-btn-right" @click.stop="goTEvaluate(item)">服务评价</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
加载中...
|
||||
</view>
|
||||
<view v-if="finished && records.length > 0" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
没有更多数据了
|
||||
</view>
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
加载中...
|
||||
</view>
|
||||
<view v-if="finished && records.length > 0" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
没有更多数据了
|
||||
</view>
|
||||
|
||||
<!-- 悬浮新增按钮 -->
|
||||
<image src="/static/ic_my_repair_02.png" :class="['repair-add-btn-fixed', { 'hide': isAddBtnHidden }]"
|
||||
@click="addRepair" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 悬浮新增按钮 -->
|
||||
<image src="/static/ic_my_repair_02.png" :class="['repair-add-btn-fixed', { 'hide': isAddBtnHidden }]"
|
||||
@click="addRepair"/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<view v-if="showDetailDialog" class="repair-detail-mask" @click.self="closeDetail">
|
||||
<view class="repair-detail-dialog">
|
||||
<view class="repair-detail-title">报事详情
|
||||
<image src="/static/ic_close_01.png" class="repair-detail-close" @click.stop="closeDetail" />
|
||||
</view>
|
||||
<view class="repair-detail-progress-box">
|
||||
<view class="repair-detail-progress">
|
||||
<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-step">
|
||||
<view
|
||||
:class="['repair-detail-dot', detailStep >= idx ? 'active' : '', (detailStep === idx && detailStatus !== '已结束') ? 'current' : '']">
|
||||
</view>
|
||||
<view v-if="idx < progressSteps.length - 1"
|
||||
:class="['repair-detail-line', detailStep > idx ? 'active' : '']"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="repair-detail-progress-labels">
|
||||
<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-label">{{ step }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="repair-detail-info">建立时间：{{ detailItem.createTime }}</view>
|
||||
<view class="repair-detail-info">报事内容：{{ detailItem.typeName }}</view>
|
||||
<view class="repair-detail-info">报事位置：{{ detailItem.location }}</view>
|
||||
<button v-if="getStatusLabel(detailItem.status) === '已结束'" class="repair-detail-btn"
|
||||
@click="goTEvaluate">评价服务</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情弹窗 -->
|
||||
<view v-if="showDetailDialog" class="repair-detail-mask" @click.self="closeDetail">
|
||||
<view class="repair-detail-dialog">
|
||||
<view class="repair-detail-title">报事详情
|
||||
<image src="/static/ic_close_01.png" class="repair-detail-close" @click.stop="closeDetail"/>
|
||||
</view>
|
||||
<view class="repair-detail-progress-box">
|
||||
<view class="repair-detail-progress">
|
||||
<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-step">
|
||||
<view
|
||||
:class="['repair-detail-dot', detailStep >= idx ? 'active' : '', (detailStep === idx && detailStatus !== '已结束') ? 'current' : '']">
|
||||
</view>
|
||||
<view v-if="idx < progressSteps.length - 1"
|
||||
:class="['repair-detail-line', detailStep > idx ? 'active' : '']"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="repair-detail-progress-labels">
|
||||
<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-label">{{ step }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="repair-detail-info">建立时间：{{ detailItem.createTime }}</view>
|
||||
<view class="repair-detail-info">报事内容：{{ detailItem.typeName }}</view>
|
||||
<view class="repair-detail-info">报事位置：{{ detailItem.location }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
records: [],
|
||||
showDetailDialog: false,
|
||||
detailItem: {},
|
||||
detailStep: 0,
|
||||
detailStatus: '',
|
||||
progressSteps: ['创建工单', '已接单', '处理中', '已结束'],
|
||||
lastScrollTop: 0,
|
||||
isAddBtnHidden: false,
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
records: [],
|
||||
showDetailDialog: false,
|
||||
detailItem: {},
|
||||
detailStep: 0,
|
||||
detailStatus: '',
|
||||
progressSteps: ['创建工单', '已接单', '处理中', '已结束'],
|
||||
lastScrollTop: 0,
|
||||
isAddBtnHidden: false,
|
||||
|
||||
// 分页相关
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
finished: false,
|
||||
loading: false,
|
||||
refreshing: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.onRefresh()
|
||||
},
|
||||
onShow() {
|
||||
uni.$once('refreshData', () => {
|
||||
this.onRefresh()
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
addRepair() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myRepair/addRepair'
|
||||
});
|
||||
},
|
||||
// 获取工单列表
|
||||
async getOrders(reset = false) {
|
||||
if (this.loading) return;
|
||||
if (reset) {
|
||||
this.pageNum = 1;
|
||||
this.finished = false;
|
||||
this.records = [];
|
||||
}
|
||||
this.loading = true;
|
||||
// 分页相关
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
finished: false,
|
||||
loading: false,
|
||||
refreshing: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.onRefresh()
|
||||
},
|
||||
onShow() {
|
||||
uni.$once('refreshData', () => {
|
||||
this.onRefresh()
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
addRepair() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myRepair/addRepair'
|
||||
});
|
||||
},
|
||||
// 获取工单列表
|
||||
async getOrders(reset = false) {
|
||||
if (this.loading) return;
|
||||
if (reset) {
|
||||
this.pageNum = 1;
|
||||
this.finished = false;
|
||||
this.records = [];
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
let params = {
|
||||
type: "1952989217332658178",
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
};
|
||||
let res = await this.$u.api.getOrderList(params);
|
||||
if (res.code == '200') {
|
||||
const rows = res.rows || [];
|
||||
if (reset) {
|
||||
this.records = rows;
|
||||
} else {
|
||||
this.records = this.records.concat(rows);
|
||||
}
|
||||
if (rows.length < this.pageSize) {
|
||||
this.finished = true;
|
||||
} else {
|
||||
this.pageNum++;
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
this.refreshing = false;
|
||||
},
|
||||
// 下拉刷新
|
||||
onRefresh() {
|
||||
this.refreshing = true;
|
||||
this.getOrders(true);
|
||||
},
|
||||
// 滚动加载更多
|
||||
loadMore() {
|
||||
if (!this.finished) {
|
||||
this.getOrders(false);
|
||||
}
|
||||
},
|
||||
getStatusColor(status) {
|
||||
const statusMap = {
|
||||
0: 'orange',
|
||||
1: 'doing',
|
||||
2: 'doing',
|
||||
3: 'doing',
|
||||
4: 'done'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
goDetail(item) {
|
||||
const itemStr = encodeURIComponent(JSON.stringify(item));
|
||||
uni.navigateTo({
|
||||
url: "/pages/sys/workbench/order/orderDetail?item=" + itemStr,
|
||||
});
|
||||
},
|
||||
showDetail(item) {
|
||||
this.detailItem = item;
|
||||
if (item.status == 0) {
|
||||
this.detailStep = 0;
|
||||
this.detailStatus = '创建工单';
|
||||
} else if (item.status == 4) {
|
||||
this.detailStep = 3;
|
||||
this.detailStatus = '已结束';
|
||||
} else if (item.status == 3) {
|
||||
this.detailStep = 2;
|
||||
this.detailStatus = '处理中';
|
||||
} else {
|
||||
this.detailStep = 1;
|
||||
this.detailStatus = '已接单';
|
||||
}
|
||||
this.showDetailDialog = true;
|
||||
},
|
||||
closeDetail() {
|
||||
this.showDetailDialog = false;
|
||||
},
|
||||
getStatusLabel(status) {
|
||||
const statusMap = {
|
||||
0: '创建工单',
|
||||
1: '已接单',
|
||||
2: '已接单',
|
||||
3: '处理中',
|
||||
4: '已结束'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
goTEvaluate() {
|
||||
const detailItemStr = encodeURIComponent(JSON.stringify(this.detailItem));
|
||||
uni.navigateTo({
|
||||
url: `/pages/sys/user/myRepair/repairEvaluate?detailItem=${detailItemStr}`
|
||||
});
|
||||
},
|
||||
handleScroll(e) {
|
||||
const scrollTop = e.detail.scrollTop;
|
||||
if (Math.abs(scrollTop - this.lastScrollTop) < 20) return;
|
||||
if (scrollTop > this.lastScrollTop && scrollTop > 50) {
|
||||
this.isAddBtnHidden = true;
|
||||
} else {
|
||||
this.isAddBtnHidden = false;
|
||||
}
|
||||
this.lastScrollTop = scrollTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
let params = {
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
};
|
||||
let res = await this.$u.api.repair.getMyOrderList(params);
|
||||
if (res.code == 200) {
|
||||
const rows = res.data || [];
|
||||
if (reset) {
|
||||
this.records = rows;
|
||||
} else {
|
||||
this.records = this.records.concat(rows);
|
||||
}
|
||||
if (rows.length < this.pageSize) {
|
||||
this.finished = true;
|
||||
} else {
|
||||
this.pageNum++;
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
this.refreshing = false;
|
||||
},
|
||||
// 下拉刷新
|
||||
onRefresh() {
|
||||
this.refreshing = true;
|
||||
this.getOrders(true);
|
||||
},
|
||||
// 滚动加载更多
|
||||
loadMore() {
|
||||
if (!this.finished) {
|
||||
this.getOrders(false);
|
||||
}
|
||||
},
|
||||
getStatusColor(status) {
|
||||
const statusMap = {
|
||||
0: 'orange',
|
||||
1: 'doing',
|
||||
2: 'doing',
|
||||
3: 'doing',
|
||||
4: 'done'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
goDetail(item) {
|
||||
const itemStr = encodeURIComponent(JSON.stringify(item));
|
||||
uni.navigateTo({
|
||||
url: "/pages/sys/workbench/order/orderDetail?item=" + itemStr,
|
||||
});
|
||||
},
|
||||
showDetail(item) {
|
||||
this.detailItem = item;
|
||||
if (item.status == 0) {
|
||||
this.detailStep = 0;
|
||||
this.detailStatus = '创建工单';
|
||||
} else if (item.status == 4) {
|
||||
this.detailStep = 3;
|
||||
this.detailStatus = '已结束';
|
||||
} else if (item.status == 3) {
|
||||
this.detailStep = 2;
|
||||
this.detailStatus = '处理中';
|
||||
} else {
|
||||
this.detailStep = 1;
|
||||
this.detailStatus = '已接单';
|
||||
}
|
||||
this.showDetailDialog = true;
|
||||
},
|
||||
closeDetail() {
|
||||
this.showDetailDialog = false;
|
||||
},
|
||||
getStatusLabel(status) {
|
||||
const statusMap = {
|
||||
0: '创建工单',
|
||||
1: '已接单',
|
||||
2: '已接单',
|
||||
3: '处理中',
|
||||
4: '已结束'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
goTEvaluate(item) {
|
||||
const detailItemStr = item.id;
|
||||
uni.navigateTo({
|
||||
url: `/pages/sys/user/myRepair/repairEvaluate?detailItem=${detailItemStr}`
|
||||
});
|
||||
},
|
||||
handleScroll(e) {
|
||||
const scrollTop = e.detail.scrollTop;
|
||||
if (Math.abs(scrollTop - this.lastScrollTop) < 20) return;
|
||||
if (scrollTop > this.lastScrollTop && scrollTop > 50) {
|
||||
this.isAddBtnHidden = true;
|
||||
} else {
|
||||
this.isAddBtnHidden = false;
|
||||
}
|
||||
this.lastScrollTop = scrollTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.repair-container {
|
||||
height: 100vh;
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.repair-scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
.repair-empty-box {
|
||||
margin: 48rpx 24rpx 0 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
.repair-empty-img-box {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
display: flex;
|
||||
}
|
||||
.repair-empty-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
margin: 24rpx auto;
|
||||
}
|
||||
.repair-add-btn-box {
|
||||
position: absolute;
|
||||
top: 500rpx;
|
||||
right: -20rpx;
|
||||
bottom: -40rpx;
|
||||
}
|
||||
.repair-add-btn {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
.repair-list-box {
|
||||
margin: 32rpx 0 0 0;
|
||||
padding: 0 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
.repair-card {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
||||
padding-top: 25rpx;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
.repair-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
margin-top: 25rpx;
|
||||
margin-left: 19rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
.repair-no {
|
||||
font-size: 24rpx;
|
||||
color: #0B0B0B;
|
||||
font-weight: 500;
|
||||
}
|
||||
.repair-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.repair-status.orange { color: #F3AB44; }
|
||||
.repair-status.doing { color: #00C9AA; }
|
||||
.repair-status.done { color: #8A8A8A; }
|
||||
.repair-line-image {
|
||||
margin-left: 29rpx;
|
||||
margin-right: 39rpx;
|
||||
height: 2rpx;
|
||||
margin-bottom: 29rpx;
|
||||
}
|
||||
.repair-info {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 47rpx;
|
||||
}
|
||||
.repair-eval-btn {
|
||||
margin-top: -20rpx;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: 44rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0 18rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #2186FF;
|
||||
color: #2186FF;
|
||||
font-size: 24rpx;
|
||||
background: #fff;
|
||||
font-weight: 500;
|
||||
width: fit-content;
|
||||
}
|
||||
.repair-add-btn-fixed {
|
||||
position: fixed;
|
||||
right: 5rpx;
|
||||
bottom: 80rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
z-index: 100;
|
||||
transition: transform 0.3s ease;
|
||||
top: 50%;
|
||||
transform: translateX(0);
|
||||
}
|
||||
.repair-add-btn-fixed.hide { transform: translateX(200%); }
|
||||
.repair-detail-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.repair-detail-dialog {
|
||||
width: 100vw;
|
||||
background: #fff;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
box-shadow: 0 -2rpx 24rpx rgba(0, 0, 0, 0.10);
|
||||
padding: 52rpx 56rpx 69rpx 56rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.repair-detail-title {
|
||||
font-size: 36rpx;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
.repair-detail-close {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.repair-detail-progress-box {
|
||||
height: 107rpx;
|
||||
margin-bottom: 41rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
.repair-detail-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5rpx;
|
||||
margin-left: 75rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.repair-detail-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.repair-detail-dot {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
background: #BDBDBD;
|
||||
border: 2rpx solid #BDBDBD;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.repair-detail-dot.active {
|
||||
background: #2186FF;
|
||||
border-color: #2186FF;
|
||||
}
|
||||
.repair-detail-dot.current {
|
||||
background: #EF8D00;
|
||||
border-color: #EF8D00;
|
||||
}
|
||||
.repair-detail-line {
|
||||
flex: 1;
|
||||
height: 4rpx;
|
||||
background: #BDBDBD;
|
||||
margin: 0 2rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.repair-detail-line.active { background: #2186FF; }
|
||||
.repair-detail-progress-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.repair-detail-label {
|
||||
font-size: 22rpx;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
top: 8rpx;
|
||||
}
|
||||
.repair-detail-info {
|
||||
font-size: 26rpx;
|
||||
color: #222;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.repair-detail-btn {
|
||||
width: 445rpx;
|
||||
height: 73rpx;
|
||||
background: linear-gradient(90deg, #005DE9 0%, #4B9BFF 100%);
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 100rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
/* 让服务评价按钮靠右 */
|
||||
.eval-btn-right {
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
}
|
||||
.repair-container {
|
||||
height: 100vh;
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.repair-scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.repair-empty-box {
|
||||
margin: 48rpx 24rpx 0 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.repair-empty-img-box {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.repair-empty-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
margin: 24rpx auto;
|
||||
}
|
||||
|
||||
.repair-add-btn-box {
|
||||
position: absolute;
|
||||
top: 500rpx;
|
||||
right: -20rpx;
|
||||
bottom: -40rpx;
|
||||
}
|
||||
|
||||
.repair-add-btn {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.repair-list-box {
|
||||
margin: 32rpx 0 0 0;
|
||||
padding: 0 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.repair-card {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
||||
padding-top: 25rpx;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.repair-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
margin-top: 25rpx;
|
||||
margin-left: 19rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
.repair-no {
|
||||
font-size: 24rpx;
|
||||
color: #0B0B0B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.repair-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.repair-status.orange {
|
||||
color: #F3AB44;
|
||||
}
|
||||
|
||||
.repair-status.doing {
|
||||
color: #00C9AA;
|
||||
}
|
||||
|
||||
.repair-status.done {
|
||||
color: #8A8A8A;
|
||||
}
|
||||
|
||||
.repair-line-image {
|
||||
margin-left: 29rpx;
|
||||
margin-right: 39rpx;
|
||||
height: 2rpx;
|
||||
margin-bottom: 29rpx;
|
||||
}
|
||||
|
||||
.repair-info {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 47rpx;
|
||||
}
|
||||
|
||||
.repair-eval-btn {
|
||||
margin-top: -20rpx;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: 44rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0 18rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #2186FF;
|
||||
color: #2186FF;
|
||||
font-size: 24rpx;
|
||||
background: #fff;
|
||||
font-weight: 500;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.repair-add-btn-fixed {
|
||||
position: fixed;
|
||||
right: 5rpx;
|
||||
bottom: 80rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
z-index: 100;
|
||||
transition: transform 0.3s ease;
|
||||
top: 50%;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.repair-add-btn-fixed.hide {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
|
||||
.repair-detail-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.repair-detail-dialog {
|
||||
width: 100vw;
|
||||
background: #fff;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
box-shadow: 0 -2rpx 24rpx rgba(0, 0, 0, 0.10);
|
||||
padding: 52rpx 56rpx 69rpx 56rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.repair-detail-title {
|
||||
font-size: 36rpx;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.repair-detail-close {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.repair-detail-progress-box {
|
||||
height: 107rpx;
|
||||
margin-bottom: 41rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.repair-detail-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5rpx;
|
||||
margin-left: 75rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.repair-detail-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.repair-detail-dot {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
background: #BDBDBD;
|
||||
border: 2rpx solid #BDBDBD;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.repair-detail-dot.active {
|
||||
background: #2186FF;
|
||||
border-color: #2186FF;
|
||||
}
|
||||
|
||||
.repair-detail-dot.current {
|
||||
background: #EF8D00;
|
||||
border-color: #EF8D00;
|
||||
}
|
||||
|
||||
.repair-detail-line {
|
||||
flex: 1;
|
||||
height: 4rpx;
|
||||
background: #BDBDBD;
|
||||
margin: 0 2rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.repair-detail-line.active {
|
||||
background: #2186FF;
|
||||
}
|
||||
|
||||
.repair-detail-progress-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.repair-detail-label {
|
||||
font-size: 22rpx;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
top: 8rpx;
|
||||
}
|
||||
|
||||
.repair-detail-info {
|
||||
font-size: 26rpx;
|
||||
color: #222;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.repair-detail-btn {
|
||||
width: 445rpx;
|
||||
height: 83rpx;
|
||||
background: linear-gradient(90deg, #005DE9 0%, #4B9BFF 100%);
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 100rpx;
|
||||
font-weight: 600;
|
||||
z-index: 10; /* 确保在最上层 */
|
||||
position: relative; /* 需要设置position才能使用z-index */
|
||||
}
|
||||
|
||||
/* 让服务评价按钮靠右 */
|
||||
.eval-btn-right {
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<view class="evaluate-stars">
|
||||
<image v-for="i in 5" :key="i"
|
||||
:src="detailItem.serviceEvalua >= i ? '/static/ic_evaluate_select.png' : '/static/ic_evaluate_disselect.png'"
|
||||
class="evaluate-star" @click="detailItem.serviceEvalua = i" />
|
||||
class="evaluate-star" @click.stop="setRating(i)" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -41,20 +41,27 @@
|
||||
return {
|
||||
comment: '',
|
||||
selectedImages: [], // 存储已选图片
|
||||
detailItem: null // 接收传递的详情项
|
||||
detailItem: {} // 接收传递的详情项
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 接收传递的detailItem参数
|
||||
if (options.detailItem) {
|
||||
try {
|
||||
this.detailItem.id = options.detailItem;
|
||||
} catch (e) {
|
||||
console.error('解析detailItem参数失败', e);
|
||||
}
|
||||
}
|
||||
},
|
||||
// onLoad(options) {
|
||||
// // 接收传递的detailItem参数
|
||||
// if (options.detailItem) {
|
||||
// try {
|
||||
// this.detailItem = JSON.parse(decodeURIComponent(options.detailItem));
|
||||
// } catch (e) {
|
||||
// console.error('解析detailItem参数失败', e);
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
setRating(score) {
|
||||
if (!this.detailItem) {
|
||||
this.detailItem = {};
|
||||
}
|
||||
this.$set(this.detailItem, 'serviceEvalua', score);
|
||||
console.log('当前评分:', score);
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this.selectedImages.splice(event.index, 1);
|
||||
@@ -73,7 +80,7 @@
|
||||
vm: this // 关键：用于注入 token 等
|
||||
});
|
||||
|
||||
if (result.code == '200') {
|
||||
if (result.code == 200) {
|
||||
// 遍历result获取data.url加上,分割
|
||||
const urls = result.map(item => item.data?.url || '').filter(url => url !== '');
|
||||
this.detailItem.imgUrl = urls.join(',');
|
||||
@@ -82,7 +89,8 @@
|
||||
},
|
||||
|
||||
async realSubmit() {
|
||||
let res = await this.$u.api.updateOrder(this.detailItem);
|
||||
console.log(this.detailItem);
|
||||
let res = await this.$u.api.repair.updateOrder(this.detailItem);
|
||||
if (res.code == '200') {
|
||||
// 关闭页面前发送事件通知前页面刷新
|
||||
uni.$emit('refreshData', '');
|
||||
|
||||
@@ -1,481 +1,300 @@
|
||||
<template>
|
||||
<view class="cv-container">
|
||||
<view class="cv-container">
|
||||
|
||||
<!-- 可滚动内容区 -->
|
||||
<view class="cv-scroll-content">
|
||||
<!-- 访客信息 -->
|
||||
<view class="info">
|
||||
<view class="cv-section-title">访客信息</view>
|
||||
<!-- <view class="cv-avatar-upload" @click="chooseAvatar">-->
|
||||
<!-- <view v-if="!header" class="cv-avatar-placeholder">上传正脸照</view>-->
|
||||
<!-- <image v-else :src="header" class="cv-avatar-img" />-->
|
||||
<!-- </view>-->
|
||||
<!-- <input class="cv-input-name" placeholder="请输入姓名" v-model="form.visitorName" />-->
|
||||
<!-- <input class="cv-input-phone" placeholder="请输入来访人电话" v-model="form.visitorPhone" />-->
|
||||
<!-- <input class="cv-input" placeholder="请输入来访人身份证/军官证" v-model="form.idCard" />-->
|
||||
<!-- 可滚动内容区 -->
|
||||
<view class="cv-scroll-content">
|
||||
<!-- 访客信息 -->
|
||||
<view class="info">
|
||||
<view class="cv-section-title">访客信息</view>
|
||||
<view class="cv-section-tag">姓名</view>
|
||||
<input class="cv-input" placeholder="请输入姓名" v-model="form.visitorName" />
|
||||
<input class="cv-input" placeholder="请输入姓名" v-model="form.visitorName"/>
|
||||
<view class="cv-section-tag">电话</view>
|
||||
<input class="cv-input" placeholder="请输入联系电话" v-model="form.visitorPhone" />
|
||||
</view>
|
||||
<input class="cv-input" placeholder="请输入联系电话" v-model="form.visitorPhone"/>
|
||||
<view class="cv-section-tag">所属公司</view>
|
||||
<input class="cv-input" placeholder="请输入所属公司" v-model="form.visitorUnit"/>
|
||||
</view>
|
||||
<!-- 选择来访目的 -->
|
||||
<view class="cv-section">
|
||||
<view class="cv-section-title">来访目的</view>
|
||||
<view class="cv-form-group">
|
||||
<view class="cv-select">
|
||||
<view class="cv-select-header" @click="togglePurposeDropdown" :class="{'dropdown-open': purposeDropdownOpen}">
|
||||
<span>{{ form.visitingReason || '请选择来访目的' }}</span>
|
||||
<view class="cv-select-header" @click="togglePurposeDropdown"
|
||||
:class="{'dropdown-open': purposeDropdownOpen}">
|
||||
<span>{{ getReasonLabel(form.visitingReason) || '请选择拜访事由' }}</span>
|
||||
<view class="cv-select-arrow" :class="{open: purposeDropdownOpen}"></view>
|
||||
</view>
|
||||
<view class="cv-select-options" :class="{open: purposeDropdownOpen}">
|
||||
<view v-for="(purpose, index) in purposes"
|
||||
:key="index"
|
||||
class="cv-option"
|
||||
:class="{selected: form.visitingReason === purpose}"
|
||||
@click="selectPurpose(purpose)">
|
||||
{{ purpose }}
|
||||
<view v-for="(purpose, dictValue) in purposes"
|
||||
:key="dictValue"
|
||||
class="cv-option"
|
||||
:class="{selected: form.visitingReason === purpose}"
|
||||
@click="selectPurpose(purpose)">
|
||||
{{ purpose.dictLabel }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 来访时间 -->
|
||||
<view class="cv-section">
|
||||
<view class="cv-section-title">来访时间</view>
|
||||
<view class="datetime-row">
|
||||
<uni-datetime-picker class="datetime-picker" type="datetime" hide-second="true" v-model="startTime" @change="changeLog" />
|
||||
<view class="separator-line"></view>
|
||||
<uni-datetime-picker class="datetime-picker" type="datetime" hide-second="true" v-model="endTime" @change="changeLog" />
|
||||
</view>
|
||||
<!-- 来访时间 -->
|
||||
<view class="cv-section">
|
||||
<view class="cv-section-title">来访时间</view>
|
||||
<view class="datetime-row">
|
||||
<uni-datetime-picker class="datetime-picker" type="datetime" :hide-second="true" v-model="form.visitingBeginTime"/>
|
||||
<view class="separator-line"></view>
|
||||
<uni-datetime-picker class="datetime-picker" type="datetime" :hide-second="true" v-model="form.visitingEndTime"/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 是否预约车位 -->
|
||||
<!-- <view class="cv-section">-->
|
||||
<!-- <view class="cv-parking-row">-->
|
||||
<!-- <view class="cv-section-title">是否预约车位</view>-->
|
||||
<!-- <view class="cv-radio-label" @click="form.bookingParkingSpace = true">-->
|
||||
<!-- <view :class="['cv-radio-custom', {checked: form.bookingParkingSpace === true}]" />-->
|
||||
<!-- <text>是</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="cv-radio-label" @click="form.bookingParkingSpace = false">-->
|
||||
<!-- <view :class="['cv-radio-custom', {checked: form.bookingParkingSpace === false}]" />-->
|
||||
<!-- <text>否</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <text class="cv-parking-count">-->
|
||||
<!-- <text class="cv-parking-num">50</text><text class="cv-parking-total">/100</text>-->
|
||||
<!-- </text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="cv-room-select" @click="chooseCarNumber">-->
|
||||
<!-- <text>{{ form.licensePlate || '请选择车牌号' }}</text>-->
|
||||
<!-- <image class="cv-arrow" src="/static/ic_right_arrow_g.png" />-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- 提交按钮 -->
|
||||
<button class="cv-submit-btn" @click="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提交按钮 -->
|
||||
<button class="cv-submit-btn" @click="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MediaSelector, {
|
||||
MediaType
|
||||
} from '@/utils/mediaSelector';
|
||||
import {
|
||||
uploadFiles
|
||||
} from '@/common/upload.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
header: '',
|
||||
form: {
|
||||
visitorName: '',
|
||||
visitorPhone: '',
|
||||
// idCard: '',
|
||||
facePictures: '',
|
||||
visitingReason: '',
|
||||
// room: '',
|
||||
visitingBeginTime: '2025-07-29',
|
||||
bookingParkingSpace: false,
|
||||
licensePlate: ''
|
||||
},
|
||||
purposes: ['商务合作', '园区参观', '面试签到', '装修放行', '家政服务', '送货上门'],
|
||||
times: ['今天(2025-07-04)', '明天(2025-07-04)'],
|
||||
purposeDropdownOpen: false,
|
||||
single: '',
|
||||
range: ['2021-02-1', '2021-3-28'],
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
start: Date.now() - 1000000000,
|
||||
end: Date.now() + 1000000000
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.$once('selectPlate', plate => {
|
||||
this.form.licensePlate = plate;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
togglePurposeDropdown() {
|
||||
this.purposeDropdownOpen = !this.purposeDropdownOpen;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
header: '',
|
||||
form: {
|
||||
visitorName: '',
|
||||
visitorPhone: '',
|
||||
visitingReason: '',
|
||||
visitingBeginTime: '',
|
||||
visitingEndTime: '',
|
||||
interviewedPerson:"sdada",
|
||||
InterviewedUnit:'dasdas',
|
||||
visitorUnit:''
|
||||
},
|
||||
selectPurpose(purpose) {
|
||||
this.form.visitingReason = purpose;
|
||||
this.purposeDropdownOpen = false;
|
||||
},
|
||||
// 新增：处理图片上传
|
||||
async chooseAvatar() {
|
||||
try {
|
||||
// 调用MediaSelector选择图片，最多选择3张
|
||||
const images = await MediaSelector.choose({
|
||||
type: MediaType.IMAGE,
|
||||
count: 1 // 根据剩余数量选择
|
||||
});
|
||||
// 将选择的图片添加到selectedImages数组
|
||||
this.header = images[0].path
|
||||
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
},
|
||||
async submit() {
|
||||
let images = [''];
|
||||
let filePath = this.header.replace('file://', '');
|
||||
images[0] = filePath;
|
||||
const result = await uploadFiles({
|
||||
files: images,
|
||||
url: this.vuex_config.baseUrl + '/resource/oss/upload',
|
||||
name: 'file',
|
||||
vm: this // 关键：用于注入 token 等
|
||||
});
|
||||
|
||||
if (result.code == '200') {
|
||||
data = result.data.url
|
||||
}
|
||||
|
||||
this.form.facePictures = result.url
|
||||
},
|
||||
chooseRoom() {
|
||||
// 这里可弹出选择房间号
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myVisitor/selectRoom'
|
||||
});
|
||||
},
|
||||
chooseCarNumber() {
|
||||
// 这里可弹出选择车牌号
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myPayment/myCarCode'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
purposes: [],
|
||||
purposeDropdownOpen: false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 获取业务类型
|
||||
this.getTypes();
|
||||
},
|
||||
onShow() {
|
||||
uni.$once('selectPlate', plate => {
|
||||
this.form.licensePlate = plate;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
togglePurposeDropdown() {
|
||||
this.purposeDropdownOpen = !this.purposeDropdownOpen;
|
||||
},
|
||||
selectPurpose(purpose) {
|
||||
this.form.visitingReason = purpose.dictValue;
|
||||
this.purposeDropdownOpen = false;
|
||||
},
|
||||
//提交
|
||||
async submit() {
|
||||
let res = await this.$u.api.visitor.addVisitor(this.form);
|
||||
if (res.code == 200) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myVisitor/myVisitor'
|
||||
});
|
||||
}
|
||||
},
|
||||
async getTypes() {
|
||||
let res = await this.$u.api.getType("reason_for_visit");
|
||||
if (res.code == '200') {
|
||||
this.purposes = res.data;
|
||||
}
|
||||
},
|
||||
getReasonLabel(value) {
|
||||
const item = this.purposes.find(item => item.dictValue === value);
|
||||
return item ? item.dictLabel : '';
|
||||
},
|
||||
chooseRoom() {
|
||||
// 这里可弹出选择房间号
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myVisitor/selectRoom'
|
||||
});
|
||||
},
|
||||
chooseCarNumber() {
|
||||
// 这里可弹出选择车牌号
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myPayment/myCarCode'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cv-container {
|
||||
background: #fff;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cv-container {
|
||||
background: #fff;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cv-scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
.cv-scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.cv-section {
|
||||
margin: 36rpx 56rpx 0 56rpx;
|
||||
}
|
||||
.cv-section {
|
||||
margin: 36rpx 56rpx 0 56rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: relative;
|
||||
margin: 36rpx 56rpx 0 56rpx;
|
||||
}
|
||||
.info {
|
||||
position: relative;
|
||||
margin: 36rpx 56rpx 0 56rpx;
|
||||
}
|
||||
|
||||
.cv-section-title {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cv-section-title {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cv-section-tag {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
margin: 36rpx 0 16rpx 0;
|
||||
}
|
||||
.cv-section-tag {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
margin: 36rpx 0 16rpx 0;
|
||||
}
|
||||
|
||||
/* 下拉框样式 */
|
||||
.cv-select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.cv-form-group {
|
||||
margin: 36rpx 0 16rpx 0;
|
||||
}
|
||||
.cv-select-header {
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
z-index: 2; /* 确保选择框在下拉框上方 */
|
||||
position: relative; /* 添加定位 */
|
||||
}
|
||||
/* 下拉框样式 */
|
||||
.cv-select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cv-select-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 8px solid #777;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.cv-form-group {
|
||||
margin: 36rpx 0 16rpx 0;
|
||||
}
|
||||
|
||||
.cv-select-arrow.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.cv-select-header {
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
z-index: 2; /* 确保选择框在下拉框上方 */
|
||||
position: relative; /* 添加定位 */
|
||||
}
|
||||
|
||||
.cv-select-options {
|
||||
position: absolute;
|
||||
top: calc(100% - 1px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
/* 修复隐藏时的黑线问题 */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.cv-select-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 8px solid #777;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.cv-select-options.open {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
/* 显示时恢复可见性 */
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.cv-select-arrow.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.cv-option {
|
||||
padding: 14px 16px;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.cv-select-options {
|
||||
position: absolute;
|
||||
top: calc(100% - 1px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
/* 修复隐藏时的黑线问题 */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.cv-option:hover {
|
||||
background: #f0f7ff;
|
||||
}
|
||||
/* 下拉框打开时持续显示阴影 */
|
||||
.cv-select-header.dropdown-open {
|
||||
border-color: #007cff;
|
||||
border-radius: 10px 10px 0 0; /* 打开时上圆角下直角 */
|
||||
border-bottom: 1px solid #007cff; /* 添加底部边框与下拉框衔接 */
|
||||
}
|
||||
.cv-select-options.open {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
/* 显示时恢复可见性 */
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.cv-option.selected {
|
||||
background: #007cff;
|
||||
color: white;
|
||||
}
|
||||
.datetime-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 15rpx;
|
||||
margin: 36rpx 0 0 0;
|
||||
}
|
||||
.datetime-picker {
|
||||
flex: 1;
|
||||
max-width: 500rpx;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .uni-date__x-input {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.separator-line {
|
||||
width: 10rpx;
|
||||
height: 2px;
|
||||
background: #bdc3c7;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.cv-inputs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
}
|
||||
.cv-option {
|
||||
padding: 14px 16px;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.cv-input-name {
|
||||
width: 233rpx;
|
||||
height: 73rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #222;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 29rpx;
|
||||
margin-top: 23rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.cv-option:hover {
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
.cv-input-phone {
|
||||
width: 363rpx;
|
||||
height: 73rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #222;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 29rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
/* 下拉框打开时持续显示阴影 */
|
||||
.cv-select-header.dropdown-open {
|
||||
border-color: #007cff;
|
||||
border-radius: 10px 10px 0 0; /* 打开时上圆角下直角 */
|
||||
border-bottom: 1px solid #007cff; /* 添加底部边框与下拉框衔接 */
|
||||
}
|
||||
|
||||
.cv-input {
|
||||
height: 73rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #222;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 29rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.cv-option.selected {
|
||||
background: #007cff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cv-avatar-upload {
|
||||
position: absolute;
|
||||
width: 163rpx;
|
||||
height: 183rpx;
|
||||
top: 50rpx;
|
||||
right: 0rpx;
|
||||
background: #F7F8FA;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
.datetime-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 15rpx;
|
||||
margin: 36rpx 0 0 0;
|
||||
}
|
||||
|
||||
.cv-avatar-placeholder {
|
||||
color: #bbb;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.datetime-picker {
|
||||
flex: 1;
|
||||
max-width: 500rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cv-avatar-img {
|
||||
width: 163rpx;
|
||||
height: 183rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
::v-deep .uni-date__x-input {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
width: 10rpx;
|
||||
height: 2px;
|
||||
background: #bdc3c7;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.cv-input {
|
||||
height: 73rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #222;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 29rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cv-room-select {
|
||||
width: 435rpx;
|
||||
height: 73rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.cv-arrow {
|
||||
width: 11rpx;
|
||||
height: 21rpx;
|
||||
}
|
||||
|
||||
.cv-parking-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.cv-radio-label {
|
||||
font-size: 24rpx;
|
||||
color: #0B0B0B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cv-radio-label2 {
|
||||
font-size: 24rpx;
|
||||
color: #0B0B0B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cv-radio-custom {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
border: 1rpx solid #007CFF;
|
||||
background: #fff;
|
||||
margin-right: 12rpx;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.2s, border 0.2s;
|
||||
}
|
||||
|
||||
.cv-radio-custom.checked {
|
||||
background: #007CFF;
|
||||
border: 1rpx solid #007CFF;
|
||||
}
|
||||
|
||||
.cv-parking-count {
|
||||
margin-left: 24rpx;
|
||||
font-size: 24rpx;
|
||||
background: #EBF5FF;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 18rpx;
|
||||
height: 54rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cv-parking-num {
|
||||
color: #007CFF;
|
||||
}
|
||||
|
||||
.cv-parking-total {
|
||||
color: #0B0B0B;
|
||||
}
|
||||
|
||||
.cv-submit-btn {
|
||||
width: 90vw;
|
||||
height: 90rpx;
|
||||
background: #0090FF;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
border: none;
|
||||
border-radius: 45rpx;
|
||||
margin: 80rpx auto 0 auto;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.cv-submit-btn {
|
||||
width: 90vw;
|
||||
height: 90rpx;
|
||||
background: #0090FF;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
border: none;
|
||||
border-radius: 45rpx;
|
||||
margin: 80rpx auto 0 auto;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
</style>
|
||||
@@ -1,431 +1,516 @@
|
||||
<template>
|
||||
<view class="visitor-container">
|
||||
<!-- tab栏 -->
|
||||
<view class="visitor-tabs">
|
||||
<view v-for="(tab, idx) in tabs" :key="idx" :class="['visitor-tab', {active: idx === activeTab}]"
|
||||
@click="changeTab(idx)">
|
||||
{{ tab }}
|
||||
<view v-if="idx === activeTab" class="tab-underline"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表区 -->
|
||||
<view class="visitor-list-container">
|
||||
<scroll-view
|
||||
v-for="(tab, idx) in tabs"
|
||||
:key="idx"
|
||||
v-show="idx === activeTab"
|
||||
class="visitor-list"
|
||||
scroll-y
|
||||
:refresher-enabled="false">
|
||||
<view v-for="(item, index) in tabData[idx]" :key="index" class="visitor-card" @click="showVisitorDetail(item)">
|
||||
<view class="card-row">
|
||||
<view class="card-type">{{ item.visitorUnit }}</view>
|
||||
<view class="card-status" :class="getStatusColor(item.serveStatus)">{{ getStatusLabel(item.serveStatus) }}</view>
|
||||
</view>
|
||||
<view class="card-info">{{ item.visitorName }}
|
||||
<text class="card-phone">{{ item.visitorPhone }}</text>
|
||||
<text class="card-divider"></text>
|
||||
<text class="card-address">{{ item.visitorUnit }}</text>
|
||||
</view>
|
||||
<view class="card-time">{{ item.createTime }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 底部按钮 -->
|
||||
<button class="visitor-btn-fixed" @click="goCreateVisitor">访客邀约</button>
|
||||
<view v-if="showDetail" class="visitor-detail-mask" @click.self="closeVisitorDetail">
|
||||
<view class="visitor-detail-dialog">
|
||||
<view class="visitor-detail-title-row">
|
||||
<text class="visitor-detail-title">访客详情</text>
|
||||
<image src="/static/ic_close_01.png" class="visitor-detail-close" @click="closeVisitorDetail" />
|
||||
</view>
|
||||
<view class="visitor-detail-info">
|
||||
<view>{{ detailData.visitorName }} {{ detailData.visitorPhone }}</view>
|
||||
<view v-if="detailData.idCard">{{ detailData.idCard}}</view>
|
||||
<view v-if="detailData.carNumber">车牌号：{{ detailData.carNumber}}</view>
|
||||
<view>访问目的：{{ detailData.visitingReason}}</view>
|
||||
<view>来访时间：{{ detailData.visitingBeginTime }}</view>
|
||||
<view>访问地址：{{ detailData.visitorUnit}}</view>
|
||||
<view class="visitor-container">
|
||||
<!-- tab栏 -->
|
||||
<view class="visitor-tabs">
|
||||
<view v-for="(tab, idx) in tabs" :key="idx" :class="['visitor-tab', {active: idx === activeTab}]"
|
||||
@click="changeTab(idx)">
|
||||
{{ tab }}
|
||||
<view v-if="idx === activeTab" class="tab-underline"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表区 -->
|
||||
<view class="visitor-list-container">
|
||||
<scroll-view
|
||||
v-for="(tab, idx) in tabs"
|
||||
:key="idx"
|
||||
v-show="idx === activeTab"
|
||||
class="visitor-list"
|
||||
scroll-y
|
||||
:refresher-enabled="false">
|
||||
<view v-for="(item, index) in tabData[idx]" :key="index" class="visitor-card" @click="showVisitorDetail(item)">
|
||||
<view class="card-row">
|
||||
<view class="card-type">{{ item.visitorUnit }}</view>
|
||||
|
||||
<image
|
||||
:src="detailData.statusClass === 'orange' ? '/static/ic_my_visitor_01.png' : '/static/ic_my_visitor_02.png'"
|
||||
class="visitor-detail-status-img" />
|
||||
</view>
|
||||
<!-- <button class="visitor-detail-btn">修改</button>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-info">{{ item.visitorName }}
|
||||
<text class="card-phone">{{ item.visitorPhone }}</text>
|
||||
<text class="card-divider"></text>
|
||||
<text class="card-address">{{ item.visitorUnit }}</text>
|
||||
</view>
|
||||
<view class="card-time">{{ item.createTime }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 底部按钮 -->
|
||||
<button class="visitor-btn-fixed" v-if="activeTab===1" @click="goCreateVisitor">访客邀约</button>
|
||||
<view v-if="showDetail" class="visitor-detail-mask" @click.self="closeVisitorDetail">
|
||||
<view class="visitor-detail-dialog">
|
||||
<view class="visitor-detail-title-row">
|
||||
<text class="visitor-detail-title">访客详情</text>
|
||||
<image src="/static/ic_close_01.png" class="visitor-detail-close" @click="closeVisitorDetail"/>
|
||||
</view>
|
||||
<view class="visitor-detail-info">
|
||||
<view>{{ detailData.visitorName }} {{ detailData.visitorPhone }}</view>
|
||||
<view v-if="detailData.idCard">{{ detailData.idCard }}</view>
|
||||
<view v-if="detailData.carNumber">车牌号：{{ detailData.carNumber }}</view>
|
||||
<view>访问目的：{{ detailData.visitingReason }}</view>
|
||||
<view>来访时间：{{ detailData.visitingBeginTime }}</view>
|
||||
<view>访问地址：{{ detailData.visitorUnit }}</view>
|
||||
|
||||
<view class="visitor-detail-qrCode" @click="showQRCode">查看二维码</view>
|
||||
</view>
|
||||
<!-- 二维码弹窗 -->
|
||||
<view v-if="showQRCodeDialog" class="qr-code-mask" @click.self="closeQRCodeDialog">
|
||||
<view class="qr-code-dialog">
|
||||
<view class="qr-code-border">
|
||||
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
|
||||
</view>
|
||||
|
||||
<view class="visitor-detail-qrCode" @click="closeQRCodeDialog">关闭</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: ['我的预约', '我的邀约'],
|
||||
activeTab: 0,
|
||||
tabData: [
|
||||
[],
|
||||
[]
|
||||
], // 每个tab的数据
|
||||
tabLoaded: [false, false, false], // 每个tab是否已加载
|
||||
loading: false,
|
||||
showDetail: false,
|
||||
detailData: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
list() {
|
||||
return this.tabData[this.activeTab];
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadAllTabsData(); // 预加载所有标签页数据
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
goCreateVisitor() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myVisitor/creatVisitor'
|
||||
});
|
||||
},
|
||||
// 引入二维码生成库
|
||||
import uQRCode from 'uqrcodejs';
|
||||
|
||||
async changeTab(idx) {
|
||||
this.activeTab = idx;
|
||||
// 移除切换标签时的加载逻辑，避免重复调用接口
|
||||
/*
|
||||
if (!this.tabLoaded[idx]) {
|
||||
await this.loadTabData(idx);
|
||||
}
|
||||
*/
|
||||
},
|
||||
async loadTabData(idx) {
|
||||
this.loading = true;
|
||||
// 模拟接口请求，不同tab返回不同mock数据
|
||||
let params = {}
|
||||
if (idx === 0) {
|
||||
params = {
|
||||
"interviewedPerson": this.vuex_user.userId
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: ['我的预约', '我的邀约'],
|
||||
activeTab: 0,
|
||||
tabData: [
|
||||
[],
|
||||
[]
|
||||
], // 每个tab的数据
|
||||
tabLoaded: [false, false, false], // 每个tab是否已加载
|
||||
loading: false,
|
||||
showDetail: false,
|
||||
detailData: {},
|
||||
showQRCodeDialog: false,
|
||||
qrCodeImage: '/static/qr-code-placeholder.png' // 替换为实际的二维码图片路径
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
list() {
|
||||
return this.tabData[this.activeTab];
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadAllTabsData(); // 预加载所有标签页数据
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
goCreateVisitor() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/sys/user/myVisitor/creatVisitor'
|
||||
});
|
||||
},
|
||||
showQRCode() {
|
||||
this.showQRCodeDialog = true;
|
||||
this.$nextTick(() => {
|
||||
this.makeQRCode();
|
||||
});
|
||||
|
||||
let data = [];
|
||||
},
|
||||
closeQRCodeDialog() {
|
||||
this.showQRCodeDialog = false;
|
||||
},
|
||||
async changeTab(idx) {
|
||||
this.activeTab = idx;
|
||||
// 移除切换标签时的加载逻辑，避免重复调用接口
|
||||
/*
|
||||
if (!this.tabLoaded[idx]) {
|
||||
await this.loadTabData(idx);
|
||||
}
|
||||
*/
|
||||
},
|
||||
makeQRCode() {
|
||||
console.log(this.detailData.id)
|
||||
|
||||
let res = await this.$u.api.getMyVisitor(params);
|
||||
if (res.code == '200') {
|
||||
data = res.rows
|
||||
}
|
||||
|
||||
this.$set(this.tabData, idx, data);
|
||||
this.$set(this.tabLoaded, idx, true);
|
||||
this.loading = false;
|
||||
},
|
||||
async loadAllTabsData() {
|
||||
for (let i = 0; i < this.tabs.length; i++) {
|
||||
if (!this.tabLoaded[i]) {
|
||||
await this.loadTabData(i);
|
||||
}
|
||||
}
|
||||
},
|
||||
showVisitorDetail(item) {
|
||||
this.detailData = item;
|
||||
this.showDetail = true;
|
||||
},
|
||||
closeVisitorDetail() {
|
||||
this.showDetail = false;
|
||||
},
|
||||
let params = {}
|
||||
params = {
|
||||
"id": this.detailData.id
|
||||
}
|
||||
// 设置二维码内容
|
||||
this.$u.api.visitor.qrCodeVisitor(params).then(res => {
|
||||
|
||||
getStatusLabel(status) {
|
||||
const statusMap = {
|
||||
0: '待确认',
|
||||
1: '已确认',
|
||||
2: '已取消',
|
||||
3: '已完成'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
getStatusColor(status){
|
||||
const statusMap = {
|
||||
0: '待确认',
|
||||
1: 'orange',
|
||||
2: '已取消',
|
||||
3: '已完成'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
|
||||
// 添加预加载所有标签页数据的方法
|
||||
async loadAllTabsData() {
|
||||
// 并行加载所有标签页数据，提高加载速度
|
||||
const loadPromises = [0, 1, 2].map((index) => {
|
||||
return this.loadTabData(index);
|
||||
});
|
||||
|
||||
await Promise.all(loadPromises);
|
||||
|
||||
// 标记所有标签页已加载
|
||||
this.tabLoaded = [true, true, true];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (res.code == 200) {
|
||||
// 获取uQRCode实例
|
||||
var qr = new uQRCode();
|
||||
//获取二维码数据
|
||||
qr.data = res.data
|
||||
// 设置二维码大小（单位px）
|
||||
qr.size = 200;
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
// 获取canvas上下文
|
||||
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
|
||||
// 设置uQRCode实例的canvas上下文
|
||||
qr.canvasContext = canvasContext;
|
||||
// 调用绘制方法将二维码图案绘制到canvas上
|
||||
qr.drawCanvas();
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
uni.showToast({
|
||||
title: "二维码获取失败",
|
||||
icon: "none",
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
async loadTabData(idx) {
|
||||
this.loading = true;
|
||||
// 模拟接口请求，不同tab返回不同mock数据
|
||||
let params = {}
|
||||
|
||||
params = {
|
||||
"type": idx
|
||||
}
|
||||
|
||||
let data = [];
|
||||
let res = await this.$u.api.visitor.getMyVisitor(params);
|
||||
if (res.code == 200) {
|
||||
data = res.data
|
||||
}
|
||||
|
||||
this.$set(this.tabData, idx, data);
|
||||
this.$set(this.tabLoaded, idx, true);
|
||||
this.loading = false;
|
||||
},
|
||||
showVisitorDetail(item) {
|
||||
this.detailData = item;
|
||||
this.showDetail = true;
|
||||
},
|
||||
closeVisitorDetail() {
|
||||
this.showDetail = false;
|
||||
},
|
||||
|
||||
getStatusLabel(status) {
|
||||
const statusMap = {
|
||||
0: '待确认',
|
||||
1: '已确认',
|
||||
2: '已取消',
|
||||
3: '已完成'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
getStatusColor(status) {
|
||||
const statusMap = {
|
||||
0: '待确认',
|
||||
1: 'orange',
|
||||
2: '已取消',
|
||||
3: '已完成'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
|
||||
// 添加预加载所有标签页数据的方法
|
||||
async loadAllTabsData() {
|
||||
// 并行加载所有标签页数据，提高加载速度
|
||||
const loadPromises = [0, 1].map((index) => {
|
||||
return this.loadTabData(index);
|
||||
});
|
||||
|
||||
await Promise.all(loadPromises);
|
||||
console.log()
|
||||
// 标记所有标签页已加载
|
||||
this.tabLoaded = [true, true, true];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.visitor-container {
|
||||
height: 100vh;
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visitor-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
height: 80rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
/* 防止被压缩 */
|
||||
}
|
||||
|
||||
.visitor-list-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin: 25rpx 0 0 0;
|
||||
padding: 0 35rpx;
|
||||
padding-bottom: 200rpx;
|
||||
/* 为底部按钮留出空间 */
|
||||
}
|
||||
.visitor-container {
|
||||
height: 100vh;
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visitor-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #888;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
padding: 0 0 10rpx 0;
|
||||
/* tab点击事件 */
|
||||
cursor: pointer;
|
||||
}
|
||||
.visitor-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
height: 80rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
/* 防止被压缩 */
|
||||
}
|
||||
|
||||
.visitor-tab.active {
|
||||
color: #2186FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
.visitor-list-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin: 25rpx 0 0 0;
|
||||
padding: 0 35rpx;
|
||||
padding-bottom: 200rpx;
|
||||
/* 为底部按钮留出空间 */
|
||||
}
|
||||
|
||||
.tab-underline {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
background: #2186FF;
|
||||
border-radius: 3rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.visitor-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #888;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
padding: 0 0 10rpx 0;
|
||||
/* tab点击事件 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.visitor-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 35rpx;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 200rpx;
|
||||
/* 为底部按钮留出空间 */
|
||||
height: calc(100vh - 80rpx - 32rpx - 80rpx); /* 减去顶部tab区域和底部按钮高度 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.visitor-tab.active {
|
||||
color: #2186FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.visitor-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 20rpx 40rpx 70rpx 12rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.tab-underline {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
background: #2186FF;
|
||||
border-radius: 3rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
.visitor-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 35rpx;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 200rpx;
|
||||
/* 为底部按钮留出空间 */
|
||||
height: calc(100vh - 80rpx - 32rpx - 80rpx); /* 减去顶部tab区域和底部按钮高度 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
font-weight: 600;
|
||||
font-size: 26rpx;
|
||||
padding: 10rpx 45rpx 10rpx 12rpx;
|
||||
border-radius: 15rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #007CFF 0%, #FFFFFF 100%);
|
||||
display: inline-block;
|
||||
}
|
||||
.visitor-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 20rpx 40rpx 70rpx 12rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.card-status {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.card-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.card-status.orange {
|
||||
color: #F3831F;
|
||||
}
|
||||
.card-type {
|
||||
font-weight: 600;
|
||||
font-size: 26rpx;
|
||||
padding: 10rpx 45rpx 10rpx 12rpx;
|
||||
border-radius: 15rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #007CFF 0%, #FFFFFF 100%);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.card-status.green {
|
||||
color: #07C78E;
|
||||
}
|
||||
.card-status {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.card-status.gray {
|
||||
color: #8F8F8F;
|
||||
}
|
||||
.card-status.orange {
|
||||
color: #F3831F;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.card-status.green {
|
||||
color: #07C78E;
|
||||
}
|
||||
|
||||
.card-phone {
|
||||
margin: 0 8rpx 0 8rpx;
|
||||
}
|
||||
.card-status.gray {
|
||||
color: #8F8F8F;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
width: 1rpx;
|
||||
height: 40rpx;
|
||||
background: #DCDCDC;
|
||||
display: inline-block;
|
||||
margin: 0 12rpx;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
.card-info {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-address {
|
||||
margin-left: 0;
|
||||
}
|
||||
.card-phone {
|
||||
margin: 0 8rpx 0 8rpx;
|
||||
}
|
||||
|
||||
.card-time {
|
||||
font-size: 28rpx;
|
||||
color: #626262;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.card-divider {
|
||||
width: 1rpx;
|
||||
height: 40rpx;
|
||||
background: #DCDCDC;
|
||||
display: inline-block;
|
||||
margin: 0 12rpx;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.visitor-btn {
|
||||
width: 90vw;
|
||||
height: 80rpx;
|
||||
background: #0090FF;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
margin: 60rpx auto 0 auto;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.card-address {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.visitor-btn-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100rpx;
|
||||
margin: 0 auto;
|
||||
width: 90vw;
|
||||
height: 80rpx;
|
||||
background: #0090FF;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
||||
z-index: 99;
|
||||
}
|
||||
.card-time {
|
||||
font-size: 28rpx;
|
||||
color: #626262;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.visitor-detail-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.visitor-btn {
|
||||
width: 90vw;
|
||||
height: 80rpx;
|
||||
background: #0090FF;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
margin: 60rpx auto 0 auto;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.visitor-detail-dialog {
|
||||
width: 80vw;
|
||||
background: #fff;
|
||||
border-radius: 36rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
padding: 48rpx 36rpx 36rpx 36rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.visitor-btn-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100rpx;
|
||||
margin: 0 auto;
|
||||
width: 90vw;
|
||||
height: 80rpx;
|
||||
background: #0090FF;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.visitor-detail-title-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-bottom: 52rpx;
|
||||
}
|
||||
.visitor-detail-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.visitor-detail-title {
|
||||
font-size: 36rpx;
|
||||
color: #000;
|
||||
}
|
||||
.visitor-detail-dialog {
|
||||
width: 80vw;
|
||||
background: #fff;
|
||||
border-radius: 36rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
padding: 48rpx 36rpx 36rpx 36rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.visitor-detail-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
.visitor-detail-title-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-bottom: 52rpx;
|
||||
}
|
||||
|
||||
.visitor-detail-info {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
margin-bottom: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28rpx;
|
||||
position: relative;
|
||||
}
|
||||
.visitor-detail-title {
|
||||
font-size: 36rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.visitor-detail-status-img {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -40rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.visitor-detail-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
|
||||
.visitor-detail-btn {
|
||||
width: 320rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, #0090FF 0%, #2E9FFF 100%);
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.visitor-detail-info {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
margin-bottom: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.visitor-detail-qrCode {
|
||||
text-align: center;
|
||||
color: #2186FF;
|
||||
font-size: 28rpx;
|
||||
margin-top: 40rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 二维码弹窗样式 */
|
||||
.qr-code-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qr-code-dialog {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.qr-code-canvas {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.qr-code-border{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
box-shadow: 0px 0px 12px 1px #00BBFF inset;
|
||||
background: linear-gradient(to left, #196aa8, #196aa8) left top no-repeat,
|
||||
linear-gradient(to bottom, #196aa8, #196aa8) left top no-repeat,
|
||||
linear-gradient(to left, #196aa8, #196aa8) right top no-repeat,
|
||||
linear-gradient(to bottom, #196aa8, #196aa8) right top no-repeat,
|
||||
linear-gradient(to left, #196aa8, #196aa8) left bottom no-repeat,
|
||||
linear-gradient(to bottom, #196aa8, #196aa8) left bottom no-repeat,
|
||||
linear-gradient(to left, #196aa8, #196aa8) right bottom no-repeat,
|
||||
linear-gradient(to left, #196aa8, #196aa8) right bottom no-repeat;
|
||||
background-size:
|
||||
1px 12px, /* 左上角垂直部分 */
|
||||
12px 1px, /* 左上角水平部分 */
|
||||
1px 12px, /* 右上角垂直部分 */
|
||||
12px 1px, /* 右上角水平部分 */
|
||||
1px 12px, /* 左下角垂直部分 */
|
||||
12px 1px, /* 左下角水平部分 */
|
||||
1px 12px, /* 右下角垂直部分 */
|
||||
12px 1px; /* 右下角水平部分 */
|
||||
}
|
||||
</style>
|
||||
@@ -6,23 +6,23 @@
|
||||
<view class="user-info">
|
||||
<view class="info-row">
|
||||
<text class="label">用户姓名：</text>
|
||||
<text class="value">{{employeeDetail.userName}}</text>
|
||||
<text class="value">{{ employeeDetail.userName }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">性别：</text>
|
||||
<text class="value">{{employeeDetail.gender === 1? '男' : '女'}}</text>
|
||||
<text class="value">{{ employeeDetail.gender === 1 ? '男' : '女' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">证件号：</text>
|
||||
<text class="value">{{employeeDetail.idCard}}</text>
|
||||
<text class="value">{{ employeeDetail.idCard }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">联系电话：</text>
|
||||
<text class="value">{{employeeDetail.phone}}</text>
|
||||
<text class="value">{{ employeeDetail.phone }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">所属单位：</text>
|
||||
<text class="value">{{employeeDetail.unitName}}</text>
|
||||
<text class="value">{{ employeeDetail.unitName }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 人脸图片区域 -->
|
||||
@@ -41,11 +41,11 @@
|
||||
<view class="user-info">
|
||||
<view class="info-row">
|
||||
<text class="label">邮箱：</text>
|
||||
<text class="value">{{employeeDetail.email}}</text>
|
||||
<text class="value">{{ employeeDetail.email }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">车牌号：</text>
|
||||
<text class="value">{{employeeDetail.carNumber}}</text>
|
||||
<text class="value">{{ employeeDetail.carNumber }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -54,7 +54,7 @@
|
||||
<view class="user-info">
|
||||
<view class="info-row">
|
||||
<text class="label">入驻时间：</text>
|
||||
<text class="value">{{employeeDetail.updateTime}}</text>
|
||||
<text class="value">{{ employeeDetail.updateTime }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">在职状态：</text>
|
||||
@@ -94,17 +94,7 @@ export default {
|
||||
this.queryEmployee();
|
||||
}
|
||||
},
|
||||
// 原有方法保持不变...
|
||||
handleApprove() {
|
||||
console.log('approve');
|
||||
},
|
||||
handleReject() {
|
||||
console.log('reject');
|
||||
},
|
||||
async submit(action) {
|
||||
// 提交逻辑...
|
||||
},
|
||||
queryEmployee(){
|
||||
queryEmployee() {
|
||||
this.$u.api.unit.queryEmployeeById(this.employeeDetail).then(res => {
|
||||
this.employeeDetail = res.data;
|
||||
});
|
||||
@@ -113,15 +103,15 @@ export default {
|
||||
changeStatus(newState) {
|
||||
this.employeeDetail.state = newState;
|
||||
},
|
||||
saveInfo(){
|
||||
console.log( this.employeeDetail);
|
||||
this.$u.api.unit.updateEmployee( this.employeeDetail).then(res => {
|
||||
saveInfo() {
|
||||
console.log(this.employeeDetail);
|
||||
this.$u.api.unit.updateEmployee(this.employeeDetail).then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '状态更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}else {
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '状态更新失败',
|
||||
icon: 'none'
|
||||
@@ -206,6 +196,7 @@ export default {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 状态选项容器 */
|
||||
.status-options {
|
||||
display: flex;
|
||||
|
||||
@@ -47,27 +47,27 @@
|
||||
name: 'Workbench',
|
||||
data() {
|
||||
return {
|
||||
commonApps: [
|
||||
commonApps: [
|
||||
// {
|
||||
// icon: 'https://picsum.photos/80/80?random=3',
|
||||
// text: '工作巡检',
|
||||
// text: '工作巡检',
|
||||
// url:'/pages/sys/workbench/inspection/inspection'
|
||||
// },
|
||||
// {
|
||||
// icon: 'https://picsum.photos/80/80?random=3',
|
||||
// text: '假勤',
|
||||
// url:'/pages/sys/workbench/camera'
|
||||
// text: '假勤',
|
||||
// url:'/pages/sys/workbench/camera'
|
||||
|
||||
// },
|
||||
{
|
||||
icon: '/static/aaaa_gd.png',
|
||||
text: '工单',
|
||||
text: '工单',
|
||||
url:'/pages/sys/workbench/order/order'
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_yjcl.png',
|
||||
text: '预警处理',
|
||||
url:'/pages/sys/workbench/earlyWarning/earlyWarning'
|
||||
text: '预警处理',
|
||||
url:'/pages/sys/workbench/earlyWarning/earlyWarning'
|
||||
|
||||
},
|
||||
// {
|
||||
@@ -76,19 +76,19 @@
|
||||
// },
|
||||
{
|
||||
icon: '/static/aaaa_jk.png',
|
||||
text: '监控',
|
||||
text: '监控',
|
||||
url:'/pages/sys/workbench/monitor/monitors'
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_bsbx.png',
|
||||
text: '报事报修',
|
||||
url:'/pages/sys/user/myRepair/myRepair'
|
||||
}
|
||||
// {
|
||||
// icon: 'https://picsum.photos/80/80?random=3',
|
||||
// text: '会议',
|
||||
// url:'/pages/sys/workbench/meet/meet'
|
||||
// },
|
||||
},
|
||||
{
|
||||
icon: '/static/aaaa_bsbx.png',
|
||||
text: '报事报修',
|
||||
url:'/pages/sys/user/myRepair/myRepair'
|
||||
},
|
||||
{
|
||||
icon: '/static/ic_unit.png',
|
||||
text: '单位管理',
|
||||
url:'/pages/sys/workbench/unitManagement/unitManagement'
|
||||
},
|
||||
// {
|
||||
// icon: 'https://picsum.photos/80/80?random=3',
|
||||
// text: '添加常用'
|
||||
|
||||
BIN
static/ic_unit.png
Normal file
BIN
static/ic_unit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Reference in New Issue
Block a user