football/pages/favorite/favorite.vue

<template>
    <app-layout>
        <app-tab-nav :tabList="tabList" :activeItem="activeTab" @click="tabStatus" :theme="theme"></app-tab-nav>
        <app-goods-list v-if="activeTab == 1" :list="list"></app-goods-list>
        <view v-if="activeTab == 2" class="dir-left-wrap">
            <app-special-topic-list :cat-show="false" :topic-list="list"></app-special-topic-list>
        </view>
        <view class="no-list" v-if="list.length === 0 && !first_request">
            <app-no-goods :title="title" background="#f7f7f7"></app-no-goods>
        </view>
    </app-layout>
</template>

<script>
    import appTabNav from "../../components/basic-component/app-tab-nav/app-tab-nav.vue";
    import appGoodsList from "../../components/page-component/app-goods-list/app-goods-list.vue";
    import appSpecialTopicList from "../../components/page-component/app-special-topic/app-special-topic-list.vue";
    import appNoGoods from '../../components/page-component/app-no-goods/app-no-goods.vue';

    import { mapState } from "vuex";

    export default {
        data() {
            return {
                tabList: [
                    {id:1, name: '商品'},
                    {id:2, name: '专题'}
                ],
                loading: false,
                activeTab: '1',
                isRecommend: false,
                page: 2,
                list: [],
                title: '没有任何收藏商品哦~',
                first_request: false,
            }
        },
        components: {
            "app-tab-nav": appTabNav,
            'app-goods-list': appGoodsList,
            'app-special-topic-list': appSpecialTopicList,
            'app-no-goods': appNoGoods,
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                userInfo: state => state.user.info,
            })
        },
        methods: {
            tabStatus(e) {
                if(this.loading) {
                    return false;
                }
                let id = e.currentTarget.dataset.id;
                this.list = [];
                if (id === 2) {
                    this.title = `没有任何收藏专题哦~`;
                } else {
                    this.title = `没有任何收藏商品哦~`;
                }
                this.page = 2;
                this.activeTab = id;
                uni.showLoading({
                    title: '加载中...'
                });
                this.getList();
            },
            getList() {
                let that = this;
                let url;
                this.loading = true;
                if(that.activeTab == 1) {
                    url = that.$api.user.my_favorite_goods
                }else {
                    url = that.$api.user.my_favorite_topic
                }
                // that.list = [];
                let list = [];
                that.$request({
                    url: url,
                    method: 'get',
                }).then(response=>{
                    that.$hideLoading();
                    uni.hideLoading();
                    if(response.code == 0) {
                        that.loading = false;
                        if(that.activeTab == 1) {
                            response.data.list.forEach(function(row,index){
                                row.goods.price_content = row.goods.price;
                                if(row.goods.mch_id > 0) {
                                    row.goods.page_url = '/plugins/mch/goods/goods?id=' + row.goods.id +'&mch_id=' + row.goods.mch_id
                                }else if(row.goods.sign =='advance') {
                                    row.goods.page_url = '/plugins/advance/detail/detail?id=' + row.goods.id
                                }else if(row.goods.sign =='pintuan') {
                                    row.goods.page_url = '/plugins/pt/goods/goods?goods_id=' + row.goods.id
                                }else if(row.goods.sign =='miaosha') {
                                    row.goods.page_url = '/plugins/miaosha/goods/goods?id=' + row.goods.id
                                }else if(row.goods.sign =='gift') {
                                    row.goods.page_url = '/plugins/gift/goods/goods?id=' + row.goods.id
                                }else if(row.goods.sign =='booking') {
                                    row.goods.page_url = '/plugins/book/goods/goods?goods_id=' + row.goods.id
                                }else if(row.goods.sign =='advance') {
                                    row.goods.page_url = 'plugins/advance/detail/detail?id' + row.goods.id
                                }else if(row.goods.sign =='') {
                                    row.goods.page_url = '/pages/goods/goods?id=' + row.goods.id
                                }else {
                                    row.goods.page_url = '/plugins/'+row.goods.sign+'/goods/goods?goods_id=' + row.goods.id
                                }
                                list.push(row.goods);
                                if(index == response.data.list.length -1) {
                                    that.list = list;
                                }
                            })
                        }else {
                            that.list = response.data.list
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.loading = false;
                    that.$hideLoading();
                    uni.hideLoading();
                    that.$event.on(that.$const.EVENT_USER_LOGIN).then(()=>{
                        that.getList();
                    });
                });
            },
            getMore() {
                let that = this;
                if(that.page == 1) {
                    return false
                }
                let url;
                uni.showLoading({
                    text: '加载中...'
                });
                if(that.activeTab == 1) {
                    url = that.$api.user.my_favorite_goods
                }else {
                    url = that.$api.user.my_favorite_topic
                }
                that.$request({
                    url: url,
                    data: {
                        page: that.page
                    },
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code == 0) {
                        if(response.data.list.length > 0) {
                            that.loading = null;
                            that.page++;
                            if(that.activeTab == 1) {
                                let list = [];
                                response.data.list.forEach(function(row,index){
                                    row.goods.price_content = row.goods.price
                                    if(row.goods.mch_id > 0) {
                                        row.goods.page_url = '/plugins/mch/goods/goods?id=' + row.goods.id +'&mch_id=' + row.goods.mch_id
                                    }else if(row.goods.sign =='advance') {
                                        row.goods.page_url = '/plugins/advance/detail/detail?id=' + row.goods.id
                                    }else if(row.goods.sign =='pintuan') {
                                        row.goods.page_url = '/plugins/pt/goods/goods?goods_id=' + row.goods.id
                                    }else if(row.goods.sign =='miaosha') {
                                        row.goods.page_url = '/plugins/miaosha/goods/goods?id=' + row.goods.id
                                    }else if(row.goods.sign =='booking') {
                                        row.goods.page_url = '/plugins/book/goods/goods?goods_id=' + row.goods.id
                                    }else if(row.goods.sign =='advance') {
                                        row.goods.page_url = 'plugins/advance/detail/detail?id' + row.goods.id
                                    }else if(row.goods.sign =='gift') {
                                        row.goods.page_url = '/plugins/gift/goods/goods?id=' + row.goods.id
                                    }else if(row.goods.sign =='') {
                                        row.goods.page_url = '/pages/goods/goods?id=' + row.goods.id
                                    }else {
                                        row.goods.page_url = '/plugins/'+row.goods.sign+'/goods/goods?goods_id=' + row.goods.id
                                    }
                                    list.push(row.goods)
                                    if(index == response.data.list.length - 1) {
                                        that.list = that.list.concat(list);
                                    }
                                })
                            }else {
                                that.list = that.list.concat(response.data.list);
                            }
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(e => {
                    uni.hideLoading();
                });
            },
            toTopic(id) {
                uni.navigateTo({
                    url: '/pages/topic/topic?id=' + id
                });
            },
        },
        onReachBottom() {
            this.getMore();
        },
        onLoad() {
            this.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            this.getList();
        }
    }
</script>

<style scoped lang="scss">
    .goods-item {
        width: #{365rpx};
        margin-top: #{20rpx};
        background-color: #fff;
        height: #{440rpx};
        border-radius: #{10rpx};
    }

    .goods-item .goods-img {
        height: #{325rpx};
        width: #{365rpx};
    }

    .goods-item .goods-name {
        font-size: #{30rpx};
        color: #686868;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
        padding: 0 #{20rpx};
    }

    .goods-item .goods-price {
        margin-top: #{8rpx};
        text-align: center;
    }

    .topic-item {
        background-color: #fff;
        padding: #{32rpx} #{24rpx};
        display: block;
        margin-bottom: #{10rpx};
        width: 100%;
        position: relative;
    }

    .topic-small-img {
        width: #{268rpx};
        height: #{202rpx};
    }

    .topic-name {
        color: #686868;
        font-size: #{34rpx};
        margin-bottom: #{24rpx};
        float: left;
        width: #{400rpx};
    }

    .topic-small-num {
        position: absolute;
        bottom: #{24rpx};
        left: #{32rpx};
        font-size: #{24rpx};
        color: #999;
    }
    .no-list {
        margin-top: #{150upx};
    }
</style>