|
|
@ -1,29 +1,38 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view> |
|
|
<view> |
|
|
<lf-nav title="秒杀专场" :showIcon="true" bgColor="#fff"></lf-nav> |
|
|
<lf-nav title="秒杀专场" :showIcon="true" bgColor="#fff"></lf-nav> |
|
|
<view class="content"> |
|
|
|
|
|
<view class="card" v-for="(item, index) in list" :key="index" |
|
|
|
|
|
@click="$url('/pages/shop/goodsdetail?type=seckill&id='+ item.goods.id)"> |
|
|
|
|
|
<view class="goods-img"> |
|
|
|
|
|
<image class="img" :src="item.goods.img"></image> |
|
|
|
|
|
<view class="tips">TODO已有0人购买</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="goods-info"> |
|
|
|
|
|
<view> |
|
|
|
|
|
<view class="lf-line-2 title">{{ item.goods.name }}</view> |
|
|
|
|
|
<view class="desc">距离开始还剩余 20:34:18</view> |
|
|
|
|
|
|
|
|
<scroll-view :style="{height: autoHeight}" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" |
|
|
|
|
|
@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh"> |
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
<view class="card" v-for="(item, index) in list" :key="index" |
|
|
|
|
|
@click="$url('/pages/shop/goodsdetail?type=seckill&id='+ item.goods.id)"> |
|
|
|
|
|
<view class="goods-img"> |
|
|
|
|
|
<image class="img" :src="item.goods.img"></image> |
|
|
|
|
|
<view class="tips lf-line-1">已有{{item.sell_num}}人购买</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="lf-row-between"> |
|
|
|
|
|
<view class="price"> |
|
|
|
|
|
<text>¥{{ item.goods.max_price }}</text> |
|
|
|
|
|
<text>¥{{ item.goods.market_price }}</text> |
|
|
|
|
|
|
|
|
<view class="goods-info"> |
|
|
|
|
|
<view> |
|
|
|
|
|
<view class="lf-line-2 title lf-m-b-16">{{ item.goods.name }}</view> |
|
|
|
|
|
<view class="desc" v-if="item.seckill.end_left_time.length==0">距离开始还剩余 {{item.seckill.start_left_time[0]}}天{{item.seckill.start_left_time[1]}}时{{item.seckill.start_left_time[2]}}分{{item.seckill.start_left_time[3]}}秒</view> |
|
|
|
|
|
<view class="desc" v-if="item.seckill.start_left_time.length==0">距离结束还剩余 {{item.seckill.end_left_time[0]}}天{{item.seckill.end_left_time[1]}}时{{item.seckill.end_left_time[2]}}分{{item.seckill.end_left_time[3]}}秒</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="lf-row-between"> |
|
|
|
|
|
<view class="price"> |
|
|
|
|
|
<text>¥{{ item.goods.max_price }}</text> |
|
|
|
|
|
<text>¥{{ item.goods.market_price }}</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="btn" hover-class="lf-opacity">立即秒杀</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="btn" hover-class="lf-opacity">立即秒杀</view> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<!-- 空数据的情况 --> |
|
|
|
|
|
<view class="loading-more"> |
|
|
|
|
|
<text v-if="list.length != 0" |
|
|
|
|
|
:class="{'loading-more-text': loadingClass}">{{ loadingText }}</text> |
|
|
|
|
|
<lf-nocontent src="/static/images/empty.png" v-else></lf-nocontent> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<lf-nocontent src="/static/images/empty.png" v-if="list.length <= 0"></lf-nocontent> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
</scroll-view> |
|
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top> |
|
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
@ -32,19 +41,71 @@ |
|
|
export default { |
|
|
export default { |
|
|
data(){ |
|
|
data(){ |
|
|
return { |
|
|
return { |
|
|
list: [] |
|
|
|
|
|
|
|
|
list: [], |
|
|
|
|
|
page: 1, |
|
|
|
|
|
isPage: true, |
|
|
|
|
|
loadingClass: true, |
|
|
|
|
|
loadingText: '正在加载中', |
|
|
|
|
|
scrollH: 0, |
|
|
|
|
|
nav_height: 0, |
|
|
|
|
|
isRefresher: true, |
|
|
|
|
|
pageSize: 10 |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
autoHeight(){ |
|
|
|
|
|
return `calc(${this.scrollH}px - ${this.nav_height}px - 180rpx)`; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad(){ |
|
|
onLoad(){ |
|
|
|
|
|
let info = uni.getSystemInfoSync(); |
|
|
|
|
|
this.scrollH = info.screenHeight; |
|
|
this.getSeckillList(); |
|
|
this.getSeckillList(); |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
getSeckillList(){ |
|
|
|
|
|
|
|
|
// 页面触底,加载下一页 |
|
|
|
|
|
onScrolltolower(){ |
|
|
|
|
|
if(this.isPage){ |
|
|
|
|
|
this.page = this.page + 1; |
|
|
|
|
|
this.getMyActivity(); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
// 下拉刷新处理 |
|
|
|
|
|
refreshFn(options){ |
|
|
|
|
|
this.page = 1; |
|
|
|
|
|
this.isPage = true; |
|
|
|
|
|
this.loadingClass = true; |
|
|
|
|
|
this.list = [] |
|
|
|
|
|
this.loadingText = '正在加载中'; |
|
|
|
|
|
this.getSeckillList(options); |
|
|
|
|
|
}, |
|
|
|
|
|
// scroll-view 下拉刷新 |
|
|
|
|
|
onRefresherrefresh(){ |
|
|
|
|
|
this.isRefresher = true; |
|
|
|
|
|
this.refreshFn({type: 'scrollRefresh'}); |
|
|
|
|
|
}, |
|
|
|
|
|
getSeckillList(options = {}){ |
|
|
this.$http.get({ |
|
|
this.$http.get({ |
|
|
api: 'api/seckill/all' |
|
|
api: 'api/seckill/all' |
|
|
}).then(res => { |
|
|
}).then(res => { |
|
|
console.log("----", res); |
|
|
console.log("----", res); |
|
|
this.list = res.data.data; |
|
|
|
|
|
|
|
|
let isPage = this.page < res.data.meta.pagination.total_pages?true:false; |
|
|
|
|
|
this.isPage = isPage; |
|
|
|
|
|
if(!isPage) { |
|
|
|
|
|
this.loadingClass = false; |
|
|
|
|
|
this.loadingText = '没有更多数据啦~'; |
|
|
|
|
|
} |
|
|
|
|
|
if(options.type == 'pageRefresh') { |
|
|
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
|
|
}else if(options.type == 'scrollRefresh') { |
|
|
|
|
|
this.isRefresher = false; |
|
|
|
|
|
} |
|
|
|
|
|
if(this.page == 1) { |
|
|
|
|
|
this.list = res.data.data; |
|
|
|
|
|
}else { |
|
|
|
|
|
this.list.push(...res.data.data); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -112,7 +173,7 @@ |
|
|
} |
|
|
} |
|
|
.desc{ |
|
|
.desc{ |
|
|
width: 281rpx; |
|
|
width: 281rpx; |
|
|
height: 35rpx; |
|
|
|
|
|
|
|
|
height: max-content; |
|
|
border-radius: 3rpx; |
|
|
border-radius: 3rpx; |
|
|
background-color: #E9F2F2; |
|
|
background-color: #E9F2F2; |
|
|
font-size: 24rpx; |
|
|
font-size: 24rpx; |
|
|
@ -120,7 +181,6 @@ |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
margin-top: 10rpx; |
|
|
|
|
|
} |
|
|
} |
|
|
.price>text:nth-child(1){ |
|
|
.price>text:nth-child(1){ |
|
|
font-size: 36rpx; |
|
|
font-size: 36rpx; |
|
|
|