football/pages/goods/list.vue

<template>
    <app-layout>
	    <view class="sort-rule">
		    <app-sort-rule @sort="setSort" theme="default"></app-sort-rule>
	    </view>

	    <view class="product-list" v-if="goods_list.length > 0">
		    <app-product-list @routeGo="routeGo" theme="default" :goods_list="goods_list"></app-product-list>
	    </view>

		<view class="app-no-goods" v-if="goods_list.length === 0 && !first_req">
			<app-no-goods background="#f7f7f7"></app-no-goods>
		</view>

		<view class="quick-box dir-top-nowrap" :style="{bottom: tabbarbool ? '180rpx' : '40rpx'}">
			<app-jump-button url="/pages/cart/cart" open_type="redirect" v-if="isShowCartFly == 1">
				<image class="quick-btn" src="/static/image/icon/goods-list-card.png"></image>
			</app-jump-button>
			<app-jump-button v-if="isShowScoreTop == 1">
				<image @click="backTop" class="quick-btn" src="/static/image/icon/back-top.png"></image>
			</app-jump-button>
		</view>
    </app-layout>
</template>

<script>
	import {mapGetters, mapState} from 'vuex';
	import appProductList from '../../components/page-component/app-product-list/app-product-list.vue';
	import appSortRule from '../../components/page-component/app-sort-rule/app-sort-rule.vue';
	import appNoGoods from '../../components/page-component/app-no-goods/app-no-goods.vue';

    export default {
        name: "list",

        data() {
            return {
                // 商品数据
                goods_list: [],
	            // 总页数
                page_count: 1,
                coupon_id: 0,
	            page: 1,
	            cat_id: 0,
	            sort: 1,
	            sort_type: 1,
				first_req: true
            }
        },
	    onLoad(options) {
            this.cat_id = options.cat_id;
            if(options.coupon_id > 0) {
                this.coupon_id = options.coupon_id
            }
            this.request().then(() => {
            	this.first_req = false;
			});
	    },

		computed: {
        	...mapGetters('mallConfig', {
				getVideo: 'getVideo'
			}),
            ...mapState({
                isShowCartFly: state => state.mallConfig.mall.setting.is_show_cart_fly,
                isShowScoreTop: state => state.mallConfig.mall.setting.is_show_score_top,
            }),
		},
        onReachBottom() {
            if (this.page < this.page_count) {
                this.page++;
                this.request();
            } else {
            	uni.showToast({
					title: '暂无更多商品',
					icon: 'none'
				})
			}
        },
	    methods: {
			routeGo(e) {
				if (e.video_url && this.getVideo == 1) {
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${e.id}`
					});
				} else {
					uni.navigateTo({
						url: e.page_url
					});
				}

			},
            // 数据请求
            async request(status) {
                const res = await this.$request({
	                url: this.$api.default.goods_list,
	                method: 'get',
	                data: {
                        page: this.page,
                        cat_id: this.cat_id,
                        sort: this.sort,
                        sort_type: this.sort_type,
                        keyword: '',
                        coupon_id: this.coupon_id,
                        sign: '',
	                }
                });
                if (res.code === 0) {
                	if (status === 0) this.goods_list=[];
	                this.dataProcessing(res.data.list);
                    this.page_count = res.data.pagination.page_count;
                } else {
                    uni.showModal({
	                    title: '提示',
	                    content: res.msg,
                    })
                }
            },

            // 处理数据
            dataProcessing(list) {
                for (let i = 0; i < list.length; i+=2) {
                    if (i+1 !== list.length) {
                        this.goods_list.push([list[i], list[i+1]]);
                    } else {
                        this.goods_list.push([list[i]]);
                    }
                }
            },

            setSort(data, sort_type) {
				this.first_req = true;
                this.sort = data;
                this.page = 1;
                this.sort_type = sort_type;
				this.goods_list=[];
                this.request(0).then(() => {
                	this.first_req = false;
					this.backTop();
				});
            },

            backTop() {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });
            },
	    },

        components: {
            'app-product-list': appProductList,
	        'app-sort-rule': appSortRule,
			'app-no-goods': appNoGoods,
        },

        onShareAppMessage() {
            return this.$shareAppMessage({
                path: '/pages/goods/list',
                params: {
                    cat_id: this.cat_id,
                }
            });
        },
    }
</script>

<style scoped lang="scss">
	.sort-rule {
		width: #{750upx};
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1500;
	}
    .product-list {
        margin-top: #{96upx};
    }

	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
	.app-no-goods {
		margin-top: #{110upx};
	}
</style>