186 lines
3.7 KiB
Vue
186 lines
3.7 KiB
Vue
<template>
|
||
<view class="complaint-list">
|
||
<uni-card v-for="(item, index) in list" :key="index" :title="'投诉建议 #' + item.id" class="complaint-card">
|
||
<view class="card-content">
|
||
<view class="info-row">
|
||
<text class="label">内容：</text>
|
||
<text class="value">{{ item.politics_content }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">时间：</text>
|
||
<text class="value">{{ item.createtime }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">科室：</text>
|
||
<text class="value">{{ item.user_group_name }}</text>
|
||
</view>
|
||
<view class="info-row" v-if="item.politics_images">
|
||
<text class="label">图片：</text>
|
||
<view class="image-container">
|
||
<image :src="item.politics_images" mode="aspectFill" class="complaint-image" @click="previewImage(item.images, imgIndex)"></image>
|
||
</view>
|
||
</view>
|
||
<view class="reply-section" v-if="item.acceptance_status==2">
|
||
<view class="reply-header">回复信息</view>
|
||
<view class="info-row">
|
||
<text class="label">回复内容：</text>
|
||
<text class="value">{{ item.acceptance_content }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">回复时间：</text>
|
||
<text class="value">{{ item.acceptance_time }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="no-reply" v-else>
|
||
<text>暂无回复</text>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
PoliticsList,
|
||
} from '@/util/api.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
page: 1,
|
||
userInfo:{},
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 获取用户信息
|
||
const userInfo = uni.getStorageSync('userInfo');
|
||
if (userInfo) {
|
||
this.userInfo = userInfo;
|
||
} else {
|
||
uni.reLaunch({
|
||
url: "/pages/index/index"
|
||
})
|
||
}
|
||
this.getList();
|
||
},
|
||
onReachBottom() {
|
||
this.page++;
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
getList() {
|
||
PoliticsList({ page: this.page, size: 10, token: this.userInfo.token })
|
||
.then(res => {
|
||
// 后续接入实际接口数据
|
||
console.log(res);
|
||
this.list.push( ...res.data.list);
|
||
// 如果接口返回的数据结构与需要的不一致，可以在这里进行转换
|
||
// this.list = res.data.list.map(item => ({
|
||
// id: item.id,
|
||
// content: item.content,
|
||
// createTime: item.createTime,
|
||
// department: item.department,
|
||
// images: item.images || [],
|
||
// reply: item.reply,
|
||
// replyTime: item.replyTime,
|
||
// status: item.reply ? '已回复' : '待回复'
|
||
// }));
|
||
})
|
||
.catch(error => {
|
||
uni.showToast({
|
||
title: error,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
},
|
||
previewImage(images, current) {
|
||
uni.previewImage({
|
||
urls: images,
|
||
current: images[current]
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.complaint-list {
|
||
padding-bottom: 50rpx;
|
||
}
|
||
|
||
.complaint-card {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.card-content {
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.label {
|
||
color: #666;
|
||
width: 180rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.value {
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.image-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.complaint-image {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.reply-section {
|
||
margin-top: 20rpx;
|
||
border-top: 1px solid #eee;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.reply-header {
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.no-reply {
|
||
margin-top: 20rpx;
|
||
color: #999;
|
||
font-style: italic;
|
||
}
|
||
|
||
.status {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.status-ongoing {
|
||
background-color: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.status-pending {
|
||
background-color: #f5f5f5;
|
||
color: #999;
|
||
}
|
||
|
||
.status-completed {
|
||
background-color: #f6ffed;
|
||
color: #52c41a;
|
||
}
|
||
</style> |