jzhw_uni/pages/ucenter/comment/comment.vue

<template>
    <view class="comments">
        <view class="h">
            <view :class="'item ' + (showType == 0 ? 'active' : '')" @tap="switchTab">
                <view class="txt">全部({{ allCount }})</view>
            </view>
            <view :class="'item ' + (showType == 0 ? '' : 'active')" @tap="switchTab">
                <view class="txt">有图({{ hasPicCount }})</view>
            </view>
        </view>
        <view class="b">
            <view class="item" v-for="(item, index) in comments" :key="index">
                <view class="info">
                    <view class="user">
                        <image :src="item.userInfo.avatarUrl"></image>
                        <text>{{ item.userInfo.nickname }}</text>
                    </view>
                    <view class="time">{{ item.addTime }}</view>
                </view>

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

                <view class="imgs" v-if="item.picList.length > 0">
                    <image class="img" :src="pitem" v-for="(pitem, index1) in item.picList" :key="index1"></image>
                </view>

                <view class="customer-service" v-if="item.adminContent">
                    <text class="u">商家回复：</text>
                    <text class="c">{{ item.adminContent }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var app = getApp();
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
export default {
    data() {
        return {
            comments: [],
            allCommentList: [],
            picCommentList: [],
            type: 0,
            valueId: 0,
            showType: 0,
            allCount: 0,
            hasPicCount: 0,
            allPage: 1,
            picPage: 1,
            limit: 20,
            pitem: ''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.setData({
            type: options.type,
            valueId: options.valueId
        });
        this.getCommentCount();
        this.getCommentList();
    },
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getCommentCount();
        this.getCommentList();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    onReachBottom: function () {
        console.log('onPullDownRefresh');
        if (this.showType == 0) {
            if (this.allCount / this.limit < this.allPage) {
                return false;
            }
            this.setData({
                allPage: this.allPage + 1
            });
        } else {
            if (this.hasPicCount / this.limit < this.picPage) {
                return false;
            }
            this.setData({
                picPage: this.picPage + 1
            });
        }
        this.getCommentList();
    },
    methods: {
        getCommentCount: function () {
            let that = this;
            util.request(api.CommentCount, {
                valueId: that.valueId,
                type: that.type
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        allCount: res.data.allCount,
                        hasPicCount: res.data.hasPicCount
                    });
                }
            });
        },

        getCommentList: function () {
            let that = this;
            util.request(api.CommentList, {
                valueId: that.valueId,
                type: that.type,
                limit: that.limit,
                page: that.showType == 0 ? that.allPage : that.picPage,
                showType: that.showType
            }).then(function (res) {
                if (res.errno === 0) {
                    if (that.showType == 0) {
                        that.setData({
                            allCommentList: that.allCommentList.concat(res.data.list),
                            allPage: res.data.page,
                            comments: that.allCommentList.concat(res.data.list)
                        });
                    } else {
                        that.setData({
                            picCommentList: that.picCommentList.concat(res.data.list),
                            picPage: res.data.page,
                            comments: that.picCommentList.concat(res.data.list)
                        });
                    }
                }
            });
        },

        switchTab: function () {
            let that = this;
            if (that.showType == 0) {
                that.setData({
                    allCommentList: [],
                    allPage: 1,
                    comments: [],
                    showType: 1
                });
            } else {
                that.setData({
                    picCommentList: [],
                    picPage: 1,
                    comments: [],
                    showType: 0
                });
            }
            this.getCommentList();
        }
    }
};
</script>
<style>
.comments {
    width: 100%;
    height: auto;
    padding-left: 30rpx;
    background: #fff;
    margin: 20rpx 0;
}

.comments .h {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    background: #fff;
    height: 84rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.comments .h .item {
    display: inline-block;
    height: 82rpx;
    width: 50%;
    padding: 0 15rpx;
    text-align: center;
}

.comments .h .item .txt {
    display: inline-block;
    height: 82rpx;
    padding: 0 20rpx;
    line-height: 82rpx;
    color: #333;
    font-size: 30rpx;
    width: 170rpx;
}

.comments .h .item.active .txt {
    color: #ab2b2b;
    border-bottom: 4rpx solid #ab2b2b;
}

.comments .b {
    margin-top: 85rpx;
    height: auto;
    width: 720rpx;
}

.comments .b.no-h {
    margin-top: 0;
}

.comments .item {
    height: auto;
    width: 720rpx;
    overflow: hidden;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 25rpx;
}

.comments .info {
    height: 127rpx;
    width: 100%;
    padding: 33rpx 0 27rpx 0;
}

.comments .user {
    float: left;
    width: auto;
    height: 67rpx;
    line-height: 67rpx;
    font-size: 0;
}

.comments .user image {
    float: left;
    width: 67rpx;
    height: 67rpx;
    margin-right: 17rpx;
    border-radius: 50%;
}

.comments .user text {
    display: inline-block;
    width: auto;
    height: 66rpx;
    overflow: hidden;
    font-size: 29rpx;
    line-height: 66rpx;
}

.comments .time {
    display: block;
    float: right;
    width: auto;
    height: 67rpx;
    line-height: 67rpx;
    color: #7f7f7f;
    font-size: 25rpx;
    margin-right: 30rpx;
}

.comments .comment {
    width: 720rpx;
    padding-right: 30rpx;
    line-height: 45.8rpx;
    font-size: 29rpx;
    margin-bottom: 16rpx;
}

.comments .imgs {
    width: 720rpx;
    height: 150rpx;
    margin-bottom: 25rpx;
}

.comments .imgs .img {
    height: 150rpx;
    width: 150rpx;
    margin-right: 28rpx;
}

.comments .spec {
    width: 720rpx;
    height: 25rpx;
    font-size: 24rpx;
    color: #999;
}

.comments .spec .item {
    color: #7f7f7f;
    font-size: 25rpx;
}

.comments .customer-service {
    width: 690rpx;
    height: auto;
    overflow: hidden;
    margin-top: 23rpx;
    background: rgba(0, 0, 0, 0.03);
    padding: 21rpx;
}

.comments .customer-service .u {
    font-size: 24rpx;
    color: #333;
    line-height: 37.5rpx;
}

.comments .customer-service .c {
    font-size: 24rpx;
    color: #999;
    line-height: 37.5rpx;
}
</style>