投诉详情

This commit is contained in:
Zy
2026-05-01 18:27:28 +08:00
parent 893996a3e0
commit 41ea760c3f
9 changed files with 1425 additions and 48 deletions

View 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>

View File

@@ -0,0 +1,198 @@
<template>
<view class="page_padding">
<view class="Details_handelbox h-full flex-1">
<view class="items top flex items-center justify-between">
<view class="title flex items-center">
<view class="line"></view>
<text>投诉状态</text>
</view>
<view class="status" v-if="info.status === 0"> <text>待处理</text> </view>
<view class="status alwary" v-if="info.status === 1">
<text>已完成</text>
</view>
</view>
<view class="subDescrition" v-if="info.status === 1">
<text>已完成处理,已联系工作人员粘贴标语提醒,并派人定时巡视。</text>
</view>
<view class="items flex items-center justify-between">
<view class="title flex items-center">
<view class="line"></view>
<text>投诉详情</text>
</view>
</view>
<view class="list">
<view class="item">
<view class="label"> 投诉类型 </view>
<view class="value flex items-center justify-between">
<view class=""> 社区服务 </view>
<uni-icons type="right" size="14" color="#000000"></uni-icons>
</view>
</view>
<view class="item">
<view class="label"> 问题描述 </view>
<view class="value">
<text
>投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容
</text>
</view>
</view>
<view class="item">
<view class="label"> 投诉人姓名 </view>
<view class="value">
<text>匿名 </text>
</view>
</view>
<view class="item">
<view class="label"> 手机号码 </view>
<view class="value">
<text>无 </text>
</view>
</view>
<view class="photobox">
<view class="lable">
<text>问题照片</text>
</view>
<view class="imgbox">
<image
v-for="(item, index) in info.imgs"
:key="index"
:src="item"
class="img"
mode="scaleToFill"
></image>
</view>
</view>
</view>
<!-- submit -->
<view v-if="info.status === 0" class="action_btn" @tap="handleSelecthouse">
<text>确定派单</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const info = ref({
status: 1, //0待解决 1已完成
imgs: [
'https://picsum.photos/61',
'https://picsum.photos/61',
'https://picsum.photos/61',
'https://picsum.photos/61',
'https://picsum.photos/61'
]
})
</script>
<style scoped lang="scss">
.Details_handelbox {
padding: 30rpx 40rpx;
padding-bottom: 0;
position: relative;
.items {
height: 100rpx;
&.top {
border-bottom: 1rpx solid #ccc;
}
.title {
font-weight: 550;
font-size: 32rpx;
color: #333333;
line-height: 40rpx;
.line {
width: 6rpx;
height: 28rpx;
background: #4d5dfa;
margin-right: 10rpx;
}
}
.status {
font-weight: 400;
font-size: 28rpx;
color: #4d5dfa;
line-height: 36rpx;
&.alwary {
color: #999999;
}
}
}
.subDescrition {
margin: 30rpx 0;
font-weight: 500;
font-size: 28rpx;
letter-spacing: 1rpx;
color: #4d5dfa;
line-height: 36rpx;
}
.list {
.item {
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
padding: 20rpx;
box-sizing: border-box;
min-height: 100rpx;
.label {
width: 226rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 36rpx;
}
.value {
font-weight: 400;
font-size: 28rpx;
color: #000000;
line-height: 36rpx;
flex: 1;
}
}
.photobox {
margin-top: 30rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 36rpx;
padding: 0 20rpx;
.lable {
margin-bottom: 30rpx;
}
.imgbox {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20rpx;
.img {
width: 132rpx;
height: 132rpx;
}
}
}
}
// 确定派单
.action_btn {
width: 670rpx;
height: 80rpx;
font-weight: 400;
font-size: 28rpx;
color: #ffffff;
line-height: 80rpx;
text-align: center;
margin-top: 20rpx;
background: #4d5dfa;
border-radius: 8rpx 8rpx 8rpx 8rpx;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
</style>

View File

@@ -0,0 +1,94 @@
<template>
<view class="page_padding">
<view class="handlebox flex-1">
<view class="items checkout flex items-center" @tap="handleClick">
<view class="label">处理人员</view>
<view class="value"> {{ checkoutinfo.username ? checkoutinfo.username : '请选择' }} </view>
</view>
<view class="items">
<view class="label">处理描述</view>
<view class="areabox">
<textarea value="" placeholder="请输入" placeholder-style="font-size:28rpx;" />
</view>
</view>
<view class="action_btn" @tap="handleSelecthouse">
<text>确 认</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const checkoutinfo = ref({
username: '',
userid: ''
})
function handleClick() {
uni.navigateTo({
url: '/pageSubPack/complaint/handleUser',
events: {
backData: data => {
checkoutinfo.value.username = data.username
checkoutinfo.value.userid = data.userid
}
}
})
}
</script>
<style lang="scss" scoped>
.handlebox {
padding: 30rpx 40rpx;
position: relative;
.items {
margin-bottom: 30rpx;
&.checkout {
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
.label {
width: 128rpx;
height: 40rpx;
font-weight: 550;
font-size: 32rpx;
color: #333333;
line-height: 40rpx;
margin-right: 86rpx;
}
.value {
height: 36rpx;
font-weight: 400;
font-size: 28rpx;
color: #666666;
line-height: 36rpx;
text-align: left;
}
.areabox {
margin-top: 20rpx;
border-radius: 8rpx;
border: 2rpx solid #e7e7e7;
padding: 10rpx;
box-sizing: border-box;
}
}
.action_btn {
width: 670rpx;
height: 80rpx;
font-weight: 400;
font-size: 28rpx;
color: #ffffff;
line-height: 80rpx;
text-align: center;
background: #4d5dfa;
border-radius: 8rpx 8rpx 8rpx 8rpx;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
</style>

View File

@@ -0,0 +1,231 @@
<template>
<view class="page_padding shareUser">
<view class="shareBody flex flex-col flex-1 overflow-hidden">
<!-- 搜索 -->
<view class="search_box">
<view
@click="handleClick"
class="search_view flex-center"
v-if="!queryParmas.value.trim() && Searching"
>
<uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
<text>请输入关键字进行搜索</text>
</view>
<uni-easyinput
@blur="handleInput"
@change="handleSearch"
:focus="true"
ref="inputRef"
v-model="queryParmas.value"
v-else
/>
</view>
<!-- srcoll -->
<scroll-view scroll-y="true" class="flex-1 overflow-auto">
<radio-group @change="radioChange">
<label v-for="(item, index) in searchlist" :key="index">
<view
class="item flex items-center justify-between"
:class="{
active: checkoutUserid === item.id
}"
>
<view class="">
<view class="info">
<text>姓名:</text>
<text>{{ item.name }}</text>
</view>
<view class="info">
<text>角色:</text>
<text>{{ item.roleName }}</text>
</view>
<view class="info">
<text>手机号码:</text>
<text>{{ item.phone }}</text>
</view>
</view>
<radio color="#4d5dfa" :value="item.id" />
</view>
</label>
</radio-group>
</scroll-view>
<!-- submit -->
<view class="action_btn" @tap="handleSelecthouse">
<text>确定派单</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import navBar from '@/components/navbar/navbar.vue'
const Searching = ref(true)
const queryParmas = ref({
value: ''
})
/** 点击时切换到input,并聚焦 */
function handleClick() {
Searching.value = false
}
/** 判断 失去焦点时 切换回 view */
function handleInput() {
if (queryParmas.value.value.trim()) {
Searching.value = true
}
}
function handleSearch() {
console.log('search')
}
// -----------------------------------------
/* 选择列表 */
const searchlist = ref([
{
name: '张三',
roleName: '维修人员',
phone: '19578012123',
id: 1
},
{
name: '张三',
roleName: '维修人员',
phone: '19578012123',
id: 2
},
{
name: '张三',
roleName: '维修人员',
phone: '19578012123',
id: 3
},
{
name: '张三',
roleName: '维修人员',
phone: '19578012123',
id: 4
},
{
name: '张三',
roleName: '维修人员',
phone: '19578012123',
id: 5
},
{
name: '张三',
roleName: '维修人员',
phone: '19578012123',
id: 6
},
{
name: '张三',
roleName: '维修人员',
phone: '19578012123',
id: 7
},
{
name: '张三',
roleName: '维修人员',
phone: '19578012123',
id: 8
}
])
const checkoutUserid = ref(null)
function radioChange(val) {
checkoutUserid.value = Number(val.detail.value)
}
let eventChannel = null
// 必须在 onMounted 里获取
onMounted(() => {
const instance = getCurrentInstance().proxy
if (instance && instance.getOpenerEventChannel) {
eventChannel = instance.getOpenerEventChannel()
}
})
function handleSelecthouse() {
eventChannel.emit('backData', {
userid: checkoutUserid.value,
username: '张三'
})
// 3. 返回上一页
uni.navigateBack()
}
</script>
<style scoped lang="scss">
.shareUser {
background-color: #f9f9f9;
.shareBody {
padding: 0 40rpx;
.search_box {
height: 80rpx;
margin-bottom: 20rpx;
.search_view {
height: 80rpx;
line-height: 80rpx;
background: #f3f3f3;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: rgba(0, 0, 0, 0.26);
line-height: 48rpx;
text-align: center;
}
}
// 选择人数
.checkoutedUser_box {
margin-top: 20rpx;
margin-bottom: 40rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 36rpx;
height: 36rpx;
}
// 角色列表
.item {
height: 170rpx;
background: #ffffff;
border: 1rpx solid transparent;
margin-bottom: 20rpx;
padding-left: 26rpx;
padding-right: 32rpx;
.info {
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 36rpx;
height: 36rpx;
margin-bottom: 10rpx;
}
&:deep(radio) {
transform: scale(0.68);
}
&.active {
background: #f5faff;
border: 1rpx solid #4d5dfa;
}
}
// 确定派单
.action_btn {
width: 670rpx;
height: 80rpx;
font-weight: 400;
font-size: 28rpx;
color: #ffffff;
line-height: 80rpx;
text-align: center;
margin-top: 20rpx;
background: #4d5dfa;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
}
</style>