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 27 width: 100%;
28 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 60 .main-box{
31 61 padding-bottom: 0;
32 62 padding-bottom: constant(safe-area-inset-bottom);
... ... @@ -277,144 +307,4 @@
277 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 311 \ No newline at end of file
... ...
src/pages/couponCollectionDetails/couponCollectionDetails.vue
  View file @d2fb3ab
... ... @@ -18,31 +18,23 @@
18 18 <div class="pl"
19 19 :style="'padding-top: ' + $parent.top.value + 'px'"
20 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 31 <div class="main-box">
42 32 <!-- 标题 -->
43   - <div v-if="goodsInfo && goodsInfo.title"
  33 + <div v-if="goodsInfo"
44 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 38 </div>
47 39 <!-- 商品信息 -->
48 40 <div class="goods-info">
... ... @@ -59,7 +51,11 @@
59 51 </div>
60 52 <div class="desc_title mar_top10">注意事项</div>
61 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 59 <!-- <a href="tel:010-65832485">010-65832485</a> -->
64 60 </div>
65 61 </div>
... ... @@ -70,7 +66,7 @@
70 66 <!-- 积分充足 -->
71 67 <div class="footer">
72 68 <div class="btn"
73   - @click="addIntegralOrder">
  69 + @click="coupon">
74 70 立即领取
75 71 </div>
76 72 </div>
... ... @@ -112,7 +108,7 @@ export default {
112 108 toShare () {
113 109 // 判断分享
114 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 114 // type=2跳转原生优惠券列表3跳转原生购买内容列表
... ... @@ -120,18 +116,29 @@ export default {
120 116 // 跳转到优惠券列表
121 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 136 Indicator.open("加载中...");
129 137 // 获取证书请求接口
130   - this.http("/Api/" + this.getApiVersion().LuckDraw + "/addIntegralOrder", {
  138 + this.http("/Api/" + this.getApiVersion().index + "/getShopCoupon", {
131 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 142 method: "POST"
136 143 });
137 144 },
... ... @@ -141,7 +148,7 @@ export default {
141 148 * @param {Object} res [服务器返回数据]
142 149 * @param {Object} ext [扩展参数]
143 150 */
144   - addIntegralOrderCallback (res, ext) {
  151 + getShopCouponCallback (res, ext) {
145 152  
146 153 // 加载完成
147 154 Indicator.close();
... ... @@ -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 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 194 uid: this.getStore("uid") // 用户ID
188   - }, this.getGoodsInfoCallback, {
  195 + }, this.couponInfoCallback, {
189 196 method: "POST"
190 197 });
191 198 },
192 199  
193 200 /**
194   - * 积分商品详情页页面接口回调
  201 + * 优惠券商品详情页页面接口回调
195 202 * @param {Object} res [服务器返回数据]
196 203 * @param {Object} ext [扩展参数]
197 204 */
198   - getGoodsInfoCallback (res, ext) {
  205 + couponInfoCallback (res, ext) {
199 206  
200 207 // 加载完成
201 208 Indicator.close();
... ... @@ -211,12 +218,12 @@ export default {
211 218 /* 相似商品 */
212 219 } else if (res.code == 400) {
213 220  
214   - // 获取积分商品详情页失败
  221 + // 获取优惠券商品详情页失败
215 222 Toast(res.message);
216 223 } else {
217 224  
218   - // 获取积分商品详情页失败
219   - Toast("获取积分商品详情页失败");
  225 + // 获取优惠券商品详情页失败
  226 + Toast("获取优惠券商品详情页失败");
220 227 }
221 228 },
222 229 /**
... ... @@ -243,10 +250,10 @@ export default {
243 250 // 设置标题
244 251 this.$set(this, "title", "优惠券");
245 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 258 // 判断是否在App内
252 259 if (this.isCNLive.value) {
... ... @@ -277,18 +284,18 @@ export default {
277 284 // 设置积分首页唤起app参数
278 285 if (typeof this.$parent.getOpenApp === "function") {
279 286 this.$parent.getOpenApp({
280   - type: 71,
  287 + type: 77,
281 288 id: "1",
282 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 293 if (typeof this.$parent.getShareData === "function") {
287 294 this.$parent.getShareData({
288   - type: 71,
  295 + type: 77,
289 296 id: 1,
290 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