xk-doctor-wx/subPackages/sub_workbench/workbench_evaluation.vue

<template>
	<view class="container">
		<!-- 按钮 -->
		<view class="head">
			<view class="head_left">
				<text :class="{
            active:!type
          }" @click="
            type = null;
            init();
          ">全部({{ data.all_count  }})</text>
				<text :class="{
            active:type==='high'
          }" @click="
            type = 'high';
            init();
          ">高分({{ data.high_count }})</text>
				<text :class="{
            active:type==='low'
          }" @click="
            type = 'low';
            init();
          ">低分({{ data.low_count }})</text>
			</view>

			<view class="head_right">
				<view class="score">
					<u-icon name="star-fill" color="#FB8C00" size="36"></u-icon>
					<text>{{ data.score_avg }}</text>
				</view>
				<text>患者评分</text>
			</view>
		</view>

		<!-- 列表 -->
		<view class="items" v-for="item in list" :key="item.id">
			<!-- <image src="../../static/logo.png" mode=""></image> -->
			<view class="items_right">
				<view class="item_name">
					<view class="title">
						<text>{{ item.nickname || "匿名" }}</text>
						<u-rate :count="count" v-model="item.score" size="28" active-color="#FB8C00"
							inactive-color="#b2b2b2" :gutter="item.score"></u-rate>
					</view>
					<view class="time"> 2023-1-13 </view>
				</view>
				<view class="info">
					非常非常耐心细致，是我最近遇到的最棒的医生，给了治疗建议，谢谢。
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :load-text="loadText" v-if="!loading && list.length > 0" />
		<view class="flex-row flex-jus-center" v-if="!loading && list.length == 0">
			<d-empty text="暂无信息" mode="search"></d-empty>
		</view>
		<d-loading-page :loading="loading"></d-loading-page>
	</view>
</template>

<script>
	import {
		doctorWorkComments,
		commentMain
	} from "@/api/all.js";
	export default {
		data() {
			return {
				count: 5,
				type: null,
				data: {
					high_count: 0,
					low_count: 0,
					score_avg: 0,
				},
				page: 1,
				list: [],
				loading: true,
				loading2: false,
				status: "loading",
				loadText: {
					loadmore: "轻轻上拉",
					loading: "努力加载中",
					nomore: "实在没有了",
				},
				totalPage: 1,
			};
		},
		onShow() {
			this.getList();
			this.commentMain()

		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				this.$toast("数据已全部加载");
				return;
			}
			this.page++;
			this.getList();
		},
		methods: {
			commentMain() {
				commentMain({store_id: uni.getStorageSync('store_id') || '11001'})
					.then((res) => {
						if (res.errcode == 0) {
							this.data = res.data
						}
					})
			},
			init() {
				this.list = [];
				this.page = 1;
				(this.loading = true), this.getList(true);
			},

			getList(is_stop = false) {
				if (this.loading2) {
					return;
				}
				this.loading2 = true;
				doctorWorkComments({
						page: this.page,
						type: this.type,
						store_id: uni.getStorageSync('store_id') || '11001'
					})
					.then((res) => {
						if (res.errcode == 0) {
							this.list = [...res.data.list, ...this.list];
							this.totalPage = res.data.pagination.totalPage;
							if (this.page >= this.totalPage) {
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
							this.$nextTick(() => {
								this.loading = false;
								is_stop && uni.stopPullDownRefresh();
							});
						} else {
							this.$toast(res.msg);
							is_stop && uni.stopPullDownRefresh();
							this.loading = false;
							if (this.page >= this.totalPage) {
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
						}
					})
					.finally(() => {
						this.loading2 = false;
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		.head {
			width: 750rpx;
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 32rpx;
			margin-bottom: 10rpx;

			.head_left {
				.active {
					padding: 10rpx 20rpx;
					background: #6ACDBB;
					border-radius: 28rpx;
					height: 44rpx;
					line-height: 44rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}

				text {
					padding: 10rpx 20rpx;
					border-radius: 28rpx;
					background: #f1f5f9;
					height: 44rpx;
					line-height: 44rpx;
					font-size: 24rpx;
					color: #475569;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					margin: 0 20rpx 0 0;
				}
			}

			.head_right {
				.score {
					text {
						height: 50rpx;
						font-size: 36rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #fb8c00;
						line-height: 42rpx;
					}
				}

				text {
					height: 28rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #94a3b8;
				}
			}
		}

		.items {
			width: 706rpx;
			display: flex;
			margin: 10rpx auto;
			background-color: #fff;
			justify-content: space-between;
			padding: 10rpx 10rpx;

			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}

			.items_right {
				.item_name {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #475569;
					}

					.time {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #94a3b8;
					}
				}

				.info {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
					margin: 16rpx 0 0 0;
				}
			}
		}
	}
</style>