init
This commit is contained in:
216
pages/sys/detail/detail.vue
Normal file
216
pages/sys/detail/detail.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="detail-container">
|
||||
<view class="detail-header">
|
||||
<view class="back-btn" @click="goBack">
|
||||
<text class="iconfont icon-arrow-left"></text>
|
||||
</view>
|
||||
<view class="title">访客详情</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-card">
|
||||
<view class="card-item">
|
||||
<view class="item-label">访客姓名</view>
|
||||
<view class="item-value">{{ visitorInfo.visitorName || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">访客电话</view>
|
||||
<view class="item-value">{{ visitorInfo.visitorPhone || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">所属公司</view>
|
||||
<view class="item-value">{{ visitorInfo.company || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">被访人</view>
|
||||
<view class="item-value">{{ visitorInfo.visitedPerson || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">联系电话</view>
|
||||
<view class="item-value">{{ visitorInfo.contactPhone || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">被访单位</view>
|
||||
<view class="item-value">{{ visitorInfo.visitedUnit || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">拜访事由</view>
|
||||
<view class="item-value">{{ visitorInfo.reason || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">拜访时间</view>
|
||||
<view class="item-value">{{ visitorInfo.visitTime || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">是否预约车位</view>
|
||||
<view class="item-value">{{ visitorInfo.isBookParking || '-' }}</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">预约状态</view>
|
||||
<view class="item-value status-value"
|
||||
:class="{'status-confirm': visitorInfo.bookStatus === '已确认',
|
||||
'status-wait': visitorInfo.bookStatus === '待确认'}">
|
||||
{{ visitorInfo.bookStatus || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="item-label">提交时间</view>
|
||||
<view class="item-value">{{ visitorInfo.submitTime || '-' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<view class="btn-group" v-if="visitorInfo.bookStatus === '待确认'">
|
||||
<button class="audit-btn reject-btn" @click="handleAudit('reject')">驳回</button>
|
||||
<button class="audit-btn confirm-btn" @click="handleAudit('confirm')">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visitorInfo: {} // 访客详情数据
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
try {
|
||||
// 接收从列表页传来的访客数据
|
||||
if (options.item) {
|
||||
this.visitorInfo = JSON.parse(decodeURIComponent(options.item));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('解析详情数据失败:', e);
|
||||
uni.showToast({
|
||||
title: '加载详情失败',
|
||||
icon: 'none'
|
||||
});
|
||||
// 失败则返回上一页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
// 处理审核操作
|
||||
handleAudit(type) {
|
||||
// 实际项目中应调用后端接口进行审核状态更新
|
||||
const statusMap = {
|
||||
'confirm': '已确认',
|
||||
'reject': '已驳回'
|
||||
};
|
||||
|
||||
uni.showLoading({
|
||||
title: type === 'confirm' ? '确认中...' : '驳回中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
// 模拟接口调用
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
|
||||
// 更新本地数据状态
|
||||
if (statusMap[type]) {
|
||||
this.visitorInfo.bookStatus = statusMap[type];
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: type === 'confirm' ? '确认成功' : '驳回成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 返回上一页并刷新列表（实际项目中可通过事件总线或全局状态管理通知列表页更新）
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
background-color: #fff;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.back-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.detail-card {
|
||||
background-color: #fff;
|
||||
margin: 15px;
|
||||
border-radius: 8px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.card-item {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.card-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.item-label {
|
||||
width: 100px;
|
||||
color: #666;
|
||||
}
|
||||
.item-value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
.status-value {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
.status-confirm {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
.status-wait {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.btn-group {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
.audit-btn {
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
padding: 10px 0;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.reject-btn {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
.confirm-btn {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user