382 lines
8.4 KiB
Vue
382 lines
8.4 KiB
Vue
<template>
|
||
<view class="contentStyle" style="">
|
||
<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">
|
||
<view class="page-container">
|
||
|
||
<!-- 2. 投诉卡片主体 -->
|
||
<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-tag"
|
||
:class="item.status=='pending'?'pending':item.status=='processing'?'processing':item.status=='completed'?'completed':''">{{item.status=='pending'?'待处理':item.status=='processing'?'处理中':item.status=='completed'?'已完成':''}}</text>
|
||
</view>
|
||
|
||
<!-- 卡片内容：描述 + 横向图片 -->
|
||
<view class="card-body">
|
||
<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-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: {
|
||
|
||
},
|
||
|
||
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: '/pages/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: '/pages/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: () => {}
|
||
});
|
||
},
|
||
|
||
},
|
||
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background: #f2f1f6;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.contentStyle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
/* 关键：占满屏幕高度 */
|
||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||
}
|
||
|
||
.page {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0px 40rpx;
|
||
box-sizing: border-box;
|
||
/* background-color: #fff; */
|
||
}
|
||
|
||
.page-container {
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
/* --- 分段控制器样式 --- */
|
||
.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;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #222222;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.card-tag {
|
||
font-size: 24rpx;
|
||
padding: 2rpx 16rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.pending {
|
||
background: #E34D59;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.processing {
|
||
background: #09C2BD;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.completed {
|
||
background: #2F77FD;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 卡片内容区 */
|
||
.card-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
}
|
||
|
||
/* 描述文本 */
|
||
.card-desc {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 40rpx;
|
||
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;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-time {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.card-detail {
|
||
font-size: 26rpx;
|
||
color: #2F77FD;
|
||
}
|
||
|
||
/* 底部按钮 */
|
||
.bottom-btn-wrap {
|
||
padding: 20rpx 30rpx 40rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
/* background-color: #fff; */
|
||
}
|
||
|
||
.next-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
background-color: #1677ff;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
border-radius: 12rpx;
|
||
border: none;
|
||
}
|
||
|
||
.status-bar {
|
||
width: 100vw;
|
||
height: 46px;
|
||
}
|
||
</style> |