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