xiaoe_mp_npm 0.5.25 → 0.5.26-alpha2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -49,6 +49,10 @@ Component({
49
49
  type: Boolean,
50
50
  value: false
51
51
  },
52
+ aliveMode: {
53
+ type: Number,
54
+ value: 0
55
+ }
52
56
  },
53
57
  /**
54
58
  * 组件的初始数据
@@ -92,6 +96,16 @@ Component({
92
96
  return "7.47vmin";
93
97
  }
94
98
  },
99
+ // 判断金额长度,不同金额区间端显示不同样式(竖屏互动页优惠券样式)
100
+ isVerLongNumStyle1(data) {
101
+ if (data.item && data.item.price) {
102
+ let tempPrice = data.item.price / 100;
103
+ if (tempPrice.toString().length >=6 ) {
104
+ return true
105
+ }
106
+ }
107
+ return false
108
+ },
95
109
  // 格式化使用说明
96
110
  getDesInfo (data) {
97
111
  if (!data.item.instructions) {
@@ -0,0 +1,550 @@
1
+ // 互动页优惠券卡片样式
2
+ .styleType1_wrapper {
3
+ &.vertical-screen {
4
+ width: 63.47vmin;
5
+ margin: 0 auto;
6
+
7
+ &.not-pop-card {
8
+ margin-bottom: 4.27vmin;
9
+ }
10
+
11
+ .coupon_style1 {
12
+ height: 24.53vmin;
13
+ }
14
+ }
15
+
16
+ &.full-screen-list {
17
+ width: 92.47vmin;
18
+ margin: 3.2vmin 4.27vmin 0 4.27vmin;
19
+
20
+ .coupon_style1 {
21
+ height: 27vmin;
22
+ }
23
+ }
24
+
25
+ .coupon_style1 {
26
+ display: flex;
27
+ position: relative;
28
+ width: 100%;
29
+
30
+ // height: 24.53vmin;
31
+ .couponValue {
32
+ padding: 2.13vmin;
33
+ min-width: 24.8vmin;
34
+ height: 100%;
35
+ background: rgba(255, 120, 31, 1);
36
+ color: #fff;
37
+ // padding: 2.13vmin;
38
+ display: flex;
39
+ flex-direction: column;
40
+ justify-content: space-around;
41
+ align-items: center;
42
+ box-sizing: border-box;
43
+ border-radius: 2.13vmin 0 0 2.13vmin;
44
+
45
+ .couponPriceWrap {
46
+ position: relative;
47
+ display: flex;
48
+ flex-direction: row;
49
+ align-items: baseline;
50
+ font-weight: 700;
51
+
52
+ .coupon-symbol {
53
+ margin-right: 0.53vmin;
54
+ font-size: 4.27vmin;
55
+ }
56
+
57
+ .coupon-price {
58
+ display: flex;
59
+ font-size: 10.67vmin;
60
+ }
61
+
62
+ .discountFont {
63
+ font-size: 4.27vmin;
64
+ font-weight: 500;
65
+ }
66
+ }
67
+
68
+ .couponUseCondition {
69
+ color: rgba(255, 255, 255, 1);
70
+ font-size: 3.2vmin;
71
+ font-weight: 500;
72
+ font-family: "PingFang SC";
73
+ text-align: center;
74
+ line-height: 4.27vmin;
75
+ }
76
+ }
77
+
78
+ .couponInfo {
79
+ display: flex;
80
+ flex-direction: column;
81
+ justify-content: flex-start;
82
+ width: 68.07vmin;
83
+ height: 100%;
84
+ box-sizing: border-box;
85
+ background: rgba(255, 255, 255, 1);
86
+ padding: 2.13vmin 0 2.13vmin 2.13vmin;
87
+ color: rgba(153, 153, 153, 1);
88
+ font-size: 2.67vmin;
89
+ line-height: 3.2vmin;
90
+ font-weight: 400;
91
+ text-align: left;
92
+ border-radius: 0 2.13vmin 2.13vmin 0;
93
+
94
+ .couponName {
95
+ color: rgba(51, 51, 51, 1);
96
+ font-size: 3.2vmin;
97
+ line-height: 4.27vmin;
98
+ height: 4.27vmin;
99
+ width: 32.8vmin;
100
+ font-weight: 700;
101
+ margin-bottom: 1.07vmin;
102
+ overflow: hidden;
103
+ white-space: nowrap;
104
+ text-overflow: ellipsis;
105
+ }
106
+
107
+ .couponUseHint {
108
+ margin-bottom: 0.53vmin;
109
+ }
110
+
111
+ .couponUseTime {
112
+ margin-bottom: 4.8vmin;
113
+ }
114
+
115
+ .moreInfo {
116
+ display: flex;
117
+ cursor: pointer;
118
+ align-items: center;
119
+
120
+ .operateBtn {
121
+ width: 3.2vmin;
122
+ height: 3.2vmin;
123
+ margin-left: 0.8vmin;
124
+ background-size: 100% 100%;
125
+ }
126
+ }
127
+ }
128
+
129
+ .couponState {
130
+ position: absolute;
131
+ right: 2.13vmin;
132
+ bottom: 2.13vmin;
133
+ height: 6.4vmin;
134
+ line-height: 6.4vmin;
135
+ border-radius: 3.73vmin;
136
+ border: 0;
137
+ background: rgba(255, 120, 31, 1);
138
+
139
+ &.fullscreen-btn {
140
+ width: 18.13vmin;
141
+ }
142
+
143
+ &.vertical-btn {
144
+ width: 14.93vmin;
145
+ }
146
+
147
+ .couponBtn {
148
+ color: rgba(255, 255, 255, 1);
149
+ font-size: 3.2vmin;
150
+ font-weight: 700;
151
+ text-align: center;
152
+ font-family: "PingFang SC";
153
+ }
154
+ }
155
+
156
+ .hasReceivedStatus {
157
+ position: absolute;
158
+ top: 0vmin;
159
+ right: 0vmin;
160
+ width: 13.07vmin;
161
+ height: 15.2vmin;
162
+ }
163
+ }
164
+
165
+ .detailInfo {
166
+ width: 100%;
167
+ display: flex;
168
+ background-color: rgba(255, 245.82, 239.7, 1);
169
+ box-sizing: border-box;
170
+ border-radius: 0 0 0.53vmin 0.53vmin;
171
+ padding: 2.13vmin;
172
+ padding-top: 5vmin;
173
+ color: rgba(102, 102, 102, 1);
174
+ font-size: 2.67vmin;
175
+ margin-top: -2vmin;
176
+ text-align: left;
177
+
178
+ .disabledHint {
179
+ width: 3.73vmin;
180
+ margin-right: 1.33vmin;
181
+ }
182
+
183
+ .instructions {
184
+ word-break: break-all;
185
+
186
+ .remark {
187
+ color: rgba(51, 51, 51, 1);
188
+ margin-bottom: 1.07vmin;
189
+ }
190
+ }
191
+ }
192
+ }
193
+
194
+ // 优惠券不可用样式
195
+ .disabledState {
196
+ background-color: #eeeeee !important;
197
+
198
+ .couponValue {
199
+ background: #cdcdcd !important;
200
+ }
201
+ }
202
+
203
+ // 详细信息不可用优惠券时的字段
204
+ .whiteBg {
205
+ background-color: #fff !important;
206
+ }
207
+
208
+ .disabledHint {
209
+ width: 3.73vmin;
210
+ margin-right: 1.33vmin;
211
+ }
212
+
213
+ // 非高亮态样式
214
+ .unselectState {
215
+ background: #cdcdcd !important;
216
+ }
217
+
218
+
219
+ // 一行单个优惠券样式
220
+ .styleType2_wrapper {
221
+ margin-bottom: 3.2vmin;
222
+ margin-right: 2.13vmin;
223
+
224
+ .coupon_style2 {
225
+ display: flex;
226
+ flex-direction: row;
227
+ color: rgba(255, 120, 31, 1);
228
+ position: relative;
229
+ overflow: hidden;
230
+ width: 44.8vmin;
231
+ height: 21.33vmin;
232
+ flex-shrink: 0;
233
+
234
+ .coupons-styles2-bg {
235
+ position: absolute;
236
+ top: 0;
237
+ left: 0;
238
+ right: 0;
239
+ width: 100%;
240
+ height: 100%;
241
+ }
242
+
243
+ .couponInfo {
244
+ display: inline-flex;
245
+ flex-direction: column;
246
+ box-sizing: border-box;
247
+ padding-left: 2.13vmin;
248
+ width: 36.27vmin;
249
+ height: 100%;
250
+ font-family: "PingFang SC";
251
+ font-size: 2.67vmin;
252
+ line-height: 3.2vmin;
253
+
254
+ .couponInfoTop {
255
+ padding-top: 2.13vmin;
256
+ display: flex;
257
+ flex-direction: row;
258
+ align-items: flex-end;
259
+ height: 6.4vmin;
260
+
261
+ .couponPriceWrap {
262
+ position: relative;
263
+ display: flex;
264
+ flex-direction: row;
265
+ align-items: baseline;
266
+ font-weight: 700;
267
+ height: 6.4vmin;
268
+ line-height: 6.4vmin;
269
+
270
+ .coupon-symbol {
271
+ margin-right: 0.53vmin;
272
+ font-size: 3.2vmin;
273
+ }
274
+
275
+ .coupon-price {
276
+ display: flex;
277
+ font-size: 9.4vmin;
278
+ }
279
+
280
+ .discountFont {
281
+ font-size: 3.2vmin;
282
+ font-weight: 500;
283
+ margin-left: 0.53vmin;
284
+ }
285
+ }
286
+
287
+ }
288
+
289
+ .couponInfoBottom {
290
+ font-weight: 400;
291
+ line-height: 3.2vmin;
292
+ position: relative;
293
+ margin-top: 0.8vmin;
294
+
295
+ .priceLimit {
296
+ margin-bottom: 0.53vmin;
297
+
298
+ .couponUseCondition {
299
+ font-size: 2.67vmin;
300
+ font-weight: 400;
301
+ }
302
+ }
303
+
304
+ .couponUseHint {
305
+ margin-bottom: 0.53vmin;
306
+ }
307
+ }
308
+
309
+ }
310
+
311
+ .couponStatewrapper {
312
+ width: 8.27vmin;
313
+ height: 100%;
314
+ /* -webkit-align-self: center; */
315
+ -ms-flex-item-align: center;
316
+ align-self: center;
317
+ position: relative;
318
+ display: inline-flex;
319
+ justify-content: center;
320
+ align-items: center;
321
+ text-align: center;
322
+
323
+ .couponBtn {
324
+ writing-mode: vertical-lr;
325
+ letter-spacing: 1.33vmin;
326
+ font-size: 3.2vmin;
327
+ font-weight: 700;
328
+ font-family: "PingFang SC";
329
+ }
330
+
331
+ &:before {
332
+ content: " ";
333
+ display: block;
334
+ width: 100%;
335
+ height: 15.2vmin;
336
+ border-left: 0.27vmin dashed rgba(255, 120, 31, 1);
337
+ -webkit-transform: scale(1.3);
338
+ transform: scale(0.7, 1.1);
339
+ position: absolute;
340
+ left: -1.33vmin;
341
+ top: 3.07vmin;
342
+ }
343
+
344
+ }
345
+
346
+ .hasReceivedStatus {
347
+ position: absolute;
348
+ top: 0vmin;
349
+ right: 0vmin;
350
+ width: 13.07vmin;
351
+ height: 15.2vmin;
352
+ }
353
+ }
354
+ }
355
+
356
+ .pop-card {
357
+ width: 64.47vmin;
358
+ margin-bottom: 0;
359
+ }
360
+
361
+ @function vmin($rpx) {
362
+ @return #{$rpx * 100 / $deviceWidth}vmin;
363
+ }
364
+
365
+ $deviceWidth: 750;
366
+
367
+ @mixin styleType1_wrapper-v {
368
+ &.vertical-screen {
369
+ width: vmin(264);
370
+ height: vmin(364);
371
+ margin: 0 auto;
372
+
373
+ &.not-pop-card {
374
+ margin-bottom: 0;
375
+ }
376
+
377
+ .coupon_style1 {
378
+ height: vmin(172);
379
+ }
380
+ }
381
+
382
+ &.full-screen-list {
383
+ width: 92.47vmin;
384
+ margin: 3.2vmin 4.27vmin 0 4.27vmin;
385
+
386
+ .coupon_style1 {
387
+ height: 27vmin;
388
+ }
389
+ }
390
+
391
+ .coupon_style1 {
392
+ display: block;
393
+ position: static;
394
+ width: 100%;
395
+
396
+ // height: 24.53vmin;
397
+ .couponValue {
398
+ padding: vmin(25) 0;
399
+ min-width: unset;
400
+ height: vmin(172);
401
+ background: rgba(255, 120, 31, 1);
402
+ color: #fff;
403
+ // padding: 2.13vmin;
404
+ display: flex;
405
+ flex-direction: column;
406
+ justify-content: space-around;
407
+ align-items: center;
408
+ box-sizing: border-box;
409
+ border-radius: vmin(16) vmin(16) 0 0;
410
+
411
+ .couponPriceWrap {
412
+ position: relative;
413
+ display: flex;
414
+ flex-direction: row;
415
+ align-items: center;
416
+ font-weight: 700;
417
+
418
+ .coupon-symbol {
419
+ margin-right: vmin(4);
420
+ font-size: vmin(32);
421
+ }
422
+
423
+ .coupon-price {
424
+ display: flex;
425
+ font-weight: 500;
426
+ font-size: vmin(64);
427
+ }
428
+
429
+ .coupon-price-long {
430
+ font-size: vmin(48);
431
+ }
432
+
433
+ .discountFont {
434
+ font-size: vmin(32);
435
+ font-weight: 500;
436
+ }
437
+ }
438
+
439
+ .couponUseCondition {
440
+ color: rgba(255, 255, 255, 1);
441
+ font-size: vmin(24);
442
+ font-weight: 500;
443
+ font-family: "PingFang SC";
444
+ text-align: center;
445
+ line-height: vmin(32);
446
+ }
447
+ }
448
+
449
+ .couponInfo {
450
+ display: flex;
451
+ flex-direction: column;
452
+ justify-content: flex-start;
453
+ width: 100%;
454
+ height: vmin(192);
455
+ box-sizing: border-box;
456
+ background: rgba(255, 255, 255, 1);
457
+ padding: vmin(16);
458
+ color: rgba(153, 153, 153, 1);
459
+ font-size: vmin(20);
460
+ line-height: vmin(20);
461
+ font-weight: 400;
462
+ text-align: left;
463
+ border-radius: 0 0 vmin(16) vmin(16);
464
+
465
+ .couponName {
466
+ color: #333;
467
+ font-size: vmin(24);
468
+ line-height: vmin(32);
469
+ height: vmin(32);
470
+ width: vmin(232);
471
+ font-weight: 700;
472
+ margin-bottom: vmin(8);
473
+ overflow: hidden;
474
+ white-space: nowrap;
475
+ text-overflow: ellipsis;
476
+ }
477
+
478
+ .couponUseHint {
479
+ margin-bottom: vmin(8);
480
+ }
481
+
482
+ .couponUseTime {
483
+ margin-bottom: 0;
484
+ }
485
+ }
486
+
487
+ .couponState {
488
+ position: absolute;
489
+ right: vmin(16);
490
+ bottom: vmin(16);
491
+ height: vmin(48);
492
+ line-height: vmin(48);
493
+ border-radius: vmin(8);
494
+ border: 0;
495
+ background: rgba(255, 120, 31, 1);
496
+
497
+ // &.fullscreen-btn {
498
+ // width: 18.13vmin;
499
+ // }
500
+ &.vertical-btn {
501
+ width: vmin(232);
502
+ }
503
+
504
+ .couponBtn {
505
+ color: rgba(255, 255, 255, 1);
506
+ font-size: vmin(24);
507
+ font-weight: 500;
508
+ text-align: center;
509
+ font-family: "PingFang SC";
510
+ }
511
+ }
512
+
513
+ // .hasReceivedStatus {
514
+ // position: absolute;
515
+ // top: 0vmin;
516
+ // right: 0vmin;
517
+ // width: 13.07vmin;
518
+ // height: 15.2vmin;
519
+ // }
520
+ }
521
+
522
+ // .detailInfo{
523
+ // width: 100%;
524
+ // display: flex;
525
+ // background-color: rgba(255,245.82,239.7,1);
526
+ // box-sizing: border-box;
527
+ // border-radius: 0 0 0.53vmin 0.53vmin;
528
+ // padding: 2.13vmin;
529
+ // padding-top: 5vmin;
530
+ // color: rgba(102,102,102,1);
531
+ // font-size: 2.67vmin;
532
+ // margin-top: -2vmin;
533
+ // text-align: left;
534
+ // .disabledHint {
535
+ // width: 3.73vmin;
536
+ // margin-right: 1.33vmin;
537
+ // }
538
+ // .instructions {
539
+ // word-break: break-all;
540
+ // .remark {
541
+ // color: rgba(51,51,51,1);
542
+ // margin-bottom: 1.07vmin;
543
+ // }
544
+ // }
545
+ // }
546
+ }
547
+
548
+ .styleType1_wrapper-v {
549
+ @include styleType1_wrapper-v;
550
+ }
@@ -1,14 +1,20 @@
1
1
  <!-- 优惠券形式分为2类:一行和列表 -->
2
2
  <!-- styleType===1 时是互动页讲师发放优惠券时的优惠券列表形式 -->
3
- <view class="styleType1_wrapper {{ isFullScreenPopCard? 'pop-card' : 'not-pop-card'}} {{isFullscreenList ? 'full-screen-list' : 'vertical-screen'}}" wx:if="{{styleType === 1}}">
4
- <view class="coupon_style1" >
3
+ <view class="styleType1_wrapper {{aliveMode? 'styleType1_wrapper-v' : ''}} {{ isFullScreenPopCard? 'pop-card' : 'not-pop-card'}} {{isFullscreenList ? 'full-screen-list' : 'vertical-screen'}}" wx:if="{{styleType === 1}}">
4
+ <view class="coupon_style1">
5
5
  <view class="couponValue">
6
6
  <view class="couponPriceWrap">
7
7
  <!-- discount_way优惠方式 1-满减券 2-折扣券 -->
8
8
  <block wx:if="{{item.discount_way == 1}}">
9
9
  <view class="coupon-symbol">¥</view>
10
- <view style="font-size: {{isLongNumStyle1}}" class="coupon-price" >
11
- <view>{{price.ToFilter(item.price)}}</view>
10
+ <!-- 竖屏卡片 -->
11
+ <view wx:if="{{aliveMode}}" class="coupon-price {{isLongNumStyle1?'coupon-price-ver':''}}" >
12
+ {{price.ToFilter(item.price)}}
13
+ <view wx:if="{{item.price % 100 != 0}}">.{{ price.fixedFont(item.price) }}</view>
14
+ </view>
15
+ <!-- 横屏卡片 -->
16
+ <view wx:if="{{!aliveMode}}" style="font-size: {{isLongNumStyle1}}" class="coupon-price" >
17
+ {{price.ToFilter(item.price)}}
12
18
  <view wx:if="{{item.price % 100 != 0}}">.{{ price.fixedFont(item.price) }}</view>
13
19
  </view>
14
20
  </block>
@@ -56,21 +62,21 @@
56
62
  <view class="couponState {{isFullscreenList ? 'fullscreen-btn':'vertical-btn'}}" wx:if="{{coupon_type == 1 || coupon_type == 2}}">
57
63
  <view class="couponBtn" wx:if="{{isFullscreenList}}" catchtap="sendCoupon">发送</view>
58
64
  <view wx:else>
59
- <view class="couponBtn" hidden="{{!(coupon_type == 1)}}" catchtap="getCoupon">领取</view>
60
- <view class="couponBtn" hidden="{{!(coupon_type == 2)}}" catchtap="getCoupon">继续领</view>
65
+ <view class="couponBtn" hidden="{{!(coupon_type == 1)}}" catchtap="getCoupon">{{aliveMode?'立即领券':'领取'}}</view>
66
+ <view class="couponBtn" hidden="{{!(coupon_type == 2)}}" catchtap="getCoupon">{{aliveMode?'继续领券':'继续领'}}</view>
61
67
  </view>
62
68
  </view>
63
69
  <!-- 已领取标识 -->
64
70
  <image class="hasReceivedStatus"
65
- wx:if="{{ coupon_type == 6 || coupon_type == 2}}"
71
+ wx:if="{{ (coupon_type == 6 || coupon_type == 2) && !aliveMode}}"
66
72
  src="../../../common/assets/images/coupon/has_receive.png"></image>
67
73
  <!-- 已抢光标识 -->
68
74
  <image class="hasReceivedStatus"
69
- wx:elif="{{ coupon_type == 3}}"
75
+ wx:elif="{{ (coupon_type == 3) && !aliveMode}}"
70
76
  src="../../../common/assets/images/coupon/finished.png"></image>
71
77
  <!-- 已失效标识 -->
72
78
  <image class="hasReceivedStatus"
73
- wx:elif="{{ coupon_type == 4 || coupon_type == 7 || coupon_type == 5}}"
79
+ wx:elif="{{ (coupon_type == 4 || coupon_type == 7 || coupon_type == 5) && !aliveMode}}"
74
80
  src="../../../common/assets/images/coupon/failed.png"></image>
75
81
  </view>
76
82
 
@@ -107,7 +113,7 @@
107
113
  <block wx:if="{{item.discount_way == 2}}">
108
114
  <view class="coupon-price">
109
115
  <view>{{price.ToFilter(item.discount_percent, false)}}</view>
110
- <view wx:if="{{item.discount_percent % 10 != 0}}">.{{ price.fixedFont(item.discount_percent, false) }}</view>
116
+ <view class="{{aliveMode?'discountFont':''}}" wx:if="{{item.discount_percent % 10 != 0}}">.{{ price.fixedFont(item.discount_percent, false) }}</view>
111
117
  </view>
112
118
  <view class="discountFont">折</view>
113
119
  </block>