football/pages/cats/style-eight.vue

<template>
    <view class="style-eight">
        <view class="head" v-if="list.length !== 0">
            <app-head-navigation @click="active" :list="list"></app-head-navigation>
        </view>
        <view :class="list.length === 0 && goods_list.length !== 0 ? '' : 'product'" v-if="goods_list.length !== 0">
            <app-product-list @routeGo="route_go" :goods_list="goods_list" theme="default"></app-product-list>
        </view>

        <template v-if="goods_list.length === 0 && list.length !== 0">
            <view class="no-empty main-center">
                <app-no-goods background="#f7f7f7" title="该分类下无相关内容哦~"></app-no-goods>
            </view>
        </template>

        <template v-if="list.length === 0 && goods_list.length === 0">
            <view class="no-empty main-center">
                <app-no-goods background="#f7f7f7" title="该分类下无相关内容哦~"></app-no-goods>
            </view>
        </template>

    </view>
</template>

<script>
    import { mapGetters } from 'vuex';
    import appHeadNavigation from '../../components/page-component/app-head-navigation/app-head-navigation.vue';
    import appProductList from '../../components/page-component/app-product-list/app-product-list.vue';
    import appNoGoods from '../../components/page-component/app-no-goods/app-no-goods.vue';

    export default {
        name: "style-eight",

        components: {
            'app-head-navigation': appHeadNavigation,
            'app-product-list': appProductList,
            'app-no-goods': appNoGoods
        },

        props: [`goods_list`, `list`],

        computed: {
            ...mapGetters('mallConfig', {
                getVideo: 'getVideo'
            }),
        },

        methods: {
            route_go(e) {
                // #ifndef MP-BAIDU
                if (e.video_url && this.getVideo == 1) {
                    uni.navigateTo({
                        url: `/pages/goods/video?goods_id=${e.id}&sign=${e.sign}`
                    });
                } else {
                    uni.navigateTo({
                        url: e.page_url
                    });
                }
                // #endif

                // #ifdef MP-BAIDU
                uni.navigateTo({
                    url: e.page_url
                });
                // #endif
            },

            active(data) {
                this.$emit('active', data);
            }
        }
    }
</script>

<style scoped lang="scss">
    .style-eight {
        width: #{750upx};
    }
    .head {
        position: fixed;
        top: #{88upx};
        left: 0;
        z-index: 1000;
    }
    .product {
        margin-top: #{188upx};
    }
    .no-empty {
        width: 100%;
        margin-top: #{250upx};
        background-color: #f7f7f7;
    }
</style>