投诉详情
This commit is contained in:
Zy
186
wuye-manager-uniapp/pageSubPack/complaint/Details.vue
Normal file
186
wuye-manager-uniapp/pageSubPack/complaint/Details.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view class="page_padding">
|
||||
<view class="detailsbox flex flex-col overflow-hidden">
|
||||
<!-- 状态筛选标签 -->
|
||||
<TabsComponents
|
||||
:showBottomLine="false"
|
||||
:tabslist="statusTabs"
|
||||
@update="switchStatus"
|
||||
></TabsComponents>
|
||||
|
||||
<view class="detail_list flex flex-1 overflow-auto">
|
||||
<scroll-view scroll-y="true">
|
||||
<view class="item" v-for="(item, index) in list" :key="index">
|
||||
<view class="title flex items-center">
|
||||
<text>{{ item.title }}</text>
|
||||
<view class="status padding" v-if="item.status === 0"> <text>待处理</text> </view>
|
||||
<view class="status compluted" v-else>
|
||||
<text>已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="descrtion">
|
||||
<text>{{ item.desction }}</text>
|
||||
</view>
|
||||
<view class="detailsMan">
|
||||
<text>投诉人：</text>
|
||||
<text>{{ item.user }}</text>
|
||||
</view>
|
||||
<view class="detailsMan">
|
||||
<text>手机号：</text>
|
||||
<text>{{ item.phone }}</text>
|
||||
</view>
|
||||
<view class="detailsMan flex justify-between">
|
||||
<view class="">
|
||||
<text>投诉时间：</text>
|
||||
<text>{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="actions" v-if="item.status === 0">
|
||||
<text>处理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import TabsComponents from '@/components/tabs/tabs.vue'
|
||||
const activeStatus = ref(0)
|
||||
const statusTabs = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '待处理',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
// 切换状态（全部/待分配/待解决/已完成）筛选
|
||||
const switchStatus = value => {
|
||||
activeStatus.value = value
|
||||
}
|
||||
//
|
||||
const list = [
|
||||
{
|
||||
title: '小区环境',
|
||||
status: 0, // 0 待处理 1 已完成
|
||||
desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
user: '胡小小',
|
||||
phone: '19113212388',
|
||||
time: '2023-08-01 10:05:46'
|
||||
},
|
||||
{
|
||||
title: '小区环境',
|
||||
status: 1, // 0 待处理 1 已完成
|
||||
desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
user: '胡小小',
|
||||
phone: '19113212388',
|
||||
time: '2023-08-01 10:05:46'
|
||||
},
|
||||
{
|
||||
title: '小区环境',
|
||||
status: 1, // 0 待处理 1 已完成
|
||||
desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
user: '胡小小',
|
||||
phone: '19113212388',
|
||||
time: '2023-08-01 10:05:46'
|
||||
},
|
||||
{
|
||||
title: '小区环境',
|
||||
status: 0, // 0 待处理 1 已完成
|
||||
desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
user: '胡小小',
|
||||
phone: '19113212388',
|
||||
time: '2023-08-01 10:05:46'
|
||||
},
|
||||
{
|
||||
title: '小区环境',
|
||||
status: 1, // 0 待处理 1 已完成
|
||||
desction: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
user: '胡小小',
|
||||
phone: '19113212388',
|
||||
time: '2023-08-01 10:05:46'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page_padding {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.detailsbox {
|
||||
flex: 1;
|
||||
background: #f9f9f9;
|
||||
padding: 20rpx 40rpx;
|
||||
.detail_list {
|
||||
.item {
|
||||
height: 390rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 36rpx 55rpx 54rpx;
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.status {
|
||||
width: 82rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 198rpx 198rpx 198rpx 198rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
margin-left: 20rpx;
|
||||
&.padding {
|
||||
background: #e34d59;
|
||||
}
|
||||
&.compluted {
|
||||
background: #4d5dfa;
|
||||
}
|
||||
}
|
||||
}
|
||||
.descrtion {
|
||||
font-weight: 450;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
letter-spacing: 0rpx;
|
||||
}
|
||||
.detailsMan {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.actions {
|
||||
width: 127rpx;
|
||||
height: 44rpx;
|
||||
background: #4d5dfa;
|
||||
border-radius: 198rpx 198rpx 198rpx 198rpx;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user