yantai-app/yt_banshizhinan/pages/collect/index.vue

<template>
    <view class="page">
        <view v-if="iniLoading" class="">
            <view>
                <view v-if="guideList.length > 0">
                    <view class="m-list">
                        <view
                            class="item"
                            :data-aid="item.issueApplicationId"
                            :data-gid="item.gridId"
                            :data-id="item.guideId"
                            @click="selectIssue(item)"
                            v-for="(item, index) in guideList"
                            :key="index"
                        >
                            <view class="row row1">
                                <text class="title">{{ item.title }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="m-more">
                        <text v-if="noMore">没有更多了</text>
                        <text v-else-if="!noMore">上拉查看更多</text>
                    </view>
                </view>
                <view class="m-nothing" v-if="pageEmpty">
                    <image mode="aspectFill" class="arrow" src="/static/data/images/nothing.png" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import CustomerApi from '../../utils/api';
export default {
    data() {
        return {
            iniLoading: false,
            pageEmpty: false,
            noMore: false,
            guideList: [],
            pageNo: 1,
            pageSize: 20
        };
    },
    onLoad() {},
    onShow() {
        this.setData(
            {
                pageNo: 1,
                guideList: [],
                noMore: false
            },
            () => {
                this.getGuideList();
            }
        );
    },
    // 下拉刷新
    onPullDownRefresh() {
        this.setData({
            pageNo: 1,
            guideList: []
        });
        this.getGuideList();
    },
    // 上拉加载
    onReachBottom() {
        // 页面被拉到底部
        if (this.noMore) {
            return;
        }
        let page = this.pageNo + 1;
        this.setData({
            pageNo: page
        });
        this.getGuideList();
    },
    methods: {
        async getGuideList() {
            uni.showLoading();
            let { pageNo, pageSize } = this;
            let params = {
                pageNo,
                pageSize
            };
            let result = await CustomerApi.fetchGuideCollectionlist(params);
            let { code, data } = result;
            if (code == 0) {
                uni.hideLoading();
                let list = data.list;
                this.setData({
                    iniLoading: true,
                    guideList: list
                });
                // this.p_formatItemForData(list);
                this.p_judgeNoMoreData(list);
                this.p_judgePageEmpty(list);
                uni.stopPullDownRefresh();
            }
        },

        // 格式化数据
        p_formatItemForData(list) {
            this.$spliceData({
                guideList: [this.guideList.length, 0, ...list]
            });
        },

        // 页面是否为空
        p_judgePageEmpty(list) {
            console.log(list);
            if (this.pageNo == 1 && list.length == 0) {
                this.setData({
                    pageEmpty: true
                });
            } else {
                this.setData({
                    pageEmpty: false
                });
            }
        },

        // 本次加载是否为空
        p_judgeNoMoreData(list) {
            if (list.length < this.pageSize) {
                this.setData({
                    noMore: true
                });
            } else {
                this.setData({
                    noMore: false
                });
            }
        },

        selectIssue(item) {
            // var _a = e.currentTarget.dataset;
            var id = item.id;
            // var gid = _a.gid;
            // var aid = _a.aid;
            uni.navigateTo({
                url: `/pages/detail/index?guideId=${id}`
            });
        }
    }
};
</script>
<style>
@import '/data/acss/converge-issue.css';
@import '/data/acss/work-guide.css';
</style>