148 lines
4.2 KiB
Vue
148 lines
4.2 KiB
Vue
<template>
|
||
<view class="activity-box">
|
||
<view class="activity_header" :style="{'z-index':headerZindex,'background-image':`url(${urlDomain+'crmebimage/presets/group_list_bg.png'})`}">
|
||
<view class='cart_nav'>
|
||
<nav-bar navTitle="拼团列表" iconColor='#fff' :backgroundColor="backgroundColor" :isBackgroundColor="isBackgroundColor"></nav-bar>
|
||
</view>
|
||
</view>
|
||
<view class="list-box" :style="{'z-index':listZindex}">
|
||
<view class="list-item" v-for="(item, index) in groupGood" :key="index">
|
||
<view class="group-bottom acea-row row-between" @click="toGroupDeatil(item)">
|
||
<view class="group-bottom-left">
|
||
<view class="img acea-row row-center row-middle">
|
||
<easy-loadimage
|
||
:image-src="item.imageUrl"
|
||
width="240rpx"
|
||
height="240rpx"
|
||
:radius="10"></easy-loadimage>
|
||
<!-- <image :src="item.imageUrl" mode=""></image> -->
|
||
</view>
|
||
</view>
|
||
<view class="group-bottom-right acea-row row-column row-between">
|
||
<view class="right-top">
|
||
<view class="title line2">
|
||
{{item.productName}}
|
||
</view>
|
||
<view class="pink acea-row">
|
||
<view class="people">{{item.buyCount}}人团</view>
|
||
<view class="groupNum">已拼{{item.latestBuyCount}}份</view>
|
||
</view>
|
||
</view>
|
||
<view class="right-bottom acea-row row-between">
|
||
<view class="price">
|
||
<view class="pinkNum"><text class="pinkNum-title">拼团价</text>
|
||
<priceStyle :price="item.activePrice"></priceStyle>
|
||
</view>
|
||
<view class="num regular num-icon">¥{{item.price}}</view>
|
||
</view>
|
||
<view class="btnBox">
|
||
<view class="btn">参与拼团</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<emptyPage :mTop="'30%'" v-if="groupGood.length==0" title="暂无拼团商品,去看看其他商品吧~~" :imgSrc="urlDomain+'crmebimage/presets/noActivity.png'"></emptyPage>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navBar from '@/components/navBar';
|
||
import priceStyle from '@/components/priceStyle'
|
||
import easyLoadimage from '@/components/base/easy-loadimage.vue';
|
||
import {groupBuySkuListApi} from '@/api/group'
|
||
import emptyPage from '@/components/emptyPage.vue'
|
||
let app = getApp();
|
||
export default {
|
||
components: {
|
||
navBar,
|
||
priceStyle,
|
||
easyLoadimage,
|
||
emptyPage
|
||
},
|
||
data() {
|
||
return {
|
||
urlDomain: this.$Cache.get("imgHost"),
|
||
theme: app.globalData.theme,
|
||
backgroundColor:'transparent',
|
||
isBackgroundColor:false,
|
||
headerZindex:9,
|
||
listZindex:99,
|
||
where: {
|
||
page: 1,
|
||
limit: 10,
|
||
showgroup:-1,
|
||
},
|
||
loadend: false,
|
||
loading: false,
|
||
loadTitle: '加载更多',
|
||
groupGood:[]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getGroupList()
|
||
},
|
||
methods:{
|
||
//拼团商品列表
|
||
getGroupList() {
|
||
if (this.loadend) return;
|
||
if (this.loading) return;
|
||
this.loading = true;
|
||
groupBuySkuListApi(this.where).then(res => {
|
||
let list = res.data;
|
||
let limit = this.where.limit;
|
||
this.where.page++;
|
||
this.loadend = limit > list.length;
|
||
this.groupGood = this.groupGood.concat(list);
|
||
this.loading = false;
|
||
this.loadTitle = this.loadend ? '没有更多内容啦~' : '加载更多';
|
||
}).catch(err => {
|
||
this.loading = false;
|
||
this.loadTitle = '加载更多';
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
},
|
||
onPageScroll(e) {
|
||
if(e.scrollTop > 20){
|
||
this.backgroundColor = '#E93323';
|
||
}else{
|
||
this.backgroundColor = 'transparent';
|
||
}
|
||
if (e.scrollTop > 170) {
|
||
this.listZindex=9
|
||
this.headerZindex=99
|
||
} else {
|
||
this.listZindex=99
|
||
this.headerZindex=9
|
||
}
|
||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||
uni.$emit('scroll');
|
||
},
|
||
//to拼团详情
|
||
toGroupDeatil(item){
|
||
uni.navigateTo({
|
||
url:`/pages/goods/goods_details/index?id=${item.productId}&mt=2&gd=${item.groupActivityId}`
|
||
})
|
||
},
|
||
onReachBottom() {
|
||
this.getGroupList();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../static/css/activity.scss";
|
||
.num-icon,.icon-num{
|
||
font-size: 24rpx !important;
|
||
line-height: 32rpx !important;
|
||
margin-top: 12rpx !important;
|
||
}
|
||
.empty-box{
|
||
padding-top: 30% !important;
|
||
}
|
||
</style>
|