dl_mer_uniapp/pages/activity/goods_group/index.vue
2025-03-04 16:03:38 +08:00

148 lines
4.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>