zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接问卷调查、投诉建议接口

Browse Source
This commit is contained in:
zhouyanli
2026-05-11 17:29:57 +08:00
parent 10505e8000
commit 78c69cdb10
20 changed files with 1143 additions and 1531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

313
property-uniapp-project/pageSubPack/service-list/complaintsSuggestionsIndex.vue
View File

@@ -1,228 +1,151 @@
<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>
<!-- 1. 顶部分段控制器 -->
<!-- 顶部分段控制器 -->
<view style="width: 60vw;">
<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onTabClick" style-type="text"
active-color="#007AFF" inactive-color="#999" class="seg-control"></uni-segmented-control>
</view>
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
<!-- 列表区域 -->
<scroll-view class="page" scroll-y>
<view class="page-container">
<view v-if="dataList.length === 0" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
<text class="empty-text">
{{ '暂无数据'}}
</text>
<text class="empty-text">暂无数据</text>
</view>
<!-- 2. 投诉卡片主体 -->
<view class="card-wrapper" v-for="item,index in dataList" :key="index">
<!-- 卡片头部：标题 + 标签 -->
<!-- 投诉卡片 -->
<view class="card-wrapper" v-for="(item, index) in dataList" :key="index">
<view class="card-header">
<text class="card-title">{{item.title}}</text>
<text class="card-title">{{ item.title }}</text>
<text class="card-tag"
:class="item.status=='pending'?'pending':item.status=='processing'?'processing':item.status=='completed'?'completed':''">{{item.status=='pending'?'待处理':item.status=='processing'?'处理中':item.status=='completed'?'已完成':''}}</text>
:class="item.status === 'pending' ? 'pending' : item.status === 'processing' ? 'processing' : 'completed'">
{{ item.status === 'pending' ? '待处理' : item.status === 'processing' ? '处理中' : '已完成' }}
</text>
</view>
<!-- 卡片内容：描述 + 横向图片 -->
<view class="card-body">
<text class="card-desc">
{{item.desc}}
</text>
<text class="card-desc">{{ item.desc }}</text>
<!-- 横向图片滚动区 -->
<view class="img-scroll-container">
<view v-for="(img, imgIndex) in item.imgList" :key="imgIndex" class="img-item">
<image :src="img" mode="widthFix" class="card-img"></image>
</view>
</view>
<!-- 时间 & 详情 -->
<view class="card-footer">
<text class="card-time">{{item.time}}</text>
<text class="card-time">{{ item.time }}</text>
<text class="card-detail" @click="turnToDetail(item)">投诉详情</text>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 底部按钮 -->
<view class="bottom-btn-wrap">
<button class="next-btn" @click="addComplaintsSuggestions">投诉建议</button>
</view>
</view>
</template>
<script>
export default {
onReady: function(e) {},
components: {
<script setup>
import { ref, onMounted } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {getComplainList} from '../api/apiSub.js'
},
// 分段器
const tabs = ref(["待处理", "处理中", "已完成"])
const currentTab = ref(0)
const dataList = ref([])
computed: {
},
created() {
},
onShow() {
},
mounted() {
this.getDataList()
},
onReady() {
this.$nextTick(() => {
})
},
data() {
return {
/* 设定状态栏默认高度 */
statusBarHeight: 20,
// 分段器数据
tabs: ["待处理", "处理中", "已完成"],
currentTab: 0,
dataList: [],
pendingList: [{
id: 1,
title: '社区服务',
status: 'pending',
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
time: '2026-08-01 10:05:46',
imgList: [
"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"
]
},
{
id: 1,
title: '社区服务',
status: 'pending',
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
time: '2026-08-01 10:05:46',
imgList: [
"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"
]
},
{
id: 1,
title: '社区服务',
status: 'pending',
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
time: '2026-08-01 10:05:46',
imgList: [
"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"
]
},
{
id: 1,
title: '社区服务',
status: 'pending',
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
time: '2026-08-01 10:05:46',
imgList: [
"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"
]
}
],
processingList: [{
id: 2,
title: '社区服务',
status: 'processing',
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
time: '2026-08-01 10:05:46',
imgList: []
}],
completedList: [{
id: 3,
title: '社区服务',
status: 'completed',
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
time: '2026-08-01 10:05:46',
imgList: [
"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: {
turnToDetail(item) {
uni.redirectTo({
url: '/pageSubPack/service-list/complaintsDetail?id=' + item.id + '&status=' + item.status,
success: res => {},
fail: () => {},
complete: () => {}
});
},
getDataList() {
if (this.currentTab == 0) {
this.dataList = this.pendingList
} else if (this.currentTab == 1) {
this.dataList = this.processingList
} else if (this.currentTab == 2) {
this.dataList = this.completedList
}
},
addComplaintsSuggestions() {
uni.redirectTo({
url: '/pageSubPack/service-list/addComplaints',
success: res => {},
fail: () => {},
complete: () => {}
});
},
onTabClick(e) {
this.currentTab = e.currentIndex;
this.getDataList()
},
goBack() {
uni.switchTab({
url: '/pages/serviceIndex/serviceIndex',
success: res => {},
fail: () => {},
complete: () => {}
});
},
},
// 模拟数据
const pendingList = ref([])
const processingList = ref([])
const completedList = ref([])
// 状态映射
const statusMap = {
"0":'pending',
'1':'processing',
'2':'completed'
}
// 接口数据映射为模板所需格式
const mapItem = (item) => {
// 图片：单 URL 转数组
let imgList = []
if (item.problemImageUrl) {
imgList = [item.problemImageUrl]
}
return {
id: item.id,
title: item.typeName,
status: statusMap[item.status] || 'pending',
desc: item.problemDes || '',
time: item.createTime || '',
imgList
}
}
// 切换tab
const onTabClick = (e) => {
currentTab.value = e.currentIndex
getComplainListData()
}
// 获取列表数据
const getComplainListData = async () =>{
try{
let params ={
status:currentTab.value,
villageId:uni.getStorageSync('currentVillageId')
}
const res = await getComplainList(params)
if(res.code === 200){
dataList.value = res.data.map(mapItem)
}else{
dataList.value = []
uni.showToast({title:res.msg || '获取失败',icon:'error'})
}
}catch(err){
// console.log('dess',err)
uni.showToast({title:err.msg || '网络异常',icon:'error'})
}
}
onLoad(() =>{
getComplainListData()
})
// 跳转到详情
const turnToDetail = (item) => {
uni.navigateTo({
url: `/pageSubPack/service-list/complaintsDetail?id=${item.id}&status=${item.status}`
})
}
// 新增投诉
const addComplaintsSuggestions = () => {
uni.navigateTo({
url: '/pageSubPack/service-list/addComplaints'
})
}
// 返回
const goBack = () => {
uni.switchTab({
url: '/pages/serviceIndex/serviceIndex'
})
}
// 页面挂载后加载数据
// onMounted(() => {
// getDataList()
// })
</script>
<style lang="scss">
page {
background: #f2f1f6;
@@ -234,7 +157,6 @@
display: flex;
flex-direction: column;
height: 100vh;
/* 关键：占满屏幕高度 */
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
}
@@ -243,14 +165,12 @@
overflow-y: auto;
padding: 0px 40rpx;
box-sizing: border-box;
/* background-color: #fff; */
}
.page-container {
padding-top: 20rpx;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
@@ -267,27 +187,18 @@
margin-bottom: 10rpx;
}
/* --- 分段控制器样式 --- */
.seg-control {
margin-bottom: 20rpx;
}
.cardScroll {
padding: 0rpx 0rpx 0px 0rpx;
overflow-y: scroll;
}
/* --- 卡片主体样式 --- */
.card-wrapper {
background: #ffffff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
margin-bottom: 20rpx;
}
/* 卡片头部：标题 & 标签 */
.card-header {
display: flex;
align-items: center;
@@ -322,14 +233,11 @@
color: #FFFFFF;
}
/* 卡片内容区 */
.card-body {
display: flex;
flex-direction: column;
}
/* 描述文本 */
.card-desc {
font-size: 28rpx;
color: #666666;
@@ -337,31 +245,24 @@
margin-bottom: 20rpx;
}
/* 图片容器 */
.img-scroll-container {
display: flex;
flex-wrap: wrap;
/* 自动换行 */
gap: 20rpx;
/* 图片之间的间距（可改） */
margin: 10rpx 0px 20rpx 0px;
}
/* 单个图片项 */
.img-item {
width: calc(33.333% - 14rpx);
height: 52px;
}
/* 图片样式 */
.card-img {
width: 100%;
height: 52px;
object-fit: cover;
}
/* 底部栏：时间 & 详情 */
.card-footer {
display: flex;
justify-content: space-between;
@@ -378,12 +279,10 @@
color: #2F77FD;
}
/* 底部按钮 */
.bottom-btn-wrap {
padding: 20rpx 30rpx 40rpx;
display: flex;
gap: 20rpx;
/* background-color: #fff; */
}
.next-btn {
@@ -392,7 +291,7 @@
line-height: 96rpx;
background-color: #1677ff;
color: #fff;
font-size: 36rpx;
font-size: 28rpx;
border-radius: 12rpx;
border: none;
}