备份
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