van-list 留言列表分页

 

我：

（1）

<template>
    <!--留言模块组件-->
    <div class="shopComment">
        <!--留言弹窗-->
        <van-dialog class="c_dialog"
                    title="写留言"  v-model="showCommentDialog"
                    show-cancel-button  show-confirm-button
                    @confirm="handleAddComment">
            <van-field type="textarea" v-model="content"/>
        </van-dialog>

        <!--留言按钮-->
        <div class="c_btn">
            <van-button class="c_btn" @click="handleShowComment">
                <van-image fit="cover" :src="commentIcon"/>
                <span>给他留言</span>
            </van-button>
        </div>

        <!--留言栏-->
        <div class="c_list">
            <van-list offset="100" v-model="loading" :finished="finished" finished-text="没有更多了" @load="queryCommentList">
                <div class="c_item" v-for="(item,index) in list" :key="index">
                    <!-- 头-->
                    <van-image
                            lazy-load
                            fit="cover"
                            :src="item.headPortrait"
                            round
                            class="c_item_avatar"
                    />
                    <!--内容-->
                    <div class="c_item_info">

                        <div class="c_item_info_one">
                            <!--用户名称-->
                            <div class="c_item_info_username">{{item.nickName}}</div>
                            <!--点赞图标-->
                            <img :src="item.isLove?likeIcon:unlikeIcon" @click="handleLikeAdd(item)"/>
                        </div>

                        <div class="c_item_info_one">
                            <!--留言时间-->
                            <div class="c_item_info_date">{{item.commentTime}}</div>
                            <!--点赞数量-->
                            <div class="c_item_info_loveNum">{{item.loveNum}}</div>
                        </div>

                        <!--留言内容-->
                        <div class="c_item_info_text">
                            <p>{{item.content}}</p>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>

    </div>
</template>

（2）

<script>
    export default {
        name: "ShopComment",
        props: {
            shopId:{
                required:true,
            }
        },
        data() {
            return {
                commentIcon:require('../image/comment_icon.png'),
                likeIcon:require('../image/like_icon.png'),
                unlikeIcon:require('../image/unlike_icon.png'),
                showCommentDialog: false,
                content: null,
                list:[],
                loading: false,
                finished: false,
                page:1,
                size:40, // 默认设大一些，减少上拉加载出现重复数据的概率
            };
        },
        created() {

        },
        methods: {

            /*初始化留言列表*/
            initCommentList(){
                this.list = [];
                this.page = 1;
                this.finished = false;
                this.queryCommentList();
            },

            // 弹出留言输入框
            handleShowComment(){
                this.showCommentDialog = true
            },

            // 添加留言
            handleAddComment(){
                this.$api.shopComment.add({shopId:this.shopId, content:this.content}).then(res => {
                    if (res.code === 0) {
                        this.$toast("留言成功!");
                        this.initCommentList();
                    }else{
                        this.$toast(res.msg);
                    }
                })
            },

            // 获取留言列表
            queryCommentList(){
                console.log("获取list");
                // 下一页：页码加一（必须放在接口调用的外面，否则会出现重复调用接口的问题，因为接口调用是异步的，故第二次接口调用时，第一次接口调用还没返回，page还是1）
                this.page = this.page +1;
                this.$api.shopComment.list({shopId:this.shopId, page:this.page, size:this.size}).then(res => {
                    if (res.code === 0) {
                        // ******注意：如果 页面当前条数 大于等于 总记录数count，则 停止加载******
                        if(this.list.length >= res.data.count){
                            // 提示'没有更多了'
                            this.finished = true;
                        }else{
                            // 合并数组
                            this.list = this.list.concat(res.data.rows);
                        }
                        // ******注意：加载结束*******
                        this.loading = false;
                    }
                })
            },

            // 处理点赞
            handleLikeAdd(item){
                this.$api.shopComment.updateLove({commentId:item.id}).then(res => {
                    if (res.code === 0) {
                        // 修改点赞状态
                        if(item.isLove){
                            item.isLove = false;
                            item.loveNum = item.loveNum - 1;
                        }else{
                            item.isLove = true;
                            item.loveNum = item.loveNum + 1;
                        }
                    }
                });
            },
        }
    };
</script>

（3）

<style lang="less" scoped>
    .shopComment {
        color:white;
        background-color: black;
    }

    .c_dialog{
        color:black;padding:5px;
        .van-field{
            border: 1px solid lightgray; height:150px;
        }
    }
    .c_list{
        margin-top: 50px;
        /*背景间距*/
        margin-left: 10px;
        margin-right: 10px;
    }
    .c_item{
        width:100%;
        border-bottom: 2px solid #333333;
        padding-top:10px;
        padding-bottom:10px;
    }
    .c_item_avatar{
        float:left;
        width:35px;
        height:35px;
    }
    .c_item_info{
        margin-left:40px;
    }
    .c_item_info_one{
        height:16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:5px;
        margin-left:5px;
        img{
            width: 20px;
            height: 20px;
        }
    }
    .c_item_info_username{
        font-size:14px;
        height:20px;
        opacity:0.8;
    }
    .c_item_info_date{
        font-size:12px;
        opacity:0.3;
    }
    .c_item_info_loveNum{
        opacity:0.3;margin-right:7px;
    }
    .c_item_info_text{
        font-size:16px;
        margin-top:5px;
    }



    .c_btn{
        text-align:center;
        margin-top:15px;

        /*背景间距*/
        margin-left: 10px;
        margin-right: 10px;

        .van-image{
            width: 22px;
            height: 22px;
            vertical-align:middle;
        }
        .van-button{
            background-color:#e60b71;
            color:white;
            width:100%;
            height:30px;
            margin:0;
            border:0;
            border-radius: 5px;
            height:46px;
        }
        span{
            vertical-align:middle;
        }
    }


</style>