Skip to content

G
group-buy-ui
Commit ff0abda8 authored by Xuguangxing's avatar Xuguangxing
Browse files
Options

feat: 生成pic组件

parents add2c36c f67492df
Show whitespace changes
Inline Side-by-side
Showing with 168 additions and 157 deletions
src/api/groupBuy.js
View file @ ff0abda8
......@@ -56,5 +56,8 @@ export default {
// 获取小程序码
getQrcodeUrl(params) {
return http.get(`${talosHost}/api/kdsp/playBill/getMakePicData`, params);
},
getGroupShareInfo(orderNo) {
return http.get(`${talosHost}/api/kdsp/groupShareInfo?orderNo=${orderNo}`);
}
};
src/api/pay.api.js
View file @ ff0abda8
......@@ -85,10 +85,6 @@ const getCouponList = function(params) {
return request.get(`${talosHost}/api/kdsp/appconfig/pay-succ-page/guide-stream`, { params });
};
const getOrderShareInfo = function(params) {
return request.get(`${talosHost}/api/kdsp/groupShareInfo`, { params });
};
export {
pay,
prepay,
......@@ -102,6 +98,5 @@ export {
kaGetNextUrl,
getCouponList,
queryPayStatus,
reissueContract,
getOrderShareInfo
reissueContract
};
src/components/groupShare.vue
View file @ ff0abda8
......@@ -34,7 +34,6 @@ export default {
}),
showShare: {
get() {
console.log(this.$store.state.pay);
return this.$store.state.pay.showShare;
},
set() {
......@@ -50,24 +49,12 @@ export default {
methods: {
shareCloseChange() {},
bundleShareClickItem(ev) {
if (ev === 'wexin') {
if (ev === 'weixin') {
this.shareDialogConfirm();
}
EventBus.$emit('shareClickItem', ev);
// if (ev === 'pic') {
// const { posterUrl } = this.shareInfo;
// this.nativeBridge.openNewUrl({
// newUrl: `/pages/goodshare/index?url=${encodeURIComponent(JSON.stringify(posterUrl))}`
// });
// }
// if (ev === 'weixin') {
// this.nativeBridge.run({
// event: 'showShareView',
// data: {
// shareDic: this.shareInfo
// }
// });
// }
const nativeBridge = this.nativeBridge;
console.log('派发事件！');
EventBus.$emit('shareClickItem', { ev, nativeBridge });
registeredEvents('H5_GroupZeroYuanPurchaseActivityPageSharePopupWindowBtnClick', {
sku_no: '',
buttons_name: '', // 按钮名称
......
src/components/sharePic.vue
View file @ ff0abda8
......@@ -67,7 +67,7 @@
<script>
import html2canvas from 'html2canvas';
import qiNiuApi from '@/api/qiniu.api';
import getQrcodeUrl from '@/api/groupBuy';
import groupBuyApi from '@/api/groupBuy';
import { upload } from 'qiniu-js';
import config from '@/config';
export default {
......@@ -85,18 +85,22 @@ export default {
};
},
methods: {
async uploadPic() {
async createAndUploadPic() {
console.log(999);
const _this = this;
const [qrcodeUrl] = await getQrcodeUrl(this.sharePicData);
const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(this.sharePicData);
console.log(888);
this.qrcodeUrl = qrcodeUrl;
const [res] = await qiNiuApi.getQiniuToken();
const token = res.token;
console.log(777);
this.$nextTick(() => {
html2canvas(this.$refs.sharePic, {
width: 1080,
height: 1920,
useCORS: true,
scale: 1
scale: 1,
allowTaint: false
}).then(function(canvas) {
canvas.toBlob(
blob => {
......@@ -106,6 +110,7 @@ export default {
console.log(err);
},
complete({ hash }) {
console.log('success', config.qiniuHost, hash);
const fileLink = config.qiniuHost + hash;
_this.$emit('outputPicUrl', fileLink);
}
......
src/views/goodsList/index.vue
View file @ ff0abda8
<template>
<!-- 配置活动背景色 -->
<div class="group" :style="{ backgroundColor: topicCfg.bgcolor }">
<div class="group" :style="{ backgroundColor: goodsTemp.bgcolor }">
<div v-if="!isShowShare" class="group-puzzle" @click="goToMyorder">我的拼团</div>
<!-- 配置头部动态信息 start -->
<div class="group-top">
<!-- 动态活动背景图 -->
<cr-image width="100%" height="100%" class="group-top-image" :src="topicCfg.img" />
<cr-image width="100%" height="100%" class="group-top-image" :src="goodsTemp.img" />
</div>
<!-- 配置头部动态信息 end -->
......@@ -20,21 +20,21 @@
<groupSwiper
v-if="showLoops"
ref="swipeRota"
:avator-data="topicCfg.groupBuyUserInfoList"
:avator-data="goodsTemp.groupBuyUserInfoList"
@animation-event-start="animationEventStart"
@animation-event-end="animationEventEnd"
/>
</div>
</div>
<div class="group-portrait-num" @click="showSwipe = !showSwipe">
已有 {{ topicCfg.groupBuyUserCount }}人 参与拼单
已有 {{ goodsTemp.groupBuyUserCount }}人 参与拼单
</div>
</div>
<div class="group-list">
<div class="list-title">
<b class="list-title-text">今日拼团</b>
<div class="list-count">
<span class="list-count-label">{{ topicCfg.stateTxt }}：</span>
<span class="list-count-label">{{ goodsTemp.stateTxt }}：</span>
<count-down :end-time="gpCountDown" @finish-time="finishTimeChange" />
</div>
</div>
......@@ -51,7 +51,7 @@
:key="index"
:index="index"
:goods-item="item"
:topic-cfg="topicCfg"
:topic-cfg="goodsTemp"
@on-button-click="handleBtnClick"
/>
</cr-list>
......@@ -79,13 +79,12 @@ import countDown from '@/components/countDown';
import swipeCustomerInfo from '@/components/swipeCustomerInfo';
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';
import goodsCheckMixin from '@/mixins/goodsCheck.mixin';
import { setAppTitleColor, EventBus } from '@/service/utils.service';
import { registeredEvents } from '@/service/sa.service';
let topicIndex;
console.log(EventBus);
export default {
// eslint-disable-next-line vue/name-property-casing
name: 'groupBuyList',
......@@ -104,8 +103,7 @@ export default {
pageSize: 10, // 否
activityId: '', //是
topicIndex: 0,
topicList: {},
goodsTemp: {},
goodsList: [],
loading: false,
......@@ -117,23 +115,15 @@ export default {
return this.$store.state.pay.isPrimordialBrowser;
},
isShowSwiper() {
const { hasStart, hasStop } = this.topicCfg;
return !hasStart && !hasStop;
const { hasStart, hasStop } = this.goodsTemp;
return (!hasStart && !hasStop) || (hasStart && hasStop);
},
// 更具goodsSpecialId 获取查询活动模板列表-对应数据项
topicCfg() {
const { topicList } = this;
const info = topicList || {};
return info;
},
gpCountDown() {
const { endTime, hasStart, hasStop } = this.topicCfg;
const { startTime, endTime, hasStart, hasStop } = this.goodsTemp;
if (!hasStart && !hasStop) {
// 活动未开始
return 0;
return +new Date(startTime || 0);
}
return +new Date(endTime || 0);
}
},
......@@ -145,9 +135,6 @@ export default {
},
mounted() {
this.showLoading = true;
EventBus.$on('shareClickItem', ev => {
console.log(ev);
});
},
beforeRouteEnter(to, from, next) {
const { activityId } = to.query;
......@@ -158,25 +145,22 @@ export default {
});
return;
} else {
if (isNull(topicIndex)) {
getActivityList(to.query, next);
} else {
next();
}
}
},
deactivated() {
clearTimeout(this.$refs.swipeRota.timer);
clearTimeout((this.$refs.swipeRota && this.$refs.swipeRota.timer) || null);
this.showLoops = false;
// EventBus.$off();
},
activated() {
this.showLoops = true;
this.$nextTick(() => {
this.$refs.swipeRota && this.$refs.swipeRota.onSlidePrevChange();
});
// this.topicIndex = topicIndex;
// this.setTitleColor(this.topicCfg.bgcolor);
// store.commit('changeTitle', this.topicCfg.title || '活动页');
this.onShareEventChange();
// this.setTitleColor(this.goodsTemp.bgcolor);
// store.commit('changeTitle', this.goodsTemp.title || '活动页');
},
methods: {
animationEventStart() {
......@@ -186,16 +170,9 @@ export default {
this.customers = avator;
this.showSwipe = true;
},
finishTimeChange() {
let info = this.topicList;
const { endTime, startTime } = info;
info.remainTime = handleRemainTime('', endTime)[0];
info.hasStop = info.remainTime < 1;
info.willTime = handleRemainTime('', startTime)[0];
info.hasStart = handleRemainTime(startTime, '')[0] > 0;
info = { ...info, ...handleDateFormat(startTime, endTime) };
info.stateTxt = !info.hasStart ? '即将开始' : info.hasStop ? '活动已结束' : '距结束';
this.topicList = info;
async finishTimeChange() {
const info = this.goodsTemp;
this.goodsTemp = await computedTemplate(info);
},
async goToMyorder() {
const isLogin = this.checkLogin();
......@@ -205,15 +182,36 @@ export default {
},
async openShareEvent() {
const activity_id = this.activityId;
let options = await this.getShareData();
this.$store.dispatch('goods_share_open', options);
this.$store.dispatch('goods_share_open');
registeredEvents('H5_GroupZeroYuanPurchaseActivityPageSharePopupBtnClick', {
activity_id
});
},
onShareEventChange() {
EventBus.$on('shareClickItem', async function({ ev, nativeBridge }) {
let shareDic = await this.getShareData();
if (ev === 'pic') {
// 分享海报跳转小程序海报分享页面
nativeBridge.openNewUrl({
newUrl: `/pages/goodshare/index?url=${encodeURIComponent(
JSON.stringify(shareDic.posterUrl)
)}`
});
}
if (ev === 'weixin') {
// 分享朋友派发微信postMessage事件
nativeBridge.run({
event: 'showShareView',
data: {
shareDic
}
});
}
});
},
async getShareData() {
// const link = `${window.location.origin}/groupBuy/list`;
const { title, sharePosterTemplateUrl, img } = this.topicCfg;
const { title, sharePosterTemplateUrl, img } = this.goodsTemp;
const link = window.location.href;
return Promise.resolve({
title,
......@@ -228,7 +226,7 @@ export default {
},
handleBtnClick(item) {
const { activityId } = this;
const { goodsSpecialId, templateId, templateDetailIds } = this.topicCfg;
const { goodsSpecialId, templateId, templateDetailIds } = this.goodsTemp;
const { skuNo } = item;
if (item.goodsCount !== 0) {
this.$router.push({
......@@ -240,14 +238,14 @@ export default {
}
},
onLoad() {
if (this.topicCfg) {
if (this.goodsTemp) {
this.getGoodsList();
}
},
async getGoodsList() {
const { pageSize, pageNo, activityId } = this;
const { goodsSpecialIds, templateDetailIds } = this.topicCfg;
const { goodsSpecialIds, templateDetailIds } = this.goodsTemp;
this.loading = true;
this.finished = false;
try {
......@@ -275,6 +273,17 @@ export default {
}
}
};
async function computedTemplate(info) {
const { endTime, startTime } = info;
info.remainTime = handleRemainTime('', endTime)[0];
info.hasStop = info.remainTime < 1;
info.willTime = handleRemainTime('', startTime)[0];
info.hasStart = handleRemainTime(startTime, '')[0] > 0;
info = { ...info, ...handleDateFormat(startTime, endTime) };
info.stateTxt = !info.hasStart ? '即将开始' : info.hasStop ? '活动已结束' : '距结束';
return info;
}
async function getActivityList(urlQuery, next) {
const { activityId } = urlQuery;
// eslint-disable-next-line prettier/prettier
......@@ -288,34 +297,21 @@ async function getActivityList(urlQuery, next) {
if (result?.templateInfo) {
let t = result.templateInfo;
// 即将开始
// t.startTime = '2021-09-24 00:00:00';
// t.endTime = '2021-09-25 00:00:00';
t.startTime = '2021-09-23 20:00:00';
t.endTime = '2021-09-23 20:02:00';
// 正在活动中
t.startTime = '2021-09-23 00:00:00';
t.endTime = '2021-09-25 00:00:00';
// 活动已结束
// t.startTime = '2021-09-23 00:00:00';
// t.endTime = '2021-09-25 00:00:00';
// // 活动已结束
// t.startTime = '2021-09-23 10:45:00';
// t.endTime = '2021-09-23 11:16:30';
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 ? '活动已结束' : '距结束';
// t.endTime = '2021-09-23 19:17:20';
t = await computedTemplate(t);
t.groupBuyUserInfoList = t.groupBuyUserInfoList.reverse();
const { title } = t;
store.commit('CHANGE_TITLE', title || '活动页');
store.commit('CHANGE_TITLE', t.title || '活动页');
nextFns(vm => {
vm.activityId = activityId;
vm.topicList = t;
// vm.topicIndex = activityIndex;
vm.goodsTemp = t;
localStorage.set('activityId', activityId);
// const { hasStop } = vm.topicCfg;
// if (hasStop || !list.length) {
// vm.showOverTip = true;
// }
vm.getGoodsList();
vm.reload = false;
});
......
src/views/orderList/components/List.vue
View file @ ff0abda8
......@@ -89,7 +89,7 @@ import { isWxMp, isApp } from '@/service/validation.service';
import Bridge from '@qg/js-bridge';
import MpBridge from '@/service/mp';
import { registeredEvents } from '@/service/sa.service';
import groupBuyApi from '@/api/groupBuy';
export default {
name: 'OrderSkuList',
components: {
......@@ -106,6 +106,8 @@ export default {
},
data() {
return {
shareInfo: null,
nativeBridge: null,
gpCountDown: new Date('2021-09-12 00:00:00').getTime(),
......@@ -157,33 +159,30 @@ export default {
goGroupPayPages(skuInfo) {
this.$router.push(`/pay?orderNo=${skuInfo.orderNo}`);
},
async getGroupShareInfo(order) {
const res = await groupBuyApi.getGroupShareInfo(order);
console.log(res);
},
async openShareEvent(skuInfo) {
let options = await this.getShareData(skuInfo);
this.$store.dispatch('goods_share_open', options);
this.$emit('option-click', { ...skuInfo, eventType: 'share' });
// this.getGroupShareInfo('1440970158226214912');
// this.shareInfo = skuInfo;
// this.$store.dispatch('goods_share_open');
registeredEvents('H5_MyPuzzlePageGroupOrderBtnClick', {
sku_no: '',
leader_user_id: ''
});
},
async getShareData(skuInfo) {
return Promise.resolve({
title: skuInfo.skuName,
desc: '我正在免费拿商品，请你帮帮我',
link: `${window.location.origin}/activity/zeroBuy`, // 页面地址
imgUrl: skuInfo.imageUrl // 图片地
});
// await
},
toDetail(goodsItem) {
const { skuNo, skuList, activityInfoId, activityHundredGroupId } = goodsItem;
const { skuList, activityInfoId, activityHundredGroupId } = goodsItem;
this.$router.push({
path: '/groupBuy/skuInfoSmallPic',
query: {
h: 0,
skuNo,
activityHundredGroupId,
skuNo: skuList[0].skuNo,
groupBuyGroupId: activityHundredGroupId,
goodsSpecialId: skuList[0].goodsSpecialId,
activityId: activityInfoId,
templateId: skuList[0].activityTemplateInfoId,
......@@ -196,9 +195,6 @@ export default {
},
onOptionClick(orderInfo, eventType) {
this.$emit(EVENT_CLICK, { orderInfo, eventType });
},
toHome() {
this.$router.replace({ path: '/home' });
}
}
};
......
src/views/orderList/index.vue
View file @ ff0abda8
......@@ -34,6 +34,8 @@ import groupBuyApi from '@/api/groupBuy';
import List from './components/List';
import { isApp } from '@/service/validation.service';
import localStorage from '@/service/localStorage.service';
import { EventBus } from '@/service/utils.service';
import qs from 'qs';
const commonParams = {
loading: false,
finished: false,
......@@ -78,9 +80,56 @@ export default {
mounted() {
this.getstatusQuery();
this.getList();
this.onShareEventChange();
// this.$track.registeredEvents('H5_2B_MyOrderPageExposure');
},
methods: {
async getShareData(shareInfo) {
const linkPath = qs.stringify({
h: 0,
skuNo: shareInfo.skuNo,
groupBuyGroupId: shareInfo.activityHundredGroupId,
goodsSpecialId: shareInfo.specialId,
activityId: shareInfo.activityInfoId,
templateId: shareInfo.templateId,
templateDetailId: shareInfo.templateId
});
return Promise.resolve({
title: shareInfo.skuName,
link: `pages/webview/webview?url=${window.location.origin}?url=${encodeURIComponent(
JSON.stringify(linkPath)
)}`, // 页面地址
imgUrl: shareInfo.skuImg // 图片地
});
},
onShareEventChange() {
const vm = this;
console.log('update');
EventBus.$on('shareClickItem', async function({ ev, nativeBridge }) {
console.log(ev);
if (ev === 'pic') {
// 分享海报跳转小程序海报分享页面
// nativeBridge.openNewUrl({
// newUrl: `/pages/goodshare/index?url=${encodeURIComponent(
// JSON.stringify(shareDic.posterUrl)
// )}`
// });
}
if (ev === 'weixin') {
console.log('监听事件');
// const res = await groupBuyApi.getGroupShareInfo(this.shareInfo.order);
const [res] = await groupBuyApi.getGroupShareInfo('1440884214932389888');
const shareDic = await vm.getShareData(res);
// 分享朋友派发微信postMessage事件
nativeBridge.run({
event: 'showShareView',
data: {
shareDic
}
});
}
});
},
getstatusQuery() {
const { status } = this.$route.params || {};
status && (this.currentTab = Number(status));
......@@ -93,34 +142,14 @@ export default {
handleLoad() {
this.getList();
},
openShareEvent() {
this.$store.dispatch('goods_share_open');
},
handleOptionClick(info) {
const { orderInfo } = info || {};
const { cashCouponCancelNote, showCashCouponCancelNote } = orderInfo || {};
this.currentOrder = orderInfo;
this.currentOrder = info;
switch (info.eventType) {
case 'cancel':
this.orderCancelPopup();
break;
case 'pay':
this.toPay();
break;
case 'notify':
this.orderNotify();
break;
case 'again':
this.toGoods();
break;
case 'logistics':
this.expressActionsCheck();
break;
case 'confirm':
this.orderConfirmPopup();
break;
case 'toRefund':
this.orderRefundPopup(cashCouponCancelNote, showCashCouponCancelNote);
break;
case 'refund':
this.toRefund();
case 'share':
this.openShareEvent();
break;
default:
this.currentOrder = {};
......
src/views/pay/payResult.vue
View file @ ff0abda8
......@@ -59,13 +59,14 @@
</div>
</div>
<Goods />
<sharePic ref="sharePic" :share-pic-data="sharePicData" />
<sharePic ref="sharePic" :share-pic-data="sharePicData" @outputPicUrl="outputPicUrl" />
</div>
</template>
<script>
import { goUrlExtends } from './extends';
import CouponCard from './components/CouponCard.vue';
import { getCouponList, getOrderShareInfo } from '@/api/pay.api';
import { getCouponList } from '@/api/pay.api';
import groupBuyApi from '@/api/groupBuy';
import Goods from '@/components/RecoGoods/RecoGoods.vue';
import { isApp, isWxMp } from '@/service/validation.service';
import { EventBus } from '@/service/utils.service';
......@@ -102,16 +103,13 @@ export default {
this.freeAmount = freeAmount || '';
this.payStatus = success ? '订单支付成功' : '订单支付失败';
this.payStatusName = success ? '支付成功' : '支付失败';
this.$track?.registeredEvents('h5_RechargeResultPageExposure', {
pay_status: this.payStatus
});
this.getCouponList();
this.setShareData();
},
mounted() {
EventBus.$on('shareClickItem', ev => {
EventBus.$on('shareClickItem', ({ ev }) => {
if (ev === 'pic') {
this.getOrderShareInfo();
this.createPic();
}
});
},
......@@ -119,15 +117,18 @@ export default {
EventBus.$off('shareClickItem');
},
methods: {
outputPicUrl(res) {
console.log(res);
},
async setShareData() {
const [res] = await getOrderShareInfo({
const [res] = await groupBuyApi.getGroupShareInfo({
orderNo: this.orderNo
});
this.sharePicData = res;
},
getOrderShareInfo() {
console.log(typeof this.$refs.sharePic.uploadPic);
this.$refs.sharePic.uploadPic();
createPic() {
console.log(typeof this.$refs.sharePic.createAndUploadPic);
this.$refs.sharePic.createAndUploadPic();
},
share() {
// 分享
......@@ -166,7 +167,6 @@ export default {
},
async getCouponList() {
const [data] = await getCouponList({ orderNo: this.orderNo, paySuccess: true });
console.log(data);
if (data) {
this.couponList = data.couponList || [];
}
......
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