|
|
|
@ -2,31 +2,39 @@ |
|
|
|
<view> |
|
|
|
<lf-nav :showIcon="true" bgColor="transparent" :spreadOut="false"></lf-nav> |
|
|
|
<view class="head"> |
|
|
|
<image class="img" mode="widthFix" src="https://picsum.photos/200/300?grayscale"></image> |
|
|
|
<view class="title">热销榜单</view> |
|
|
|
<image class="img" mode="aspectFill" :src="activity_content.topic.image"></image> |
|
|
|
<view class="title">{{activity_content.topic.name}}</view> |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail?id='+ item.id)"> |
|
|
|
<view class="goods-img"> |
|
|
|
<image class="img" src="https://picsum.photos/200/300"></image> |
|
|
|
<view class="ranking"> |
|
|
|
<view class="top">{{ item+1 }}</view> |
|
|
|
<view class="down"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="goods-info"> |
|
|
|
<view> |
|
|
|
<view class="lf-line-2 title">SK-II秋日宠粉体验套装</view> |
|
|
|
<view class="desc">月销量：324</view> |
|
|
|
</view> |
|
|
|
<view class="lf-row-between"> |
|
|
|
<view class="price"> |
|
|
|
<text>¥888</text> |
|
|
|
<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?id='+ item.goods.id)"> |
|
|
|
<view class="goods-img"> |
|
|
|
<image class="img" :src="item.goods.img"></image> |
|
|
|
<!-- <view class="ranking"> |
|
|
|
<view class="top">{{ item+1 }}</view> |
|
|
|
<view class="down"></view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
<view class="goods-info"> |
|
|
|
<view> |
|
|
|
<view class="lf-line-2 title">{{item.goods.name}}</view> |
|
|
|
<view class="desc">月销量：{{item.goods.sale_count}}</view> |
|
|
|
</view> |
|
|
|
<view class="lf-row-between"> |
|
|
|
<view class="price"> |
|
|
|
<text>¥{{item.goods.sell_price}}</text> |
|
|
|
</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> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -34,14 +42,83 @@ |
|
|
|
export default { |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
|
|
|
|
page: 1, |
|
|
|
topic_id: 1, |
|
|
|
activity_content: '', |
|
|
|
list: [], |
|
|
|
isPage: true, |
|
|
|
loadingClass: true, |
|
|
|
loadingText: '正在加载中', |
|
|
|
scrollH: 0, |
|
|
|
nav_height: 0, |
|
|
|
isRefresher: true, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(){ |
|
|
|
|
|
|
|
let info = uni.getSystemInfoSync(); |
|
|
|
this.scrollH = info.screenHeight; |
|
|
|
this.getActivityList(); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
autoHeight() { |
|
|
|
return `calc(${this.scrollH}px - ${this.nav_height}px - 430rpx)`; |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
// 页面触底，加载下一页 |
|
|
|
onScrolltolower() { |
|
|
|
if (this.isPage) { |
|
|
|
this.page = this.page + 1; |
|
|
|
this.getActivityList(); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 下拉刷新处理 |
|
|
|
refreshFn(options) { |
|
|
|
this.page = 1; |
|
|
|
this.isPage = true; |
|
|
|
this.loadingClass = true; |
|
|
|
this.list = [] |
|
|
|
this.loadingText = '正在加载中'; |
|
|
|
this.getActivityList(options); |
|
|
|
}, |
|
|
|
// scroll-view 下拉刷新 |
|
|
|
onRefresherrefresh() { |
|
|
|
this.isRefresher = true; |
|
|
|
this.refreshFn({ |
|
|
|
type: 'scrollRefresh' |
|
|
|
}); |
|
|
|
}, |
|
|
|
getActivityList(options = {}){ |
|
|
|
this.$http.get({ |
|
|
|
api: 'api/topic/list', |
|
|
|
data: { |
|
|
|
topic_id: this.topic_id, |
|
|
|
page: this.page |
|
|
|
}, |
|
|
|
header: { |
|
|
|
Authorization: this.$cookieStorage.get('user_token') |
|
|
|
} |
|
|
|
}).then(res => { |
|
|
|
this.activity_content = res.data.data |
|
|
|
console.log('====',res.data.data) |
|
|
|
let isPage = this.page < res.data.data.goods.total ? 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.goods.data; |
|
|
|
} else { |
|
|
|
this.list.push(...res.data.data.goods.data); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -69,7 +146,7 @@ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 100rpx; |
|
|
|
font-size: 60rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
font-weight: bold; |
|
|
|
font-family: '楷体'; |
|
|
|
|
Shuixiang
4 years ago