diff --git a/apps/pages/single/coupon/components/coupon-item/coupon-item.vue b/apps/pages/single/coupon/components/coupon-item/coupon-item.vue
index 532e192..274eeda 100644
--- a/apps/pages/single/coupon/components/coupon-item/coupon-item.vue
+++ b/apps/pages/single/coupon/components/coupon-item/coupon-item.vue
@@ -1,8 +1,42 @@
<template>
- <div class="coupon-secion">
+ <div class="coupon-section">
<div :class="classes">
-
+ <div :class="contentClass">
+ <p class="value"><span>{{item.coupon_value_str}}</span></p>
+ <p class="threshold" v-if="item.use_rule">{{item.use_rule}}</p>
+ </div>
+
+ <div class="coupon-right">
+ <p class="title">
+ <span :class="typeClass"> [{{item.catalog_name}}] </span>
+ {{item.coupon_name}}
+ </p>
+
+ <p class="time">{{item.coupon_validity}}</p>
+
+ <p class="use-intro" v-if="item.notes" @click="onClickTip">
+ <span class="show-intro-btn">使用说明</span>
+ <span :class="introClass"></span>
+ </p>
+
+ <span class="tip"></span>
+ </div>
+
+ <template v-if="item.usedOvertimeOrInValid">
+ <div class="stamp overtime-stamp" v-if="item.is_overtime === 'Y'"></div>
+ <div class="stamp invalid-stamp" v-if="item.is_invalid === 'Y'"></div>
+ <div class="stamp used-stamp" v-if="item.is_used"></div>
+ </template>
+
+ <template v-else>
+ <a :href="item.useNowLink" class="use-now">立即使用</a>
+ <span class="top-tip" v-if="item.is_overdue_soon === 'Y'"></span>
+ </template>
</div>
+
+ <ul class="coupon-intro" v-if="show">
+ <li v-for="(it, index) in item.notes" :key="index">{{it}}</li>
+ </ul>
</div>
</template>
@@ -10,270 +44,305 @@
export default {
name: 'CouponItem',
props: {
-
+ item: {
+ type: Object,
+ default() {
+ return {};
+ }
+ }
+ },
+ mounted() {
+ console.log(this.item);
},
data() {
return {
-
+ show: false
};
},
methods: {
-
+ onClickTip() {
+ this.show = !this.show;
+ }
},
computed: {
classes() {
return ['coupon', {
- 'coupon-overtime': 1,
- 'coupon-used': 1,
- 'coupon-invalid': 1
+ 'coupon-overtime': this.item.is_overtime === 'Y',
+ 'coupon-invalid': this.item.is_invalid === 'Y',
+ 'coupon-used': this.item.is_used
}];
+ },
+ contentClass() {
+ if (this.item.usedOvertimeOrInValid) {
+ return ['coupon-left'];
+ } else {
+ return ['coupon-left', {
+ 'coupon-left-shop': this.item.catalog === 100,
+ 'coupon-left-activity': this.item.catalog === 200,
+ 'coupon-left-freight': this.item.catalog === 300,
+ }];
+ }
+ },
+ typeClass() {
+ return [{
+ 'type-shop': this.item.catalog === 100,
+ 'type-activity': this.item.catalog === 200,
+ 'type-freight': this.item.catalog === 300,
+ }];
+ },
+ introClass() {
+ if (this.show) {
+ return ['iconfont', 'icon-up'];
+ } else {
+ return ['iconfont', 'icon-downn'];
+ }
}
},
- watch: {
-
- },
+ watch: {},
};
</script>
<style lang="scss" scoped>
-.coupon-section {
- margin-bottom: 20px;
-}
-
-.coupon {
- position: relative;
- width: 710px;
- height: 200px;
-
- .coupon-left {
- width: 200px;
- height: 200px;
- background-image: url("~image/coupon/overtime.png");
- background-size: 100% 100%;
- float: left;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
+ .coupon-section {
+ margin-bottom: 20px;
}
- .coupon-left > p {
- color: #fc5960;
- font-size: 24px;
-
- > span {
- font-size: 60px;
- font-weight: 600;
+ .coupon {
+ position: relative;
+ width: 710px;
+ height: 200px;
+ margin: 0 auto;
+
+ .coupon-left {
+ width: 200px;
+ height: 200px;
+ background-image: url("~statics/image/coupon/overtime.png");
+ background-size: 100% 100%;
+ float: left;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
}
- }
- .coupon-left-activity {
- background-image: url("~image/coupon/activity.png");
- }
-
- .coupon-left-freight {
- background-image: url("~image/coupon/freight.png");
+ .coupon-left > p {
+ color: #fc5960;
+ font-size: 24px;
- > p {
- color: #000;
+ > span {
+ font-size: 60px;
+ font-weight: 600;
+ }
}
- > p > span {
- font-size: 48px;
- font-weight: 600;
+ .coupon-left-activity {
+ background-image: url("~statics/image/coupon/activity.png");
}
- }
-
- .coupon-left-shop {
- background-image: url("~image/home/coupon/shop.png");
- > p {
- color: #ffa72e;
- }
- }
+ .coupon-left-freight {
+ background-image: url("~statics/image/coupon/freight.png");
- .coupon-right {
- width: 510px;
- height: 200px;
- background-color: #fff;
- border-top-right-radius: 8px;
- border-bottom-right-radius: 8px;
- float: left;
- padding: 22px;
- font-size: 22px;
- color: #b0b0b0;
- position: relative;
+ > p {
+ color: #000;
+ }
- .type-shop,
- .type-activity,
- .type-freight {
- font-weight: 500;
+ > p > span {
+ font-size: 48px;
+ font-weight: 600;
+ }
}
- .type-shop {
- color: #efaf46;
- }
+ .coupon-left-shop {
+ background-image: url("~statics/image/coupon/shop.png");
- .type-activity {
- color: #fc5960;
+ > p {
+ color: #ffa72e;
+ }
}
- .type-freight {
- color: #222;
+ .coupon-right {
+ width: 510px;
+ height: 200px;
+ background-color: #fff;
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ float: left;
+ padding: 22px;
+ font-size: 22px;
+ color: #b0b0b0;
+ position: relative;
+
+ .type-shop,
+ .type-activity,
+ .type-freight {
+ font-weight: 500;
+ }
+
+ .type-shop {
+ color: #efaf46;
+ }
+
+ .type-activity {
+ color: #fc5960;
+ }
+
+ .type-freight {
+ color: #222;
+ }
+
+ .title {
+ width: 370px;
+ font-size: 24px;
+ color: #444;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ }
+
+ .time {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .use-intro {
+ position: absolute;
+ bottom: 22px;
+ }
+
+ .tip {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
}
- .title {
- width: 370px;
- font-size: 24px;
+ .use-now {
+ font-size: 22px;
+ position: absolute;
+ width: 130px;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ border: 1px solid #444;
+ border-radius: 25px;
+ background-color: #fff;
color: #444;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
+ bottom: 20px;
+ right: 20px;
}
- .time {
+ .stamp {
position: absolute;
+ width: 126px;
+ height: 114px;
+ right: 20px;
top: 50%;
transform: translateY(-50%);
+ background-size: 100% 100%;
}
- .use-intro {
- position: absolute;
- bottom: 22px;
+ .overtime-stamp {
+ background-image: url("~statics/image/coupon/timeout.png");
}
- .tip {
+ .used-stamp {
+ background-image: url("~statics/image/coupon/used.png");
+ }
+
+ .invalid-stamp {
+ background-image: url("~statics/image/coupon/invalid.png");
+ }
+
+ .top-tip {
+ width: 84px;
+ height: 84px;
+ background-image: url("~statics/image/coupon/top-tip.png");
+ background-size: 100% 100%;
position: absolute;
top: 0;
right: 0;
}
}
- .use-now {
- font-size: 22px;
- position: absolute;
- width: 130px;
- height: 50px;
- line-height: 50px;
- text-align: center;
- border: 1px solid #444;
- border-radius: 25px;
- background-color: #fff;
- color: #444;
- bottom: 20px;
- right: 20px;
+ .freight-coupon {
+ > .coupon-left {
+ font-size: 48px;
+ }
}
- .stamp {
- position: absolute;
- width: 126px;
- height: 114px;
- right: 20px;
- top: 50%;
- transform: translateY(-50%);
- background-size: 100% 100%;
- }
+ .coupon-invalid,
+ .coupon-used,
+ .coupon-overtime {
+ > .coupon-left > p {
+ color: #b0b0b0;
+ }
- .overtime-stamp {
- background-image: url("~image/coupon/timeout.png");
- }
+ > .coupon-right > .title {
+ color: #b0b0b0;
- .used-stamp {
- background-image: url("~image/coupon/used.png");
- }
+ & > .type-activity {
+ color: #b0b0b0;
+ }
- .invalid-stamp {
- background-image: url("~image/coupon/invalid.png");
- }
+ & > .type-freight {
+ color: #b0b0b0;
+ }
- .top-tip {
- width: 84px;
- height: 84px;
- background-image: url("~image/coupon/top-tip.png");
- background-size: 100% 100%;
- position: absolute;
- top: 0;
- right: 0;
+ & > .type-shop {
+ color: #b0b0b0;
+ }
+ }
}
-}
-.freight-coupon {
- > .coupon-left {
- font-size: 48px;
- }
-}
+ .coupon-intro {
+ background: rgba(255, 255, 255, 0.7);
+ margin: -12px auto 0;
+ padding: 36px 22px 22px;
+ width: 710px;
-.coupon-invalid,
-.coupon-used,
-.coupon-overtime {
- > .coupon-left > p {
- color: #b0b0b0;
+ li {
+ font-size: 22px;
+ color: #444;
+ }
}
- > .coupon-right > .title {
+ .no-conpon-now {
+ text-align: center;
+ padding-top: 262px;
color: #b0b0b0;
- & > .type-activity {
- color: #b0b0b0;
+ .icon-not {
+ width: 208px;
+ height: 130px;
+ background-image: url("~statics/image/coupon/not.png");
+ background-size: 100% 100%;
+ margin: auto auto 30px;
}
- & > .type-freight {
- color: #b0b0b0;
+ p {
+ font-size: 28px;
}
-
- & > .type-shop {
- color: #b0b0b0;
- }
- }
-}
-
-.coupon-intro {
- background: rgba(255, 255, 255, 0.7);
- margin-top: -12px;
- padding: 36px 22px 22px;
-
- li {
- font-size: 22px;
- color: #444;
- }
-}
-
-.no-conpon-now {
- text-align: center;
- padding-top: 262px;
- color: #b0b0b0;
-
- .icon-not {
- width: 208px;
- height: 130px;
- background-image: url("~image/coupon/not.png");
- background-size: 100% 100%;
- margin: auto auto 30px;
}
- p {
- font-size: 28px;
- }
-}
+ .used-tip {
+ display: flex;
-.used-tip {
- display: flex;
+ span {
+ color: #b0b0b0;
+ font-size: 24px;
+ }
- span {
- color: #b0b0b0;
- font-size: 24px;
+ hr {
+ width: 160px;
+ border: none;
+ border-bottom: 1px solid #e0e0e0;
+ }
}
- hr {
- width: 160px;
- border: none;
- border-bottom: 1px solid #e0e0e0;
+ .hide {
+ display: none;
}
-}
-
-.hide {
- display: none;
-}
</style>
diff --git a/apps/pages/single/coupon/components/empty/empty.vue b/apps/pages/single/coupon/components/empty/empty.vue
new file mode 100644
index 0000000..542aac4
--- /dev/null
+++ b/apps/pages/single/coupon/components/empty/empty.vue
@@ -0,0 +1,34 @@
+<template>
+ <div class="no-conpon-now">
+ <div class="icon-not"></div>
+ <p>暂无优惠券</p>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'EmptyComp'
+};
+</script>
+
+<style lang="scss" scoped>
+ .no-conpon-now {
+ text-align: center;
+ padding-top: 262px;
+ color: #b0b0b0;
+
+ .icon-not {
+ width: 208px;
+ height: 130px;
+ background-image: url("~statics/image/coupon/not.png");
+ background-size: 100% 100%;
+ margin: auto auto 30px;
+ }
+
+ p {
+ font-size: 28px;
+ }
+ }
+</style>
+
+
diff --git a/apps/pages/single/coupon/components/empty/index.js b/apps/pages/single/coupon/components/empty/index.js
new file mode 100644
index 0000000..e5eb0d3
--- /dev/null
+++ b/apps/pages/single/coupon/components/empty/index.js
@@ -0,0 +1,5 @@
+
+
+import Empty from './empty';
+
+export default Empty;
diff --git a/apps/pages/single/coupon/components/exchange-box/exchage-box.vue b/apps/pages/single/coupon/components/exchange-box/exchage-box.vue
index ef2f889..9ef7a8c 100644
--- a/apps/pages/single/coupon/components/exchange-box/exchage-box.vue
+++ b/apps/pages/single/coupon/components/exchange-box/exchage-box.vue
@@ -17,6 +17,7 @@ export default {
padding: 16px 20px;
background-color: #fff;
position: fixed;
+ top: 0;
left: 0;
z-index: 2;
diff --git a/apps/pages/single/coupon/components/filter-bar/filter-bar.vue b/apps/pages/single/coupon/components/filter-bar/filter-bar.vue
index fa64e14..512f988 100644
--- a/apps/pages/single/coupon/components/filter-bar/filter-bar.vue
+++ b/apps/pages/single/coupon/components/filter-bar/filter-bar.vue
@@ -32,7 +32,6 @@ export default {
align-items: center;
background-color: #fff;
position: fixed;
- top: 182px;
left: 0;
z-index: 3;
diff --git a/apps/pages/single/coupon/components/header/header.vue b/apps/pages/single/coupon/components/header/header.vue
new file mode 100644
index 0000000..12a13a1
--- /dev/null
+++ b/apps/pages/single/coupon/components/header/header.vue
@@ -0,0 +1,157 @@
+<template>
+ <LayoutApp>
+ <div :class="classes">
+ <div :class="[prefixCls + '-bar']">
+ <span class="back">
+ <i class="iconfont fontcls"></i>
+ </span>
+ <span class="help">
+ <i class="iconfont fontcls"></i>
+ </span>
+ <div>
+ <router-link class="yoho-tab" :to="{name: 'couponYoho'}" active-class="yoho-tab-active">有货优惠券</router-link><router-link class="yoho-tab" :to="{name: 'couponUfo'}" active-class="yoho-tab-active" >UFO优惠券</router-link>
+ </div>
+ </div>
+
+ <router-view></router-view>
+ </div>
+ </LayoutApp>
+</template>
+
+<script>
+export default {
+ name: 'Headers',
+ props: {
+ type: {
+ type: [String, Number]
+ },
+ navList: []
+ },
+ data() {
+ return {
+ prefixCls: 'yoho-tabs',
+ activeKey: this.type
+ };
+ },
+ computed: {
+ classes() {
+ return [`${this.prefixCls}`];
+ },
+ },
+ methods: {
+ updateNav() {
+ this.navList.forEach((pane, index) => {
+ this.navList.push({
+ label: pane.label,
+ name: pane.currentName || index,
+ disabled: pane.disabled
+ });
+
+ if (!pane.currentName) {
+ pane.currentName = index;
+ }
+
+ if (index === 0) {
+ if (!this.activeKey) {
+ this.activeKey = pane.currentName || index;
+ }
+ }
+ });
+
+ this.updateStatus();
+ },
+ updateStatus() {
+ const tabs = this.getTabs();
+
+ tabs.forEach(tab => (tab.show = tab.currentName === this.activeKey));
+ },
+ handleChange(index) {
+ const nav = this.navList[index];
+
+ this.activeKey = nav.name;
+ this.$emit('input', nav.name);
+ },
+ tabCls(item) {
+ return [
+ 'yoho-tab',
+ {
+ ['yoho-tab-active']: item.name === this.activeKey
+ }
+ ];
+ }
+ },
+ watch: {
+ activeKey(val) {
+ this.updateStatus();
+ },
+ value(val) {
+ this.activeKey = val;
+ }
+ },
+ created() {
+ // this.updateNav();
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+ $yoho-tab: yoho-tab;
+
+ .#{$yoho-tab}s {
+ width: 100%;
+ height: 100%;
+ }
+
+ .#{$yoho-tab} {
+ display: inline-block;
+ width: 200px;
+ height: 56px;
+ font-size: 12px;
+ color: white;
+ border: 1px solid white;
+ box-sizing: border-box;
+ background: #3a3a3a;
+ text-align: center;
+ line-height: 56px;
+ }
+
+ .#{$yoho-tab} + .#{$yoho-tab} {
+ border-left: none;
+ }
+
+ .#{$yoho-tab}s-bar {
+ width: 100%;
+ height: 90px;
+ display: flex;
+ background: #3a3a3a;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ z-index: 4;
+ }
+
+ .#{$yoho-tab}-active {
+ color: #444444;
+ background-color: white;
+ }
+
+ .#{$yoho-tab}s-pane {
+ width: 100%;
+ height: 100%;
+ }
+
+ .fontcls {
+ color: white;
+ font-size: 45px;
+ }
+
+ .back {
+ position: absolute;
+ left: 20px;
+ }
+
+ .help {
+ position: absolute;
+ right: 20px;
+ }
+</style>
diff --git a/apps/pages/single/coupon/components/header/index.js b/apps/pages/single/coupon/components/header/index.js
new file mode 100644
index 0000000..8a47fcf
--- /dev/null
+++ b/apps/pages/single/coupon/components/header/index.js
@@ -0,0 +1,4 @@
+
+import Header from './header';
+
+export default Header;
diff --git a/apps/pages/single/coupon/components/tabs/classic-tabs.vue b/apps/pages/single/coupon/components/tabs/classic-tabs.vue
index 8ee203d..5b698bb 100644
--- a/apps/pages/single/coupon/components/tabs/classic-tabs.vue
+++ b/apps/pages/single/coupon/components/tabs/classic-tabs.vue
@@ -6,94 +6,79 @@
v-for="(item, index) in navList"
@click="handleChange(index)"
:key="index"
- >{{item.label}}</div>
- </div>
- <div :class="contentClasses" :style="contentStyle" ref="panes">
- <slot name="panes"></slot>
+ >{{item.label}}
+
+ <span v-if="getNum[index]">({{getNum[index]}})</span>
+ <span :class="filterClass" v-if="item.filter"></span>
+ </div>
</div>
</div>
</template>
<script>
+import {createNamespacedHelpers} from 'vuex';
+const {mapGetters} = createNamespacedHelpers('coupon/yoho');
+
export default {
- name: "ClassicTabs",
+ name: 'ClassicTabs',
props: {
value: {
type: [String, Number]
+ },
+ data: {
+ type: Array,
+ default() {
+ return [];
+ }
}
},
data() {
return {
- prefixCls: "yoho-tabs",
- navList: [],
- activeKey: this.value
+ prefixCls: 'yoho-tabs',
+ navList: this.data,
+ activeKey: this.value,
+ show: false
};
},
computed: {
classes() {
return [`${this.prefixCls}`];
},
- contentClasses() {
- return [`yoho-tabs-pane`];
+ filterClass() {
+ if (this.show) {
+ return ['iconfont', 'icon-up'];
+ } else {
+ return ['iconfont', 'icon-downn'];
+ }
},
- contentStyle() {
- return [];
- }
+ ...mapGetters(['getNum'])
},
methods: {
- updateNav() {
- this.navList = [];
- this.getTabs().forEach((pane, index) => {
- this.navList.push({
- label: pane.label,
- name: pane.currentName || index,
- disabled: pane.disabled
- });
-
- if (!pane.currentName) pane.currentName = index;
-
- if (index === 0) {
- if (!this.activeKey) {
- this.activeKey = pane.currentName || index;
- }
- }
- });
-
- this.updateStatus();
- },
- getTabs() {
- return this.$children.filter(item => item.$options.name === "TabPane");
- },
- updateStatus() {
- const tabs = this.getTabs();
-
- tabs.forEach(tab => (tab.show = tab.currentName === this.activeKey));
- },
handleChange(index) {
const nav = this.navList[index];
- this.activeKey = nav.name;
- this.$emit("input", nav.name);
+ if (this.activeKey === nav.label) {
+ this.show = !this.show;
+ this.$emit('filter', this.show);
+ return;
+ }
+
+ this.activeKey = nav.label;
+ this.$emit('input', nav.label);
},
tabCls(item) {
return [
- "filter-btn-box",
+ 'filter-btn-box',
{
- active: item.name === this.activeKey
+ active: item.label === this.activeKey
}
];
- }
+ },
},
watch: {
- activeKey(val) {
- this.updateStatus();
- },
value(val) {
this.activeKey = val;
}
- },
- created() {
- // this.updateNav();
}
};
</script>
@@ -103,7 +88,6 @@ $yoho-tab: yoho-tab;
.#{$yoho-tab}s {
width: 100%;
- height: 100%;
}
.yoho-coupon-filter-bar {
@@ -113,9 +97,9 @@ $yoho-tab: yoho-tab;
padding: 14px 0;
box-shadow: 0 0 16px 0 #eee;
background-color: #fff;
- position: fixed;
left: 0;
z-index: 3;
+ border-bottom: 1px solid #e0e0e0;
.filter-btn-box {
flex: 1;
diff --git a/apps/pages/single/coupon/index.js b/apps/pages/single/coupon/index.js
index e585f13..8ee920d 100644
--- a/apps/pages/single/coupon/index.js
+++ b/apps/pages/single/coupon/index.js
@@ -1,4 +1,9 @@
import Ufo from './ufo';
import Yoho from './yoho';
+import Header from './components/header';
-export default [...Ufo, ...Yoho];
+export default [{
+ path: '/coupon',
+ component: Header,
+ children: [Ufo, Yoho]
+}];
diff --git a/apps/pages/single/coupon/ufo/index.js b/apps/pages/single/coupon/ufo/index.js
index 23db1a5..28ab202 100644
--- a/apps/pages/single/coupon/ufo/index.js
+++ b/apps/pages/single/coupon/ufo/index.js
@@ -1,5 +1,5 @@
-export default [{
- path: '/coupon/ufo',
- name: 'ufolist',
+export default {
+ path: 'ufo',
+ name: 'couponUfo',
component: () => import(/* webpackChunkName: "coupon" */ './list')
-}];
+};
diff --git a/apps/pages/single/coupon/ufo/list.vue b/apps/pages/single/coupon/ufo/list.vue
index 58dc8cb..347e90a 100644
--- a/apps/pages/single/coupon/ufo/list.vue
+++ b/apps/pages/single/coupon/ufo/list.vue
@@ -1,44 +1,125 @@
<template>
- <LayoutApp>
- <div class="order-page">
- <div class="title">出售中</div>
- <div class="product">
- <p class="name">{{orderProduct}}</p>
- <p>{{orderDetail}}</p>
- </div>
+ <div style="height: 100%;">
+ <div style="background-color: #f0f0f0;height: 100%;">
+ <div class="head"></div>
+ <Scroll :data="ufoList" :options="scrollOptions" v-if="ufoList.length">
+ <CouponItem :item="item" v-for="(item, index) in ufoList" :key ="index"></CouponItem>
+ </Scroll>
+ <Empty v-else></Empty>
</div>
- </LayoutApp>
+ </div>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
-const {mapState, mapActions} = createNamespacedHelpers('ufo/order');
+const {mapState} = createNamespacedHelpers('coupon/yoho');
+
+import CouponItem from '../components/coupon-item';
+import Empty from '../components/empty';
+
+import {Scroll} from 'cube-ui';
export default {
name: 'UfoCouponListPage',
computed: {
- ...mapState(['orderProduct', 'orderDetail'])
+ ...mapState(['ufoList']),
},
asyncData({store, router}) {
- return store.dispatch('ufo/order/fetchProduct', {orderId: router.params.orderId});
+ return store.dispatch('coupon/yoho/fetchUfoList', {
+ limit: 20,
+ page: 1
+ });
+ },
+ data() {
+ return {
+ scrollOptions: {
+ directionLockThreshold: 0
+ }
+ };
},
created() {
-
},
mounted() {
- this.fetchOrderDetail({orderId: this.$route.params.orderId});
},
methods: {
- ...mapActions(['fetchOrderDetail'])
+ },
+ components: {
+ Scroll,
+ CouponItem,
+ Empty
}
};
</script>
<style lang="scss" scoped>
-.title {
- text-align: center;
- font-size: 70px;
- line-height: 200px;
-}
+ .head {
+ height: 90px;
+ }
+
+ .coupon-wrapper {
+ height: 200px;
+ padding-top: 20px;
+ padding-left: 20px;
+ padding-right: 20px;
+ background: #f0f0f0;
+ box-sizing: content-box;
+ }
+
+ .coupon-item {
+ width: 100%;
+ height: 100%;
+ background: white;
+ border-radius: 10px;
+ }
+
+ .mask {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background: rgba(0, 0, 0, 0.4);
+ }
+
+ .list-wrapper {
+ overflow: hidden;
+
+ li {
+ padding: 15px 10px;
+ background-color: white;
+ border-radius: 10px;
+ }
+ }
+
+ .tab-slide-container {
+ /*position: fixed;*/
+ /*left: 0;*/
+ /*right: 0;*/
+ /*bottom: 0;*/
+ height: 100%;
+ }
+
+ .tab-container {
+ height: 90px;
+ background-color: white;
+ border-bottom: 1px solid #e0e0e0;
+ }
+
+ .tab-item {
+ line-height: 60px;
+ text-align: center;
+ font-size: 28px;
+ color: #b0b0b0;
+ }
+
+ .tab-item + .tab-item {
+ border-left: 1px solid #e0e0e0;
+ }
+
+ .cube-tab_active {
+ color: #444 !important;
+ }
+
+ .cube-scroll-wrapper {
+ padding-top: 20px;
+ }
</style>
diff --git a/apps/pages/single/coupon/yoho/index.js b/apps/pages/single/coupon/yoho/index.js
index e6b746c..237e79c 100644
--- a/apps/pages/single/coupon/yoho/index.js
+++ b/apps/pages/single/coupon/yoho/index.js
@@ -1,5 +1,5 @@
-export default [{
- path: '/coupon/yoho',
- name: 'yoholist',
+export default {
+ path: 'yoho',
+ name: 'couponYoho',
component: () => import(/* webpackChunkName: "coupon" */ './list')
-}];
+};
diff --git a/apps/pages/single/coupon/yoho/list.vue b/apps/pages/single/coupon/yoho/list.vue
index 24cd440..4e24626 100644
--- a/apps/pages/single/coupon/yoho/list.vue
+++ b/apps/pages/single/coupon/yoho/list.vue
@@ -1,21 +1,9 @@
<template>
- <LayoutApp>
- <!--<div class="mask"></div>-->
- <Tabs>
- <template slot="panes">
- <div class="head"></div>
- <TabPane label="有货优惠券">
-
- <TabBar
- v-model="selectLabel"
- show-slider
- :data="tabLabels"
- ref="tabNav"
- >
-
- </TabBar>
-
- <div class="tab-side-container">
+ <div style="height: 100%">
+ <div class="head"></div>
+ <ClassicTabs v-model="selectLabel" :data="tabLabels" @filter="onFilterChange"></ClassicTabs>
+
+ <div class="tab-slide-container">
<Slide
ref="slide"
:loop="false"
@@ -26,64 +14,60 @@
@scroll="scroll"
@change="changePage"
>
- <SlideItem>
- <!--<FilterBar v-if="showFilter" :list="filterList"></FilterBar>-->
- <!--<div class="head"></div>-->
- <Scroll :data="yohoList.notuse" :options="scrollOptions">
- <div class="coupon-wrapper" v-for="(item, index) in yohoList.notuse" :key="index">
- <div class="coupon-item">{{item.coupon_name}}</div>
- </div>
+ <SlideItem style="background-color: #f0f0f0;">
+ <ExchangeBox></ExchangeBox>
+
+ <div class="filter-wrapper" v-if="show">
+ <div class="filter-mask"></div>
+ <FilterBar :list="filterList" class="filter"></FilterBar>
+ </div>
+ <div class="head"></div>
+
+ <Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length">
+ <CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem>
</Scroll>
+ <Empty v-else></Empty>
</SlideItem>
- <SlideItem>
- <Scroll :data="yohoList.use" :options="scrollOptions">
- <div class="coupon-wrapper" v-for="(item, index) in yohoList.use" :key="index">
- <div class="coupon-item">{{item.coupon_name}}</div>
- </div>
-
+ <SlideItem style="background-color: #f0f0f0;">
+ <Scroll :data="yohoList.use" :options="scrollOptions" v-if="yohoList.use.length">
+ <CouponItem :item="item" v-for="(item, index) in yohoList.use" :key ="index" v-if="yohoList.use.length"></CouponItem>
</Scroll>
+ <Empty v-else></Empty>
</SlideItem>
- <SlideItem>
- <Scroll :data="yohoList.overtime" :options="scrollOptions">
- <div class="coupon-wrapper" v-for="(item, index) in yohoList.overtime" :key="index">
- <div class="coupon-item">{{item.coupon_name}}</div>
- </div>
+ <SlideItem style="background-color: #f0f0f0;">
+ <Scroll :data="yohoList.overtime" :options="scrollOptions" v-if="yohoList.overtime.length">
+ <CouponItem :item="item" v-for="(item, index) in yohoList.overtime" :key ="index" v-if="yohoList.overtime.length"></CouponItem>
</Scroll>
+ <Empty v-else></Empty>
</SlideItem>
</Slide>
</div>
- </TabPane>
-
- <TabPane label="UFO优惠券">
- <div class="coupon-wrapper">
- <div class="coupon-item">huangtao2;</div>
- </div>
- </TabPane>
-
- </template>
- </Tabs>
- </LayoutApp>
+ </div>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
-const {mapState, mapActions} = createNamespacedHelpers('coupon/yoho');
+const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho');
import Tabs from '../components/tabs';
import FilterBar from '../components/filter-bar';
import ExchangeBox from '../components/exchange-box';
+import CouponItem from '../components/coupon-item';
+import Empty from '../components/empty';
+
import {TabBar, Slide, Scroll} from 'cube-ui';
-const type = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
+const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
export default {
name: 'YohoCouponListPage',
computed: {
...mapState(['yohoList', 'filterList', 'showFilter']),
+ ...mapGetters(['getNotUseNum', 'getUseNum', 'getOvertime']),
initialIndex() {
let index = 0;
@@ -93,7 +77,7 @@ export default {
},
asyncData({store, router}) {
return store.dispatch('coupon/yoho/fetchYohoList', {
- type: type.notuse,
+ type: TYPE.notuse,
filter: 0,
limit: 20,
page: 1
@@ -102,18 +86,21 @@ export default {
data() {
return {
selectLabel: '未使用',
- selectType: type.notuse,
+ selectType: TYPE.notuse,
selectFilter: 0,
tabLabels: [
{
label: '未使用',
- type: type.notuse
+ type: TYPE.notuse,
+ filter: true
}, {
label: '已使用',
- type: type.use
+ type: TYPE.use,
+ filter: false
}, {
label: '已失效',
- type: type.overtime
+ type: TYPE.overtime,
+ filter: false
}
],
scrollOptions: {
@@ -123,36 +110,37 @@ export default {
listenScroll: true,
probeType: 3,
directionLockThreshold: 0
- }
+ },
+ show: false
};
},
created() {
},
mounted() {
+ this.getNum();
},
methods: {
- tabCls(item) {
- return ['filter-btn-box'];
- },
- scroll(pos) {
- // const x = Math.abs(pos.x)
- // const tabItemWidth = this.$refs.tabNav.$el.clientWidth
- // const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth
- // const deltaX = x / slideScrollerWidth * tabItemWidth
- // this.$refs.tabNav.setSliderTransform(deltaX);
- },
-
changePage(current) {
this.selectLabel = this.tabLabels[current].label;
this.selectType = this.tabLabels[current].type;
+ console.log(current, 'index', this.selectType, this.selectLabel);
- console.log(this.$store);
return this.$store.dispatch('coupon/yoho/fetchYohoList', {
type: this.selectType,
filter: this.selectFilter,
limit: 20,
page: 1
});
+ },
+ scroll() {
+
+ },
+ getNum() {
+ return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
+ },
+
+ onFilterChange(show) {
+ this.show = show;
}
},
components: {
@@ -162,9 +150,12 @@ export default {
ClassicTabs: Tabs.ClassicTabs,
ExchangeBox,
TabBar,
+ Tab: TabBar.Tab,
Slide,
- SlideItem: Slide,
- Scroll
+ SlideItem: Slide.Item,
+ Scroll,
+ CouponItem,
+ Empty
}
};
</script>
@@ -174,44 +165,28 @@ export default {
height: 90px;
}
- .coupon-wrapper {
- height: 200px;
- padding-top: 20px;
- padding-left: 20px;
- padding-right: 20px;
- background: #f0f0f0;
- box-sizing: content-box;
+ .tab-slide-container {
+ height: 100%;
}
- .coupon-item {
- width: 100%;
- height: 100%;
- background: white;
- border-radius: 10px;
+ .cube-scroll-wrapper {
+ padding-top: 20px;
}
- .mask {
- width: 100%;
+ .filter-wrapper {
+ width: calc(100% / 3);
height: 100%;
- position: absolute;
- background: rgba(0, 0, 0, 0.4);
+ position: fixed;
+ z-index: 4;
}
- .list-wrapper {
- overflow: hidden;
-
- li {
- padding: 15px 10px;
- background-color: white;
- border-radius: 10px;
- }
+ .filter {
+ position: absolute;
+ top: 0;
}
- .tab-slide-container {
- position: fixed;
- top: 74px;
- left: 0;
- right: 0;
- bottom: 0;
+ .filter-mask {
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.4);
}
</style>
diff --git a/apps/statics/font/iconfont.css b/apps/statics/font/iconfont.css
index 754be46..98d9ffb 100644
--- a/apps/statics/font/iconfont.css
+++ b/apps/statics/font/iconfont.css
@@ -1,10 +1,10 @@
@font-face {font-family: "iconfont";
- src: url('iconfont.eot?t=1545212285943'); /* IE9*/
- src: url('iconfont.eot?t=1545212285943#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAYYAAsAAAAACVwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8jkluY21hcAAAAYAAAACHAAAB7GseDz1nbHlmAAACCAAAAeQAAAKM/VKRImhlYWQAAAPsAAAALwAAADYTn6j4aGhlYQAABBwAAAAcAAAAJAfeA4lobXR4AAAEOAAAAA4AAAAgIAAAAGxvY2EAAARIAAAAEgAAABIDngK4bWF4cAAABFwAAAAfAAAAIAEXAFFuYW1lAAAEfAAAAUUAAAJtPlT+fXBvc3QAAAXEAAAAVAAAAGzeooLMeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeSTyvZm7438AQw9zI0AAUZgTJAQDoXQx4eJztkcENwjAMRV9oSCqEODNCDxw6DQu0U7Q3Tixae4xix0h0CBy9SN+RHel/4Ax0xsPIkN4kvF7WTa3fcWn9zNP0jZ4TRe4yyqaDTrruOxz04vpQyWZ+B5v2zdl+LlR7Lvzr2u75q6r7GZhbyBh4TrIFno0OgeemU+B56hKYv+gaUD++nCizAHicdZKxjxJBFMbft8MukIXFHXcXc3vBW05BNFk9ArsxAmfiqoU2p5V3/dW25zVYkCvtLCwhsTCx08YExMTaWEJhYiyvuL8ARmeWQGcy+fK+ye+9vPkypBP9/ca+sn0yqUxXKKCQSA9R7yGuoGyBWcjKQtoQ2d0emp5jVGuXq7W23Yqanms7hkbjha4vxisdzjKZ2XCld+Df8OW5bXG+zXlvA40XLN5Qw9kHR1G+SLiFHcla4rfFCXK3X2zEdsknQmCHqBpZO7DgeOXArqAZxXbQQ6vG3ogBTG5CnOUKhRxOUoNTafAWJ+pOnK2AQQqcKkMZOX/Kpuw+5cihHUqIrquprVrVKP8nAhaiC1mlRq6jwmivwaw8rmPg5/rZk6WuLycrHc0zmflopRZHuO1eBaJnEWQy2mGSHGq45XtV8Jeu7zd8//umc7Jk9zato/nyD3gxqu9vObVLjbjdKHJeTF5o2lFy7e6We9OJipxUdkRsindUUtmFaO+1ojiowN1zDPZ+8ckslUz2VCqOYZmmhVTTzAeMs9ckf4aeRzkP7YfQIB6IR/jyCgtVPRSP1XjF9tkBCimLWNKaJj524YF3+3jSERfwOutdDlhfcXlk86hD4HlXnIuLLuuLzx1wcd75B7nqkZd4nGNgZGBgAOLvX2o3xfPbfGXgZmEAgRsORrUI+n8DCwNzI5DLwcAEEgUAQ/kKagB4nGNgZGBgbvjfwBDDwgACQJKRARVwAABHDgJxeJxjYWBgYMGDAQJgACEAAAAAAAAATgB+AOwBCAEeATIBRgAAeJxjYGRgYOBgcGVgZQABJiDmAkIGhv9gPgMAEFIBaQB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxtxjEOgCAMAMAWQYG/MPgkFE2I2qKF+H0TXb3pQMHHwz+LCjvUaLDHAS060JlWNjnElNzZFqmZafRlbxKOTE30FOfNCV81JL5peNcKwANLoBPC') format('woff'),
- url('iconfont.ttf?t=1545212285943') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
- url('iconfont.svg?t=1545212285943#iconfont') format('svg'); /* iOS 4.1- */
+ src: url('iconfont.eot?t=1545459019848'); /* IE9*/
+ src: url('iconfont.eot?t=1545459019848#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+ url('iconfont.ttf?t=1545459019848') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+ url('iconfont.svg?t=1545459019848#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
@@ -17,6 +17,10 @@
.icon-info:before { content: "\e6e5"; }
+.icon-up:before { content: "\e608"; }
+
+.icon-downn:before { content: "\e609"; }
+
.icon-i-add:before { content: "\e618"; }
.icon-question1:before { content: "\e630"; }
@@ -25,7 +29,3 @@
.icon-back:before { content: "\e763"; }
-.icon-sort-down:before { content: "\e77a"; }
-
-.icon-sort-up:before { content: "\e77b"; }
-
diff --git a/apps/statics/font/iconfont.eot b/apps/statics/font/iconfont.eot
index 1a8fa0c..ff2ad36 100644
Binary files a/apps/statics/font/iconfont.eot and b/apps/statics/font/iconfont.eot differ
diff --git a/apps/statics/font/iconfont.svg b/apps/statics/font/iconfont.svg
index 5539de9..fe78d07 100644
--- a/apps/statics/font/iconfont.svg
+++ b/apps/statics/font/iconfont.svg
@@ -23,22 +23,22 @@ Created by iconfont
<glyph glyph-name="info" unicode="" d="M512-62.016C266.08-62.016 65.984 138.048 65.984 384 65.984 629.92 266.08 830.016 512 830.016c245.952 0 446.016-200.064 446.016-446.016C958.016 138.048 757.952-62.016 512-62.016zM512 766.016C301.344 766.016 129.984 594.656 129.984 384c0-210.624 171.36-382.016 382.016-382.016 210.624 0 382.016 171.36 382.016 382.016C894.016 594.656 722.624 766.016 512 766.016zM512 592m-48 0a1.5 1.5 0 1 0 96 0 1.5 1.5 0 1 0-96 0ZM512 128c-17.664 0-32 14.304-32 32l0 288c0 17.664 14.336 32 32 32s32-14.336 32-32l0-288C544 142.304 529.664 128 512 128z" horiz-adv-x="1024" />
- <glyph glyph-name="i-add" unicode="" d="M910.509 405.585h-378.843v376.925c0 11.2-9.427 20.281-20.626 20.281s-20.626-9.080-20.626-20.281v-376.925h-376.925c-11.2 0-20.281-9.426-20.281-20.626s9.080-20.626 20.281-20.626h376.925v-378.844c0-11.199 9.427-20.281 20.626-20.281s20.626 9.081 20.626 20.281v378.844h378.843c11.199 0 20.281 9.426 20.281 20.626s-9.081 20.626-20.281 20.626z" horiz-adv-x="1024" />
+ <glyph glyph-name="up" unicode="" d="M930.25 230.898l0 0c-18.573-17.814-48.653-17.814-67.227 0l-251.664 241.674c-18.573 17.814-18.573 46.717 0 64.529 18.498 17.814 48.616 17.814 67.19 0l251.702-241.674c18.535-17.814 18.535-46.718 0-64.529zM359.621 230.898l0 0c-18.535 17.814-18.535 46.717 0 64.529l251.739 241.674c18.498 17.814 48.616 17.814 67.19 0 18.535-17.814 18.535-46.718 0-64.529l-251.701-241.674c-18.573-17.814-48.653-17.814-67.227 0z" horiz-adv-x="1821" />
- <glyph glyph-name="question1" unicode="" d="M463.99957 111.647789c0-26.509985 21.490445-48.00043 48.00043-48.00043s48.00043 21.490445 48.00043 48.00043c0 26.509985-21.490445 48.00043-48.00043 48.00043S463.99957 138.157774 463.99957 111.647789zM512-64c-247.039484 0-448 200.960516-448 448S264.960516 832 512 832 960 631.039484 960 384 759.039484-64 512-64zM512 767.712727c-211.584464 0-383.712727-172.128262-383.712727-383.712727 0-211.551781 172.128262-383.712727 383.712727-383.712727 211.551781 0 383.712727 172.159226 383.712727 383.712727C895.712727 595.584464 723.551781 767.712727 512 767.712727zM512 222.304744c-17.664722 0-32.00086 14.336138-32.00086 31.99914l0 54.112297c0 52.352533 39.999785 92.352318 75.32751 127.647359 25.887273 25.919957 52.67249 52.67249 52.67249 74.016718 0 53.343368-43.07206 96.735385-95.99914 96.735385-53.823303 0-95.99914-41.535923-95.99914-94.559333 0-17.664722-14.336138-31.99914-32.00086-31.99914s-32.00086 14.336138-32.00086 31.99914c0 87.423948 71.775299 158.559333 160.00086 158.559333s160.00086-72.095256 160.00086-160.735385c0-47.904099-36.32028-84.191695-71.424378-119.295794-27.839699-27.776052-56.575622-56.511974-56.575622-82.3356l0-54.112297C544.00086 236.671845 529.664722 222.304744 512 222.304744z" horiz-adv-x="1024" />
+ <glyph glyph-name="downn" unicode="" d="M930.25 472.573l-251.701-241.674c-18.573-17.814-48.693-17.814-67.19 0-18.573 17.814-18.573 46.718 0 64.529l251.664 241.674c18.573 17.814 48.653 17.814 67.227 0 18.535-17.814 18.535-46.717 0-64.529zM426.847 537.102l251.701-241.674c18.535-17.814 18.535-46.717 0-64.529-18.573-17.814-48.693-17.814-67.189 0l-251.739 241.674c-18.535 17.814-18.535 46.718 0 64.529 18.573 17.814 48.654 17.814 67.227 0z" horiz-adv-x="1821" />
- <glyph glyph-name="plus-minus" unicode="" d="M934.4 358.4h-844.8c-14.080 0-25.6 11.52-25.6 25.6v0c0 14.080 11.52 25.6 25.6 25.6h844.8c14.080 0 25.6-11.52 25.6-25.6v0c0-14.080-11.52-25.6-25.6-25.6z" horiz-adv-x="1024" />
+ <glyph glyph-name="i-add" unicode="" d="M910.509 405.585h-378.843v376.925c0 11.2-9.427 20.281-20.626 20.281s-20.626-9.080-20.626-20.281v-376.925h-376.925c-11.2 0-20.281-9.426-20.281-20.626s9.080-20.626 20.281-20.626h376.925v-378.844c0-11.199 9.427-20.281 20.626-20.281s20.626 9.081 20.626 20.281v378.844h378.843c11.199 0 20.281 9.426 20.281 20.626s-9.081 20.626-20.281 20.626z" horiz-adv-x="1024" />
- <glyph glyph-name="back" unicode="" d="M718.08-122.464L208 386.016 718.016 896.032l67.36-67.36-442.56-442.56 442.496-441.12-67.264-67.456z" horiz-adv-x="1024" />
+ <glyph glyph-name="question1" unicode="" d="M463.99957 111.647789c0-26.509985 21.490445-48.00043 48.00043-48.00043s48.00043 21.490445 48.00043 48.00043c0 26.509985-21.490445 48.00043-48.00043 48.00043S463.99957 138.157774 463.99957 111.647789zM512-64c-247.039484 0-448 200.960516-448 448S264.960516 832 512 832 960 631.039484 960 384 759.039484-64 512-64zM512 767.712727c-211.584464 0-383.712727-172.128262-383.712727-383.712727 0-211.551781 172.128262-383.712727 383.712727-383.712727 211.551781 0 383.712727 172.159226 383.712727 383.712727C895.712727 595.584464 723.551781 767.712727 512 767.712727zM512 222.304744c-17.664722 0-32.00086 14.336138-32.00086 31.99914l0 54.112297c0 52.352533 39.999785 92.352318 75.32751 127.647359 25.887273 25.919957 52.67249 52.67249 52.67249 74.016718 0 53.343368-43.07206 96.735385-95.99914 96.735385-53.823303 0-95.99914-41.535923-95.99914-94.559333 0-17.664722-14.336138-31.99914-32.00086-31.99914s-32.00086 14.336138-32.00086 31.99914c0 87.423948 71.775299 158.559333 160.00086 158.559333s160.00086-72.095256 160.00086-160.735385c0-47.904099-36.32028-84.191695-71.424378-119.295794-27.839699-27.776052-56.575622-56.511974-56.575622-82.3356l0-54.112297C544.00086 236.671845 529.664722 222.304744 512 222.304744z" horiz-adv-x="1024" />
- <glyph glyph-name="sort-down" unicode="" d="M514.016-128L175.36 202.592l60.48 60.48 278.176-274.144 274.144 278.176 60.48-60.48L514.016-128z" horiz-adv-x="1024" />
+ <glyph glyph-name="plus-minus" unicode="" d="M934.4 358.4h-844.8c-14.080 0-25.6 11.52-25.6 25.6v0c0 14.080 11.52 25.6 25.6 25.6h844.8c14.080 0 25.6-11.52 25.6-25.6v0c0-14.080-11.52-25.6-25.6-25.6z" horiz-adv-x="1024" />
- <glyph glyph-name="sort-up" unicode="" d="M509.984 896L848.64 565.408l-60.48-60.48-278.176 274.144-274.144-278.176L175.36 561.376 509.984 896z" horiz-adv-x="1024" />
+ <glyph glyph-name="back" unicode="" d="M718.08-122.464L208 386.016 718.016 896.032l67.36-67.36-442.56-442.56 442.496-441.12-67.264-67.456z" horiz-adv-x="1024" />
diff --git a/apps/statics/font/iconfont.ttf b/apps/statics/font/iconfont.ttf
index e6c78c4..2055fdf 100644
Binary files a/apps/statics/font/iconfont.ttf and b/apps/statics/font/iconfont.ttf differ
diff --git a/apps/statics/font/iconfont.woff b/apps/statics/font/iconfont.woff
index cf057c5..4a20ee2 100644
Binary files a/apps/statics/font/iconfont.woff and b/apps/statics/font/iconfont.woff differ
diff --git a/apps/store/coupon/list/actions.js b/apps/store/coupon/list/actions.js
index 4e47582..0fb67a9 100644
--- a/apps/store/coupon/list/actions.js
+++ b/apps/store/coupon/list/actions.js
@@ -1,5 +1,20 @@
import * as Types from './types';
+const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
+
+function _handleCoupon(item, type) {
+ if (type === TYPE.use) {
+ item.is_used = true;
+ }
+
+ if (type === TYPE.use || item.is_overtime === 'Y' || item.is_invalid === 'Y') {
+ item.usedOvertimeOrInValid = true;
+ }
+
+ item.useNowLink = 'fdsafdsa';
+ return item;
+}
+
export default {
async fetchYohoList({commit}, {type, filter, limit, page}) {
commit(Types.FETCH_YOHO_COUPON_REQUEST);
@@ -7,14 +22,39 @@ export default {
const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit, page});
if (result && result.code === 200) {
- console.log(result);
commit(Types.FETCH_YOHO_COUPON_SUCCESS, {
type,
- list: result.data.couponList,
+ list: result.data.couponList.map(_handleCoupon),
filter: result.data.filters
});
} else {
commit(Types.FETCH_YOHO_COUPON_FAILED);
}
},
+
+ async fetchYohoNum({commit}) {
+ commit(Types.FETCH_YOHO_COUPON_REQUEST);
+
+ const result = await this.$api.get('/api/coupon/yoho/num', {});
+
+ if (result && result.code === 200) {
+ commit(Types.FETCH_YOHO_COUPON_NUM_SUCCESS, result.data);
+ } else {
+ commit(Types.FETCH_YOHO_COUPON_FAILED);
+ }
+ },
+
+ async fetchUfoList({commit}, {limit, page}) {
+ commit(Types.FETCH_YOHO_COUPON_REQUEST);
+
+ const result = await this.$api.get('/api/coupon/ufo/list', {limit: 20, page: 1});
+
+ if (result && result.code === 200) {
+ commit(Types.FETCH_UFO_COUPON_SUCCESS, {
+ list: result.data.couponList.map(_handleCoupon),
+ });
+ } else {
+ commit(Types.FETCH_YOHO_COUPON_FAILED);
+ }
+ },
};
diff --git a/apps/store/coupon/list/index.js b/apps/store/coupon/list/index.js
index 1761098..bc5fe53 100644
--- a/apps/store/coupon/list/index.js
+++ b/apps/store/coupon/list/index.js
@@ -1,6 +1,10 @@
import actions from './actions';
import mutations from './mutations';
+function handleNum(n) {
+ return n > 99 ? '99+' : n;
+}
+
export default function() {
return {
namespaced: true,
@@ -11,10 +15,21 @@ export default function() {
use: [],
overtime: []
},
+ num: {
+ notuse: 20,
+ use: 100,
+ overtime: 1000
+ },
+ ufoList: [],
filterList: [],
- showFilter: false
+ showFilter: true,
},
actions,
- mutations
+ mutations,
+ getters: {
+ getNum(state) {
+ return [handleNum(state.num.notuse), handleNum(state.num.use), handleNum(state.num.overtime)];
+ },
+ }
};
}
diff --git a/apps/store/coupon/list/mutations.js b/apps/store/coupon/list/mutations.js
index adfe5aa..ebf00f6 100644
--- a/apps/store/coupon/list/mutations.js
+++ b/apps/store/coupon/list/mutations.js
@@ -12,4 +12,12 @@ export default {
[Types.FETCH_YOHO_COUPON_FAILED](state) {
state.fetching = false;
},
+
+ [Types.FETCH_YOHO_COUPON_NUM_SUCCESS](state, data) {
+ state.num = data;
+ },
+ [Types.FETCH_UFO_COUPON_SUCCESS](state, {list}) {
+ state.fetching = false;
+ state.ufoList = list;
+ },
};
diff --git a/apps/store/coupon/list/types.js b/apps/store/coupon/list/types.js
index 3e080e2..5c8fa4a 100644
--- a/apps/store/coupon/list/types.js
+++ b/apps/store/coupon/list/types.js
@@ -1,3 +1,6 @@
export const FETCH_YOHO_COUPON_REQUEST = 'FETCH_YOHO_COUPON_REQUEST';
export const FETCH_YOHO_COUPON_FAILED = 'FETCH_YOHO_COUPON_FAILED';
export const FETCH_YOHO_COUPON_SUCCESS = 'FETCH_YOHO_COUPON_SUCCESS';
+export const FETCH_YOHO_COUPON_NUM_SUCCESS = 'FETCH_YOHO_COUPON_NUM_SUCCESS';
+export const FETCH_UFO_COUPON_SUCCESS = 'FETCH_UFO_COUPON_SUCCESS';
+
diff --git a/config/api-map.js b/config/api-map.js
index 218c4f1..97f3294 100644
--- a/config/api-map.js
+++ b/config/api-map.js
@@ -11,7 +11,7 @@ module.exports = {
api: 'app.coupons.get',
params: {
type: {type: String},
- filter: {type: String},
+ filter: {type: Number},
limit: {type: Number},
page: {type: Number}
}
@@ -21,7 +21,11 @@ module.exports = {
params: {}
},
'/api/coupon/ufo/list': {
-
+ api: 'app.coupons.get',
+ params: {
+ limit: {type: Number},
+ page: {type: Number}
+ }
},
'/api/ufo/seller/entryGoodsSizeList': {
ufo: true,
diff --git a/config/common.js b/config/common.js
index 2f03a5c..8a8f997 100644
--- a/config/common.js
+++ b/config/common.js
@@ -33,7 +33,7 @@ module.exports = {
app: 'h5',
appVersion: '6.6.0', // 调用api的版本
appName: 'yohoapp-node',
- port: 6001,
+ port: 6003,
siteUrl: '//m.yohobuy.com',
assetUrl: '//localhost:5001/yohoapp-node/',
testCode: 'yoho4946abcdef#$%&!@',