fav-product-list.vue 3.65 KB
<template>
    <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <ul class="fav-product-list">
            <li v-for="item in productData" track-by="fav_id">
                <div class="fav-del {{editmodel ? 'delshow': ''}}" @click="delItem($index, item.fav_id)">
                    <span class="fav-del-span"></span>
                </div>
                <a :href="item.link">
                    <div class="fav-img-box">
                        <img :src="item.imgUrl" alt=""/>
                    </div>
                    <div class="fav-info-list">
                        <span class="title">{{item.title}}</span>
                        <br/>
                        <div class="fav-price">
                            <span class="new-price" v-if="item.discountPrice">{{item.discountPrice}}</span>
                            <span class="{{ item.discountPrice ? 'price-underline' : ''}}">{{item.price}}</span>
                        </div>
                        <br/>
                        <div class="save-price">
                            <span class="sell-out" v-if="item.sellOut || item.invalidGoods">{{item.sellOut ? '已售罄' : '已下架'}}</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <div class="fav-null-box {{ nullbox }}">
            <span class="fav-null">您暂无收藏任何商品</span>
            <a slot="go-shopping" class="go-shopping" :href="productUrl">随便逛逛</a>
        </div>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
    const tip = require('common/tip');

    module.exports = {
        props: ['productUrl'],
        data() {
            return {
                nullbox : 'hide',
                busy: false,
                editmodel: false,
                page: 0,
                productData: []
            };
        },
        methods: {
            loadMore: function() {
                let _this = this;
                this.busy = true;

                $.ajax({
                    url: '/home/favorite/favpaging',
                    data: {
                        page : ++_this.page
                    }
                }).then(result => {
                    if (result.isend) {
                        _this.busy = true;
                    } else {
                        _this.busy = false;
                    }

                    if (result.list.length) {
                        result.list.forEach(function(o){
                            _this.productData.push(o);
                        });
                    }

                    _this.nullbox = _this.productData.length ? "hide" : "";
                }).fail(() => {
                    tip('网络错误');
                });
            },
            editModel(action) {
                this.editmodel = action;
            },
            delItem(index, id) {
                let _this = this;
                $.ajax({
                    method: 'POST',
                    url: '/home/del-favdel',
                    data: {
                        favId: id,
                        type: 'product'
                    }
                }).then(function(data) {
                    if (data.code === 200) {
                        _this.productData.splice(index, 1);
                    } else if (data.code === 400) {
                        tip(data.message);
                    } else {
                        tip('刪除收藏失败');
                    }
                }).fail(function() {
                    tip('网络错误');
                });
            }
        }
    };
</script>