mz/pages/user/reply.vue

<template>
	<view class="container">
		<swiper class="swiper-box">
			<swiper-item>
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadDate">
					<!-- 评论列表 -->
					<view v-for="(item, index) in list" :key="index" class="eva-box">
						<view class="flex_item">
							<image class="portrait" :src="item.avatar" mode="aspectFill"></image>
							<view class="right">
								<view class="flex">
									<view class="name">{{ item.name }}</view>
									<view class="time">{{ item.comment_time }}</view>
								</view>
								<view class="Rate"><uniRate activeColor="#F10F3C" disabled="false" text="1" size="10" margin="0"  :value="item.score"></uniRate></view>
							</view>
						</view>
						<view class="content-box">
							<text class="con">{{ item.comment }}</text>
							<view class="con_box">
								<view class="con_image" v-for="ls in item.pics"><image  @click.stop="imgInfo(ls)" :src="ls"></image></view>
							</view>
						</view>
					</view>
					<uni-load-more :status="loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { allComment } from '@/api/doctor.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import { getTime } from '@/utils/rocessor.js';
export default {
	components: {
		uniRate
	},
	watch: {},
	data() {
		return {
			list:[], //评论列表
			uid:'',
			limit: 10, //每次加载数据条数
			page: 1, //当前页数
			loadingType: 'more', //加载更多状态
			loading:0,//判断是否为点击搜索按钮跳转加载
		};
	},
	//下拉刷新
	onPullDownRefresh() {
		this.page = 1
		this.getDoctorList('refresh');
	},
	onLoad(option) {
		this.uid = option.id;
		this.loadDate();
	},
	methods: {
		async loadDate(type) {
			let obj = this;
			//这里是将订单挂载到tab列表下
			if (type !== 'refresh') {
				//没有更多数据直接跳出方法
				if (obj.loadingType === 'nomore') {
					return;
				} else {
					// 设置当前为数据载入中
					obj.loadingType = 'loading';
				}
			} else {
				//当重新加载数据时更新状态为可继续添加数据
				obj.loadingType = 'more';
			}
			allComment({
					page: obj.page,
					limit: obj.limit,
					uid:obj.uid
				})
				.then(({ data }) => {
					if (type === 'refresh') {
						obj.list = [];
					}
					let arr = data.map(e => {
						e.comment_time = getTime(e.comment_time);
						return e;
					});
					obj.list = obj.list.concat(arr);
					//判断是否还有下一页，有是more  没有是nomore
					if (obj.limit == arr.length) {
						obj.page++;
						obj.loadingType = 'more';
					} else {
						obj.loadingType = 'nomore';
					}
					// 判断是否为刷新数据
					if (type === 'refresh') {
						// 判断是否为点击搜索按钮跳转加载
						if (obj.loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}
				})
				.catch(e => {
					console.log(e)
					obj.loadingType = 'nomore';
					// obj.$api.msg(e.message);
					uni.hideLoading();
				});
		},
		//点击图片显示大图
		imgInfo(i) {
			let tempList = [];
			tempList.push(i);
			console.log(tempList);
			//显示图片
			uni.previewImage({
				current: i,
				loop: false,
				urls: tempList,
				indicator: 'default'
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background: #ffffff;
	height: 100%;
	.container {
		height: 100%;
		padding: 25rpx 25rpx;
		.swiper-box {
			height: 100%;
			.list-scroll-content {
				height: 100%;
			}
		}
	}
}
.reply_btn {
	padding: 15rpx 0rpx;
	position: fixed;
	// top: 50px;
	.btn {
		padding: 10rpx 25rpx;
		font-size: 24rpx;
		background: #f4f4f4;
		margin-right: 25rpx;
	}
	.current {
		background-color: #e93323 !important;
		color: #ffffff !important;
	}
}
.eva-box {
	padding: 30rpx 0;
	.portrait {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		border-radius: 100px;
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-base;
		color: $font-color-base;
		padding-left: 26rpx;
	}
	.Rate{
		padding-top: 25rpx;
	}
}
.content-box{
	padding: 20rpx 0;
	.con {
		font-size: $font-base;
		color: $font-color-dark;
	}
	.bot {
		display: flex;
		justify-content: space-between;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.con_image {
	width: 130rpx;
	height: 130rpx;
	display: inline-block;
	padding: 15rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>