zh_order_food_xcx/pages-my/comment.vue

<template>
	<view class="flex-common-css bgc-f">
		<Nav :title="navTitle" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="content-box box-border-box">
				<view class="item-box display-flex mb-26" v-for="(item,index) in listData">
					<image class="item-img mr-16 flex-shrink0" :src="item.head_img" mode=""></image>
					<view class="item-right flex-justify-space">
						<view class="common-view-css mr-46">
							<view class="mb-4 fc-3 fs-28">
								{{item.nickname}}
							</view>
							<view class="fs-24 fc-9 mb-16">
								{{item.created_date}}
							</view>
							<view class="fs-30 fc-3">
								{{item.msg}}
							</view>
						</view>
						<image class="right-img" :src="item.image[0]" mode=""></image>
					</view>
				</view>
			</view>
			<view v-if="listData.length === 0" class="scroll-view-css">
				<EnBlank :customSrc='true'>
					<template v-slot:blankImg>
						<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
					</template>
				</EnBlank>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		messageList
	} from "@/api/message.js"
	export default {
		components: {EnBlank},
		data() {
			return {
				navTitle: '',
				listData: [],
				page: 1,
				total:0
			};
		},
		onLoad(data) {
			if (data) {
				this.messageList(data.type)
				if (data.type == 1) {
					this.navTitle = '系统消息'
				} else if (data.type == 2) {
					this.navTitle = '评论'
				} else {
					this.navTitle = '点赞'
				}
			}
		},
		mounted() {},
		methods: {
			scrolltolower() {
				if(this.listData.length < this.total){
					this.page += 1;
					this.messageList();
				}
			},
			messageList(type) {
				messageList({
					type: type,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.listData.push(...res.data.items)
							this.total = res.data.total;
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content-box {
		padding: 24rpx 24rpx 0;
	}

	.item-img {
		width: 80rpx;
		height: 80rpx;
	}

	.item-right {
		width: 100%;
		padding: 0 0 24rpx 0;
		border-bottom: 2rpx solid #F9F9F9;
	}

	.right-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
	}
</style>