ceres-uniapp-v2.0/pages_category_page1/goodsModule/userEvaluate.vue

<template>
	<view class="container">
    <!-- 骨架屏 -->
    <Skeleton
        el-color="#f1f3f4"
        bg-color="#fff"
        :loading="loading"
        :animation="true"
    ></Skeleton>
    <global-loading />
    <view class="u-skeleton">
      <!-- 我的评论 -->
      <view class="evaluateTitle-box flex-row-plus flex-sp-around u-skeleton-fillet">
        <view class="allEvaluate"
              :class="{'evaluateTitle-on' : evaluateTitleFlag == 1}"
              @click="evaluateTitleClick(1)"
        >全部评价({{ myCommentList.total || 0}})</view>
        <view class="centerLine">|</view>
        <view
            :class="{'evaluateTitle-on' : evaluateTitleFlag == 2}"
            @click="evaluateTitleClick(2)"
        >有图({{ myCommentList.imageTotal || 0}})</view>
      </view>
      <view v-if="evaluateTitleFlag == 1" class="mar-top-20">
        <template>
          <view
              class="evaluate-contentbox u-skeleton-fillet"
              v-for="(item, index) in commentVOList"
              :key="index"
              @click="commentDetails(index)"
          >
            <view class="evaluate-content flex-items flex-row flex-sp-between ">
              <view class="flex-items">
                <image class="user-headSmallImg u-skeleton-circle" v-if="item.headImage" :src="item.headImage"></image>
                <image class="user-headSmallImg u-skeleton-circle" src="https://ceres.zkthink.com/static/images/storeLogo.png" v-else></image>
                <view class="skuValue u-skeleton-fillet">
                  <label class="fs28" v-if="item.name">{{item.name}}</label>
                  <label class="fs28" v-else>匿名</label>
                  <view class="fs22 font-color-999 mar-top-10">
                    {{item.value}}
                  </view>
                </view>
              </view>
              <view class="addCommentsBut" v-if="item.addComment == ''" @click.stop="addCommentsClick(index)">追加评价</view>
            </view>
            <view class="fs26 pad-topbot-20 u-skeleton-fillet" style="margin-top: 10rpx">{{item.comment}}</view>
            <view class="evaluateImg-box" v-if="item.image">
              <view v-for="(cItem, index) in commentImgData(item.image)" :key="index">
                <image class="evaluate-Img" :src="cItem"></image>
              </view>
            </view>
            <view class="addComments-box flex-column-plus" v-if="item.addComment">
              <label class="font-color-C5AA7B mar-top-30">用户追评</label>
              <label class="mar-top-20">{{item.addComment}}</label>
              <view class="evaluateImg-box mar-top-20" v-if="item.addImage">
                <view v-for="(dItem, index) in commentImgData(item.addImage)" :key="index">
                  <image class="evaluate-Img" :src="dItem"></image>
                </view>
              </view>
            </view>
            <view class="goodsDes-box u-skeleton-fillet flex-column-plus mar-top-30">
              <view class="flex-row-plus" @click.stop="goGoodsDetails(item.shopId,item.productId,item.skuId)">
                <image class="goodsDes-img default-img" 
				onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null"
				:src="item.productImage"></image>
                <view class="goodsDesText-box">
                  <label class="fs26 goodsDes-text">{{item.productName}}</label>
                  <view class="mar-top-70">
                    <label>¥ {{item.productPrice}}</label>
                  </view>
                </view>
              </view>
            </view>
            <view class="flex-items flex-row mar-top-30 flex-sp-between">
              <view class="font-color-999 fs22">{{item.createTime}}</view>
              <view class="praise-box flex-items flex-row">
                <image class="praise-icon" @click.stop="zanTap(index,item.commentId,0)" src="https://ceres.zkthink.com/static/images/praiseActiveIcon.png"
                       v-if="item.ifLike"></image>
                <image class="praise-icon" @click.stop="zanTap(index,item.commentId,1)" src="https://ceres.zkthink.com/static/images/addPraiseIcon.png"
                       v-else></image>
                <label class="mar-left-10">{{item.likes}}</label>
              </view>
            </view>
          </view>
        </template>
        <view v-if="evaluateEmpty" class="emptyOrder-box flex-items-plus flex-column">
          <image class="emptyOrder-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
          <label class="font-color-999 fs26 mar-top-30">你还没有评论哦～</label>
        </view>
      </view>
      <view v-if="evaluateTitleFlag == 2" class="mar-top-20">
        <template>
          <view
              class="evaluate-contentbox"
              v-for="(item, index) in commentVOList"
              :key="index"
          >
            <view class="evaluate-content flex-column" @click="commentDetails(index)" >
              <view class="flex-items">
                <image class="user-headSmallImg" v-if="item.headImage" :src="item.headImage"></image>
                <image class="user-headSmallImg" src="https://ceres.zkthink.com/static/images/storeLogo.png" v-else></image>
                <label class="fs28 mar-left-20" v-if="item.name">{{item.name}}</label>
                <label class="fs28 mar-left-20" v-else>匿名</label>
              </view>
              <view class="fs22 font-color-999 mar-top-10">
                {{item.value}}
              </view>
              <view class="fs26 pad-topbot-20">{{item.comment}}</view>
              <view class="evaluateImg-box" v-if="item.image">
                <view v-for="(cItem, index) in commentImgData(item.image)" :key="index">
                  <image class="evaluate-Img" :src="cItem"></image>
                </view>
              </view>
              <view class="addComments-box flex-column-plus" v-if="item.addComment">
                <label class="font-color-C5AA7B mar-top-30">用户追评</label>
                <label class="mar-top-20">{{item.addComment}}</label>
                <view class="evaluateImg-box mar-top-20" v-if="item.addImage">
                  <view v-for="(dItem, index) in commentImgData(item.addImage)" :key="index">
                    <image class="evaluate-Img" :src="dItem"></image>
                  </view>
                </view>
              </view>

              <view class="flex-items flex-row mar-top-30 flex-sp-between">
                <view class="font-color-999 fs22">{{item.createTime}}</view>
                <view class="praise-box flex-items flex-row">
                  <image class="praise-icon" @click.stop="zanTap(index,item.commentId,0)" src="https://ceres.zkthink.com/static/images/praiseActiveIcon.png"
                         v-if="item.ifLike"></image>
                  <image class="praise-icon" @click.stop="zanTap(index,item.commentId,1)" src="https://ceres.zkthink.com/static/images/praiseIcon.png"
                         v-else></image>
                  <label class="mar-left-10">{{item.likes}}</label>
                </view>
              </view>
            </view>
          </view>
        </template>
        <view v-if="evaluateEmpty" class="emptyOrder-box flex-items-plus flex-column">
          <image class="emptyOrder-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
          <label class="font-color-999 fs26 mar-top-30">你还没有评论哦～</label>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  import Skeleton from "../../components/Skeleton";
  const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
    components: {Skeleton},
    data() {
			return {
        loading:true,
				evaluateTitleFlag: 1,
				myCommentList: [],
				commentVOList: [],
				state:"",
				page:1,//当前页
				pageSize:20,//每页记录数
				loadingType:0,
				topLeft: 0,
        evaluateEmpty: false
			}
		},
		onShow(){
			this.commentVOList = [{
        isLoading:true,
        name:'',
        comment:''
      },{
        isLoading:true,
        name:'',
        comment:''
      },{
        isLoading:true,
        name:'',
        comment:''
      },{
        isLoading:true,
        name:'',
        comment:''
      },{
        isLoading:true,
        name:'',
        comment:''
      }]
			this.getMyCommentList()
		},
		// onLoad() {
		// 	this.getMyCommentList()
		// },
		onReachBottom(){
			if(this.loadingType == 1){
				uni.stopPullDownRefresh()
			}else{
				this.page = this.page+1
				this.getMyCommentList()
			}
		},
		onBackPress(e) {
			if (e.from === 'navigateBack') {
				return false;
			}
			this.back();
			return true;
		},
		methods: {
			goGoodsDetails(shopId,productId,skuId){
				uni.navigateTo({
					url:'goodsDetails?shopId='+shopId+'&productId='+productId+'&skuId='+skuId
				})
			},
			back(){
				uni.switchTab({
					url:'../../pages/tabbar/user/index'
				});
			},
			commentImgData(imgData) {
				let imgDataResult = []
				imgDataResult = imgData.split(",");
				return imgDataResult
			},
			evaluateTitleClick(type) {
        this.evaluateEmpty = false
				if(type == 1){
					this.state = ''
				}else{
					this.state = "1"
				}
				this.page = 1
				this.commentVOList = []
				this.evaluateTitleFlag = type
				this.getMyCommentList()
			},
			//我的评价列表
			getMyCommentList() {
        this.$showLoading()
        this.loading = true
				NET.request(API.MyCommentList, {
					page: this.page,
					pageSize: this.pageSize,
					state: this.state
				}, 'GET').then(res => {
                 uni.hideLoading()
					if(res.data.page.list.length == 0){
						this.loadingType = 1
						this.page = this.page
					}
					this.myCommentList = res.data
					this.commentVOList = this.commentVOList.concat(res.data.page.list)
          this.commentVOList = this.commentVOList.filter(item=>!item.isLoading)
          if (this.commentVOList.length === 0) {
            this.evaluateEmpty = true
          }
				}).catch(res => {
          uni.hideLoading()
          uni.showToast({
            title: res.data.message,
            duration: 2000,
            icon: 'none'
          });
				}).finally(()=>{
          this.loading = false
          this.$hideLoading()
        })
			},
			//点赞
			zanTap(index, likeId, actionType) {
        this.$showLoading()
				NET.request(API.LikeOrUnLikeComment, {
					commentId: likeId,
					ifLike: actionType
				}, 'POST').then(res => {
					this.commentVOList[index].ifLike = !this.commentVOList[index].ifLike
					this.commentVOList[index].likes = this.commentVOList[index].ifLike ? this.commentVOList[index].likes + 1 : this.commentVOList[index].likes - 1
					// this.commentVOList = []
					// this.page = 1
					// this.getMyCommentList()
				}).catch(res => {
          this.$hideLoading()
					// uni.hideLoading()
				})
			},
			commentDetails(id) {
				uni.setStorageSync('commentVOList', this.commentVOList[id]);
				uni.navigateTo({
					url: 'evaluateDetails'
				})
			},
			//追加评论
			addCommentsClick(id) {
				uni.setStorageSync('addCommentVOList', this.commentVOList[id]);
				uni.navigateTo({
					url: 'addEvaluate?type=2'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #FFFFFF;
}

.container {
	.emptyOrder-box {
		margin-top: 70upx;

		.emptyOrder-img {
			margin-top: 45%;
			width: 113upx;
			height: 98upx;
		}
	}

	.evaluateTitle-box {
		color: #CCCCCC;
		margin-top: 26upx;
    border-bottom: 2rpx solid #F3F4F5;
		.evaluateTitle-on {
			padding-bottom: 20upx;
			border-bottom: 4upx solid #C5AA7B;
      color: #333333;
		}
	}

	.evaluate-contentbox {
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 30upx 30upx;
    margin: 10rpx 10rpx;
		background-color: #FFFFFF;
    border-bottom: 2rpx solid #F3F4F5;
		.evaluate-content {
			width: 670upx;
			display: flex;
			justify-content: space-between;
			.user-headSmallImg {
				width: 46upx;
				height: 46upx;
				border-radius: 50%;
			}
      .skuValue {
        text-align: left;
        padding-left: 30rpx;
      }
		}

		.evaluateImg-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-left: -9upx;

			.evaluate-Img {
				width: 224upx;
				height: 224upx;
				border-radius: 10upx;
				margin-left: 9upx;
				margin-top: 9upx;
			}
		}

		.goodsDes-box {
			background-color: #F7F7F7;
			padding: 20upx 44upx 20upx 20upx;

			.goodsDes-img {
				width: 180upx;
				height: 180upx;
				border-radius: 10upx;
			}

			.goodsDesText-box {
				width: 416upx;
				margin-left: 30upx;
			}



			.praise-box {
				.praise-icon {
					width: 50upx;
					height: 50upx;
				}

			}
		}

		.addComments-box {
			border-top: 1upx solid #EEEEEE;
			margin-top: 35upx;
		}
	}
}
.praise-icon {
	width: 50upx;
	height: 50upx;
}
.addCommentsBut {
	width: 140upx;
	height: 58upx;
  background: #333333;
	font-size: 26upx;
	line-height: 58upx;
	text-align: center;
	color: #C5AA7B;
}

.addCommentsBut1 {
	width: 140upx;
	height: 58upx;
	font-size: 26upx;
  background: #333333;
	line-height: 58upx;
	text-align: center;
}
</style>