daoshiyuyue-teacher/pages/mine/liuyan.vue

<template>
	<view class="liuyan_content">
		<view class="empty" v-if="liuyan.length==0">
			<view class="enptyStatus">
				<image src="../../static/empty.png" mode=""></image>
				<view class="words">
					暂无内容
				</view>
			</view>
		</view>
		<view class="item_wrap">
			<view class="item" v-for="(item,index) in liuyan" :key="index">
				<image :src="item.user?item.user.headimg:''" mode=""></image>
				<view class="info">
					<view class="info_top">
						<view class="name">
							{{ item.user ? item.user.name : '--' }}
						</view>
						<view class="time">
							{{ item.created_at.split(' ')[0] }}
						</view>
					</view>
					<view class="info_content">
						{{item.body}}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				liuyan:[],
				tea_id:'',
				page: 1,
				last :false
			}
		},
		async onLoad(options) {
			this.tea_id = options.tea_id
			this.get_liuyan()
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			console.log(this.page)
			this.get_liuyan()
		},
		methods: {
			// 留言列表
			get_liuyan() {
				let params = {
					teacher_id:this.tea_id,
					page:this.page,
					type:1
				}
				this.$u.get('/mentor/leave-message', params).then(res => {
					console.log(res, 'liuyan')
					// this.liuyan = res.data.list
					let data = res.data.list
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.liuyan = this.liuyan.concat(data)
					}
					// this.page.total = res.data.meta.pagination.total
	
				})
			},
		}
	}
</script>

<style lang="scss">
	.liuyan_content{
		padding: 16px;
		.enptyStatus{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					padding: 30px 10px;
					image{
						width: 120px;
						height: 150px;
						margin-top: 100px;
					}
					.words{
						color: #ffae21;
						font-size: 18px;
						padding-top: 18px;
					}
				}
		.item_wrap{
			.item{
				display: flex;
				padding: 8px 0 0;
				border-bottom: 1px solid #f6f8f9;
				image{
					width: 32px;
					height: 32px;
					border-radius: 50%;
					margin-right: 10px;
					flex-shrink: 0;
				}
				.info{
					padding-bottom: 8px;
					width: calc(100% - 42px);
					.info_top{
						width: 100%;
						display: flex;
						justify-content: space-between;
					}
					.name{
						font-size: 14px;
						color: #333333;
						margin-bottom: 4px;
						    line-height: 20px;
					}
					.info_content{
						    line-height: 22px;
						    font-size: 14px;
						    color: #666;
						    margin-bottom: 5px;
							text-align: justify;
							word-break:break-all
					}
					.time{
						    color: #999;
						    font-size: 13px;
					}
					.huifu_wrap{
						background-color: #f4f4f4;
						padding: 10px;
						margin-top: 10px;
						.huifu{
							margin-bottom: 10px;
							text{
								color: #333333;
							}
							.huifu_name{
								color: #909399;
							}
						}
					}
				}
			}
		}
	}
</style>