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">
						<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) {
				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>