Initial commit: 积分兑换电商平台多商户版 MER-2.2
Made-with: Cursor
This commit is contained in:
apple
213
mer_uniapp/pages/activity/goods_group/index.vue
Normal file
213
mer_uniapp/pages/activity/goods_group/index.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<view class="activity-box" :data-theme="theme">
|
||||
<view class="activity_header"
|
||||
:style="{'background-image':`url(${urlDomain+'crmebimage/presets/group_list_bg.png'})`}">
|
||||
<view class='cart_nav'>
|
||||
<nav-bar navTitle="拼团列表" iconColor='#fff' :backgroundColor="backgroundColor"
|
||||
:isBackgroundColor="isBackgroundColor" ref="navBarRef"></nav-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box" :style="{'z-index':listZindex}" @touchstart="touchStart">
|
||||
<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 relative">
|
||||
<view v-show="item.quota===0" class="sellOut">已售罄</view>
|
||||
<easy-loadimage :image-src="item.imageUrl" width="240rpx" height="240rpx" radius="16rpx"></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 theme-font-color">拼团价</text>
|
||||
<priceStyle :price="item.activePrice"></priceStyle>
|
||||
</view>
|
||||
<view class="num regular num-icon">￥{{item.price}}</view>
|
||||
</view>
|
||||
<view class="btnBox">
|
||||
<view class="group-btn" :style="gorupBtnBgColor">参与拼团</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 {
|
||||
silenceBindingSpread,
|
||||
getUserSpread
|
||||
} from '@/utils/index.js';
|
||||
import navBar from '@/components/navBar';
|
||||
import priceStyle from '@/components/priceStyle'
|
||||
import easyLoadimage from '@/components/base/easy-loadimage.vue';
|
||||
import {
|
||||
groupBuySkuListApi,
|
||||
groupbuyMerchantListApi
|
||||
} from '@/api/group';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import emptyPage from '@/components/emptyPage.vue'
|
||||
import useActivity from "@/mixins/useActivity";
|
||||
import onShare from "@/mixins/onShare";
|
||||
let app = getApp();
|
||||
export default {
|
||||
mixins: [useActivity, onShare],
|
||||
computed: {
|
||||
...mapGetters(['isLogin', 'uid', 'globalData']),
|
||||
gorupBtnBgColor() {
|
||||
return `background: linear-gradient(90deg, #FF7931 0%, ${this.themeColor} 100%);`
|
||||
}
|
||||
},
|
||||
components: {
|
||||
navBar,
|
||||
priceStyle,
|
||||
easyLoadimage,
|
||||
emptyPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urlDomain: this.$Cache.get("imgHost"),
|
||||
theme: this.$Cache.get("theme"),
|
||||
backgroundColor: 'transparent',
|
||||
isBackgroundColor: false,
|
||||
listZindex: 99,
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
merId: ''
|
||||
},
|
||||
loadend: false,
|
||||
loading: false,
|
||||
loadTitle: '加载更多',
|
||||
groupGood: [],
|
||||
merId: 0, //商户id
|
||||
title: '拼团列表',
|
||||
themeColor: '', // 主题颜色
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 设置主题颜色
|
||||
this.themeColor = this.$options.filters.filterTheme(this.theme)
|
||||
//分销码
|
||||
getUserSpread(options);
|
||||
|
||||
if (options.merId) {
|
||||
this.merId = Number(options.merId)
|
||||
this.where.merId = this.merId
|
||||
}
|
||||
this.getGroupList()
|
||||
},
|
||||
onShow() {
|
||||
//分销绑定
|
||||
silenceBindingSpread(this.isLogin, this.globalData.spread);
|
||||
},
|
||||
onPageScroll(object) {
|
||||
if (object.scrollTop > 200) {
|
||||
this.pageScrollStatus = true;
|
||||
} else if (object.scrollTop < 200) {
|
||||
this.pageScrollStatus = false;
|
||||
}
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
methods: {
|
||||
//滚动
|
||||
touchStart() {
|
||||
this.$refs.navBarRef.currentPage = false;
|
||||
},
|
||||
//拼团商品列表
|
||||
getGroupList() {
|
||||
if (this.loadend) return;
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
if (this.merId != 0) {
|
||||
groupbuyMerchantListApi(this.where).then(res => {
|
||||
let list = res.data.list;
|
||||
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
|
||||
});
|
||||
})
|
||||
} else {
|
||||
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
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
//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;
|
||||
}
|
||||
|
||||
.theme-font-color {
|
||||
@include main_color(theme);
|
||||
}
|
||||
|
||||
.group-btn {
|
||||
// @include coupons-gradient(theme);
|
||||
// background: linear-gradient(90deg, #FF7931 0%, #40D1F4 100%);
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 50rpx;
|
||||
border-radius: 25px 25px 25px 25px;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user