xmhjc-applet/pages/market/ProductEvaluate.vue

<template>
    <view class="ProductDetails">
        <!-- 评论 -->
        <view class="comment">
            <view class="commentTop">
                <view class="commentTop_left">
                    评价 
                </view>
            </view>
            <view class="commentTop">
                <view @click="checkCommentbtn(item,index)" :class="iscommentbtn==index?'check_commentbtn':'commentbtn'" v-for="(item,index) in commentbtnList" :key="index">
                    {{item.name}}
                </view>
            </view>
            <view v-for="(item,index) in plList" :key="index">
                <view class="commentTop">
                    <view class="commentUser">
                        <view class="Userimg">
                            <u--image width="60rpx" height="60rpx" src="/static/btn_mine.png" ></u--image>
                        </view>
                        <view class="Userimg_r">
                            <view style="font-size: 28rpx;font-weight: 500;color: #666666;margin-left: 8rpx;">
                                {{item.author}}
                            </view>
                            <view>
                                <u-rate readonly active-color="#ffcf00" inactive-color="#b2b2b2" :count="5" v-model="item.score"></u-rate>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="commentTop">
                    <view class="commentcontent">
                        {{item.content}}
                    </view>
                </view>
            </view>
        </view>
        
    </view>
</template>
<script>
import {productPage,productdetail,productcollection,reviewsPage,addShoppingCart,cancelCollection} from '@/http/api/common.js'

export default {
    components:{

    },
data() {
return {
    TermServiceList:[],
    ProductId:'',
    rating:'',
    plList:[],
    commentbtnList:[
        {
            name:'全部',
            key:''
        },
        {
            name:'好评',
            key:'3'
        },
        {
            name:'中评',
            key:'2'
        },
        {
            name:'差评',
            key:'1'
        },
    ],
    iscommentbtn:0,
    showtypetopl:null
}
},
async onLoad(e) {
    if (e?.id) {
        this.ProductId = e?.id
        //获取评论列表
        await this.getreviewsPage()
    }
    
},
methods: {
    async getreviewsPage(){
        //获取评论列表
        // 1=差评；2=中评；3=好评
        let res = await reviewsPage({
            rating:this.rating,
            productId:this.ProductId
        })
        if (res.data.code == 200) {
            this.plList = res.data.data.rows
            //默认选中全部类型
            // this.checkCommentbtn(this.commentbtnList[0],0)
        }
    },
    checkCommentbtn(item,index){
        this.iscommentbtn = index
        this.rating = item.key

        this.getreviewsPage()
    },
    
}
}
</script>

<style>
.ProductDetails{
    width: 750rpx;
    min-height: 100vh;
    background: #F1F1F1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.comment{
    width: 702rpx;
    /* height: 434rpx; */
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24rpx;
}
.commentTop{
    width: 640rpx;
    min-height: 45rpx;
    margin-top: 24rpx;
    display: flex;
    justify-content: space-between;
}
.commentTop_left{
    width: 220rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 36rpx;
    display: flex;
    justify-content: space-between;
}
.commentTop_left_num{
    width: 124rpx;
    height: 37rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;
}
.commentTop_right{
    display: flex;
    width: 160rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 36rpx;
}
.commentbtn{
    width: 151rpx;
    height: 64rpx;
    background: #DDDDDD;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    line-height: 64rpx;
    text-align: center;
}
.check_commentbtn{
    width: 151rpx;
    height: 64rpx;
    background: #46A6FF;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFF;
    line-height: 64rpx;
    text-align: center;
}
.commentcontent{
    width: 644rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.Userimg{
    width: 80rpx;
    height: 80rpx;
    background: #EEEEEE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.commentUser{
    display: flex;
}
.Userimg_r{
    margin-left: 24rpx;
}

</style>