<template>
<view class="check-message-detail">
<div class="main">
<view class="title-area" v-if="!isManager">
<view class="text" >
<text>您的访客申请{{status}}</text>
<text v-if="status === '已提交'" class="text_text">请耐心等待管理员审核</text>
</view>
<view :class="status === '未通过' ? 'button-area' : status === '已通过' ? 'button-area pass' : 'button-area submit'">申请{{status}}</view>
</view>
<!-- 申请者未通过 -->
<view class="message-text" v-if="!isManager && status === '未通过'">
请联系安保人员进行确认
</view>
<!-- 申请者已通过 -->
<view class="message-text message-text-css" v-if="!isManager && status === '已通过'">
访客{{name}}可凭借身份证在{{time}}时间内进入{{place}}
</view>
<!-- 访客、管理员已提交 -->
<view
class="content"
v-for="item in list"
:key="item.id"
v-if="isManager"
>
<!-- v-if="isManager ? true : item.id === 'staffPhone' || item.id === 'staffName' ? false : true"> -->
<view class="title">{{item.name}}</view>
<view :class="item.value === '申请已通过' ? 'green' :
item.value === '申请未通过' ? 'red' :
item.value === '申请已提交' ? 'blue' :
'value'">{{item.value}}</view>
</view>
<!-- 管理员button -->
<view class="button-area-manager" v-if="isManager && status === '已提交'">
<view class="pass">
<view class="icon"></view>
<view class="text" @click="handleClick(item, '已通过')">申请通过</view>
</view>
<view class="pass no-pass">
<view class="icon"></view>
<view class="text" @click="handleClick(item, '已拒绝')">申请不通过</view>
</view>
</view>
<u-modal
:show="show"
showConfirmButton
showCancelButton
:content='content'
:closeOnClickOverlay="true"
@confirm="confirm"
@cancel="cancel"
@close="cancel"
></u-modal>
</div>
</view>
</template>
<script>
import { getMessageInfo, solveStatus } from '@/api/message.js';
import { getLocationParams } from '@/common/utils.js';
export default {
data() {
return {
isManager: true,
userId: '', //用户id
show: false, //控制模态框显隐
content: '', //模态框显示内容
list: [
{
id: 'applyNo',
name: '申请单号',
value: ''
},
{
id: 'visitorApplyStatus',
name: '申请状态',
value: ''
},
{
id: 'staffCode',
name: '申请者工号',
value: ''
},
{
id: 'staffName',
name: '申请者姓名',
value: ''
},
{
id: 'staffPhone',
name: '申请者手机号',
value: ''
},
{
id: 'visitorName',
name: '访客姓名',
value: ''
},
{
id: 'visitorIdCard',
name: '访客身份证',
value: ''
},
{
id: 'visitorPhone',
name: '访客联系方式',
value: ''
},
{
id: 'visitReason',
name: '访问目的',
value: ''
},
{
id: 'visitPosition',
name: '访问区域',
value: ''
},
{
id: 'time',
name: '访问时间',
value: ''
},
{
id: 'remarks',
name: '备注',
value: ''
},
],
status: '',
name: '',
time: '',
place: '',
willchange: '',
// messageId: '', //消息id
solveId: '', //管理员处理id
}
},
mounted() {
const id = getLocationParams('id');
const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
this.userId = userInfo.id;
if(userInfo.salt === '物业人员') {
this.isManager = true;
} else {
this.isManager = false;
}
this.fetchMessageInfo(id);
},
methods: {
handleClick(value, text) {
if(text === '已通过') {
this.willchange = '2'; //1提交2通过3不通过
} else {
this.willchange = '3';
}
let index = this.list.findIndex(item => item.id === 'applyNo');
if(index !== -1) {
let number = this.list[index].value;
this.content = `单号${number}访客访客申请${text}`;
this.show = true;
} else {
wx.showToast({
title: '找不到单号',
icon: 'none',
duration: 1000,
})
}
},
//点击模态框取消按钮
cancel() {
this.show = false;
},
//点击模态框确认按钮
confirm() {
this.solveStatusData();
wx.reLaunch({
url: '/pages/message/message'
})
},
//获取消息详情
async fetchMessageInfo(id) {
const res = await getMessageInfo(id);
this.status = res.visitorApplyStatus === "1" ? '已提交' : res.visitorApplyStatus === "2" ?
'已通过' : '未通过';
this.name = res.visitorName;
this.time = res.inTime + ' ~ ' + res.outTime;
this.place = res.visitPosition;
this.solveId = res.id;
this.list.forEach(item => {
for(let key in res) {
if(item.id === key) {
if(key === 'visitorApplyStatus') {
item.value = res[key] === '1' ? '申请已提交' : res[key] === '2' ? '申请已通过' : '申请未通过';
} else {
item.value = res[key];
}
} else if(item.id === 'time') {
item.value = res.inTime + ' ~ ' + res.outTime;
}
}
})
},
//管理员处理是否通过申请
async solveStatusData() {
await solveStatus(this.willchange, this.solveId);
},
}
}
</script>
<style lang="scss" scoped>
.check-message-detail {
padding: 20rpx;
.main {
padding: 32rpx 20rpx;
border-radius: 10rpx;
background-color: #fff;
.message-text {
font-weight: 600;
}
.message-text-css {
margin-top: 100rpx;
line-height: 72rpx;
}
.title-area {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 32rpx;
margin-bottom: 100rpx;
.text {
display: flex;
flex-direction: column;
font-weight: 600;
}
.button-area {
padding: 6rpx 16rpx;
background-color: #f02a0a;
border-radius: 16rpx;
color: #ecf9e8;
font-size: 28rpx;
white-space: nowrap;
}
.pass {
background-color: #2ebf00;
}
.submit {
background-color: #1076e3;
}
}
.content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.title {
white-space: nowrap;
margin-right: 60rpx;
font-weight: 600;
}
.green {
color: #2ebf00;
}
.blue {
color: #1076e3;
}
.red {
color: #f02a0a;
}
}
.button-area-manager {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 80rpx;
.pass {
width: fit-content;
padding: 10rpx 20rpx;
background-color: #2ebf00;
color: #fff;
border-radius: 16rpx;
margin-right: 60rpx;
}
.no-pass {
background-color: #f02a0a;
color: #fff;
}
}
}
}
</style>
