Skip to content

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

Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

parents 9b004c5d c7cb6239
Hide whitespace changes
Inline Side-by-side
Showing with 301 additions and 17783 deletions
package-lock.json
View file @ 3702d879
This source diff could not be displayed because it is too large. You can view the blob instead.
public/index.html
View file @ 3702d879
......@@ -105,12 +105,12 @@
</script>
</head>
<body>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script> -->
</script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
......
src/App.vue
View file @ 3702d879
......@@ -3,7 +3,10 @@
<cr-nav-bar v-if="header" :title="title" left-text="" @click-left="backFun" />
<div class="app">
<Weapp v-if="isWeixinBrowser" jump-url="/pages/user/login" />
<router-view />
<keep-alive>
<router-view v-if="$route.meta.keepLive" />
</keep-alive>
<router-view v-if="!$route.meta.keepLive" />
</div>
<div v-if="loading" class="loading-container">
<cr-loading class="loading" size="24px">加载中...</cr-loading>
......
src/api/groupBuy.js
View file @ 3702d879
......@@ -29,9 +29,6 @@ export default {
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, {
......@@ -48,5 +45,12 @@ export default {
return http.get(`${talosHost}/api/kdsp/ka/info/getShareMiniUrl`, data, {
hideLoading: true
});
},
// 获取百人团订单
getGroupOrderList(params) {
// return http.get(`http://yapi.quantgroups.com/mock/351/api/kdsp/group-order/list`, {
return http.get(`${talosHost}/api/kdsp/group-order/list`, {
params
});
}
};
src/components/groupSwiper.vue
View file @ 3702d879
<template>
<div class="avator-swiper" @click="onSlidePrevChange">
<div class="avator-swiper">
<swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
<swiper-slide
v-for="(item, index) in avatorData"
......@@ -36,6 +36,7 @@ export default {
data() {
const vm = this;
return {
timer: null,
rightImgPath: '',
avatorItem: null,
swiperOptions: {
......@@ -78,17 +79,15 @@ export default {
return this.$refs.mySwiper.swiper;
}
},
watch: {
avatorData() {
clearInterval(this.timer);
this.onSlidePrevChange();
}
},
mounted() {
this.onSlidePrevChange();
// this.onSlidePrevChange();
},
// beforeDestroy() {
// this.swiper.destroy(true);
// },
methods: {
onSlidePrevChange() {
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
this.$emit('animation-event-start');
this.swiper.slidePrev();
......
src/router/groupBuy.js
View file @ 3702d879
......@@ -15,13 +15,13 @@ module.exports = [
path: '/groupBuy/list',
name: 'groupBuyList',
component: () => import('../views/goodsList/index.vue'),
meta: { title: '0元购大牌' }
meta: { title: '0元购大牌', keepLive: true }
},
{
path: '/orderList',
path: '/orderList/:status',
name: 'orderList',
meta: {
title: '我的订单'
title: '我的拼团'
},
component: () => import('../views/orderList/index.vue')
},
......
src/service/utils.service.js
View file @ 3702d879
import { isAndroid, isIOS } from './validation.service';
import { isAndroid, isIOS, isXyqb } from './validation.service';
import Bridge from '@qg/js-bridge';
const jsBridge = new Bridge();
import Vue from 'vue';
export const EventBus = new Vue();
......@@ -337,6 +338,33 @@ export function getQueryString(name) {
return null;
}
// HEX转RGB
export function hexToRgb(hex) {
var rgb = [];
for (let i = 1; i < 7; i += 2) {
rgb.push(parseInt('0x' + hex.slice(i, i + 2)));
}
return rgb;
}
export function setAppTitleColor(bgcolor = '#fff') {
if (!isXyqb) return;
const isGradient = Array.isArray(bgcolor);
let rgbColor = isGradient ? bgcolor[0] : bgcolor;
if (rgbColor.toLocaleLowerCase().indexOf('#') > -1) rgbColor = hexToRgb(rgbColor);
const isDarkContent = 0.213 * rgbColor[0] + 0.715 * rgbColor[1] + 0.072 * rgbColor[2] <= 255 / 2;
const colors = isGradient
? [bgcolor[0].substr(1), bgcolor[1].substr(1)]
: [bgcolor.substr(1), bgcolor.substr(1)];
jsBridge.run({
event: 'resetNavigationBarColor',
data: {
isDarkContent,
colors
}
});
}
export function appShareEventChange({ title, desc, link, imgUrl }) {
const data = {
event: 'showShareView',
......
src/service/validation.service.js
View file @ 3702d879
......@@ -289,10 +289,10 @@ export const isWechat = ua.match(/MicroMessenger/i) == "micromessenger";
export const isWxMp = ua.match(/miniProgram/i) == 'miniprogram';
// 判断羊小咩（信用钱包）环境
export const isApp= ua.match(/xyqb/i) == "xyqb";
export const isApp = ua.match(/xyqb/i) == "xyqb";
// 判断真享生活
export const isVcc= ua.match(/VCC/i) == "vcc";
export const isVcc = ua.match(/VCC/i) == "vcc";
// 判断IOS环境
export const isIOS = /iphone|ipad|ipod/.test(ua);
......@@ -303,6 +303,9 @@ export const isAndroid = /android/.test(ua);
// 判断
export const appVersion = ua.match(/xyqb\/([\d|.]+)/);
// 判断羊小咩环境
export const isXyqb = ua.match(/xyqb/i) == "xyqb";
export const isQQ = ua.match(/QQ/i) == 'qq';
export const isWeiBo = ua.match(/Weibo/i) == 'weibo';
......
src/views/goodsList/components/goodsCard.vue
View file @ 3702d879
<template>
<dl class="group-item" :class="{ disabled: groupStop }">
<dl class="group-item" :class="{ disabled: groupStop }" @click.stop="onButtonClick">
<dt class="group-item-thumb">
<cr-image :src="goodsItem.thumbImageUrl" />
<span class="group-item-tag">{{ goodsItem.groupBuyLimitUserCount }}人团</span>
......@@ -24,13 +24,9 @@
<!-- 已抢光 -->
<!-- 未开始 -->
<!-- 已结束 -->
<cr-button
shape="circle"
type="primary"
:disabled="btnByStatus.d"
@click.stop="onButtonClick"
>{{ btnByStatus.t }}</cr-button
>
<cr-button size="small" shape="circle" type="danger" :disabled="btnByStatus.d">{{
btnByStatus.t
}}</cr-button>
</dd>
</dl>
</template>
......@@ -92,11 +88,33 @@ export default {
return Math.round(percentage * 100) / 100;
},
onButtonClick() {
const {
skuNo,
goodsSpecialId,
activityTemplateInfoId,
activityTemplateDetailId,
activityInfoId
} = this.goodsItem;
const { s } = this.btnByStatus;
// if (btnByStatus.s === 2) {
// // 正常跳转
// return false;
// }
if (s === 3) {
this.$notify({ type: 'warning', message: '该商品已抢完' });
return;
}
if (s === 2) {
this.$router.push({
path: '/groupBuy/skuInfo',
query: {
h: 0,
skuNo,
goodsSpecialId,
activityId: activityInfoId,
templateId: activityTemplateInfoId,
templateDetailId: activityTemplateDetailId
}
});
// 正常跳转
return false;
}
this.$dialog({
message: '请在微信小程序中参与此活动哦~',
confirmButtonText: s === 3 ? '重新选择' : '订阅消息',
......@@ -138,7 +156,7 @@ export default {
border-radius: 6px;
overflow: hidden;
position: relative;
padding: 3px;
// padding: 3px;
margin-right: 8px;
.cr-image {
width: 100%;
......@@ -207,6 +225,7 @@ export default {
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
&.disabled {
......
src/views/goodsList/index.less
View file @ 3702d879
......@@ -124,5 +124,24 @@
animation-fill-mode: forwards;
}
}
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 999;
font-size: 18px;
padding: 16px 12px 0;
text-align: center;
box-sizing: border-box;
@{deep} .cr-skeleton {
margin-bottom: 12px;
&__content {
width: 100% !important;
}
}
}
}
}
src/views/goodsList/index.vue
View file @ 3702d879
......@@ -18,7 +18,8 @@
</div>
<div class="group-portrait-ul">
<groupSwiper
v-if="topicCfg.groupBuyUserInfoList"
v-if="showLoops"
ref="swipeRota"
:avator-data="topicCfg.groupBuyUserInfoList"
@animation-event-start="animationEventStart"
@animation-event-end="animationEventEnd"
......@@ -42,6 +43,7 @@
v-model="loading"
:finished="finished"
finished-text="没有更多了"
:immediate-check="false"
@load="onLoad"
>
<goods-card
......@@ -54,6 +56,12 @@
/>
</cr-list>
</div>
<div v-if="showLoading" class="loading">
<cr-skeleton title :row="5" />
<cr-skeleton title :row="5" />
<cr-skeleton title :row="5" />
<cr-skeleton title :row="5" />
</div>
<!-- 下方列表展示信息 end -->
</div>
<dl v-if="!isShowShare" class="group-share" @click="openShareEvent">
......@@ -75,6 +83,7 @@ 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 } from '@/service/utils.service';
let topicIndex;
export default {
// eslint-disable-next-line vue/name-property-casing
......@@ -84,7 +93,6 @@ export default {
data() {
return {
showShare: false,
avatorData: [],
animate: {
......@@ -96,9 +104,11 @@ export default {
},
showSwipe: false,
showLoops: false,
customers: {},
// goodsSpecialId 是
showLoading: true,
pageNo: 1, // 是
pageSize: 10, // 否
activityId: '', //是
......@@ -142,16 +152,9 @@ export default {
// this.hasLogin = !!localStorage.get('vccToken');
},
mounted() {
this.$nextTick(() => {
// this.avatorTimeSyncChange();
this.getAvatorList();
});
this.showLoading = true;
},
beforeRouteEnter(to, from, next) {
// if (;topicIndex) {
// next();
// }
const { activityId } = to.query;
if (!activityId || isNaN(activityId)) {
next({
......@@ -167,6 +170,19 @@ export default {
}
}
},
deactivated() {
clearTimeout(this.$refs.swipeRota.timer);
this.showLoops = false;
},
activated() {
this.showLoops = true;
this.$nextTick(() => {
this.$refs.swipeRota.onSlidePrevChange();
});
// this.topicIndex = topicIndex;
// this.setTitleColor(this.topicCfg.bgcolor);
// store.commit('changeTitle', this.topicCfg.title || '活动页');
},
methods: {
animationEventStart() {
this.showSwipe = false;
......@@ -179,7 +195,7 @@ export default {
async goToMyorder() {
const isLogin = this.checkLogin();
if (!isLogin) {
this.$router.push('/createOrder');
this.$router.push('/orderList/0');
}
},
async openShareEvent() {
......@@ -195,13 +211,6 @@ export default {
});
// await
},
avatorTimeSyncChange() {
setInterval(() => {
this.showSwipe = false;
this.getAvatorList();
// clearTimeout(timer);
}, 3000);
},
showSwipeSync(avatorData) {
let timer = setTimeout(() => {
this.avatorData = avatorData;
......@@ -209,17 +218,12 @@ export default {
clearTimeout(timer);
}, 1000);
},
async getAvatorList() {
try {
const [data] = await groupBuyApi.getGroupAvator();
this.showSwipeSync(data);
} catch (err) {
console.log(err);
}
},
switchAnimation() {
this.animate.animateAuto = !this.animate.animateAuto;
},
setTitleColor(bgcolor = '#fff') {
setAppTitleColor(bgcolor);
},
handleBtnClick(item) {
const { activityId } = this;
const { goodsSpecialId, templateId, templateDetailIds } = this.topicCfg;
......@@ -280,10 +284,10 @@ async function getActivityList(urlQuery, next) {
nextFns = next;
}
const [result] = await groupBuyApi.getTemplateList(activityId);
if (result?.t) {
let t = result.t;
t.startTime = '2021-09-15 00:00:00';
t.endTime = '2021-09-22 00:00:00';
if (result?.templateInfo) {
let t = result.templateInfo;
// 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;
......
src/views/orderList/components/List.vue
View file @ 3702d879
......@@ -11,57 +11,50 @@
<div class="Ol__head">
<div class="Ol__head-left">
<span class="Ol__head-image">
<cr-image
class="Ol__head-avator"
width="85%"
src="https://activitystatic.lkbang.net/mall-free-ui/img/avator_02.png"
/>
<cr-image class="Ol__head-avator" width="85%" :src="item.profilePhoto" />
<cr-image class="Ol__head-group" src="@/assets/images/group.png" />
</span>
<span class="Ol__head-name">胡**</span>
<span class="Ol__head-name">{{ item.nickname }}**</span>
</div>
<div class="Ol__head-right">
<template v-if="index % 2 === 0">
<span class="Ol__head-count">拼团中，差<b class="Ol__head-red">1人</b>成团</span>
<count-down :end-time="gpCountDown" />
<template v-if="item.openGroupStatus === 1">
<span class="Ol__head-count"
>拼团中，差<b class="Ol__head-red">{{ item.needGuys }}人</b>成团</span
>
<count-down :end-time="+new Date(item.endTime)" />
</template>
<template v-else-if="index % 3 === 0">
<span class="Ol__head-success">已成团，等待发货！</span>
<template v-else-if="item.openGroupStatus === 2">
<span :class="cardInfoMation[item.openGroupStatus].class">{{
cardInfoMation[item.openGroupStatus].message
}}</span>
</template>
<template v-else>
<span class="Ol__head-fail">拼团失败</span>
</template>
<!-- <span class="Ol__head-state">{{ item.orderStatusText }}</span> -->
</div>
</div>
<div class="Ol__body">
<list-item
:list="item"
:show-after="item.orderStatus == 31 || item.orderStatus == 41"
:after-show="false"
/>
<list-item :list="item" :after-show="false" />
</div>
<div class="Ol__foot">
<div class="Ol__foot-text">拼团成功即可退款0元拿</div>
<div class="Ol__foot-text">{{ cardInfoMation[item.openGroupStatus].footTxt }}</div>
<div class="Ol__foot-btns">
<!-- <cr-button
<cr-button
v-if="item.showInvite"
size="small"
plain
type="default"
type="primary"
shape="circle"
@click.stop="onOptionClick({ ...item, index }, 'cancel')"
@click.stop="openShareEvent(item.skuList[0])"
>
取消订单
</cr-button> -->
邀请好友
</cr-button>
<cr-button
v-if="item.showOrderDetail"
size="small"
plain
type="primary"
shape="circle"
@click.stop="onOptionClick({ ...item, index }, 'pay')"
@click.stop="goGroupDetails(item)"
>
付款
查看订单
</cr-button>
</div>
</div>
......@@ -81,6 +74,9 @@ import ListItem from './ListItem.vue';
const EVENT_LOADING = 'load';
const EVENT_CLICK = 'option-click';
import countDown from '@/components/countDown';
import { isWxMp, isApp } from '@/service/validation.service';
import Bridge from '@qg/js-bridge';
import MpBridge from '@/service/mp';
export default {
name: 'OrderSkuList',
components: {
......@@ -97,12 +93,32 @@ export default {
},
data() {
return {
nativeBridge: null,
gpCountDown: new Date('2021-09-12 00:00:00').getTime(),
listLoading: false,
listFinished: false
listFinished: false,
cardInfoMation: {
// 开团状态：1拼团中、2拼团成功、3拼团失败 4.整体拼团处理中
1: {
message: '',
footTxt: '拼团成功即可退款0元拿'
},
2: {
class: 'Ol__head-success',
message: '已成团，等待发货！',
footTxt: '退款将原路返还，请注意帐户变动'
},
3: {
class: 'Ol__head-fail',
message: '拼团失败',
footTxt: '0元拿商品，退款将原路返还'
}
}
};
},
watch: {
loading(val) {
this.listLoading = val;
......@@ -111,9 +127,45 @@ export default {
this.listFinished = val;
}
},
created() {
if (isApp) this.nativeBridge = new Bridge();
else if (isWxMp) this.nativeBridge = new MpBridge();
},
methods: {
toDetail(order) {
this.$router.push({ path: '/orderDetail', query: { orderNo: order.orderNo } });
goGroupDetails(skuInfo) {
this.nativeBridge.openNewUrl({
newUrl: `/pages/order/orderDetail?orderNo=${skuInfo.orderNo}`
});
},
async openShareEvent(skuInfo) {
this.goGroupDetails(skuInfo);
// let options = await this.getShareData(skuInfo);
// this.$store.dispatch('goods_share_open', options);
},
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;
this.$router.push({
path: '/groupBuy/skuInfoSmallPic',
query: {
h: 0,
skuNo,
activityHundredGroupId,
goodsSpecialId: skuList[0].goodsSpecialId,
activityId: activityInfoId,
templateId: skuList[0].activityTemplateInfoId,
templateDetailId: skuList[0].activityTemplateDetailId
}
});
},
onLoad() {
this.$emit(EVENT_LOADING);
......
src/views/orderList/components/ListItem.vue
View file @ 3702d879
......@@ -17,22 +17,22 @@
height="2.266667rem"
class="Ol__body-img"
/>
<span class="Ol__body-tag">3人团</span>
<span class="Ol__body-tag">{{ props.list.openGroupCnt }}人团</span>
</div>
<div class="Ol__body-content">
<div class="Ol__body-row">
<span class="Ol__body-title">
{{ it.skuName }}
</span>
<span v-if="it.salePrice" class="Ol__body-salePrice">
<span class="Ol__body-skus">¥{{ it.salePrice }}</span>
<span class="Ol__body-salePrice">
<span class="Ol__body-skus">¥{{ it.payAmount }}</span>
<span class="Ol__body-count">{{ it.count }}件</span>
</span>
</div>
<div class="Ol__body-skus">
<span class="Ol__body-sku">{{ it.skuAttr }}</span>
</div>
<div v-if="props.showAfter && (it.havingService || props.afterShow)" class="Ol__body-skus">
<!-- <div v-if="props.showAfter && (it.havingService || props.afterShow)" class="Ol__body-skus">
<span class="Ol__body-sku">
<cr-button
size="mini"
......@@ -44,7 +44,7 @@
{{ it.havingService ? '售后中' : props.afterShow ? '售后' : '' }}
</cr-button>
</span>
</div>
</div> -->
</div>
</div>
</div>
......
src/views/orderList/index.vue
View file @ 3702d879
......@@ -18,26 +18,21 @@
/>
</cr-tab>
</cr-tabs>
<cancel-popup
v-model="showCancelPopup"
:order-info="currentOrder"
@complete="handleCancelState"
/>
<cr-action-sheet
<!-- <cr-action-sheet
v-model="showExpressPopup"
title="请选择物流单号"
cancel-txt="关闭"
round
:actions="expressActions"
@click="toExpress"
/>
/> -->
</div>
</template>
<script>
import orderApi from '@/api/order.api';
import groupBuyApi from '@/api/groupBuy';
import List from './components/List';
import { isApp } from '@/service/validation.service';
import CancelPopup from './components/CancelPopup';
import localStorage from '@/service/localStorage.service';
const commonParams = {
loading: false,
......@@ -49,8 +44,7 @@ const commonParams = {
export default {
name: 'OrderList',
components: {
List,
CancelPopup
List
},
data() {
return {
......@@ -58,20 +52,21 @@ export default {
showCancelPopup: false,
showExpressPopup: false,
currentTab: 0,
// 0-全部 1 -拼团中 2-拼团成功
navList: [
{
state: 0,
status: 0,
title: '全部',
...JSON.parse(JSON.stringify(commonParams))
},
{
state: 11,
title: '待付款',
status: 1,
title: '拼团中',
...JSON.parse(JSON.stringify(commonParams))
},
{
state: 21,
title: '待发货',
status: 2,
title: '已成团',
...JSON.parse(JSON.stringify(commonParams))
}
],
......@@ -81,14 +76,14 @@ export default {
};
},
mounted() {
this.getStateQuery();
this.getstatusQuery();
this.getList();
// this.$track.registeredEvents('H5_2B_MyOrderPageExposure');
},
methods: {
getStateQuery() {
const { state } = this.$route.params || {};
state && (this.currentTab = Number(state));
getstatusQuery() {
const { status } = this.$route.params || {};
status && (this.currentTab = Number(status));
},
handleTabChange(name) {
this.currentTab = name;
......@@ -194,28 +189,28 @@ export default {
},
orderConfirmPopup() {
if (!this.currentOrder.orderNo) return;
this.$dialog({
title: '确定该订单已收货吗？',
onConfirm: () => {
orderApi
.orderConfirm({
orderNo: this.currentOrder.orderNo,
status: 41
})
.then(res => {
if (res[0]) {
this.updateCurrentOrder(41, '交易完成');
this.$toast('操作成功');
}
});
}
});
// this.$dialog({
// title: '确定该订单已收货吗？',
// onConfirm: () => {
// orderApi
// .orderConfirm({
// orderNo: this.currentOrder.orderNo,
// status: 41
// })
// .then(res => {
// if (res[0]) {
// this.updateCurrentOrder(41, '交易完成');
// this.$toast('操作成功');
// }
// });
// }
// });
},
handleCancelState() {
handleCancelstatus() {
this.updateCurrentOrder(51, '交易关闭');
},
updateCurrentOrder(state, txt) {
this.$set(this.navList[this.currentTab].list[this.currentOrder.index], `orderStatus`, state);
updateCurrentOrder(status, txt) {
this.$set(this.navList[this.currentTab].list[this.currentOrder.index], `orderStatus`, status);
this.$set(
this.navList[this.currentTab].list[this.currentOrder.index],
`orderStatusText`,
......@@ -250,17 +245,18 @@ export default {
this.$set(this.navList[this.currentTab], key, val);
},
async getList() {
let { finished, page, pageSize, list, state: orderStatus } = this.navList[this.currentTab];
let { finished, page, pageSize, list, status } = this.navList[this.currentTab];
if (finished) return;
this.setNavListData('loading', true);
const [res] = await orderApi.orderList({
const [res] = await groupBuyApi.getGroupOrderList({
pageNo: page,
pageSize,
orderStatus
status
});
if (res) {
// console.log(res.records);
if (res?.records?.length) {
this.setNavListData('loading', false);
list = [...list, ...res.orderList];
list = [...list, ...res.records];
this.setNavListData('list', list);
if (!res.hasNext) {
this.setNavListData('finished', true);
......
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