jzmall_uni/pages/goods/wholeEvaluation/wholeEvaluation.vue

<template>
    <view>
        <view class="evaluation-list">
            <view class="evaluation-item" v-for="(item, index) in evalList" :key="index">
                <view class="eval-top">
                    <image :src="item.cusHeadImg + '?w=300'" mode="aspectFill" class="avatar"></image>
                    <view class="name">{{ item.cusName }}</view>
                    <view class="tag">{{ item.cusLabel }}</view>
                    <view class="hp">{{ item.commentType }}</view>
                    <view class="date">{{ item.date }}</view>
                </view>

                <view class="eval-content">
                    {{ item.comment }}
                </view>

                <!-- <text>展开</text> -->

                <view class="item-bottom">
                    <image
                        :src="img + '?w=100'"
                        mode="aspectFill"
                        :data-img="img"
                        :data-imgs="item.commentImg"
                        @tap="previewImg"
                        v-for="(img, index1) in item.commentImg"
                        :key="index1"
                    ></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            // evalList: [
            //   {
            //     cusHeadImg:'https://mall.zhaijieshi.cc/file/wx-dy/icon-tag3.png',
            //     cusName:'鲸致生活',
            //     cusLabel:'>回头客/已消费',
            //     commentType:'好评',
            //     comment:'阿姨非常认真，专业的就是专业。六大区域清洁的都很干净，后期会继续囤订单，回到阿姨打扫干净的家，好幸福！'
            //   }
            // ],
            evalList: [],

            page: 1,
            limit: 10,
            goodsId: '',
            totalPages: '',
            img: ''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        if (options.id) {
            this.setData({
                goodsId: options.id
            });
            this.getEvalList();
        }
    },
    onReachBottom() {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getEvalList();
        } else {
            uni.showToast({
                title: '没有更多评价了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getEvalList() {
            uni.showLoading({
                title: '加载中'
            });
            util.request(api.getGoodsComment, {
                goodsId: this.goodsId,
                page: this.page,
                limit: this.limit
            }).then((res) => {
                uni.hideLoading();
                if (res.errno === 0) {
                    console.log(res.data);
                    let list = res.data.list.map((item) => {
                        if (item.commentImgs == null || item.commentImgs == '') {
                            item.commentImg = [];
                        } else {
                            item.commentImg = item.commentImgs.split(',');
                        }
                        item.date = item.createTime.substr(0, 10);
                        return item;
                    });
                    this.setData({
                        evalList: this.evalList.concat(list),
                        totalPages: res.data.pages
                    });
                }
            });
        },

        previewImg(e) {
            let img = e.currentTarget.dataset.img;
            let imgs = e.currentTarget.dataset.imgs;
            uni.previewImage({
                current: img,
                urls: imgs
            });
        }
    }
};
</script>
<style>
page {
    width: 100%;
    background: #f4f4f4;
}
.evaluation-list {
    padding: 30rpx 24rpx;
}
.evaluation-item {
    padding: 30rpx 30rpx 36rpx 30rpx;
    background: #ffffff;
    border-radius: 24rpx;
    width: 702rpx;
    margin-bottom: 20rpx;
}

.evaluation-item .item-left {
    width: 510rpx;
}
.eval-top {
    display: flex;
    height: 60rpx;
    align-items: center;
}
.eval-top .avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 60rpx;
}
.eval-top .name {
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #000;
}
.eval-top .tag {
    height: 38rpx;
    line-height: 38rpx;
    background: rgba(1, 187, 243, 0.1);
    border-radius: 10rpx;
    color: #01bbf3;
    font-size: 24rpx;
    padding: 0 12rpx;
    margin-right: 10rpx;
}
.eval-top .hp {
    height: 38rpx;
    line-height: 38rpx;
    background: rgba(255, 71, 71, 0.1);
    border-radius: 10rpx;
    color: #ff5252;
    font-size: 24rpx;
    padding: 0 12rpx;
}
.eval-top .date {
    flex: 1;
    text-align: right;
}
.eval-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 24rpx;
}
.evaluation-item .item-bottom {
    display: flex;
    flex-wrap: wrap;
}
.evaluation-item .item-bottom image {
    width: 144rpx;
    height: 144rpx;
    border-radius: 10rpx;
    margin-right: 16rpx;
    margin-bottom: 8rpx;
}
</style>