yifengyide-h5/pages/index/list.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>