xunjian_app/task_pages/taskarrment/feebacklist/feebacklist.vue

<template>
	<view class="u-flex f-d-c">
		<scroll-view @scrolltolower="init(id)" :scroll-y="true" class="cs-heig">
			<view class="comment" v-for="(res, index) in list" :key="res.id">
				<view class="left">
					<u-avatar width="90" height="90" mode="circle" />
				</view>
				<view class="right">
					<view class="top">
						<view class="name">{{ res.userId }}</view>
					</view>
					<view class="content">{{ res.content }}</view>
					<view class="u-flex" v-if="res.images">
						<view class="u-m-r-10" :key="key" v-for="(index, key) in res.imagear">
							<u-image @click="previewImage(index)" :src="index" width="150" height="150"></u-image>
						</view>
					</view>
					<view class="bottom">
						{{ res.createTime }}
					</view>
				</view>
			</view>
		</scroll-view>
		<navigator hover-class="none" :url="`../taskfeeback/taskfeeback?id=${id}&title=${title}`" class="feebtn">我要反馈</navigator>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { taskfeedback } from '@/api/index.js'
import dayjs from 'dayjs'
export default {
	data() {
		return {
			commentList: [],
			title: '',
			id: '',
			list: [],
			totalCount: -1,
			curPage: 1,
			totalPage: 0 //总页数
		}
	},
	onLoad(option) {
		this.title = option.title
		this.id = option.id
	},
	onShow() {
		this.totalCount = -1
		this.curPage = -1
		this.$nextTick(() => {
			this.init(this.id)
		})
	},
	methods: {
		// 点击图片事件
		previewImage(index) {
			console.log(index)
			uni.previewImage({
				current: index, //预览图片的下标
				urls: [index] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		// createimg(arr) {
		// 	arr.map((index) => {
		// 		index.imagear = index.images.split(",")
		// 		return index
		// 	})
		// },

		// 处理图片数据格式
		spliteimage(datastring) {
			let ar = datastring.split(',')
			return ar
		},
		// 获取页面数据
		async init(id) {
			if (this.totalCount == -1) {
				let data = await taskfeedback({
					taskId: id
				})
				let { list, total } = data.data
				list = list.map((index) => {
					index.createTime = dayjs(index.createTime).format('YYYY-MM-DD HH:mm:ss')
					index.imagear = this.spliteimage(index.images)
					return index
				})
				this.list = list //列表
			} else {
				if (this.curPage <= this.totalPage) {
					let data = await taskfeedback({
						taskId: id
						// page: this.curPage
					})
					let list = JSON.parse(JSON.stringify(this.list))
					list = list.map((index) => {
						index.imagear = this.spliteimage(index.images)
						return index
					})
					this.list = [...list, ...data.data.list]
					this.curPage = this.curPage + 1
				} else {
					this.$refs.uToast.show({
						title: '没有更多了'
					})
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.comment {
	display: flex;
	padding: 30rpx;

	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}

	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			.name {
				color: #5677fc;
			}

			.like {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;

				.num {
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}

			.highlight {
				color: #5677fc;

				.num {
					color: #5677fc;
				}
			}
		}

		.content {
			margin-bottom: 10rpx;
		}

		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;

			.item {
				padding: 20rpx;
				border-bottom: solid 2rpx $u-border-color;

				.username {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.all-reply {
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;

				.more {
					margin-left: 6rpx;
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;

			.reply {
				color: #5677fc;
				margin-left: 10rpx;
			}
		}
	}
}

.feebtn {
	width: 690rpx;
	height: 90rpx;
	background: #4a8bff;
	border-radius: 4rpx;
	font-size: 28rpx;
	text-align: center;
	line-height: 90rpx;
	font-family: Microsoft YaHei-3970(82674968);
	font-weight: bold;
	color: #ffffff;
	margin-top: 20rpx;
}

.cs-heig {
	height: calc(100vh - 140rpx);
}
</style>