Skip to content

G
group-buy-ui
Commit b6000792 authored by beisir's avatar beisir
Browse files
Options

feat:列表页面接口

parent 3ac6efec
Show whitespace changes
Inline Side-by-side
Showing with 186 additions and 102 deletions
src/api/groupBuy.js
View file @ b6000792
......@@ -20,23 +20,18 @@ export default {
// 查询活动模板列表-根据活动id
getTemplateList(activityId) {
return http.get(
`http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/template-list`,
{
// return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/template-list`, {
return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/template-list`, {
params: { activityId }
}
);
});
},
// 入口活动列表
getGoodsList(params) {
return http.get(
`http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/goods-list`,
{
// return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/goods-list`, {
return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/goods-list/v2`, {
params
}
);
});
// return http.get(`http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/goods-list`, {
// params
// });
},
getGroupAvator(data) {
return http.get(`http://yapi.quantgroups.com/mock/479/goods/getAvator`, data, {
......
src/components/groupSwiper.vue
View file @ b6000792
<template>
<div class="avator-swiper" @click="onSlidePrevChange">
<swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
<swiper-slide v-for="(item, index) in avatorData" :key="index" class="avator-swiper_item">
<img :src="item" />
<swiper-slide
v-for="(item, index) in avatorData"
:key="index"
:data-name="item.name"
:data-src="item.avatar"
class="avator-swiper_item"
>
<img :src="item.avatar" />
</swiper-slide>
</swiper>
<div class="avator-swiper_right">
......@@ -31,12 +37,13 @@ export default {
const vm = this;
return {
rightImgPath: '',
avatorItem: null,
swiperOptions: {
loop: true,
initialSlide: 0,
slidesPerView: 7,
spaceBetween: 4,
speed: 1100,
speed: 700,
centeredSlides: true,
watchSlidesProgress: true,
allowTouchMove: false,
......@@ -50,11 +57,13 @@ export default {
const activeIndex = this.activeIndex;
const slideLeft = this.slides.eq(activeIndex - 3);
const slideRight = this.slides.eq(activeIndex + 4);
vm.avatorItem = vm.getAvatorItem(slideLeft);
vm.rightImgPath = slideRight.data('src');
slideLeft.addClass('ani-left');
slideRight.addClass('ani-right');
vm.rightImgPath = slideRight.find('img').attr('src');
},
transitionEnd: function() {
vm.$emit('animation-event-end', vm.avatorItem);
for (let i = 0; i < this.slides.length; i++) {
let slide = this.slides.eq(i);
slide.removeClass('ani-left ani-right');
......@@ -71,12 +80,25 @@ export default {
},
watch: {
avatorData() {
clearInterval(this.timer);
this.onSlidePrevChange();
}
},
mounted() {
this.onSlidePrevChange();
},
methods: {
onSlidePrevChange() {
this.timer = setInterval(() => {
this.$emit('animation-event-start');
this.swiper.slidePrev();
}, 10000);
},
getAvatorItem(ele) {
return {
src: ele.data('src'),
name: ele.data('name')
};
}
}
};
......@@ -85,16 +107,18 @@ export default {
@keyframes leftToRight {
from {
transform: scale(0.3, 0.3);
transform-origin: right right;
opacity: 0;
}
to {
transform: scale(1, 1);
transform-origin: left left;
opacity: 1;
}
}
.ani-left {
transform-origin: right;
animation: leftToRight 0.7s linear;
animation: leftToRight 1s linear;
}
@keyframes scaleTo {
to {
......
src/views/goodsList/components/goodsCard.vue
View file @ b6000792
<template>
<dl class="group-item" :class="{ disabled: !goodsItem.goodsCount }">
<dl class="group-item" :class="{ disabled: groupStop }">
<dt class="group-item-thumb">
<cr-image :src="goodsItem.thumbImageUrl" />
<span class="group-item-tag">3人团</span>
<span class="group-item-tag">{{ goodsItem.groupBuyLimitUserCount }}人团</span>
</dt>
<dd class="group-item-content">
<div class="group-item-title">{{ goodsItem.goodsName }}</div>
......@@ -15,9 +15,11 @@
:show-pivot="false"
:percentage="handleProgressByStatus(goodsItem)"
/>
<div class="group-item-already">已拼2333团</div>
<div class="group-item-price">成团价 ¥ <sup class="group-item-sup">0</sup></div>
<div class="group-item-delprice">售价 ￥{{ goodsItem.activityPrice }}</div>
<div class="group-item-already">已拼{{ goodsItem.groupBuySuccessCount }}团</div>
<div class="group-item-price">
成团价 ¥ <sup class="group-item-sup">{{ goodsItem.activityPrice }}</sup>
</div>
<div class="group-item-delprice">售价 ￥{{ goodsItem.price }}</div>
<!-- 立即开团 -->
<!-- 已抢光 -->
<!-- 未开始 -->
......@@ -25,18 +27,21 @@
<cr-button
shape="circle"
type="primary"
:disabled="!goodsItem.goodsCount"
:disabled="btnByStatus.d"
@click.stop="onButtonClick"
>立即开团</cr-button
>{{ btnByStatus.t }}</cr-button
>
</dd>
</dl>
</template>
<script>
const EVENT_BUTTON_CLICK = 'on-button-click';
export default {
name: 'GoodsCard',
props: {
topicCfg: {
type: Object,
default: () => {}
},
goodsItem: {
type: Object,
default: () => {}
......@@ -45,6 +50,37 @@ export default {
type: Number
}
},
data() {
return {};
},
computed: {
groupStop() {
const { hasStop, hasStart } = this.topicCfg;
const { goodsCount } = this.goodsItem;
return !hasStart ? false : hasStop ? true : goodsCount !== 0 ? false : true;
},
btnByStatus() {
const { hasStop, hasStart } = this.topicCfg;
const { goodsCount } = this.goodsItem;
if (!hasStart) {
return { t: '未开始', d: true, s: 0 };
}
if (hasStop) {
return { t: '已结束', d: true, s: 1 };
}
if (goodsCount !== 0) {
return { t: '立即开团', d: false, s: 2 };
}
return { t: '已抢光', d: true, s: 3 };
// return !hasStart
// ? { t: '未开始', d: true, s: 0 }
// : hasStop
// ? { t: '已结束', d: true, s: 1 }
// : goodsCount !== 0
// ? { t: '立即开团', d: false, s: 2 }
// : { t: '已抢光', d: true, s: 3 };
}
},
methods: {
handleProgressByStatus(item) {
if (!item) return 0;
......@@ -52,11 +88,33 @@ export default {
const { showSaleCount, goodsCount } = item;
percentage = (goodsCount / (goodsCount + showSaleCount)) * 100;
percentage = percentage < 0 ? 0 : percentage;
// percentage = !this.topicCfg.hasStart ? 0 : percentage;
percentage = this.btnByStatus.d ? 0 : percentage;
return Math.round(percentage * 100) / 100;
},
onButtonClick() {
this.$emit(EVENT_BUTTON_CLICK, this.goodsItem);
const { s } = this.btnByStatus;
// if (btnByStatus.s === 2) {
// // 正常跳转
// return false;
// }
this.$dialog({
message: '请在微信小程序中参与此活动哦~',
confirmButtonText: s === 3 ? '重新选择' : '订阅消息',
onConfirm: () => {
// todo 跳转到小程序
// let getScheme = async function() {
// const [res] = await groupBuy.getScheme({
// miniUrl: 'pages/user/login'
// });
// const url = res;
// window.location.href = url; // todo 需要验证
// };
// getScheme();
// getScheme = null;
}
});
// this.$emit(EVENT_BUTTON_CLICK, this.goodsItem);
}
}
};
......@@ -67,7 +125,7 @@ export default {
justify-content: center;
align-items: center;
padding: 12px 0;
border-bottom: #d8d8d8 solid 1px;
border-bottom: #ededed solid 1px;
position: relative;
&:last-of-type {
border-bottom: none;
......@@ -147,6 +205,8 @@ export default {
position: absolute;
bottom: 12px;
right: 0;
display: flex;
align-items: center;
}
&.disabled {
......
src/views/goodsList/index.less
View file @ b6000792
......@@ -48,7 +48,7 @@
.list-title {
height: 49px;
line-height: 49px;
border-bottom: solid 1px #d8d8d8;
border-bottom: solid 1px #ededed;
display: flex;
align-items: center;
justify-content: space-between;
......
src/views/goodsList/index.vue
View file @ b6000792
......@@ -14,20 +14,16 @@
<div class="group-portrait">
<div class="group-portrait-head">
<div class="group-portrait-swipe" @click="switchAnimation">
<swipeCustomerInfo v-model="showSwipe" />
<swipeCustomerInfo v-model="showSwipe" :avatar="customers.src" :name="customers.name" />
</div>
<div class="group-portrait-ul">
<groupSwiper v-if="avatorData.length" :avator-data="avatorData" />
<groupSwiper
v-if="topicCfg.groupBuyUserInfoList"
:avator-data="topicCfg.groupBuyUserInfoList"
@animation-event-start="animationEventStart"
@animation-event-end="animationEventEnd"
/>
</div>
<!-- <ul class="group-portrait-ul" :class="animate">
<li
v-for="(imgItem, imgIndex) in gpImagePathArray"
:key="imgIndex"
class="group-portrait-image"
>
<cr-image :src="imgItem" />
</li>
</ul> -->
</div>
<div class="group-portrait-num" @click="showSwipe = !showSwipe">
已有 {{ topicCfg.groupBuyUserCount }}人 参与拼单
......@@ -37,16 +33,23 @@
<div class="list-title">
<b class="list-title-text">今日拼团</b>
<div class="list-count">
<span class="list-count-label">距结束：</span>
<span class="list-count-label">{{ topicCfg.stateTxt }}：</span>
<count-down :end-time="gpCountDown" />
</div>
</div>
<cr-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<cr-list
v-if="!reload"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<goods-card
v-for="(item, index) in goodsList"
:key="index"
:index="index"
:goods-item="item"
:topic-cfg="topicCfg"
@on-button-click="handleBtnClick"
/>
</cr-list>
......@@ -66,7 +69,6 @@ import store from '@/store';
import groupBuyApi from '@/api/groupBuy';
import countDown from '@/components/countDown';
import swipeCustomerInfo from '@/components/swipeCustomerInfo';
import gpImagePath from '@/assets/images/groupBuy/bg-top.png';
import goodsCard from './components/goodsCard';
import groupSwiper from '@/components/groupSwiper';
import { isNull } from '@/service/validation.service';
......@@ -94,18 +96,7 @@ export default {
},
showSwipe: false,
gpImagePath,
gpBackColor: '#FA494E',
gpImagePathArray: [
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_01.png',
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_02.png',
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_03.png',
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_04.png',
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_05.png',
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_06.png',
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_07.png'
],
customers: {},
// goodsSpecialId 是
pageNo: 1, // 是
......@@ -113,7 +104,7 @@ export default {
activityId: '', //是
topicIndex: 0,
topicList: [],
topicList: {},
goodsList: [],
loading: false,
......@@ -127,23 +118,30 @@ export default {
// 更具goodsSpecialId 获取查询活动模板列表-对应数据项
topicCfg() {
const { topicList, topicIndex } = this;
const info = topicList[topicIndex] || { items: [] };
const { topicList } = this;
const info = topicList || {};
return info;
},
gpCountDown() {
const { endTime } = this.topicCfg;
return +new Date(endTime);
// if (hasStart) {
// return +new Date(endTime || 0);
// } else {
// };
// if (){}
return +new Date(endTime || 0);
}
},
created() {
this.reload = true;
// console.log(this.isShowShare);
// console.log(this.activityId);
// this.hasLogin = !!localStorage.get('vccToken');
},
mounted() {
// todo 曝光埋点
this.$nextTick(() => {
// this.avatorTimeSyncChange();
this.getAvatorList();
......@@ -170,13 +168,19 @@ export default {
}
},
methods: {
animationEventStart() {
this.showSwipe = false;
},
animationEventEnd(avator) {
this.customers = avator;
this.showSwipe = true;
},
async goToMyorder() {
const isLogin = this.checkLogin();
console.log(isLogin);
// const isLogin = await this.checkLogin();
// console.log(isLogin);
// if (isApp) this.nativeBridge = new Bridge();
// else if (isWxMp) this.nativeBridge = new MpBridge();
if (!isLogin) {
this.$router.push('/createOrder');
}
},
async openShareEvent() {
let options = await this.getShareData();
......@@ -217,26 +221,33 @@ export default {
this.animate.animateAuto = !this.animate.animateAuto;
},
handleBtnClick(item) {
console.log(item.skuNo);
// skuNo /groupBuy/skuInfo
// this.$router.push(`/groupBuy/skuInfo?skuNo=${item.skuNo}`);
this.$router.push(`/groupBuy/skuInfoSmallPic?skuNo=${item.skuNo}`);
const { activityId } = this;
const { goodsSpecialId, templateId, templateDetailIds } = this.topicCfg;
const { skuNo } = item;
if (item.goodsCount !== 0) {
this.$router.push({
path: '/groupBuy/skuInfo',
query: { skuNo, goodsSpecialId, templateId, templateDetailIds, activityId }
});
} else {
this.$notify({ type: 'warning', message: '该商品已抢完' });
}
},
onLoad() {
if (this.topicCfg.goodsSpecialId) {
if (this.topicCfg) {
this.getGoodsList();
}
},
async getGoodsList() {
const { pageSize, pageNo, activityId } = this;
const { goodsSpecialId, templateDetailId } = this.topicCfg;
const { goodsSpecialIds, templateDetailIds } = this.topicCfg;
this.loading = true;
this.finished = false;
try {
const [res] = await groupBuyApi.getGoodsList({
goodsSpecialId,
templateDetailId,
goodsSpecialIds,
templateDetailIds,
pageSize,
pageNo,
activityId
......@@ -244,6 +255,7 @@ export default {
if (res.size) {
this.loading = false;
this.showLoading = false;
res.items[5].goodsCount = 0;
this.goodsList = res.items || [];
if (!res.hasNext) {
this.finished = true;
......@@ -259,7 +271,7 @@ export default {
}
};
async function getActivityList(urlQuery, next) {
const { activityId, goodsSpecialId } = urlQuery;
const { activityId } = urlQuery;
// eslint-disable-next-line prettier/prettier
let nextFns = function(cb) {
cb(next);
......@@ -268,39 +280,32 @@ async function getActivityList(urlQuery, next) {
nextFns = next;
}
const [result] = await groupBuyApi.getTemplateList(activityId);
if (result && result.length) {
const list = result.map(i => {
const { endTime, startTime } = i;
i.remainTime = handleRemainTime('', endTime)[0];
// i.hasStop = i.remainTime < 1;
i.hasStop = 0 < 1;
i.willTime = handleRemainTime('', startTime)[0];
i.hasStart = handleRemainTime(startTime, '')[0] > 0;
i = { ...i, ...handleDateFormat(startTime, endTime) };
i.stateTxt = !i.hasStart ? '即将开始' : i.hasStop ? '已结束' : '热购中';
return i;
});
// .filter(i => !i.hasStop);
let activityIndex = list.findIndex(item => {
if (goodsSpecialId) {
return item.goodsSpecialId == goodsSpecialId;
} else {
return item.hasStart;
}
});
activityIndex = activityIndex > -1 ? activityIndex : 0;
const { title } = list[activityIndex] || { items: [] };
if (result?.t) {
let t = result.t;
t.startTime = '2021-09-15 00:00:00';
t.endTime = '2021-09-22 00:00:00';
// t.startTime = '2021-09-15 00:00:00';
// t.endTime = '2021-09-18 00:00:00';
const { endTime, startTime } = t;
t.remainTime = handleRemainTime('', endTime)[0];
t.hasStop = t.remainTime < 1;
t.willTime = handleRemainTime('', startTime)[0];
t.hasStart = handleRemainTime(startTime, '')[0] > 0;
t = { ...t, ...handleDateFormat(startTime, endTime) };
t.stateTxt = !t.hasStart ? '即将开始' : t.hasStop ? '活动已结束' : '距结束';
const { title } = t;
store.commit('CHANGE_TITLE', title || '活动页');
nextFns(vm => {
vm.activityId = activityId;
vm.topicList = list;
vm.topicIndex = activityIndex;
vm.topicList = t;
// vm.topicIndex = activityIndex;
localStorage.set('activityId', activityId);
// const { hasStop } = vm.topicCfg;
// if (hasStop || !list.length) {
// vm.showOverTip = true;
// }
// vm.getGoodsList();
vm.getGoodsList();
vm.reload = false;
});
} else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment