You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
424 lines
14 KiB
424 lines
14 KiB
<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>
|