Showing
9 changed files
with
145 additions
and
91 deletions
@@ -212,17 +212,9 @@ const yoho = { | @@ -212,17 +212,9 @@ const yoho = { | ||
212 | * @param success 调用成功的回调方法 | 212 | * @param success 调用成功的回调方法 |
213 | * @param fail 调用失败的回调方法 | 213 | * @param fail 调用失败的回调方法 |
214 | */ | 214 | */ |
215 | - goNewPage(args, success, fail) { | ||
216 | - if (this.isApp && window.yohoInterface) { | ||
217 | - if (args.header && args.header.headerid === '-1') { | ||
218 | - args.showScrollbar = 'no'; | ||
219 | - } | 215 | + goNewPage(args) { |
216 | + if (this.isYohoBuy) { | ||
220 | 217 | ||
221 | - window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, { | ||
222 | - method: 'go.newPage', | ||
223 | - arguments: args | ||
224 | - }); | ||
225 | - } else if (this.isYohoBuy) { | ||
226 | let url = args.url; | 218 | let url = args.url; |
227 | 219 | ||
228 | if (url.indexOf('openby:') < 0) { | 220 | if (url.indexOf('openby:') < 0) { |
1 | <template> | 1 | <template> |
2 | - <div :class="prefixCls" v-show="show"><slot></slot></div> | 2 | + <div :class="prefixCls" v-show="show"> |
3 | + <slot></slot> | ||
4 | + </div> | ||
3 | </template> | 5 | </template> |
4 | <script> | 6 | <script> |
5 | - const prefixCls = 'yoho-tabs-tabpane'; | 7 | +const prefixCls = 'yoho-tabs-tabpane'; |
6 | 8 | ||
7 | - export default { | 9 | +export default { |
8 | name: 'TabPane', | 10 | name: 'TabPane', |
9 | props: { | 11 | props: { |
10 | - index: { | ||
11 | - type: String | ||
12 | - }, | ||
13 | label: { | 12 | label: { |
14 | type: String, | 13 | type: String, |
15 | default: '' | 14 | default: '' |
@@ -19,36 +18,28 @@ | @@ -19,36 +18,28 @@ | ||
19 | default: false | 18 | default: false |
20 | } | 19 | } |
21 | }, | 20 | }, |
22 | - data () { | 21 | + data() { |
23 | return { | 22 | return { |
24 | prefixCls: prefixCls, | 23 | prefixCls: prefixCls, |
25 | - show: true | 24 | + show: this.disabled |
26 | }; | 25 | }; |
27 | }, | 26 | }, |
28 | methods: { | 27 | methods: { |
29 | - updateNav () { | 28 | + updateNav() { |
30 | this.$parent.updateNav(); | 29 | this.$parent.updateNav(); |
31 | } | 30 | } |
32 | }, | 31 | }, |
33 | - watch: { | ||
34 | - label () { | ||
35 | - this.updateNav(); | ||
36 | - }, | ||
37 | - disabled () { | ||
38 | - this.updateNav(); | ||
39 | - } | ||
40 | - }, | ||
41 | - created () { | 32 | + created() { |
42 | this.updateNav(); | 33 | this.updateNav(); |
43 | } | 34 | } |
44 | - }; | 35 | +}; |
45 | </script> | 36 | </script> |
46 | 37 | ||
47 | <style lang="scss" scoped> | 38 | <style lang="scss" scoped> |
48 | -.yoho-tabs-tabpane { | ||
49 | - background: #F0F0F0; | 39 | + .yoho-tabs-tabpane { |
40 | + background: #f0f0f0; | ||
50 | width: 100%; | 41 | width: 100%; |
51 | height: 100%; | 42 | height: 100%; |
52 | -} | 43 | + } |
53 | </style> | 44 | </style> |
54 | 45 |
@@ -2,10 +2,10 @@ | @@ -2,10 +2,10 @@ | ||
2 | <div :class="classes"> | 2 | <div :class="classes"> |
3 | <slot name="tabs" v-bind:navList="navList"> | 3 | <slot name="tabs" v-bind:navList="navList"> |
4 | <div :class="[prefixCls + '-bar']"> | 4 | <div :class="[prefixCls + '-bar']"> |
5 | - <span class="back"> | 5 | + <span class="back" @click="onBackClick"> |
6 | <i class="iconfont fontcls"></i> | 6 | <i class="iconfont fontcls"></i> |
7 | </span> | 7 | </span> |
8 | - <span class="help"> | 8 | + <span class="help" @click="onHelpClick"> |
9 | <i class="iconfont fontcls"></i> | 9 | <i class="iconfont fontcls"></i> |
10 | </span> | 10 | </span> |
11 | <div> | 11 | <div> |
@@ -26,7 +26,7 @@ | @@ -26,7 +26,7 @@ | ||
26 | 26 | ||
27 | <script> | 27 | <script> |
28 | export default { | 28 | export default { |
29 | - name: "Tabs", | 29 | + name: 'Tabs', |
30 | props: { | 30 | props: { |
31 | value: { | 31 | value: { |
32 | type: [String, Number] | 32 | type: [String, Number] |
@@ -34,7 +34,7 @@ export default { | @@ -34,7 +34,7 @@ export default { | ||
34 | }, | 34 | }, |
35 | data() { | 35 | data() { |
36 | return { | 36 | return { |
37 | - prefixCls: "yoho-tabs", | 37 | + prefixCls: 'yoho-tabs', |
38 | navList: [], | 38 | navList: [], |
39 | activeKey: this.value | 39 | activeKey: this.value |
40 | }; | 40 | }; |
@@ -44,7 +44,7 @@ export default { | @@ -44,7 +44,7 @@ export default { | ||
44 | return [`${this.prefixCls}`]; | 44 | return [`${this.prefixCls}`]; |
45 | }, | 45 | }, |
46 | contentClasses() { | 46 | contentClasses() { |
47 | - return [`yoho-tabs-pane`]; | 47 | + return ['yoho-tabs-pane']; |
48 | }, | 48 | }, |
49 | contentStyle() { | 49 | contentStyle() { |
50 | return []; | 50 | return []; |
@@ -53,6 +53,7 @@ export default { | @@ -53,6 +53,7 @@ export default { | ||
53 | methods: { | 53 | methods: { |
54 | updateNav() { | 54 | updateNav() { |
55 | this.navList = []; | 55 | this.navList = []; |
56 | + console.log(); | ||
56 | this.getTabs().forEach((pane, index) => { | 57 | this.getTabs().forEach((pane, index) => { |
57 | this.navList.push({ | 58 | this.navList.push({ |
58 | label: pane.label, | 59 | label: pane.label, |
@@ -60,7 +61,9 @@ export default { | @@ -60,7 +61,9 @@ export default { | ||
60 | disabled: pane.disabled | 61 | disabled: pane.disabled |
61 | }); | 62 | }); |
62 | 63 | ||
63 | - if (!pane.currentName) pane.currentName = index; | 64 | + if (!pane.currentName) { |
65 | + pane.currentName = index; | ||
66 | + } | ||
64 | 67 | ||
65 | if (index === 0) { | 68 | if (index === 0) { |
66 | if (!this.activeKey) { | 69 | if (!this.activeKey) { |
@@ -72,7 +75,7 @@ export default { | @@ -72,7 +75,7 @@ export default { | ||
72 | this.updateStatus(); | 75 | this.updateStatus(); |
73 | }, | 76 | }, |
74 | getTabs() { | 77 | getTabs() { |
75 | - return this.$children.filter(item => item.$options.name === "TabPane"); | 78 | + return this.$children.filter(item => item.$options.name === 'TabPane'); |
76 | }, | 79 | }, |
77 | updateStatus() { | 80 | updateStatus() { |
78 | const tabs = this.getTabs(); | 81 | const tabs = this.getTabs(); |
@@ -83,19 +86,27 @@ export default { | @@ -83,19 +86,27 @@ export default { | ||
83 | const nav = this.navList[index]; | 86 | const nav = this.navList[index]; |
84 | 87 | ||
85 | this.activeKey = nav.name; | 88 | this.activeKey = nav.name; |
86 | - this.$emit("input", nav.name); | 89 | + this.$emit('input', nav.name); |
87 | }, | 90 | }, |
88 | tabCls(item) { | 91 | tabCls(item) { |
89 | return [ | 92 | return [ |
90 | - "yoho-tab", | 93 | + 'yoho-tab', |
91 | { | 94 | { |
92 | - [`yoho-tab-active`]: item.name === this.activeKey | 95 | + ['yoho-tab-active']: item.name === this.activeKey |
93 | } | 96 | } |
94 | ]; | 97 | ]; |
98 | + }, | ||
99 | + onBackClick() { | ||
100 | + this.$yoho.finishPage({}); | ||
101 | + }, | ||
102 | + onHelpClick() { | ||
103 | + this.$yoho.goNewPage({ | ||
104 | + url: window.location.protocol + '//m.yohobuy.com/service/qaDetail?keyword=%E4%BC%98%E6%83%A0%E5%88%B8&sonId=181' | ||
105 | + }); | ||
95 | } | 106 | } |
96 | }, | 107 | }, |
97 | watch: { | 108 | watch: { |
98 | - activeKey(val) { | 109 | + activeKey() { |
99 | this.updateStatus(); | 110 | this.updateStatus(); |
100 | }, | 111 | }, |
101 | value(val) { | 112 | value(val) { |
@@ -103,7 +114,7 @@ export default { | @@ -103,7 +114,7 @@ export default { | ||
103 | } | 114 | } |
104 | }, | 115 | }, |
105 | created() { | 116 | created() { |
106 | - // this.updateNav(); | 117 | + this.updateNav(); |
107 | } | 118 | } |
108 | }; | 119 | }; |
109 | </script> | 120 | </script> |
@@ -120,7 +131,7 @@ $yoho-tab: yoho-tab; | @@ -120,7 +131,7 @@ $yoho-tab: yoho-tab; | ||
120 | display: inline-block; | 131 | display: inline-block; |
121 | width: 200px; | 132 | width: 200px; |
122 | height: 56px; | 133 | height: 56px; |
123 | - font-size: 12px; | 134 | + font-size: 24px; |
124 | color: white; | 135 | color: white; |
125 | border: 1px solid white; | 136 | border: 1px solid white; |
126 | box-sizing: border-box; | 137 | box-sizing: border-box; |
@@ -129,6 +140,10 @@ $yoho-tab: yoho-tab; | @@ -129,6 +140,10 @@ $yoho-tab: yoho-tab; | ||
129 | line-height: 56px; | 140 | line-height: 56px; |
130 | } | 141 | } |
131 | 142 | ||
143 | +.#{$yoho-tab} + .#{$yoho-tab} { | ||
144 | + border-left: none; | ||
145 | +} | ||
146 | + | ||
132 | .#{$yoho-tab}s-bar { | 147 | .#{$yoho-tab}s-bar { |
133 | width: 100%; | 148 | width: 100%; |
134 | height: 90px; | 149 | height: 90px; |
@@ -136,12 +151,11 @@ $yoho-tab: yoho-tab; | @@ -136,12 +151,11 @@ $yoho-tab: yoho-tab; | ||
136 | background: #3a3a3a; | 151 | background: #3a3a3a; |
137 | justify-content: center; | 152 | justify-content: center; |
138 | align-items: center; | 153 | align-items: center; |
139 | - position: fixed; | ||
140 | z-index: 4; | 154 | z-index: 4; |
141 | } | 155 | } |
142 | 156 | ||
143 | .#{$yoho-tab}-active { | 157 | .#{$yoho-tab}-active { |
144 | - color: #444444; | 158 | + color: #444; |
145 | background-color: white; | 159 | background-color: white; |
146 | } | 160 | } |
147 | 161 | ||
@@ -156,13 +170,23 @@ $yoho-tab: yoho-tab; | @@ -156,13 +170,23 @@ $yoho-tab: yoho-tab; | ||
156 | } | 170 | } |
157 | 171 | ||
158 | .back { | 172 | .back { |
173 | + display: inline-block; | ||
174 | + width: 90px; | ||
175 | + height: 90px; | ||
176 | + line-height: 90px; | ||
159 | position: absolute; | 177 | position: absolute; |
160 | - left: 20px; | 178 | + left: 0; |
179 | + text-align: center; | ||
161 | } | 180 | } |
162 | 181 | ||
163 | .help { | 182 | .help { |
183 | + display: inline-block; | ||
184 | + width: 90px; | ||
185 | + height: 90px; | ||
186 | + line-height: 90px; | ||
164 | position: absolute; | 187 | position: absolute; |
165 | - right: 20px; | 188 | + right: 0; |
189 | + text-align: center; | ||
166 | } | 190 | } |
167 | </style> | 191 | </style> |
168 | 192 |
1 | -import Ufo from './ufo'; | ||
2 | -import Yoho from './yoho'; | ||
3 | -import Header from './components/header'; | 1 | +import YohoPage from './list'; |
4 | 2 | ||
5 | export default [{ | 3 | export default [{ |
6 | - path: '/mapp/coupon', | ||
7 | - component: Header, | ||
8 | - children: [Ufo, Yoho] | 4 | + path: '/mapp/coupon/yoho.html', |
5 | + component: YohoPage, | ||
9 | }]; | 6 | }]; |
apps/pages/single/coupon/list.vue
0 → 100644
1 | +<template> | ||
2 | + <LayoutApp> | ||
3 | + <Tabs> | ||
4 | + <template slot="panes"> | ||
5 | + <TabPane label="有货优惠券" disable="true"> | ||
6 | + <YohoPage></YohoPage> | ||
7 | + </TabPane> | ||
8 | + <TabPane label="UFO优惠券" disable="false"> | ||
9 | + <UfoPage></UfoPage> | ||
10 | + </TabPane> | ||
11 | + </template> | ||
12 | + </Tabs> | ||
13 | + </LayoutApp> | ||
14 | +</template> | ||
15 | + | ||
16 | +<script> | ||
17 | + | ||
18 | +import Tabs from './components/tabs'; | ||
19 | +import YohoPage from './yoho'; | ||
20 | +import UfoPage from './ufo'; | ||
21 | +const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'}; | ||
22 | + | ||
23 | +export default { | ||
24 | + name: 'ListPage', | ||
25 | + asyncData({store}) { | ||
26 | + return Promise.all([ | ||
27 | + store.dispatch('coupon/yoho/fetchYohoList', { | ||
28 | + type: TYPE.notuse, | ||
29 | + refresh: true | ||
30 | + }), | ||
31 | + store.dispatch('coupon/yoho/fetchYohoList', { | ||
32 | + type: TYPE.use, | ||
33 | + refresh: true | ||
34 | + }), | ||
35 | + store.dispatch('coupon/yoho/fetchYohoList', { | ||
36 | + type: TYPE.overtime, | ||
37 | + refresh: true | ||
38 | + }), | ||
39 | + store.dispatch('coupon/yoho/fetchUfoList', { | ||
40 | + limit: 100, | ||
41 | + page: 1 | ||
42 | + }), | ||
43 | + ]); | ||
44 | + }, | ||
45 | + components: { | ||
46 | + Tabs, | ||
47 | + TabPane: Tabs.Pane, | ||
48 | + YohoPage, | ||
49 | + UfoPage | ||
50 | + } | ||
51 | +}; | ||
52 | +</script> | ||
53 | + | ||
54 | +<style lang="scss" scoped> | ||
55 | +</style> |
1 | -export default { | ||
2 | - path: 'ufo.html', | ||
3 | - name: 'couponUfo', | ||
4 | - component: () => import(/* webpackChunkName: "coupon" */ './list') | ||
5 | -}; | 1 | +// export default { |
2 | +// path: 'ufo.html', | ||
3 | +// name: 'couponUfo', | ||
4 | +// component: () => import(/* webpackChunkName: "coupon" */ './list') | ||
5 | +// }; | ||
6 | + | ||
7 | + | ||
8 | +import UfoList from './list'; | ||
9 | + | ||
10 | +export default UfoList; |
@@ -21,12 +21,6 @@ export default { | @@ -21,12 +21,6 @@ export default { | ||
21 | computed: { | 21 | computed: { |
22 | ...mapState(['ufoList']), | 22 | ...mapState(['ufoList']), |
23 | }, | 23 | }, |
24 | - asyncData({store}) { | ||
25 | - return store.dispatch('coupon/yoho/fetchUfoList', { | ||
26 | - limit: 100, | ||
27 | - page: 1 | ||
28 | - }); | ||
29 | - }, | ||
30 | data() { | 24 | data() { |
31 | return { | 25 | return { |
32 | scrollOptions: { | 26 | scrollOptions: { |
@@ -40,6 +34,12 @@ export default { | @@ -40,6 +34,12 @@ export default { | ||
40 | mounted() { | 34 | mounted() { |
41 | }, | 35 | }, |
42 | methods: { | 36 | methods: { |
37 | + getList() { | ||
38 | + return this.$store.dispatch('coupon/yoho/fetchUfoList', { | ||
39 | + limit: 100, | ||
40 | + page: 1 | ||
41 | + }); | ||
42 | + } | ||
43 | }, | 43 | }, |
44 | components: { | 44 | components: { |
45 | ScrollView, | 45 | ScrollView, |
1 | -export default { | ||
2 | - path: 'yoho.html', | ||
3 | - name: 'couponYoho', | ||
4 | - component: () => import(/* webpackChunkName: "coupon" */ './list') | ||
5 | -}; | 1 | +// export default { |
2 | +// path: 'yoho.html', | ||
3 | +// name: 'couponYoho', | ||
4 | +// component: () => import(/* webpackChunkName: "coupon" */ './list') | ||
5 | +// }; | ||
6 | + | ||
7 | +import YohoList from './list'; | ||
8 | + | ||
9 | +export default YohoList; |
@@ -63,22 +63,6 @@ const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'}; | @@ -63,22 +63,6 @@ const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'}; | ||
63 | 63 | ||
64 | export default { | 64 | export default { |
65 | name: 'YohoCouponListPage', | 65 | name: 'YohoCouponListPage', |
66 | - asyncData({store}) { | ||
67 | - return Promise.all([ | ||
68 | - store.dispatch('coupon/yoho/fetchYohoList', { | ||
69 | - type: TYPE.notuse, | ||
70 | - refresh: true | ||
71 | - }), | ||
72 | - store.dispatch('coupon/yoho/fetchYohoList', { | ||
73 | - type: TYPE.use, | ||
74 | - refresh: true | ||
75 | - }), | ||
76 | - store.dispatch('coupon/yoho/fetchYohoList', { | ||
77 | - type: TYPE.overtime, | ||
78 | - refresh: true | ||
79 | - }) | ||
80 | - ]); | ||
81 | - }, | ||
82 | data() { | 66 | data() { |
83 | return { | 67 | return { |
84 | selectIndex: 0, | 68 | selectIndex: 0, |
@@ -134,8 +118,6 @@ export default { | @@ -134,8 +118,6 @@ export default { | ||
134 | return index; | 118 | return index; |
135 | } | 119 | } |
136 | }, | 120 | }, |
137 | - created() { | ||
138 | - }, | ||
139 | mounted() { | 121 | mounted() { |
140 | this.fetchYohoNum(); | 122 | this.fetchYohoNum(); |
141 | }, | 123 | }, |
@@ -162,12 +144,16 @@ export default { | @@ -162,12 +144,16 @@ export default { | ||
162 | this.inputCouponCode = ''; | 144 | this.inputCouponCode = ''; |
163 | this.$createToast({ | 145 | this.$createToast({ |
164 | txt: result.message, | 146 | txt: result.message, |
165 | - type: 'correct' | 147 | + type: 'txt', |
148 | + mask: true, | ||
149 | + time: 1000 | ||
166 | }).show(); | 150 | }).show(); |
167 | } else { | 151 | } else { |
168 | this.$createToast({ | 152 | this.$createToast({ |
169 | txt: result.message, | 153 | txt: result.message, |
170 | - type: 'error' | 154 | + type: 'txt', |
155 | + mask: true, | ||
156 | + time: 1000 | ||
171 | }).show(); | 157 | }).show(); |
172 | } | 158 | } |
173 | }); | 159 | }); |
-
Please register or login to post a comment