wangziheng
/
crmeb_shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							{extend name="public/container"}
{block name="title"}已收藏商品{/block}
{block name="content"}
<body style="background:#fff;">
<div id="collect" class="user-collection-list">
    <section ref="bsDom">
        <div>
        <ul>
            <li class="border-1px" v-for="(item,index) in data.list" :class="{fail:item.is_fail == true}" v-cloak="">
                <a :href="productUrl(item)">
                    <div class="picture"><img :src="item.image" /></div>
                    <div class="info-content flex">
                        <p class="pro-tit" v-text="item.store_name + '[秒杀产品]'" v-if="item.category == 'product_seckill'"></p>
                        <p class="pro-tit" v-text="item.store_name + '[普通产品]'" v-else-if="item.category == 'product'"></p>
                        <p class="pro-tit" v-text="item.store_name" v-else></p>
                        <p class="price">
                            <span v-text="'￥'+item.price"></span>
                            <span class="old-price">￥{{item.ot_price}}</span>
                        </p>
                        <p class="count">{{ item.is_fail == true ? '已失效' : '已售'+item.sales }}</p>
                    </div>
                </a>
                <div class="collection-delete" @click="removeCollect(item,index)"></div>
            </li>
        </ul>
            <p style="background-color: #fff;" class="loading-line" v-show="loading == true"><i></i><span>正在加载中</span><i></i></p>
            <p style="background-color: #fff;" class="loading-line" v-show="loading == false && data.loaded == false" v-cloak=""><i></i><span>加载更多</span><i></i></p>
            <p style="background-color: #fff;" class="loading-line" v-show="loading == false && data.loaded == true" v-cloak=""><i></i><span>没有更多了</span><i></i></p>
        </div>

    </section>
</div>
<script>
    require(['vue','axios','better-scroll','helper','store'],function(Vue,axios,BScroll,$h,storeApi){
        new Vue({
            el:"#collect",
            data:{
                data:{
                    first:0,
                    limit:8,
                    list:[],
                    loaded:false,
                    top:0
                },
                loading: false,
                scroll:null
            },
            methods:{
                removeCollect:function (product,index){
                    var that = this;
                    storeApi.removeCollectProduct(product.pid,function(){
                        that.data.list.splice(index,1);
                    });
                },
                productUrl:function(product){
                    if(product.category == 'product_seckill'){
                        return product.is_fail == true ? 'javascript:void(0);' : $h.U({c:'store',a:'seckill_detail',p:{id:product.pid}});
                    }else if(product.category == 'product'){
                        return product.is_fail == true ? 'javascript:void(0);' : $h.U({c:'store',a:'detail',p:{id:product.pid}});
                    }else{
                        return 'javascript:void(0);';
                    }
                },
                getList:function(){
                    if(this.loading) return ;
                    var that = this,group = that.data;
                    if(group.loaded) return ;
                    this.loading = true;
                    storeApi.getCollectProduct({
                        first:group.first,
                        limit:group.limit
                    },function(res){
                        var list = res.data.data;
                        group.loaded = list.length < group.limit;
                        group.first += list.length;
                        group.list = group.list.concat(list);
                        that.loading = false;
                        that.$set(that,'data',group);
                        that.$nextTick(function(){
                            if(list.length) that.bScrollInit();
                            that.scroll.finishPullUp();
                        });
                    },function(err){that.loading = false; return true;});
                },
                bScrollInit:function () {
                    var that = this;
                    if(this.scroll === null){
                        this.$refs.bsDom.style.height = (document.documentElement.clientHeight)+'px';
                        this.$refs.bsDom.style.overflow = 'hidden';
                        this.scroll = new BScroll(this.$refs.bsDom,{click:true,probeType:1,cancelable:false,deceleration:0.005,snapThreshold:0.01});
                        this.scroll.on('pullingUp',function(){
                            that.loading == false && that.getList();
                        })
                    }else{
                        this.scroll.refresh();
                    }

                }
            },
            mounted:function(){
                this.bScrollInit();
                this.getList();
            }
        })
    })
</script>
{/block}