sports-miniapp/src/pages/mine/feedbackRecord/index.vue

<template>
	<zzx-navbar :scrollable="false" :back="true" bgColor="linear-gradient( 180deg, #E8FF9B 0%, #F6F6F6 100%)"
		title="意见反馈"></zzx-navbar>
	<view style="height:170rpx;"></view>
	<view class="content">
		<view class="f-record-card" v-for="(item, index) in recordList" :key="item.id">
			<view class="f-user-info">
				<view class="user-info">
					<view class="user-header">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="user-name">{{ item.userName }}</view>
				</view>
				<view class="user-time">{{ item.createTime }}</view>
			</view>
			<view class="user-tags">{{ item.feedbackName }}</view>
			<view class="user-des">
				{{ item.feedbackDescribed }}
			</view>
			<view class="user-picture">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="(img, index) in item.feedbackImgList" :key="index">
						<image @click="_previewImage(item.feedbackImgList, img)" :src="img" mode=""></image>
					</view>
				</scroll-view>
			</view>
			<view class="f-merchants-reply" v-if="item.replyContent">
				<view class="merchants">商家回复</view>
				<view class="reply">
					<text :class="[switchOpen ? '' : 'textHidden']">{{ item.replyContent }}</text>
					<text class="open-colse" @click="switchOpen = !switchOpen">{{ switchOpen ? '收起' : '展开' }}</text>
				</view>
			</view>
		</view>
		<zs-empty v-if="recordList?.length === 0" />
	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
import zsEmpty from '@/components/zs-empty/index.vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { _previewImage } from '@/utils/util'
import { http } from '@/utils/http'
const switchOpen = ref(false);
const recordList = ref();
const pageNo = ref(1)
onReachBottom(() => {
	pageNo.value++
	get_recordList()
})
onMounted(() => {
	get_recordList()
})
const get_recordList = () => {
	http.get('/my/feedback/findByPage', { data: { pageNo: pageNo.value, pageSize: 10 }, loading: true }).then((res) => {
		if (pageNo.value == 1) {
			recordList.value = res.result.records
		} else {
			recordList.value = recordList.value.concat(res.result.records)
		}
	})
}
</script>

<style lang="less">
.f-record-card {
	background: #FFFFFF;
	border-radius: 32rpx;
	padding: 20rpx;
	margin-top: 20rpx;

	.f-user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user-info {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.user-header {
				&>image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}

			.user-name {
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}
		}

		.user-time {
			font-size: 24rpx;
			color: #AAAAAA;
		}
	}

	.user-tags {
		background: #F5F5F5;
		border-radius: 8rpx;
		width: 152rpx;
		height: 48rpx;
		font-size: 28rpx;
		color: #AAAAAA;
		text-align: center;
		line-height: 48rpx;
		margin-top: 20rpx;
	}

	.user-des {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #222222;
	}

	.user-picture {
		margin-top: 20rpx;

		.scroll-view_H {
			.scroll-view-item_H {
				&>image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.f-merchants-reply {
		display: flex;
		gap: 12rpx;
		background: #F6F6F6;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		transition: all .3s;

		.merchants {
			width: 100rpx;
			height: 40rpx;
			font-size: 24rpx;
			color: #AAAAAA;
		}

		.reply {
			width: 520rpx;
			font-size: 24rpx;
			color: #222222;
			display: flex;

			.open-colse {
				color: #AAAAAA;
				width: 120rpx;
			}
		}
	}
}
</style>