Skip to content

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

feat:分享模块

parent ad8bbe65
Hide whitespace changes
Inline Side-by-side
Showing with 285 additions and 52 deletions
src/api/groupBuy.js
View file @ 9545a87e
......@@ -17,11 +17,23 @@ export default {
hideLoading: true
});
},
// 查询活动模板列表-根据活动id
getTemplateList(activityId) {
return http.get(
`http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/template-list`,
{ params: { activityId } }
);
},
// 入口活动列表
getGroupList(data) {
return http.get(`http://yapi.quantgroups.com/mock/479/goods/group-list`, data, {
hideLoading: true
});
getGoodsList(params) {
return http.get(
`http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/goods-list`,
{ params },
{
hideLoading: true
}
);
},
getGroupAvator(data) {
return http.get(`http://yapi.quantgroups.com/mock/479/goods/getAvator`, data, {
......
src/components/groupShare.vue 0 → 100644
View file @ 9545a87e
<template>
<div class="share">
<cr-share
v-model="showShare"
:types="types"
@close="shareCloseChange"
@click-share-item="bundleShareClickItem"
/>
</div>
</template>
<script>
import { isWxMp, isApp } from '@/service/validation.service';
export default {
name: 'GroupShare',
components: {},
props: {},
data() {
return {
showShare: false,
types: [
{ value: 'weixin', disabled: false },
{ value: 'pic', disabled: false }
]
};
},
computed: {
notBwoser() {
return !isWxMp && !isApp;
}
},
watch: {},
methods: {
async open() {
try {
// if (this.notBwoser) {
// this.$toast('非小程序和App设备!');
// return;
// }
let options = await this.getShareData();
console.log(options, isWxMp, isApp);
// 判断是否时小程序平台
if (isWxMp) {
this.showShare = true;
}
// 判断是否是App
if (isApp) {
this.shareAppChange(options);
console.log('App');
}
} catch (err) {
this.$toast('调用分享失败!');
}
},
async getShareData() {
return Promise.resolve(1);
// await
},
shareCloseChange() {
this.$emit('hideShare', false);
},
bundleShareClickItem(ev) {
console.log(ev);
console.log(this.nativeBridge);
},
shareAppChange({ title, desc, link, imgUrl }) {
const data = {
event: 'showShareView',
data: {
platform: ['weChat', 'timeLine', 'QQ', 'QQZone', 'CopyLink'], //依次分别是微信、朋友圈、QQ好友、QQ空间、复制链接
shareDic: {
title,
desc,
link, // 页面地址
imgUrl // 图片地址
}
}
};
this.nativeBridge.showShareView(data);
}
}
};
</script>
<style lang="less"></style>
src/components/groupSwiper.vue
View file @ 9545a87e
......@@ -2,9 +2,7 @@
<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">
<div class="avator-swiper_item">
<img :src="item" />
</div>
<img :src="item" />
</swiper-slide>
</swiper>
<div class="avator-swiper_right">
......@@ -76,9 +74,6 @@ export default {
this.onSlidePrevChange();
}
},
mounted() {
console.log(this.swiper);
},
methods: {
onSlidePrevChange() {
this.swiper.slidePrev();
......@@ -119,7 +114,7 @@ export default {
width: 25px;
position: absolute;
right: 3px;
top: 2px;
top: 0px;
}
&_item {
transition: transform 0.2s linear;
......@@ -128,6 +123,7 @@ export default {
height: 25px;
width: 25px;
border-radius: 50%;
border: solid @white 1px;
}
}
}
......
src/service/cherryUI.service.js
View file @ 9545a87e
......@@ -55,7 +55,8 @@ import {
Skeleton,
Card,
Progress,
GoodsAction
GoodsAction,
Share
} from '@qg/cherry-ui';
import DialogFn from '@qg/cherry-ui/src/dialog/func';
// import "@qg/cherry-ui/dist/cherry.css";
......@@ -113,6 +114,7 @@ Vue.use(Skeleton);
Vue.use(Card);
Vue.use(Progress);
Vue.use(GoodsAction);
Vue.use(Share);
// const _proto = Vue.prototype;
// const proto = Object.create(_proto);
......
src/views/goodsList/components/goodsCard.vue
View file @ 9545a87e
<template>
<dl class="group-item" :class="{ disabled: index === 5 }">
<dl class="group-item" :class="{ disabled: !goodsItem.goodsCount }">
<dt class="group-item-thumb">
<cr-image :src="goodsItem.thumbImageUrl" />
<span class="group-item-tag">3人团</span>
</dt>
<dd class="group-item-content">
<div class="group-item-title">{{ goodsItem.goodsName }}</div>
<!-- 进度条：已瓶团消耗库村/该活动商品初始库存 -->
<!-- 进度条：已拼团消耗库存/该活动商品初始库存 -->
<cr-progress
class="group-item-progress"
stroke-width="5"
......@@ -22,11 +22,18 @@
<!-- 已抢光 -->
<!-- 未开始 -->
<!-- 已结束 -->
<cr-button shape="circle" type="primary" :disabled="false">立即开团</cr-button>
<cr-button
shape="circle"
type="primary"
:disabled="!goodsItem.goodsCount"
@click.stop="onButtonClick"
>立即开团</cr-button
>
</dd>
</dl>
</template>
<script>
const EVENT_BUTTON_CLICK = 'on-button-click';
export default {
name: 'GoodsCard',
props: {
......@@ -45,10 +52,11 @@ export default {
const { showSaleCount, goodsCount } = item;
percentage = (goodsCount / (goodsCount + showSaleCount)) * 100;
percentage = percentage < 0 ? 0 : percentage;
// console.log(percentage);
// percentage = !this.topicCfg.hasStart ? 0 : percentage;
return Math.round(percentage * 100) / 100;
// return 70;
},
onButtonClick() {
this.$emit(EVENT_BUTTON_CLICK, this.goodsItem);
}
}
};
......
src/views/goodsList/components/utils.js 0 → 100644
View file @ 9545a87e
/*
* @Description:
* @Date: 2020-12-01 18:06:18
* @LastEditors: gzw
* @LastEditTime: 2021-08-03 15:53:02
*/
import { parseTime } from '@/service/utils.service';
export function handleRemainTime(start, end) {
const startTime = (start ? new Date(start.replace(/-|\./g, '/')) : new Date()).getTime();
const endTime = (end ? new Date(end.replace(/-|\./g, '/')) : new Date()).getTime();
return [endTime - startTime, startTime, endTime];
}
export function handleDateFormat(start, end) {
const dateArr = handleRemainTime(start, end);
const isDay = dateArr[0] > 60 * 60 * 1000 * 23;
const formatExp = isDay ? '{m}.{d}' : '{h}:{i}';
return { isDay, dateFormat: parseTime(dateArr[1], formatExp) };
}
src/views/goodsList/index.less
View file @ 9545a87e
......@@ -3,7 +3,16 @@
&-top {
height: 380px;
}
&-share {
position: fixed;
right: 0;
top: 10px;
z-index: 1;
color: #e92615;
background-image: linear-gradient(180deg, #ffd545 0%, #ffcc79 100%);
border-radius: 16px 0 0 16px;
padding: 6px 12px 6px 16px;
}
&-bottom {
padding-left: 12px;
padding-right: 12px;
......
src/views/goodsList/index.vue
View file @ 9545a87e
<template>
<div class="group" :style="{ backgroundColor: gpBackColor }">
<!-- 配置活动背景色 -->
<div class="group" :style="{ backgroundColor: topicCfg.bgcolor }">
<div class="group-share" @click="openShareEvent">我的拼团</div>
<!-- 配置头部动态信息 start -->
<div class="group-top">
<!-- 动态活动背景图 -->
<cr-image width="100%" height="100%" class="group-top-image" :src="gpImagePath" />
<cr-image width="100%" height="100%" class="group-top-image" :src="topicCfg.img" />
</div>
<!-- 配置头部动态信息 end -->
......@@ -27,7 +29,9 @@
</li>
</ul> -->
</div>
<div class="group-portrait-num" @click="showSwipe = !showSwipe">已有 1230人 参与拼单</div>
<div class="group-portrait-num" @click="showSwipe = !showSwipe">
已有 {{ topicCfg.groupBuyUserCount }}人 参与拼单
</div>
</div>
<div class="group-list">
<div class="list-title">
......@@ -43,29 +47,39 @@
:key="index"
:index="index"
:goods-item="item"
@on-button-click="handleBtnClick"
/>
</cr-list>
</div>
<!-- 下方列表展示信息 end -->
</div>
<goods-share ref="gdShare" />
</div>
</template>
<script>
import store from '@/store';
import groupBuyApi from '@/api/groupBuy';
import goodsShare from '@/components/groupShare';
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';
import { handleRemainTime, handleDateFormat } from './components/utils';
import localStorage from '@/service/localStorage.service';
let topicIndex;
export default {
// beforeRouteEnter(to, from, next) {
// next(vm => {});
// },
// eslint-disable-next-line vue/name-property-casing
name: 'groupBuyList',
components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper },
components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper, goodsShare },
data() {
return {
showShare: false,
avatorData: [],
animate: {
......@@ -88,15 +102,37 @@ export default {
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_06.png',
'https://activitystatic.lkbang.net/mall-free-ui/img/avator_07.png'
],
gpCountDown: new Date('2021-09-12 00:00:00').getTime(),
// goodsSpecialId 是
pageNo: 1, // 是
pageSize: 10, // 否
activityId: '', //是
topicIndex: 0,
topicList: [],
goodsList: [],
loading: false,
finished: false
};
},
computed: {},
created() {},
computed: {
// 更具goodsSpecialId 获取查询活动模板列表-对应数据项
topicCfg() {
const { topicList, topicIndex } = this;
const info = topicList[topicIndex] || { items: [] };
return info;
},
gpCountDown() {
const { endTime } = this.topicCfg;
return +new Date(endTime);
}
},
created() {
this.hasLogin = !!localStorage.get('vccToken');
},
mounted() {
// todo 曝光埋点
this.$nextTick(() => {
......@@ -104,7 +140,30 @@ export default {
this.getAvatorList();
});
},
beforeRouteEnter(to, from, next) {
// if (;topicIndex) {
// next();
// }
const { activityId } = to.query;
if (!activityId || isNaN(activityId)) {
next({
path: '/error',
replace: true
});
return;
} else {
if (isNull(topicIndex)) {
getActivityList(to.query, next);
} else {
next();
}
}
},
methods: {
openShareEvent() {
this.$refs.gdShare.open();
},
avatorTimeSyncChange() {
setInterval(() => {
this.showSwipe = false;
......@@ -130,41 +189,31 @@ export default {
switchAnimation() {
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}`);
},
onLoad() {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
// setTimeout(() => {
// for (let i = 0; i < 10; i++) {
// this.list.push(this.list.length + 1);
// }
// // 加载状态结束
// this.loading = false;
// // 数据全部加载完成
// if (this.list.length >= 40) {
// this.finished = true;
// }
// }, 1000);
this.getGoodsList();
if (this.topicCfg.goodsSpecialId) {
this.getGoodsList();
}
},
async getGoodsList() {
// const { pageSize, pageNo, activityId } = this;
// const { goodsSpecialId, templateDetailId } = this.topicCfg;
const { pageSize, pageNo, activityId } = this;
const { goodsSpecialId, templateDetailId } = this.topicCfg;
this.loading = true;
this.finished = false;
try {
const [res] = await groupBuyApi.getGroupList({
// goodsSpecialId,
// pageSize,
// pageNo,
// activityId,
// templateDetailId
const [res] = await groupBuyApi.getGoodsList({
goodsSpecialId,
templateDetailId,
pageSize,
pageNo,
activityId
});
console.log(res);
if (res.size) {
this.loading = false;
this.showLoading = false;
......@@ -182,5 +231,56 @@ export default {
}
}
};
async function getActivityList(urlQuery, next) {
const { activityId, goodsSpecialId } = urlQuery;
// eslint-disable-next-line prettier/prettier
let nextFns = function(cb) {
cb(next);
};
if (typeof next === 'function') {
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: [] };
store.commit('CHANGE_TITLE', title || '活动页');
nextFns(vm => {
vm.activityId = activityId;
vm.topicList = list;
vm.topicIndex = activityIndex;
// const { hasStop } = vm.topicCfg;
// if (hasStop || !list.length) {
// vm.showOverTip = true;
// }
// vm.getGoodsList();
vm.reload = false;
});
} else {
nextFns(vm => {
vm.$toast({ type: 'danger', message: '当前活动不存在' });
});
return;
}
}
</script>
<style lang="less" src="./index.less" scoped></style>
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