zsw-farm-bxg/pages/shop/EvaluateList/index.vue

<template>
  <view class="evaluate-list" ref="container">
    <view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">评论列表</view>
				</block>
			</cu-custom>
			<view class="nav acea-row row-between-wrapper">
				<view class="" v-for="(item, navListIndex) in navList" :key="navListIndex" @click="changeType(navListIndex)" >
					<view class="item" :class="currentActive === navListIndex ? 'bg-color-red' : ''">
						<text>{{ item.evaluate }}{{ item.num || '' }}</text>
					</view>
				</view>
			</view>
    </view>
		
		<view style="height: 80rpx;"></view>
			
		<view class="list" :style="'margin-top:'+ CustomBar +'px;'">
			<view class="item" v-for="(item,index) in reply" :key="index">
				<view class="pic-text acea-row row-between">
					<view class="acea-row">
						<image v-if="item.avatar" class="image"  :src="item.avatar"/>
						<view class="noAvatar acea-row row-middle row-center" v-else>
							<image src="@/static/images/yanjie-logo.png" mode="widthFix"></image>
						</view>
						<view class="">
							<view class="acea-row row-middle">
								<view class="name one-t">{{ item.nickname || '微信用户' }}</view>
								<!-- <view class="vip"></view> -->
							</view>
							<view class="starBox acea-row">
								<image src="@/static/images/min-star-light.png" v-for="starItem in item.star" :key="starItem"></image>
								<image src="@/static/images/star-border-light.png" v-for="starItem in 5-item.star" :key="starItem"></image>
								<!-- <image src="@/static/images/min-star.png" v-for="starItem in 5-item.star" :key="starItem"></image> -->
							</view>
						</view>
					</view>
					<view class="time">{{item.createTime}}</view>
				</view>
				<view class="evaluate-infor">{{ item.comment }}</view>
				<view class="imgList acea-row" v-if="item.picturesArr.length >= 3 && item.picturesArr.length != 4">
					<view class="acea-row">
						<block v-for="(itemn, eq) in item.picturesArr" :key="eq">
							<image class="image" :src="itemn" mode="aspectFill" v-if="eq < 3"/>
						</block>
					</view>
					<view class="more" v-if="item.picturesArr.length > 3" @click="previewImage(item, eq)">查看全部 {{item.picturesArr.length}}张</view>
				  <!-- <view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
				    <image :src="itemn" class="image" />
				  </view> -->
				</view>
				<view class="imgList acea-row" v-else>
					<block v-for="(itemn, eq) in item.picturesArr" :key="eq">
						<image class="pictrue" :src="itemn" mode="aspectFill" :style="eq == item.picturesArr.length-1 || eq == item.picturesArr.length-2?'':'margin-bottom: 11rpx;'" @click="previewImage(item, eq)"/>
					</block>
				</view>
			</view>
			<Loading :loaded="loadend" :loading="loading"></Loading>
		</view>
		
      <!-- <view class="generalComment acea-row row-between-wrapper">
        <view class="acea-row row-middle font-color-red">
          <text class="evaluate">评分</text>
          <view class="start" :class="'star' + replyData.replyStar"></view>
        </view>
        <view>
          <text class="font-color-red">{{ replyData.replyChance || 0 }}%</text>
		  <text>好评率</text>
        </view>
      </view> -->
			
    <!-- <UserEvaluation :reply="reply"></UserEvaluation> -->
    
  </view>
</template>
<script>
import UserEvaluation from "@/components/UserEvaluation";
import { getReplyConfig, getReplyList } from "@/api/store";
import Loading from "@/components/Loading";

export default {
  name: "EvaluateList",
  components: {
    UserEvaluation,
    Loading
  },
  props: {},
  data: function() {
    return {
			CustomBar: this.CustomBar,
      product_id: 0,
      replyData: {},
      navList: [
        { evaluate: "全部", num: 0 },
        { evaluate: "好评", num: 0 },
        { evaluate: "中评", num: 0 },
        { evaluate: "差评", num: 0 }
      ],
      currentActive: 0,
      page: 1,
      limit: 8,
      reply: [],
      loadTitle: "",
      loading: false,
      loadend: false
    };
  },
  mounted: function() {
    this.product_id = this.$yroute.query.id;
    this.getProductReplyCount();
    this.getProductReplyList();
  },
  onReachBottom() {
    !this.loading && this.getProductReplyList();
  },
  methods: {
    getProductReplyCount () {
      getReplyConfig(this.product_id).then(res => {
        this.$set(this, "replyData", res.data);
        this.navList[0].num = res.data.sumCount;
        this.navList[1].num = res.data.goodCount;
        this.navList[2].num = res.data.inCount;
        this.navList[3].num = res.data.poorCount;
      });
    },
    getProductReplyList () {
      if (this.loading) return; //阻止下次请求（false可以进行请求）；
      if (this.loadend) return; //阻止结束当前请求（false可以进行请求）；
      this.loading = true;
      let q = { page: this.page, limit: this.limit, type: this.currentActive };
      getReplyList(this.product_id, q).then(res => {
        this.loading = false;
        //apply();js将一个数组插入另一个数组;
        this.reply.push.apply(this.reply, res.data);
				this.reply.forEach( val => {
					val.star = val.star*1;
				})
        this.loadend = res.data.length < this.limit; //判断所有数据是否加载完成；
        this.page = this.page + 1;
      });
    },
    changeType (index) {
      this.currentActive = index;
      this.page = 1;
      this.loadend = false;
      this.$set(this, "reply", []);
      this.getProductReplyList();
    },
		previewImage(item, current) {
		  uni.previewImage({
		    current,
		    urls: item.picturesArr,
		  });
		},
  }
};
</script>
<style scoped lang="less">
	.header {
		width: 100vw;
		position: fixed;
		z-index: 100;
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.list {
		margin: 0rpx 32rpx 32rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		padding: 24rpx;
		.item {
			margin-bottom: 46rpx;
			.pic-text {
				padding-bottom: 16rpx;
				.image {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.noAvatar {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					background-color: #FFFFFF;
					padding-left: 3rpx;
					padding-right: 2rpx;
					image {
						width: 100%;
					}
				}
				.name {
					max-width: 260rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #3A3A3C;
					line-height: 34rpx;
					padding-right: 6rpx;
				}
				.vip {
					width: 80rpx;
					height: 26rpx;
					background-color: #2DB5AE;
				}
				.starBox {
					padding-top: 4rpx;
					image {
						width: 26rpx;
						height: 26rpx;
					}
				}
				.time {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #3A3A3C;
					line-height: 26rpx;
				}
			}
		}
		.item:last-child {
			margin-bottom: 12rpx;
		}
	}
	
	.evaluate-infor {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #3A3A3C;
		line-height: 32rpx;
	}
	
	.imgList {
		padding-top: 12rpx;
		position: relative;
		image {
			background: #D8D8D8;
		}
		.image {
			width: 204rpx;
			height: 204rpx;
			border-radius: 8rpx;
			margin-right: 13rpx;
		}
		.image:last-child {
			margin-right: 0rpx;
		}
		.more {
			width: 204rpx;
			height: 204rpx;
			border-radius: 8rpx;
			background: rgba(45, 181, 174, 0.4);
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 204rpx;
			text-align: center;
			position: absolute;
			top: 12rpx;
			right: 0;
			z-index: 4;
		}
		.pictrue {
			width: 314rpx;
			height: 308rpx;
			border-radius: 8rpx;
			margin-right: 11rpx;
		}
		.pictrue:nth-child(2n) {
			margin-right: 0;
		}
	}
	
.noCommodity {
  height: 8*100rpx;
  background-color: #fff;
}
</style>