外部不要加 overflow-y:auto
外部不要加 overflow-y:auto
外部不要加 overflow-y:auto
有多余的代码 不管 看主要代码就好
<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
有多余的代码 不管 看主要代码就好