对接问卷调查、投诉建议接口
This commit is contained in:
zhouyanli
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="contentStyle">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="投诉详情" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<scroll-view class="page" scroll-y>
|
||||
<view class="page-container">
|
||||
<!-- 投诉状态 -->
|
||||
<view class="status-section">
|
||||
@@ -14,10 +13,12 @@
|
||||
<text class="title-line"></text>
|
||||
<text class="title-text">投诉状态</text>
|
||||
</view>
|
||||
<text class="status-value"
|
||||
:class="status=='pending'?'pending':status=='processing'?'processing':status=='completed'?'completed':''">{{status=='pending'?'待处理':status=='processing'?'处理中':status=='completed'?'已完成':''}}</text>
|
||||
<text class="status-value" :class="statusClass">{{ statusText }}</text>
|
||||
</view>
|
||||
<view class="completedDesc" v-if="status=='completed'">已完成处理，已联系工作人员粘贴标语提醒，并派人定时巡视。</view>
|
||||
<view class="completedDesc" v-if="detail.status === '2' && detail.handleContent">
|
||||
{{ detail.handleContent }}
|
||||
</view>
|
||||
|
||||
<!-- 投诉详情 -->
|
||||
<view class="detail-section">
|
||||
<view class="section-title">
|
||||
@@ -25,122 +26,106 @@
|
||||
<text class="title-text">投诉详情</text>
|
||||
</view>
|
||||
|
||||
<!-- 投诉类型 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">投诉类型</text>
|
||||
<text class="info-value">社区服务</text>
|
||||
<text class="info-value">{{ detail.typeName}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 问题描述 -->
|
||||
<view class="info-item desc-item">
|
||||
<text class="info-label">问题描述</text>
|
||||
<text class="info-value desc-value">
|
||||
投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容
|
||||
</text>
|
||||
<text class="info-value desc-value">{{ detail.problemDes }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 投诉人姓名 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">投诉人姓名</text>
|
||||
<text class="info-value">匿名</text>
|
||||
<text class="info-value">{{ detail.complaintName }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 手机号码 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">手机号码</text>
|
||||
<text class="info-value">无</text>
|
||||
<text class="info-value">{{ detail.phone}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 问题照片 -->
|
||||
<view class="photo-section">
|
||||
<view class="photo-section" v-if="photoList.length > 0">
|
||||
<text class="photo-label">问题照片</text>
|
||||
<view class="photo-list">
|
||||
<image v-for="(img, index) in photoList" :key="index" :src="img" mode="aspectFill"
|
||||
class="photo-item"></image>
|
||||
class="photo-item" @click="previewImage(index)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getComplainDetail } from '../api/apiSub.js'
|
||||
|
||||
},
|
||||
const id = ref('')
|
||||
|
||||
computed: {
|
||||
const detail = ref({})
|
||||
const photoList = ref([])
|
||||
|
||||
// 状态映射
|
||||
const statusMap = {
|
||||
'0': { text: '待处理', class: 'pending' },
|
||||
'1': { text: '处理中', class: 'processing' },
|
||||
'2': { text: '已完成', class: 'completed' }
|
||||
}
|
||||
|
||||
const statusText = computed(() => {
|
||||
return statusMap[detail.value.status]?.text || '待处理'
|
||||
})
|
||||
|
||||
const statusClass = computed(() => {
|
||||
return statusMap[detail.value.status]?.class || 'pending'
|
||||
})
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.status = option.status;
|
||||
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
status: '',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 问题照片列表，替换为你的实际图片路径
|
||||
photoList: [
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community1.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community2.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community3.png"
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/service-list/complaintsSuggestionsIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
onLoad((option) => {
|
||||
id.value = option.id || ''
|
||||
if (id.value) {
|
||||
detailData()
|
||||
}
|
||||
})
|
||||
// 获取详情
|
||||
const detailData = async () => {
|
||||
try {
|
||||
const res = await getComplainDetail({ id: id.value })
|
||||
if (res.code === 200 && res.data) {
|
||||
detail.value = res.data
|
||||
// 图片URL逗号分隔转数组
|
||||
if (res.data.problemImageUrl) {
|
||||
photoList.value = res.data.problemImageUrl.split(',').filter(url => url.trim())
|
||||
} else {
|
||||
photoList.value = []
|
||||
}
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({ title: typeof err === 'string' ? err.msg : '网络异常', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
const previewImage = (index) => {
|
||||
uni.previewImage({
|
||||
current: photoList.value[index],
|
||||
urls: photoList.value
|
||||
})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/service-list/complaintsSuggestionsIndex'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
@@ -152,8 +137,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
|
||||
}
|
||||
|
||||
.page {
|
||||
@@ -161,12 +144,10 @@
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page-container {}
|
||||
|
||||
/* 通用标题样式（带蓝色竖线） */
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -187,7 +168,6 @@
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 投诉状态区域 */
|
||||
.status-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -210,7 +190,6 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 详情信息项通用样式 */
|
||||
.info-item {
|
||||
display: flex;
|
||||
padding: 24rpx 0;
|
||||
@@ -233,7 +212,6 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 问题描述特殊样式（多行文本） */
|
||||
.desc-item {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@@ -243,7 +221,6 @@
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 问题照片区域 */
|
||||
.photo-section {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
@@ -258,9 +235,7 @@
|
||||
.photo-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 自动换行 */
|
||||
gap: 20rpx;
|
||||
/* 图片之间的间距（可改） */
|
||||
margin: 10rpx 0px 20rpx 0px;
|
||||
}
|
||||
|
||||
@@ -279,7 +254,6 @@
|
||||
}
|
||||
|
||||
.completed {
|
||||
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@@ -287,4 +261,4 @@
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user