|
|
<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="font-color-BCBDC6">|</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 evaluate-item" 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="http://36.138.125.206:8081/ceres-local-file/static/images/storeLogo.png" v-else></image> <view class="skuValue u-skeleton-fillet"> <label class="fs28 font-color-252744" v-if="item.name">{{item.name}}</label> <label class="fs28 font-color-252744" v-else>匿名</label> <view class="fs22 font-color-90919C mar-top-10"> {{item.value}} </view> </view> </view> <view class="addCommentsBut" v-if="item.addComment == ''" @click.stop="addCommentsClick(index)">追加评价</view> </view> <view class="fs28 pad-topbot-20 u-skeleton-fillet font-color-252744" 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(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null" :src="item.productImage"></image> <view class="goodsDesText-box"> <label class="fs28 font-color-252744">{{item.productName}}</label> <view class="mar-top-70"> <label class="fs32 font-color-252744">¥ {{item.productPrice}}</label> </view> </view> </view> </view> <view class="flex-items flex-row mar-top-30 flex-sp-between"> <view class="font-color-90919C fs22">{{item.createTime}}</view> <view class="praise-box flex-items flex-row"> <image class="praise-icon" @click.stop="zanTap(index,item.commentId,0)" src="http://36.138.125.206:8081/ceres-local-file/image/evaluate_like_active.png" v-if="item.ifLike"></image> <image class="praise-icon" @click.stop="zanTap(index,item.commentId,1)" src="http://36.138.125.206:8081/ceres-local-file/image/evaluate_like_normal.png" v-else></image> <label class="fs22 font-color-252744 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="http://36.138.125.206:8081/ceres-local-file/static/img/bgnull.png"></image> <label class="font-color-90919C 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="http://36.138.125.206:8081/ceres-local-file/static/images/storeLogo.png" v-else></image> <label class="fs28 mar-left-20 font-color-252744" v-if="item.name">{{item.name}}</label> <label class="fs28 mar-left-20 font-color-252744" v-else>匿名</label> </view> <view class="fs22 font-color-90919C mar-top-10"> {{item.value}} </view> <view class="fs28 pad-topbot-20 font-color-252744">{{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-90919C fs22">{{item.createTime}}</view> <view class="praise-box flex-items flex-row"> <image class="praise-icon" @click.stop="zanTap(index,item.commentId,0)" src="http://36.138.125.206:8081/ceres-local-file/image/evaluate_like_active.png" v-if="item.ifLike"></image> <image class="praise-icon" @click.stop="zanTap(index,item.commentId,1)" src="http://36.138.125.206:8081/ceres-local-file/image/evaluate_like_normal.png" v-else></image> <label class="fs22 font-color-252744 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="http://36.138.125.206:8081/ceres-local-file/static/img/bgnull.png"></image> <label class="font-color-90919C 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: #FAFAFA;}
.container { .emptyOrder-box { margin-top: 70upx;
.emptyOrder-img { margin-top: 45%; width: 113upx; height: 98upx; } }
.evaluateTitle-box { background: #FFFFFF; color: #90919C; padding-top: 26upx; //border-bottom: 20rpx solid #FAFAFA;
.evaluateTitle-on { padding-bottom: 20upx; border-bottom: 6rpx solid #252744; border-radius: 3rpx; color: #252744; font-weight: bold; } }
.evaluate-item{ background: #FFFFFF; border-radius: 30rpx; box-shadow: 0rpx 15rpx 30rpx 0rpx #F2F2F2; }
.evaluate-contentbox { display: flex; justify-content: center; flex-direction: column; padding: 30upx 30upx; margin: 20rpx 30rpx; //background-color: #FFFFFF;
//border-bottom: 2rpx solid #F3F4F5;
.evaluate-content { width: 670upx; display: flex; justify-content: space-between; .user-headSmallImg { width: 64rpx; height: 64rpx; 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: #FAFAFA; border-radius: 30rpx; padding: 20upx 44upx 20upx 20upx;
.goodsDes-img { width: 152rpx; height: 152rpx; border-radius: 30rpx; }
.goodsDesText-box { width: 416upx; margin-left: 30upx; }
.praise-box { .praise-icon { width: 28rpx; height: 26rpx; }
} }
.addComments-box { border-top: 1upx solid #EEEEEE; margin-top: 35upx; } }}.praise-icon { width: 28rpx; height: 26rpx;}.addCommentsBut { background: #252744; height: 50rpx; line-height: 48rpx; font-size: 26rpx; padding: 0rpx 25rpx; border-radius: 30rpx; margin-right: 30rpx; text-align: center; color: #FFFFFF;}</style>
|
