Skip to content

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

feat:订单列表页

parent e5561735
Hide whitespace changes
Inline Side-by-side
Showing with 215 additions and 123 deletions
public/index.html
View file @ f586fa06
......@@ -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 @ f586fa06
......@@ -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 @ f586fa06
......@@ -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/router/groupBuy.js
View file @ f586fa06
......@@ -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 @ f586fa06
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/views/goodsList/components/goodsCard.vue
View file @ f586fa06
<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>
......@@ -100,6 +96,10 @@ export default {
activityInfoId
} = this.goodsItem;
const { s } = this.btnByStatus;
if (s === 3) {
this.$notify({ type: 'warning', message: '该商品已抢完' });
return;
}
if (s === 2) {
this.$router.push({
path: '/groupBuy/skuInfo',
......@@ -225,6 +225,7 @@ export default {
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
&.disabled {
......
src/views/goodsList/index.less
View file @ f586fa06
......@@ -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 @ f586fa06
......@@ -42,6 +42,7 @@
v-model="loading"
:finished="finished"
finished-text="没有更多了"
:immediate-check="false"
@load="onLoad"
>
<goods-card
......@@ -54,6 +55,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 +82,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
......@@ -99,6 +107,7 @@ export default {
customers: {},
// goodsSpecialId 是
showLoading: true,
pageNo: 1, // 是
pageSize: 10, // 否
activityId: '', //是
......@@ -142,16 +151,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 +169,11 @@ export default {
}
}
},
activated() {
// this.topicIndex = topicIndex;
// this.setTitleColor(this.topicCfg.bgcolor);
// store.commit('changeTitle', this.topicCfg.title || '活动页');
},
methods: {
animationEventStart() {
this.showSwipe = false;
......@@ -179,7 +186,7 @@ export default {
async goToMyorder() {
const isLogin = this.checkLogin();
if (!isLogin) {
this.$router.push('/createOrder');
this.$router.push('/orderList/0');
}
},
async openShareEvent() {
......@@ -195,13 +202,6 @@ export default {
});
// await
},
avatorTimeSyncChange() {
setInterval(() => {
this.showSwipe = false;
this.getAvatorList();
// clearTimeout(timer);
}, 3000);
},
showSwipeSync(avatorData) {
let timer = setTimeout(() => {
this.avatorData = avatorData;
......@@ -209,17 +209,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;
......@@ -282,8 +277,8 @@ async function getActivityList(urlQuery, next) {
const [result] = await groupBuyApi.getTemplateList(activityId);
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-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 @ f586fa06
......@@ -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>
......@@ -100,9 +93,28 @@ export default {
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;
......@@ -112,6 +124,40 @@ export default {
}
},
methods: {
goGroupDetails(goodsItem) {
const {
skuNo,
goodsSpecialId,
activityTemplateInfoId,
activityTemplateDetailId,
activityInfoId
} = goodsItem;
this.$router.push({
paht: '/groupBuy/skuInfoSmallPic',
query: {
h: 0,
skuNo,
goodsSpecialId,
activityId: activityInfoId,
templateId: activityTemplateInfoId,
templateDetailId: activityTemplateDetailId
}
});
},
async openShareEvent(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(order) {
this.$router.push({ path: '/orderDetail', query: { orderNo: order.orderNo } });
},
......
src/views/orderList/components/ListItem.vue
View file @ f586fa06
......@@ -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 @ f586fa06
......@@ -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