xiaoe_mp_npm 0.5.25 → 0.5.26-alpha1

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
  * 组件的初始数据
@@ -0,0 +1,557 @@
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
+ line-height: vmin(64);
427
+ font-size: vmin(64);
428
+ }
429
+
430
+ .coupon-price view {
431
+ width: 40px;
432
+ height: 40px;
433
+ background: red;
434
+ }
435
+
436
+ .coupon-price-long {
437
+ font-size: vmin(48);
438
+ }
439
+
440
+ .discountFont {
441
+ font-size: vmin(32);
442
+ font-weight: 500;
443
+ }
444
+ }
445
+
446
+ .couponUseCondition {
447
+ color: rgba(255, 255, 255, 1);
448
+ font-size: vmin(24);
449
+ font-weight: 500;
450
+ font-family: "PingFang SC";
451
+ text-align: center;
452
+ line-height: vmin(32);
453
+ }
454
+ }
455
+
456
+ .couponInfo {
457
+ display: flex;
458
+ flex-direction: column;
459
+ justify-content: flex-start;
460
+ width: 100%;
461
+ height: vmin(192);
462
+ box-sizing: border-box;
463
+ background: rgba(255, 255, 255, 1);
464
+ padding: vmin(16);
465
+ color: rgba(153, 153, 153, 1);
466
+ font-size: vmin(20);
467
+ line-height: vmin(20);
468
+ font-weight: 400;
469
+ text-align: left;
470
+ border-radius: 0 0 vmin(16) vmin(16);
471
+
472
+ .couponName {
473
+ color: #333;
474
+ font-size: vmin(24);
475
+ line-height: vmin(32);
476
+ height: vmin(32);
477
+ width: vmin(232);
478
+ font-weight: 700;
479
+ margin-bottom: vmin(8);
480
+ overflow: hidden;
481
+ white-space: nowrap;
482
+ text-overflow: ellipsis;
483
+ }
484
+
485
+ .couponUseHint {
486
+ margin-bottom: vmin(8);
487
+ }
488
+
489
+ .couponUseTime {
490
+ margin-bottom: 0;
491
+ }
492
+ }
493
+
494
+ .couponState {
495
+ position: absolute;
496
+ right: vmin(16);
497
+ bottom: vmin(16);
498
+ height: vmin(48);
499
+ line-height: vmin(48);
500
+ border-radius: vmin(8);
501
+ border: 0;
502
+ background: rgba(255, 120, 31, 1);
503
+
504
+ // &.fullscreen-btn {
505
+ // width: 18.13vmin;
506
+ // }
507
+ &.vertical-btn {
508
+ width: vmin(232);
509
+ }
510
+
511
+ .couponBtn {
512
+ color: rgba(255, 255, 255, 1);
513
+ font-size: vmin(24);
514
+ font-weight: 500;
515
+ text-align: center;
516
+ font-family: "PingFang SC";
517
+ }
518
+ }
519
+
520
+ // .hasReceivedStatus {
521
+ // position: absolute;
522
+ // top: 0vmin;
523
+ // right: 0vmin;
524
+ // width: 13.07vmin;
525
+ // height: 15.2vmin;
526
+ // }
527
+ }
528
+
529
+ // .detailInfo{
530
+ // width: 100%;
531
+ // display: flex;
532
+ // background-color: rgba(255,245.82,239.7,1);
533
+ // box-sizing: border-box;
534
+ // border-radius: 0 0 0.53vmin 0.53vmin;
535
+ // padding: 2.13vmin;
536
+ // padding-top: 5vmin;
537
+ // color: rgba(102,102,102,1);
538
+ // font-size: 2.67vmin;
539
+ // margin-top: -2vmin;
540
+ // text-align: left;
541
+ // .disabledHint {
542
+ // width: 3.73vmin;
543
+ // margin-right: 1.33vmin;
544
+ // }
545
+ // .instructions {
546
+ // word-break: break-all;
547
+ // .remark {
548
+ // color: rgba(51,51,51,1);
549
+ // margin-bottom: 1.07vmin;
550
+ // }
551
+ // }
552
+ // }
553
+ }
554
+
555
+ .styleType1_wrapper-v {
556
+ @include styleType1_wrapper-v;
557
+ }
@@ -1,7 +1,7 @@
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-折扣券 -->
@@ -56,21 +56,21 @@
56
56
  <view class="couponState {{isFullscreenList ? 'fullscreen-btn':'vertical-btn'}}" wx:if="{{coupon_type == 1 || coupon_type == 2}}">
57
57
  <view class="couponBtn" wx:if="{{isFullscreenList}}" catchtap="sendCoupon">发送</view>
58
58
  <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>
59
+ <view class="couponBtn" hidden="{{!(coupon_type == 1)}}" catchtap="getCoupon">{{aliveMode?'立即领券':'领取'}}</view>
60
+ <view class="couponBtn" hidden="{{!(coupon_type == 2)}}" catchtap="getCoupon">{{aliveMode?'继续领券':'继续领'}}</view>
61
61
  </view>
62
62
  </view>
63
63
  <!-- 已领取标识 -->
64
64
  <image class="hasReceivedStatus"
65
- wx:if="{{ coupon_type == 6 || coupon_type == 2}}"
65
+ wx:if="{{ (coupon_type == 6 || coupon_type == 2) && !aliveMode}}"
66
66
  src="../../../common/assets/images/coupon/has_receive.png"></image>
67
67
  <!-- 已抢光标识 -->
68
68
  <image class="hasReceivedStatus"
69
- wx:elif="{{ coupon_type == 3}}"
69
+ wx:elif="{{ (coupon_type == 3) && !aliveMode}}"
70
70
  src="../../../common/assets/images/coupon/finished.png"></image>
71
71
  <!-- 已失效标识 -->
72
72
  <image class="hasReceivedStatus"
73
- wx:elif="{{ coupon_type == 4 || coupon_type == 7 || coupon_type == 5}}"
73
+ wx:elif="{{ (coupon_type == 4 || coupon_type == 7 || coupon_type == 5) && !aliveMode}}"
74
74
  src="../../../common/assets/images/coupon/failed.png"></image>
75
75
  </view>
76
76
 
@@ -107,7 +107,7 @@
107
107
  <block wx:if="{{item.discount_way == 2}}">
108
108
  <view class="coupon-price">
109
109
  <view>{{price.ToFilter(item.discount_percent, false)}}</view>
110
- <view wx:if="{{item.discount_percent % 10 != 0}}">.{{ price.fixedFont(item.discount_percent, false) }}</view>
110
+ <view class="{{aliveMode?'discountFont':''}}" wx:if="{{item.discount_percent % 10 != 0}}">.{{ price.fixedFont(item.discount_percent, false) }}</view>
111
111
  </view>
112
112
  <view class="discountFont">折</view>
113
113
  </block>