w-front-end / select_good · Commits

Commit d2fb3ab337934971774ea8134c02b88ee3347317

Authored by zhiyangdu
1 parent 15343bab

优惠券详情页

Inline Side-by-side
Showing 3 changed files with 84 additions and 187 deletions
src/pages/couponCollectionDetails/couponCollectionDetails.less
  View file @d2fb3ab
@@ -27,6 +27,36 @@ @@ -27,6 +27,36 @@
27 width: 100%; 27 width: 100%;
28 height:750px 28 height:750px
29 } 29 }
  30 + .banner_box{
  31 + width:100%;
  32 + height: 750px;
  33 + background: url("../../../static/img/coupons/coupons01.png") no-repeat center top;
  34 + background-size: 100%;
  35 + overflow: hidden;
  36 + .banner_desc{
  37 + font-size: 50px;
  38 + font-weight: 500;
  39 + color: #CD0C2F;
  40 + line-height: 70px;
  41 + margin-top:229px;
  42 + text-align: center;
  43 + }
  44 + .discount{
  45 + font-size: 179px;
  46 + font-weight: 500;
  47 + color: #E81138;
  48 + line-height: 215px;
  49 + margin-top: 35px;
  50 + text-align: center;
  51 + letter-spacing: -8px;
  52 + span{
  53 + font-size: 50px;
  54 + font-weight: 500;
  55 + color: #E81138;
  56 + line-height: 70px;
  57 + }
  58 + }
  59 + }
30 .main-box{ 60 .main-box{
31 padding-bottom: 0; 61 padding-bottom: 0;
32 padding-bottom: constant(safe-area-inset-bottom); 62 padding-bottom: constant(safe-area-inset-bottom);
@@ -277,144 +307,4 @@ @@ -277,144 +307,4 @@
277 color: #888888; 307 color: #888888;
278 } 308 }
279 } 309 }
280 - /*底部弹窗**/  
281 - .popup_box{  
282 - overflow-y: initial;  
283 - padding-bottom: 0;  
284 - padding-bottom: constant(safe-area-inset-bottom);  
285 - padding-bottom: env(safe-area-inset-bottom);  
286 - .popup_main{  
287 - height: 834px;  
288 - background: #FFFFFF;  
289 - padding: 30px 50px 37px 50px;  
290 - .goods_box{  
291 - // display: flex;  
292 - // justify-content: flex-end;  
293 - position: relative;  
294 - padding-bottom: 37px;  
295 - border-bottom: solid 1px #E4E4E4;  
296 - .item_pic_box{  
297 - position: absolute;  
298 - top: -70px;  
299 - left: 0;  
300 - width: 220px;  
301 - height: 220px;  
302 - background: #FFFFFF;  
303 - border-radius: 10px;  
304 - .item_pic{  
305 - display: block;  
306 - width: 190px;  
307 - height: 190px;  
308 - margin: 15px auto;  
309 - }  
310 - }  
311 - .right{  
312 - margin-left:260px;  
313 - .title{  
314 - height: 46px;  
315 - display: flex;  
316 - justify-content: space-between;  
317 - .title_t{  
318 - width: 354px;  
319 - font-size: 30px;  
320 - font-weight: 500;  
321 - color: #333333;  
322 - line-height: 42px;  
323 - display: -webkit-box;  
324 - -webkit-line-clamp: 1;  
325 - /*! autoprefixer: off */  
326 - -webkit-box-orient: vertical;  
327 - /*! autoprefixer: on */  
328 - text-overflow: ellipsis;  
329 - overflow: hidden;  
330 - }  
331 - .close{  
332 - display: block;  
333 - width:46px;  
334 - height:46px;  
335 - }  
336 - }  
337 - .pirce{  
338 - width: 304px;  
339 - // height: 50px;  
340 - font-size: 36px;  
341 - font-weight: 500;  
342 - color: #FC1541;  
343 - line-height: 50px;  
344 - text-align: left;  
345 - margin-top:42px;  
346 - }  
347 - }  
348 - }  
349 - .num_box{  
350 - display: flex;  
351 - justify-content: space-between;  
352 - align-items: center;  
353 - padding:70px 0;  
354 - border-bottom: solid 1px #E4E4E4;  
355 - .num_tip{  
356 - width: 350px;  
357 - height: 40px;  
358 - font-size: 28px;  
359 - font-weight: 500;  
360 - color: #707070;  
361 - line-height: 40px;  
362 - display: flex;  
363 - span{  
364 - color: #FC1541;  
365 - margin-left: 20px;  
366 - }  
367 - }  
368 - .right{  
369 - display: flex;  
370 - .num{  
371 - width: 30px;  
372 - height: 48px;  
373 - font-size: 34px;  
374 - font-weight: 400;  
375 - color: #565656;  
376 - line-height: 48px;  
377 - text-align: center;  
378 - margin: 0 16px;  
379 - }  
380 - img{  
381 - display: block;  
382 - width: 54px;  
383 - height: 54px;  
384 - }  
385 - }  
386 - }  
387 - .line_box{  
388 - display: flex;  
389 - justify-content: space-between;  
390 - align-items: center;  
391 - padding:30px 0;  
392 - border-bottom: solid 1px #E4E4E4;  
393 - height: 40px;  
394 - font-size: 28px;  
395 - line-height: 40px;  
396 - .left{  
397 - font-weight: 500;  
398 - color: #707070;  
399 - }  
400 - .right{  
401 - font-weight: 400;  
402 - color: #FC1541;  
403 - }  
404 - }  
405 - .btn{  
406 - width: 546px;  
407 - height: 86px;  
408 - line-height:86px;  
409 - background: #F5A623;  
410 - border-radius: 100px;  
411 - text-align: center;  
412 - font-size: 34px;  
413 - font-weight: 500;  
414 - color: #fff;  
415 - margin: 225px auto 0 auto;  
416 - letter-spacing: 20px;  
417 - }  
418 - }  
419 - }  
420 } 310 }
421 \ No newline at end of file 311 \ No newline at end of file
src/pages/couponCollectionDetails/couponCollectionDetails.vue
  View file @d2fb3ab
@@ -18,31 +18,23 @@ @@ -18,31 +18,23 @@
18 <div class="pl" 18 <div class="pl"
19 :style="'padding-top: ' + $parent.top.value + 'px'" 19 :style="'padding-top: ' + $parent.top.value + 'px'"
20 :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div> 20 :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
21 - <!--轮播-->  
22 - <!-- <swiper  
23 - :style="  
24 - 'margin-top:' +  
25 - ($parent.isBack && isCNLive.value ? 62 : 10) +  
26 - 'px'  
27 - "  
28 - v-if="simgList"  
29 - :swipers="goodsInfo.simg"  
30 - :isPointsMall= 'true'  
31 - :options="{  
32 - showIndicators: true  
33 - }"  
34 - >  
35 - </swiper> -->  
36 - <img v-if="goodsInfo && goodsInfo.simg"  
37 - class="goods-img"  
38 - v-lazy="goodsInfo.simg"  
39 - alt="" /> 21 + <div class="banner_box">
  22 + <div class="banner_desc">
  23 + 满{{parseInt(goodsInfo.filled)}}可用
  24 + </div>
  25 + <div class="discount">
  26 + {{parseInt(goodsInfo.discount)}}
  27 + <span>¥</span>
  28 + </div>
  29 + </div>
40 <!-- 内容 --> 30 <!-- 内容 -->
41 <div class="main-box"> 31 <div class="main-box">
42 <!-- 标题 --> 32 <!-- 标题 -->
43 - <div v-if="goodsInfo && goodsInfo.title" 33 + <div v-if="goodsInfo"
44 class="title"> 34 class="title">
45 - {{goodsInfo.title}} 35 + 满{{parseInt(goodsInfo.filled)}}减{{parseInt(goodsInfo.discount)}} 满{{parseInt(goodsInfo.filled)}}可用（
  36 + <span v-if="goodsInfo.sort==1">店铺全场</span>
  37 + <span v-else-if="goodsInfo.sort==2">单品优惠</span>)
46 </div> 38 </div>
47 <!-- 商品信息 --> 39 <!-- 商品信息 -->
48 <div class="goods-info"> 40 <div class="goods-info">
@@ -59,7 +51,11 @@ @@ -59,7 +51,11 @@
59 </div> 51 </div>
60 <div class="desc_title mar_top10">注意事项</div> 52 <div class="desc_title mar_top10">注意事项</div>
61 <div class="text-left"> 53 <div class="text-left">
62 - 1､ 使用说明：此优惠券每个手机号只能领取一次；<br> 2、优惠券有效期：优惠券使用有效期截止到2022年4月22日； 54 + 1､ 使用说明：此优惠券每个手机号
  55 + <span v-if="goodsInfo && goodsInfo.receive_number == 1">不限次数领；</span>
  56 + <span v-else-if="goodsInfo && goodsInfo.receive_number == 2">只能领取一次；</span>
  57 + <br> 2、优惠券有效期：优惠券使用有效期截止到
  58 + <span v-if="goodsInfo && goodsInfo.endtime">{{goodsInfo.endtime*1000 | datetime('yyyy-MM-dd')}}</span>；
63 <!-- <a href="tel:010-65832485">010-65832485</a> --> 59 <!-- <a href="tel:010-65832485">010-65832485</a> -->
64 </div> 60 </div>
65 </div> 61 </div>
@@ -70,7 +66,7 @@ @@ -70,7 +66,7 @@
70 <!-- 积分充足 --> 66 <!-- 积分充足 -->
71 <div class="footer"> 67 <div class="footer">
72 <div class="btn" 68 <div class="btn"
73 - @click="addIntegralOrder"> 69 + @click="coupon">
74 立即领取 70 立即领取
75 </div> 71 </div>
76 </div> 72 </div>
@@ -112,7 +108,7 @@ export default { @@ -112,7 +108,7 @@ export default {
112 toShare () { 108 toShare () {
113 // 判断分享 109 // 判断分享
114 if (typeof this.$parent.toShare === 'function') { 110 if (typeof this.$parent.toShare === 'function') {
115 - this.$parent.toShare(71, "1", (this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : "")); 111 + this.$parent.toShare(77, "1", (this.$route.query.couponId ? { "couponId": this.$route.query.couponId } : ""));
116 } 112 }
117 }, 113 },
118 // type=2跳转原生优惠券列表3跳转原生购买内容列表 114 // type=2跳转原生优惠券列表3跳转原生购买内容列表
@@ -120,18 +116,29 @@ export default { @@ -120,18 +116,29 @@ export default {
120 // 跳转到优惠券列表 116 // 跳转到优惠券列表
121 window.obj.jumpCoupon(); 117 window.obj.jumpCoupon();
122 }, 118 },
  119 + // 领取优惠券
  120 + coupon () {
  121 + if (this.isCNLive.value) {
  122 + // 校验登录
  123 + if (this.$parent.checkLogin()) {
  124 + // 实物商品不提示用积分
  125 + this.getShopCoupon();
  126 + }
  127 + } else {
  128 + this.$parent.callApp();
  129 + }
  130 + },
123 /** 131 /**
124 * 领取优惠券接口 132 * 领取优惠券接口
125 */ 133 */
126 - addIntegralOrder () { 134 + getShopCoupon () {
127 // 加载中提示 135 // 加载中提示
128 Indicator.open("加载中..."); 136 Indicator.open("加载中...");
129 // 获取证书请求接口 137 // 获取证书请求接口
130 - this.http("/Api/" + this.getApiVersion().LuckDraw + "/addIntegralOrder", { 138 + this.http("/Api/" + this.getApiVersion().index + "/getShopCoupon", {
131 uid: this.getStore("uid"), 139 uid: this.getStore("uid"),
132 - id: this.$route.query.goodsId, // 商品ID  
133 - num: 1  
134 - }, this.addIntegralOrderCallback, { 140 + coupon_id: this.$route.query.couponId, // 优惠券ID
  141 + }, this.getShopCouponCallback, {
135 method: "POST" 142 method: "POST"
136 }); 143 });
137 }, 144 },
@@ -141,7 +148,7 @@ export default { @@ -141,7 +148,7 @@ export default {
141 * @param {Object} res [服务器返回数据] 148 * @param {Object} res [服务器返回数据]
142 * @param {Object} ext [扩展参数] 149 * @param {Object} ext [扩展参数]
143 */ 150 */
144 - addIntegralOrderCallback (res, ext) { 151 + getShopCouponCallback (res, ext) {
145 152
146 // 加载完成 153 // 加载完成
147 Indicator.close(); 154 Indicator.close();
@@ -176,26 +183,26 @@ export default { @@ -176,26 +183,26 @@ export default {
176 } 183 }
177 }, 184 },
178 /** 185 /**
179 - * 积分商品详情页页面接口 186 + * 优惠券商品详情页页面接口
180 */ 187 */
181 - getGoodsInfo (goodsId) { 188 + couponInfo (couponId) {
182 // 加载中提示 189 // 加载中提示
183 Indicator.open("加载中..."); 190 Indicator.open("加载中...");
184 // 获取证书请求接口 191 // 获取证书请求接口
185 - this.http("/Api/" + this.getApiVersion().LuckDraw + "/integralGoodsInfo", {  
186 - id: goodsId, // 商品ID 192 + this.http("/Api/" + this.getApiVersion().index + "/couponInfo", {
  193 + coupon_id: couponId, // 商品ID
187 uid: this.getStore("uid") // 用户ID 194 uid: this.getStore("uid") // 用户ID
188 - }, this.getGoodsInfoCallback, { 195 + }, this.couponInfoCallback, {
189 method: "POST" 196 method: "POST"
190 }); 197 });
191 }, 198 },
192 199
193 /** 200 /**
194 - * 积分商品详情页页面接口回调 201 + * 优惠券商品详情页页面接口回调
195 * @param {Object} res [服务器返回数据] 202 * @param {Object} res [服务器返回数据]
196 * @param {Object} ext [扩展参数] 203 * @param {Object} ext [扩展参数]
197 */ 204 */
198 - getGoodsInfoCallback (res, ext) { 205 + couponInfoCallback (res, ext) {
199 206
200 // 加载完成 207 // 加载完成
201 Indicator.close(); 208 Indicator.close();
@@ -211,12 +218,12 @@ export default { @@ -211,12 +218,12 @@ export default {
211 /* 相似商品 */ 218 /* 相似商品 */
212 } else if (res.code == 400) { 219 } else if (res.code == 400) {
213 220
214 - // 获取积分商品详情页失败 221 + // 获取优惠券商品详情页失败
215 Toast(res.message); 222 Toast(res.message);
216 } else { 223 } else {
217 224
218 - // 获取积分商品详情页失败  
219 - Toast("获取积分商品详情页失败"); 225 + // 获取优惠券商品详情页失败
  226 + Toast("获取优惠券商品详情页失败");
220 } 227 }
221 }, 228 },
222 /** 229 /**
@@ -243,10 +250,10 @@ export default { @@ -243,10 +250,10 @@ export default {
243 // 设置标题 250 // 设置标题
244 this.$set(this, "title", "优惠券"); 251 this.$set(this, "title", "优惠券");
245 // 获取商品ID 252 // 获取商品ID
246 - let goodsId = this.$route.query.goodsId;  
247 - if (goodsId) { 253 + let couponId = this.$route.query.couponId;
  254 + if (couponId) {
248 // 获取商品信息 255 // 获取商品信息
249 - this.getGoodsInfo(goodsId); 256 + this.couponInfo(couponId);
250 } 257 }
251 // 判断是否在App内 258 // 判断是否在App内
252 if (this.isCNLive.value) { 259 if (this.isCNLive.value) {
@@ -277,18 +284,18 @@ export default { @@ -277,18 +284,18 @@ export default {
277 // 设置积分首页唤起app参数 284 // 设置积分首页唤起app参数
278 if (typeof this.$parent.getOpenApp === "function") { 285 if (typeof this.$parent.getOpenApp === "function") {
279 this.$parent.getOpenApp({ 286 this.$parent.getOpenApp({
280 - type: 71, 287 + type: 77,
281 id: "1", 288 id: "1",
282 url: "", 289 url: "",
283 - ext: this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : "" 290 + ext: this.$route.query.couponId ? { "couponId": this.$route.query.couponId } : ""
284 }); 291 });
285 } 292 }
286 if (typeof this.$parent.getShareData === "function") { 293 if (typeof this.$parent.getShareData === "function") {
287 this.$parent.getShareData({ 294 this.$parent.getShareData({
288 - type: 71, 295 + type: 77,
289 id: 1, 296 id: 1,
290 url: "", 297 url: "",
291 - ext: this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : "" 298 + ext: this.$route.query.couponId ? { "couponId": this.$route.query.couponId } : ""
292 }); 299 });
293 } 300 }
294 } 301 }
static/img/coupons/coupons01.png 0 → 100644
View file @d2fb3ab

218 KB