备份
Showing
8 changed files
with
254 additions
and
21 deletions
1 | let global_gzh_name = "袋鼠妈妈学堂"; | ||
2 | let global_gzh_wxAppId = "wxaf7d9b7414c6df11"; | ||
3 | let global_register_redirect = false; | ||
4 | |||
5 | // let global_gzh_name = "安敏健行"; | ||
6 | // let global_gzh_wxAppId = "wx3a4821f58cc1ded7"; | ||
7 | // let global_register_redirect = "https://nutwpgateway.novaetech.cn/wx/oauth2/authorize?brandId=17378876&scope=snsapi_base&url=http%3A%2F%2Fh5.novaetech.cn%2F%23%2Fshowqrcode"; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | let global_view_coupon_url = "http://www.baidu.com"; | ||
2 | let global_view_integral_url = "http://www.bing.com"; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
src/assets/imgs/draw-btn-prizelist.png
0 → 100644
4.01 KB
src/assets/imgs/prize-item-coupon-bg.png
0 → 100644
89.8 KB
src/assets/imgs/prize-item-normal-bg.png
0 → 100644
90 KB
... | @@ -113,15 +113,17 @@ export default { | ... | @@ -113,15 +113,17 @@ export default { |
113 | return { | 113 | return { |
114 | loading: false, | 114 | loading: false, |
115 | data: this.value, | 115 | data: this.value, |
116 | submitForm: { | 116 | submitForm: !this.value || !this.value.drawResult |
117 | drawCode: "", | 117 | ? { |
118 | contactName: "", | 118 | drawCode: "", |
119 | contactMobile: "", | 119 | contactName: "", |
120 | province: "", | 120 | contactMobile: "", |
121 | city: "", | 121 | province: "", |
122 | district: "", | 122 | city: "", |
123 | address: "" | 123 | district: "", |
124 | } | 124 | address: "" |
125 | } | ||
126 | : this.value.drawResult | ||
125 | }; | 127 | }; |
126 | }, | 128 | }, |
127 | methods: { | 129 | methods: { |
... | @@ -135,8 +137,12 @@ export default { | ... | @@ -135,8 +137,12 @@ export default { |
135 | typeof this.data.confirmHandler == "function" && | 137 | typeof this.data.confirmHandler == "function" && |
136 | this.data.confirmHandler(); | 138 | this.data.confirmHandler(); |
137 | }, | 139 | }, |
138 | toViewIntegralHandler() {}, | 140 | toViewIntegralHandler() { |
139 | toViewCouponHandler() {}, | 141 | location.href = global_view_integral_url; |
142 | }, | ||
143 | toViewCouponHandler() { | ||
144 | location.href = global_view_coupon_url; | ||
145 | }, | ||
140 | submitContactHandler() { | 146 | submitContactHandler() { |
141 | if (!this.submitForm.contactName) { | 147 | if (!this.submitForm.contactName) { |
142 | Toast("请填写真实姓名"); | 148 | Toast("请填写真实姓名"); |
... | @@ -164,6 +170,7 @@ export default { | ... | @@ -164,6 +170,7 @@ export default { |
164 | .then(res => { | 170 | .then(res => { |
165 | Toast.clear(); | 171 | Toast.clear(); |
166 | Toast("收件地址提交成功"); | 172 | Toast("收件地址提交成功"); |
173 | this.$emit("submitSuccess"); | ||
167 | }) | 174 | }) |
168 | .catch(e => { | 175 | .catch(e => { |
169 | this.loading = false; | 176 | this.loading = false; | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="home"> | 2 | <div class="home"> |
3 | <head-view></head-view> | 3 | <head-view></head-view> |
4 | <div class="btn-back" @click="backHandler"></div> | ||
5 | <div class="btn-prize-list" @click="prizeListHandler"></div> | ||
6 | |||
4 | <div class="sys-container-panel content"> | 7 | <div class="sys-container-panel content"> |
5 | <div class="container-title">{{title}}</div> | 8 | <div class="container-title">{{title}}</div> |
6 | <div class="head-line"></div> | 9 | <div class="head-line"></div> |
... | @@ -106,11 +109,12 @@ export default { | ... | @@ -106,11 +109,12 @@ export default { |
106 | }); | 109 | }); |
107 | }, | 110 | }, |
108 | drawHandler(ref) { | 111 | drawHandler(ref) { |
109 | // if (!this.init || this.remainDrawTime <= 0) { | 112 | if (!this.init || this.remainDrawTime <= 0) { |
110 | // return; | 113 | return; |
111 | // } | 114 | } |
112 | Toast.loading({ | 115 | Toast.loading({ |
113 | mask: true, | 116 | mask: true, |
117 | forbidClick: true, | ||
114 | message: "加载中..." | 118 | message: "加载中..." |
115 | }); | 119 | }); |
116 | httpGet({ url: urls.draw, data: null }).then(res => { | 120 | httpGet({ url: urls.draw, data: null }).then(res => { |
... | @@ -133,6 +137,12 @@ export default { | ... | @@ -133,6 +137,12 @@ export default { |
133 | that.initActivity(); | 137 | that.initActivity(); |
134 | }, 500); | 138 | }, 500); |
135 | }; | 139 | }; |
140 | }, | ||
141 | backHandler(){ | ||
142 | window.history.go(-1); | ||
143 | }, | ||
144 | prizeListHandler(){ | ||
145 | this.$router.push("/prize"); | ||
136 | } | 146 | } |
137 | }, | 147 | }, |
138 | components: { | 148 | components: { |
... | @@ -311,4 +321,25 @@ export default { | ... | @@ -311,4 +321,25 @@ export default { |
311 | margin: 10px auto; | 321 | margin: 10px auto; |
312 | background-repeat: no-repeat; | 322 | background-repeat: no-repeat; |
313 | } | 323 | } |
324 | |||
325 | .btn-back { | ||
326 | width: 170px; | ||
327 | height: 52px; | ||
328 | background: url(../../assets/imgs/list-btn-back.png) no-repeat; | ||
329 | background-size: 100%; | ||
330 | position: fixed; | ||
331 | left: 0; | ||
332 | top: 30px; | ||
333 | z-index: 8000; | ||
334 | } | ||
335 | .btn-prize-list{ | ||
336 | width: 166px; | ||
337 | height: 52px; | ||
338 | background: url(../../assets/imgs/draw-btn-prizelist.png) no-repeat; | ||
339 | background-size: 100%; | ||
340 | position: fixed; | ||
341 | right: 0; | ||
342 | top: 30px; | ||
343 | z-index: 8000; | ||
344 | } | ||
314 | </style> | 345 | </style> | ... | ... |
src/pages/prize/index.vue
0 → 100644
1 | <template> | ||
2 | <div class="home"> | ||
3 | <head-view></head-view> | ||
4 | |||
5 | <div class="sys-container-panel content"> | ||
6 | <div class="container-title">{{title}}</div> | ||
7 | <div class="head-line"></div> | ||
8 | |||
9 | <div class="prize-container"> | ||
10 | <div | ||
11 | class="prize-item" | ||
12 | v-for="(item,index) in prizeList" | ||
13 | :key="index" | ||
14 | :class="{'prize-coupon-bg':item.prizeType=='coupon','prize-normal-bg':item.prizeType!='coupon'}" | ||
15 | > | ||
16 | <div class="prize-name">{{item.prizeName}}</div> | ||
17 | <div | ||
18 | class="prize-btn" | ||
19 | @click="viewDetailHandler(item)" | ||
20 | >{{item.prizeType == 'real' ? '提交信息' : '查看详情'}}</div> | ||
21 | </div> | ||
22 | |||
23 | <div class="empty" v-if="init && prizeList.length == 0"> | ||
24 | <div class="empty-icon"> | ||
25 | <van-icon name="warn-o" /> | ||
26 | </div> | ||
27 | <div class="empty-message">您还没有任何奖品 !</div> | ||
28 | </div> | ||
29 | </div> | ||
30 | </div> | ||
31 | |||
32 | <div class="bottom-line"></div> | ||
33 | |||
34 | <bottom-tool v-model="activityIndex"></bottom-tool> | ||
35 | <draw-model v-if="model.show" v-model="model" v-on:submitSuccess="model.show = false"></draw-model> | ||
36 | </div> | ||
37 | </template> | ||
38 | |||
39 | |||
40 | |||
41 | <script> | ||
42 | let urls = { | ||
43 | prizeList: "/jiajiaCHApi/app/prize/list" | ||
44 | }; | ||
45 | |||
46 | import { httpGet } from "@/api/fetch-api"; | ||
47 | import BottomTool from "@/components/bottom-tools/bottom-tools"; | ||
48 | import DrawModel from "@/components/biz-model/draw-model"; | ||
49 | import HeadView from "@/components/plugins/head"; | ||
50 | |||
51 | import Vue from "vue"; | ||
52 | import { Toast } from "vant"; | ||
53 | import { Icon } from "vant"; | ||
54 | |||
55 | Vue.use(Icon); | ||
56 | Vue.use(Toast); | ||
57 | |||
58 | export default { | ||
59 | name: "home", | ||
60 | data() { | ||
61 | return { | ||
62 | init: false, | ||
63 | activityIndex: 4, | ||
64 | title: "我的奖品", | ||
65 | remainDrawTime: 0, | ||
66 | model: { | ||
67 | show: false, | ||
68 | drawResult: {} | ||
69 | }, | ||
70 | indexForm: {}, | ||
71 | prizeList: [] | ||
72 | }; | ||
73 | }, | ||
74 | methods: { | ||
75 | initActivity() { | ||
76 | Toast.loading({ | ||
77 | mask: true, | ||
78 | message: "加载中..." | ||
79 | }); | ||
80 | httpGet({ url: urls.prizeList, data: null }).then(res => { | ||
81 | Toast.clear(); | ||
82 | this.init = true; | ||
83 | this.prizeList = res; | ||
84 | }); | ||
85 | }, | ||
86 | viewDetailHandler(item) { | ||
87 | console.log(item); | ||
88 | let type = item.prizeType; | ||
89 | switch (type) { | ||
90 | case "real": | ||
91 | this.model.drawResult = item; | ||
92 | this.model.show = true; | ||
93 | break; | ||
94 | case "coupon": | ||
95 | location.href = global_view_coupon_url; | ||
96 | break; | ||
97 | default: | ||
98 | location.href = global_view_integral_url; | ||
99 | break; | ||
100 | } | ||
101 | } | ||
102 | }, | ||
103 | components: { | ||
104 | BottomTool, | ||
105 | DrawModel, | ||
106 | HeadView | ||
107 | }, | ||
108 | mounted() { | ||
109 | this.initActivity(); | ||
110 | } | ||
111 | }; | ||
112 | </script> | ||
113 | |||
114 | |||
115 | <style lang="scss" scoped> | ||
116 | .content { | ||
117 | margin: 85px auto 60px auto; | ||
118 | padding-bottom: 60px; | ||
119 | min-height: 500px; | ||
120 | } | ||
121 | |||
122 | .container-title { | ||
123 | font-size: 30px; | ||
124 | } | ||
125 | |||
126 | .head-line { | ||
127 | height: 60px; | ||
128 | } | ||
129 | |||
130 | .bottom-line { | ||
131 | height: 150px; | ||
132 | background-color: transparent; | ||
133 | } | ||
134 | |||
135 | .prize-container { | ||
136 | width: 700; | ||
137 | margin: auto; | ||
138 | } | ||
139 | |||
140 | .prize-item { | ||
141 | margin: auto; | ||
142 | display: flex; | ||
143 | align-items: center; | ||
144 | justify-content: space-between; | ||
145 | width: 590px; | ||
146 | height: 140px; | ||
147 | border-radius: 15px; | ||
148 | padding: 0 30px; | ||
149 | } | ||
150 | |||
151 | .prize-coupon-bg { | ||
152 | background: url(../../assets/imgs/prize-item-coupon-bg.png); | ||
153 | background-size: 100%; | ||
154 | } | ||
155 | .prize-normal-bg { | ||
156 | background: url(../../assets/imgs/prize-item-normal-bg.png); | ||
157 | background-size: 100%; | ||
158 | } | ||
159 | |||
160 | .prize-name { | ||
161 | font-size: 24px; | ||
162 | color: #fff; | ||
163 | font-weight: bold; | ||
164 | line-height: 140px; | ||
165 | height: 140px; | ||
166 | } | ||
167 | |||
168 | .prize-btn { | ||
169 | font-size: 22px; | ||
170 | font-weight: 600; | ||
171 | text-align: center; | ||
172 | width: 140px; | ||
173 | height: 40px; | ||
174 | line-height: 40px; | ||
175 | border-radius: 26px; | ||
176 | background-color: #f6b843; | ||
177 | } | ||
178 | |||
179 | .empty { | ||
180 | padding-top: 100px; | ||
181 | height: 300px; | ||
182 | |||
183 | .empty-icon { | ||
184 | font-size: 60px; | ||
185 | color: #a1a1a1; | ||
186 | } | ||
187 | .empty-message { | ||
188 | font-size: 24px; | ||
189 | color: #a1a1a1; | ||
190 | } | ||
191 | } | ||
192 | </style> |
... | @@ -51,6 +51,14 @@ const routes = [{ | ... | @@ -51,6 +51,14 @@ const routes = [{ |
51 | meta: { | 51 | meta: { |
52 | title: '幸运抽奖' | 52 | title: '幸运抽奖' |
53 | } | 53 | } |
54 | }, | ||
55 | { | ||
56 | path: '/prize', | ||
57 | name: 'prize', | ||
58 | component: () => import('./pages/prize/index.vue'), | ||
59 | meta: { | ||
60 | title: '我的奖品' | ||
61 | } | ||
54 | } | 62 | } |
55 | ] | 63 | ] |
56 | 64 | ... | ... |
-
Please register or sign in to post a comment