football/plugins/book/index/index.vue

<template>
	<app-layout>
		<view class="book-index">
			<view class="page-width quick-navigation">
				<app-quick-navigation></app-quick-navigation>
			</view>
			
			<view class="page-width head-nav-list">
				<app-head-nav-list
					v-bind:catList="catList"
					@click="changeStatus"
					v-bind:cat_id="cat_id"
				></app-head-nav-list>
			</view>
			
			<view class="page-width product-list" v-if="goods_list.length > 0">
				<app-product-list v-bind:goodsList="goods_list"></app-product-list>
			</view>
			
			<view class="page-width no-goods" v-else>
				<app-no-goods background="#f7f7f7"></app-no-goods>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appHeadNavList from '../components/app-head-nav-list.vue';
	import appProductList from '../components/app-product-list.vue';
    import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
	import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';
	
    export default {
        name: "index",
	   
	    data() {
            return {
                catList: [
	                {
	                    name: '全部',
		                id: 0
	                }
                ],
                cat_id: 0,
                page: 1,
                goods_list: [],
                page_count: 1,
            }
	    },
	    onLoad(option) {
            uni.showLoading({
	            title: '加载中',
            });
            if (option.cat_id) {
                this.cat_id = option.cat_id;
            } else {
                this.cat_id = this.catList[0].id;
            }
            this.request();
            this.$request({
	            url: this.$api.book.cats
            }).then(response => {
                uni.hideLoading();
                if (response.code === 0) {
                    this.catList = [...this.catList, ...response.data.cat];
	                // this.request();
                }
            });
            
        },
	    methods: {
            
            changeStatus(status) {
	            this.page = 1;
	            this.cat_id = status;
	            this.goods_list = [];
                this.request();
            },
		    
		    async request() {
                uni.showLoading({
                    title: '加载中',
                });
                const res = await this.$request({
                    url: this.$api.book.list,
                    data: {
                        page: this.page,
                        cat_id: this.cat_id,
                    }
                });
                uni.hideLoading();
                if (res.code === 0) {
                    this.dataProcessing(res.data);
                }
		    },

            dataProcessing(data) {
                for (let i = 0; i < data.list.length; i+=2) {
                    if (i+1 !== data.list.length) {
                        this.goods_list.push([data.list[i], data.list[i+1]]);
                    } else {
                        this.goods_list.push([data.list[i]]);
                    }
                }
                this.page_count = data.pagination.page_count;
            }
	    },
	    onReachBottom() {
            if (this.page < this.page_count) {
                this.page++;
                this.request();
            }
        },
	    
        onShareAppMessage() {
            return this.$shareAppMessage({
                path: '/plugins/book/index/index',
                title: this.$children[0].navigationBarTitle,
            });
        },
	    
        components: {
            'app-head-nav-list': appHeadNavList,
            'app-product-list': appProductList,
            'app-quick-navigation': appQuickNavigation,
	        'app-no-goods': appNoGoods,
        },
    }
</script>

<style scoped lang="scss">
	
	.head-nav-list {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1500;
	}
	
	.product-list {
		margin-top: #{100rpx};
	}
	
	.no-goods {
		margin-top: #{150rpx};
	}
</style>