|
|
|
@ -9,14 +9,8 @@
|
|
|
|
|
</view> |
|
|
|
|
<view class="group-box"> |
|
|
|
|
<view class="goods-item" v-for="(groupon, index) in grouponList" :key="groupon.id"> |
|
|
|
|
<activity-card |
|
|
|
|
:cId="groupon.id" |
|
|
|
|
:title="groupon.title" |
|
|
|
|
:info="groupon.info" |
|
|
|
|
:img="groupon.image" |
|
|
|
|
:price="groupon.price" |
|
|
|
|
:productPrice="groupon.productPrice" |
|
|
|
|
> |
|
|
|
|
<activity-card :cId="groupon.id" :title="groupon.title" :info="groupon.info" :img="groupon.image" |
|
|
|
|
:price="groupon.price" :productPrice="groupon.productPrice"> |
|
|
|
|
<block slot="tag"> |
|
|
|
|
<view class="tag" v-if="index < 3">TOP{{ index + 1 }}</view> |
|
|
|
|
</block> |
|
|
|
@ -29,30 +23,30 @@
|
|
|
|
|
<text class="group-num">{{ groupon.people || 0 }}人团</text> |
|
|
|
|
</view> |
|
|
|
|
</block> |
|
|
|
|
<block slot="btn"><button class="cu-btn buy-btn" @tap.stop="jump('/pages/activity/GroupDetails/index', { id: groupon.id })">马上拼</button></block> |
|
|
|
|
<block slot="btn"><button class="cu-btn buy-btn" |
|
|
|
|
@tap.stop="jump('/pages/activity/GroupDetails/index', { id: groupon.id })">马上拼</button></block> |
|
|
|
|
</activity-card> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- 空白 --> |
|
|
|
|
<!-- <Shop-empty v-if="!grouponList.length && !isLoading" :emptyData="emptyData"></Shop-empty>--> |
|
|
|
|
<!-- 加载更多 --> |
|
|
|
|
<view v-if="grouponList.length" class="cu-load text-gray" :class="loadStatus"></view> |
|
|
|
|
<!-- loading --> |
|
|
|
|
<Shop-load v-model="isLoading"></Shop-load> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
<!-- 自定义底部导航 --> |
|
|
|
|
<Shop-tabbar></Shop-tabbar> |
|
|
|
|
<Loading :loaded="loaded" :loading="loading"></Loading> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import activityCard from './children/activity-card.vue'; |
|
|
|
|
import { getCombinationList } from "@/api/activity"; |
|
|
|
|
export default { |
|
|
|
|
import activityCard from './children/activity-card.vue'; |
|
|
|
|
import Loading from "@/components/Loading"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
getCombinationList |
|
|
|
|
} from "@/api/activity"; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
activityCard |
|
|
|
|
activityCard, |
|
|
|
|
Loading |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
@ -62,11 +56,11 @@ export default {
|
|
|
|
|
path: '/pages/index/index', |
|
|
|
|
pathText: '去首页逛逛' |
|
|
|
|
}, |
|
|
|
|
status:'', |
|
|
|
|
isLoading: true, |
|
|
|
|
loadStatus: '', //loading,over |
|
|
|
|
loaded: false, |
|
|
|
|
loading: false, |
|
|
|
|
lastPage: 0, |
|
|
|
|
currentPage: 1, |
|
|
|
|
limit: 10, |
|
|
|
|
grouponList: [] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
@ -85,26 +79,21 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
// 加载更多 |
|
|
|
|
loadMore() { |
|
|
|
|
if (this.currentPage < this.lastPage) { |
|
|
|
|
this.currentPage += 1; |
|
|
|
|
this.getGrouponList(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
// 拼团列表 |
|
|
|
|
getGrouponList() { |
|
|
|
|
let that = this; |
|
|
|
|
that.isLoading = true; |
|
|
|
|
that.loadStatus = 'loading'; |
|
|
|
|
getCombinationList({ page:that.currentPage, limit: 10 }).then(res => { |
|
|
|
|
that.status = res.data.length < 10; |
|
|
|
|
that.grouponList.push.apply(that.grouponList, res.data); |
|
|
|
|
that.lastPage = res.data.last_page; |
|
|
|
|
if (that.currentPage < res.data.last_page) { |
|
|
|
|
that.loadStatus = ''; |
|
|
|
|
} else { |
|
|
|
|
that.loadStatus = 'over'; |
|
|
|
|
} |
|
|
|
|
that.loading = false; |
|
|
|
|
if (this.loading || this.loaded) return; |
|
|
|
|
this.loading = true; |
|
|
|
|
getCombinationList({ |
|
|
|
|
page: that.currentPage, |
|
|
|
|
limit: this.limit |
|
|
|
|
}).then(res => { |
|
|
|
|
that.grouponList = that.grouponList.concat(res.data.storeCombinationQueryVos) |
|
|
|
|
this.currentPage++; |
|
|
|
|
this.loaded = res.data.storeCombinationQueryVos.length < this.limit; |
|
|
|
|
this.loading = false; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// that.$api('goods.grouponList', { |
|
|
|
@ -123,43 +112,51 @@ export default {
|
|
|
|
|
// } |
|
|
|
|
// }); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onReachBottom() { |
|
|
|
|
!this.loading && this.getGrouponList(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
.group-wrap { |
|
|
|
|
.group-wrap { |
|
|
|
|
background: url('~@/static/images/index-bg.png') no-repeat; |
|
|
|
|
background-size: 100% 374rpx; |
|
|
|
|
} |
|
|
|
|
.group-head { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.group-head { |
|
|
|
|
padding: 0 25rpx; |
|
|
|
|
height: 100rpx; |
|
|
|
|
|
|
|
|
|
.group-head__title { |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.group-head__notice { |
|
|
|
|
font-size: 26rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: rgba(255, 255, 255, 1); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.group-box { |
|
|
|
|
.group-box { |
|
|
|
|
width: 710rpx; |
|
|
|
|
background: linear-gradient(#fff, #f5f5f5); |
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
min-height: 1000rpx; |
|
|
|
|
|
|
|
|
|
.goods-item { |
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
position: relative; |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
|
|
|
|
.tag { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
@ -174,15 +171,19 @@ export default {
|
|
|
|
|
font-weight: bold; |
|
|
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.goods-right { |
|
|
|
|
width: 460rpx; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
width: 460rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tip { |
|
|
|
|
width: 460rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.buy-btn { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 0; |
|
|
|
@ -198,6 +199,7 @@ export default {
|
|
|
|
|
color: #fff; |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.group-num { |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
@ -205,11 +207,13 @@ export default {
|
|
|
|
|
color: rgba(153, 153, 153, 1); |
|
|
|
|
margin-left: 20rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.sell-box { |
|
|
|
|
background: rgba(255, 224, 226, 0.3); |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
line-height: 32rpx; |
|
|
|
|
padding: 0 10rpx; |
|
|
|
|
|
|
|
|
|
.sell-num { |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
@ -224,5 +228,5 @@ export default {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|