infinite-loading 插件

<template>
    <div id="cart" class="has-top">
        <!-- <v-header title="购物车" :back="hasBack">
            <template v-if="noData===0">
                <span @click="onToggleEdit(1)" v-if="!isEdit" slot="right" class="txt fs14 color-black">管理</span>
                <span @click="onToggleEdit(0)" v-else slot="right" class="txt fs14 color-black">完成</span>
            </template>
        </v-header> -->
            <div  class="cart-list-section noData">
                <div class="topWhite">
                    <img src="../../assets/images/status/success.png" alt="" srcset="">
                    <h2>订单处理成功</h2>
                    <p>支付金额： <span>¥ {{payMoney}}</span></p>
                    <div class="btm">
                        <a class="view" @click="view()">查看订单</a>
                        <a class="back" @click="back()">返回首页</a>
                    </div>
                    <!-- <template>
                        <no-data :imageSrc="noDataImg" :text="noDataText">
                            <router-link to="/" tag="div" class="no-data-btn">去挑选好货</router-link>
                        </no-data>
                    </template> -->
                </div>
                <div class="banner">
                    <router-link to="/beshopkepper">
                    <img src="../../assets/images/status/hysuccess.jpg" alt="" srcset="">
                    </router-link>
                </div>
                <!--猜你喜欢-->
                <div class="guess-like" v-if="guessList.length !== 0">
                    <div class="guess-like-title">- 猜你喜欢 -</div>
                    <div class="guess-like-section">
                        <!-- <scroller :on-infinite="getGuessList" ref="mainScroller" id="product-comment" class="has-top"> -->
                          <ul class="guess-like-list">
                            <li class="guess-like-item" v-for="item in guessList"  :key="item.skuId" :skuId="item.skuId"  @click="onClickItem(item)">
                                <img :src="item.thumbUrlForShopNow"  class="guess-thumbUrl">
                                <img v-if='item.allStockFlag===1' src="../../assets/images/sellout.png" alt="" class="sellout">
                                <div class="item-detail">
                                    <div class="guess-title">{{item.productName}}</div>
                                    <div class="guess-desc">{{item.intro}}</div>
                                    <div class="guess-price-box member">
                                        <span class="guess-price">
                                            <span class="price-ion">¥</span>
                                            {{item.minPrice | currency}}/
                                        </span>
                                        <span class="guess-marketPrice">
                                             <span class="price-ion">¥</span>
                                             {{item.minMarketPrice | currency}}
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <infinite-loading @infinite="infiniteHandler">
                                <div slot="no-more">我也是有底线的</div>
                            </infinite-loading>
                          </ul>
                    </div>
                </div>

            </div>
        <main-tab></main-tab>
    </div>
</template>
<style scoped>
.cart-list-section{
    margin: 0px;
}
.no-data{
    margin: 0px;
}
.topWhite{
    background: #fff;
    text-align: center;
    padding-top: 1.2rem;
    padding-bottom: 1.1rem;
}
.topWhite img{
    width: 2.68rem;
}
.topWhite h2{
    font-size: 0.5rem;
    padding-top: 0.5rem;
}
.topWhite p{
    font-size: 0.42rem;
    padding: 0.5rem 0;
    color: #a9a9a9;
}
.topWhite p span{
    color: #ff4e50;
}
.topWhite .btm{
    width: 6.3rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.topWhite .btm .view{
    width: 2.72rem;
    height: 0.9rem;
    line-height: 0.9rem;
    display: block;
    border: 1px solid #ff4e50;
    border-radius: 0.45rem;
    color: #ff4e50;
}
.topWhite .btm .back{
    width: 2.72rem;
    height: 0.9rem;
    line-height: 0.9rem;
    display: block;
    border: 1px solid #ff4e50;
    border-radius: 0.45rem;
    background: #ff4e50;
    color: #fff;
}
.banner a{
    display: block;
}
.banner img{
    width: 100%;
}
</style>

<script type="text/javascript">
import {XImg} from 'vux'
import CartService from '@/services/CartService'
import UserService from '@/services/UserService'
import util from '../../utils/Common.js'
import InfiniteLoading from 'vue-infinite-loading'

export default {
    initWechat: true,
    components: {
        'coupon-dialog': require('@/components/CouponDialog'),
        XImg,
        InfiniteLoading,
    },
    data () {
        return {
            noDataImg:'../assets/images/cart/cartNull.png',
            noDataText:"洪荒之力都用上了还是空空如也~",
            noData:'',
            list: [],
            guessList:[],
            vipType:'',
            isEdit: false,
            hasBack: false,
            user: {},
            levelConfig: [],
            pageOffset:1,
            pageSize:15,
            totalPage: 99,
            zero:0,
            defaultImg:require('../../assets/images/default-img-1.png'),
            orderCode: '',
            payMoney: 0
        }
    },
    computed: {
        //猜你喜欢加载更多
        loadDisabled () {
            window.scrollTop(0);
            return this.isLoading && this.page === this.totalPage;
        },
        //合计
        total () {
            if (!this.amount) {
                return 0
            }
            return this.list.map(store => {
                return store.skuProductList.filter(sku => sku.selected).reduce((a, b) => {
                    if (b.productType == 3) {
                        return a + b.retailPrice * b.quantity;
                    }
                    return a + b.currentVipTypePrice * b.quantity;
                }, 0);
            }).reduce((a, b) => a + b, 0);
        },
        //商品总数量
        amount () {
            return this.list.map(store => {
                return store.skuProductList.filter(sku => sku.selected)
                        .map(item => item.quantity)
                        .reduce((a, b) => a + b, 0)
            }).reduce((a, b) => a + b, 0);
        },
        //选中商品的id
        selectedSkuIds () {
            return this.list.map(store => {
                return store.skuProductList.filter(sku => sku.selected).map(sku => sku.skuId);
            }).reduce((a, b) => [...a, ...b], []);
        },
        //折扣
        discountTotal () {
            return this.list.map(store => {
                return store.skuProductList.filter(sku => sku.selected).reduce((a, b) => {
                    if (b.productType == 3) {
                        return a
                    }
                    return a + (b.retailPrice - b.currentVipTypePrice) * b.quantity
                }, 0);
            }).reduce((a, b) => a + b, 0);
        },
        //全选
        allState () {
            return this.list.filter(sku => sku.selected).length === this.list.length;
        },
        //除去下架和售罄的总数量
        allQuantity(){
            let num=this.list.map(store => {
                return store.skuProductList.filter(item=>item.stock!==0&&item.status)
                    .map(item => item.quantity)
                    .reduce((a, b) => a + b, 0)
            }).reduce((a, b) => a + b, 0);
            return num;
        }
    },
    methods: {
        view() {
            this.$router.push('/order/detail/'+this.orderCode)
        },
        back() {
            this.$router.push('/');
        },
        //商品详情
        onClickItem (item) {
            util.goToProduct(this,item.productId);
        },
        onNext () {
            if (this.amount) {
                let skuIds = this.selectedSkuIds.join(',');
                window.location.href = '/pay/cart?skuIds=' + skuIds
            } else {
                this.showError('请选择商品');
            }
        },
        //获取购物车列表
        getList () {
            CartService.getList(this, list => {
                this.list=this.initNotSelected (list);
                this.noData=(this.list.length > 0)?0:1;
                this.list.map((store) => {
                    store.skuProductList.map((item) => {
                        if(item.stock!==0&&item.status) {
                            item.visibility = false;
                        }else {
                            item.visibility = true;
                        }
                    });
                    return store;
                });
            });
        },
        //获取猜你喜欢列表
        getGuessList () {
            //this.pageOffset ++;
            if(this.isLoading) {
                return ;
            }
            if(this.pageOffset > this.totalPage) {
                this.$refs.mainScroller.finishInfinite(true);
                return;
            }
            this.isLoading = true;
            CartService.getGuessList(this,this.pageOffset,this.pageSize, list => {
                this.isLoading = false;
                this.pageOffset = list.pageOffset;
                this.totalPage = list.totalPage;
                if(this.pageOffset === 1){
                    this.guessList=list.datas;
                }
                // if (this.pageOffset >= 2) {
                //     for(let i=0; i<list.datas.length; i++){
                //         this.$set(this.guessList, this.guessList.length, list.datas[i]);
                //     }
                // }
                // this.$refs.mainScroller.setTotal(list.total);
                // this.$refs.mainScroller.finishInfinite(this.pageOffset >= this.totalPage);
            });
        },
        //初始化商品选中
        initNotSelected (list) {
            return list.map((value) => {
                value.selected = false;
                value.skuProductList.forEach((item) => item.selected = false);
                return value;
            });
        },
        //是否选中商品
        onSelect(sku, store) {
            if(sku.visibility===false){
                sku.selected = !sku.selected;
            }
            store.selected = !store.skuProductList.find(item => !item.selected)//选中店铺
        },
        //全选
        toggleAll () {
            let selected = !this.allState;
            return this.list.map((store) => {
                store.selected = selected;
                store.skuProductList.map((item) => {
                    if(item.stock!==0&&item.status) {
                        item.selected = selected
                    }
                });
                return store;
            });
        },
        //是否选中店铺
        // onSelectStore(store) {
        //     store.selected = !store.selected;
        //     store.items.forEach(item => item.selected = store.selected)
        // },
        //管理商品---编辑
        onToggleEdit (num) {
            this.isEdit = !this.isEdit;
            if(num===1){
                this.list.map((store) => {
                    store.selected = false;
                    store.skuProductList.map((item) => {
                            item.visibility = false;
                            item.selected = false;
                    });
                    return store;
                });
            }else {
                this.list.map((store) => {
                    store.selected = false;
                    store.skuProductList.map((item) => {
                        item.selected = false;
                        if(item.stock!==0&&item.status) {
                            item.visibility = false;
                        }else {
                            item.visibility = true;
                        }
                    });
                    return store;
                });
            }

        },
        //删除商品
        onDelete () {
            if (this.amount) {
                CartService.removeBySkuIds(this, this.selectedSkuIds, () => {
                    this.showError('您已成功将商品移除购物车');
                    this.getList();
                });
            }else {
                this.showError('请选择商品');
            }
        },
        // 无限加载
        infiniteHandler($state) {
            let pageSize = 15
            this.pageOffset = this.pageOffset + 1
            CartService.getGuessList(this,this.pageOffset,this.pageSize, list => {
                console.log(list)
                let totalPage = list.totalPage
                if (this.pageOffset <= totalPage) {

                    if (this.pageOffset > 1) {
                        for(let i=0; i<list.datas.length; i++){
                            this.guessList.push(list.datas[i])
                            //this.$set(this.guessList, this.guessList.length, list.datas[i]);
                        }
                    }

                    $state.loaded();
                }else{
                    $state.complete();
                }
            });
        },
    },
    created () {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function(e) {
            if (document.URL.split('/')[document.URL.split('/').length - 1] == 'cart') {
                history.pushState(null, null, document.URL);
            }
        });
        /**
         *@desc  获取用户信息（登录校验）---->获取购物车列表、猜你喜欢
         *@author zwn
         *@date 2018/10/10
         */
        UserService.getInfo(
            this, 
            (user) => {
                this.user = user;
                this.vipType=user.vipType;
                $(window).scrollTop(0);
                this.getList();
                this.getGuessList();
                console.log(this.allQuantity);
            }
        );
        /**
         *@desc  子组件更改商品数量之后更新购物车数据
         *@author zwn
         *@date 2018/10/10
         */
        this.$root.$on('cart.item.amount.update', (skuId, value) => {
            this.list.forEach((store) => {
                store.skuProductList.filter(item =>item.skuId === skuId).map(item => {
                    CartService.updateCart(this, item, value, () => {
                        item.quantity = value;
                    })
                });
            })
        })
    },
    mounted () {
        this.orderCode = this.$route.query.orderCode
        this.payMoney = this.$route.query.payMoney / 100
        //设置auto  内部可以滚动，触发上滑加载更多
        // document.querySelector('#home').style.overflow = 'auto'
    },
    beforeRouteUpdate(to, from, next) {
        next();
        document.body.scrollTop=0;
        this.getSkuInfoById(to.params.skuId, true);
    }
}
</script>

 

 

 外部不要加 overflow-y:auto

 外部不要加 overflow-y:auto

 外部不要加 overflow-y:auto

有多余的代码 不管 看主要代码就好

 

转载于:https://www.cnblogs.com/suanmei/p/10779431.html