【拼团活动列表】

1. 接入 banner 活动页
pull/1/MERGE
YunaiV 2023-06-17 00:48:00 +08:00
parent b8e61cf7a0
commit 70fe080f57
3 changed files with 56 additions and 35 deletions

7
api/promotion/banner.js Normal file
View File

@ -0,0 +1,7 @@
import request from "@/utils/request.js";
export function getBannerList(position) {
return request.get("app-api/promotion/banner/list", {
position
});
}

View File

@ -34,3 +34,10 @@ export function getCombinationRecordDetail(id) {
noAuth: true // TODO 芋艿:后续要做调整 noAuth: true // TODO 芋艿:后续要做调整
}); });
} }
// 获得拼团活动的概要信息
export function getCombinationSummary() {
return request.get("app-api/promotion/combination-record/get-summary", {}, {
noAuth: true // TODO 芋艿:后续要做调整
});
}

View File

@ -6,36 +6,36 @@
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view> <view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view>
<!-- #endif --> <!-- #endif -->
<!-- banner TODO 芋艿banner --> <!-- banner -->
<view class="swiper" v-if="bannerList.length"> <view class="swiper" v-if="bannerList.length">
<swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval" <swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval"
:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff"> :duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
<block v-for="(item,index) in bannerList" :key="index"> <block v-for="(item,index) in bannerList" :key="index">
<swiper-item> <swiper-item>
<navigator :url='item.value' class='slide-navigator acea-row row-between-wrapper' <navigator :url='item.url' class='slide-navigator acea-row row-between-wrapper'
hover-class='none'> hover-class='none'>
<image :src="item.value" class="slide-image" lazy-load></image> <image :src="item.picUrl" class="slide-image" lazy-load />
</navigator> </navigator>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
</view> </view>
<!-- TODO 芋艿头部 --> <!-- 拼团概要 -->
<view class="nav acea-row row-between-wrapper"> <view class="nav acea-row row-between-wrapper">
<image src="../static/zuo.png"></image> <image src="../static/zuo.png"></image>
<view class="title acea-row row-center"> <view class="title acea-row row-center">
<view class="spike-bd"> <view class="spike-bd">
<view v-if="avatarList.length > 0" class="activity_pic"> <view v-if="summary.avatars.length > 0" class="activity_pic">
<view v-for="(item,index) in avatarList" :key="index" class="picture" <view v-for="(item,index) in summary.avatars" :key="index" class="picture"
:style='index===6?"position: relative":"position: static"'> :style='index === 6?"position: relative":"position: static"'>
<span class="avatar" :style='"background-image: url("+item+")"'></span> <span class="avatar" :style='"background-image: url("+item+")"'></span>
<span v-if="index===6 && Number(avatarList.length) > 3" class="mengceng"> <span v-if="index === 6 && summary.avatars.length > 3" class="mengceng">
<i>···</i> <i>···</i>
</span> </span>
</view> </view>
</view> </view>
</view> </view>
<text class="pic_count">{{totalPeople}}人参与</text> <text class="pic_count">{{ summary.userCount || 0 }}人参与</text>
</view> </view>
<image src="../static/you.png"></image> <image src="../static/you.png"></image>
</view> </view>
@ -69,17 +69,12 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {
getCombinationList,
combinationHeaderApi
} from '@/api/activity.js';
import { openPinkSubscribe } from '../../../utils/SubscribeMessage.js'; import { openPinkSubscribe } from '../../../utils/SubscribeMessage.js';
import * as CombinationApi from '@/api/promotion/combination.js'; import * as CombinationApi from '@/api/promotion/combination.js';
import * as BannerApi from '@/api/promotion/banner.js';
import * as Util from '@/utils/util.js'; import * as Util from '@/utils/util.js';
import home from '@/components/home/index.vue' import home from '@/components/home/index.vue'
import {getCombinationActivityPage} from "../../../api/promotion/combination";
let app = getApp(); let app = getApp();
export default { export default {
components: { components: {
@ -95,18 +90,22 @@
page: 1, page: 1,
loadTitle: '', loadTitle: '',
// TODO //
indicatorDots: false, summary: {
circular: true, userCount: 0,
autoplay: true, avatars: [],
interval: 3000, },
duration: 500,
navH: '',
// banner
bannerList: [],
circular: true,
autoplay: true,
interval: 3000,
duration: 500,
//
navH: '',
returnShow: true, returnShow: true,
avatarList: [],
bannerList: [],
totalPeople: 0
} }
}, },
onShow() { onShow() {
@ -116,7 +115,7 @@
var pages = getCurrentPages(); var pages = getCurrentPages();
this.returnShow = pages.length !== 1; this.returnShow = pages.length !== 1;
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title:"拼团列表" title: "拼团列表"
}) })
// #ifdef MP // #ifdef MP
this.navH = app.globalData.navH; this.navH = app.globalData.navH;
@ -127,8 +126,10 @@
// //
this.getCombinationList(); this.getCombinationList();
// TODO //
this.getCombinationHeader(); this.getCombinationHeader();
// banner
this.getBannerList();
}, },
onReachBottom: function() { onReachBottom: function() {
this.getCombinationList(); this.getCombinationList();
@ -189,16 +190,22 @@
goBack: function() { goBack: function() {
uni.navigateBack(); uni.navigateBack();
}, },
/**
* 获得拼团记录概要
*/
getCombinationHeader: function() { getCombinationHeader: function() {
combinationHeaderApi().then(res => { CombinationApi.getCombinationSummary().then(res => {
this.avatarList = res.data.avatarList || []; this.summary = res.data;
this.bannerList = res.data.bannerList || []; })
this.totalPeople = res.data.totalPeople;
}).catch(() => {
this.loading = false;
this.loadTitle = '加载更多';
})
}, },
/**
* 获得 banner 列表
*/
getBannerList() {
BannerApi.getBannerList(10).then(res => {
this.bannerList = res.data;
})
},
fen2yuan(price) { fen2yuan(price) {
return Util.fen2yuan(price) return Util.fen2yuan(price)