jufubao-base 1.0.61-beta1001 → 1.0.61-beta1002

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jufubao-base",
3
- "version": "1.0.61-beta1001",
3
+ "version": "1.0.61-beta1002",
4
4
  "private": false,
5
5
  "description": "聚福宝业务组件基础插件包",
6
6
  "main": "index.js",
@@ -16,55 +16,31 @@
16
16
  </view>
17
17
  <!-- #endif -->
18
18
  <view class="jfb-base-card-detail-entry__body" v-if="info!==null">
19
- <view
20
- class="jfb-base-card-detail-entry__body-header"
21
- :style="{
22
- background: headerBg.color,
23
- backgroundSize: '100%',
24
- }"
25
- >
26
- <view
27
- class="jfb-base-card-detail-entry__body-header-wrap"
28
- :style="{
29
- backgroundImage: `url(${headerBg.image})`,
30
- }"
31
- >
32
- <view class="jfb-base-card-detail-entry__body-header-item">
33
- <view>券名:</view>
34
- <view>{{info.card_type_name}}</view>
35
- </view>
36
- <view
37
- style="padding-bottom: 0px"
38
- class="jfb-base-card-detail-entry__body-header-item"
39
- >
40
- <view>券号:</view>
41
- <view>{{info.card_number}}</view>
42
- </view>
43
- </view>
44
- </view>
45
- <view
46
- class="jfb-base-card-detail-entry__body-content"
47
- >
48
- <view
49
- :class="
50
- item.key === 'other_card_point'
51
- ? 'jfb-base-card-detail-entry__body-content-special'
52
- : 'jfb-base-card-detail-entry__body-content-item'
53
- "
54
- v-for="(item, index) in valueKey"
55
- :key="index"
56
- >
57
- <view> {{ item.label }}: </view>
58
- <view :style="{color:mainColor,fontWeight:500}" v-if="item.type === 'price'">
59
- {{ info[item.key] }}
60
- <text>{{info.unit}}</text>
61
- </view>
62
- <view style="color: #333; font-weight: 500" v-else>
63
- {{ info[item.key] }}
64
- <text v-if="item.type === 'type'">券</text>
19
+ <view class="card-list" :style="{
20
+ background: headerBg['color'],
21
+ backgroundSize: '100%'
22
+ }">
23
+ <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
24
+ <view class="card-list__title"><view>{{info['card_type_name']}}</view></view>
25
+ <div class="card-list__content">
26
+ <view>
27
+ <text>券号:</text>
28
+ <text>{{info.card_number}}</text>
29
+ </view>
30
+ </div>
31
+ <view class="card-list__date">
32
+ <text>有效期:</text>
33
+ <text>{{info.end_time}}</text>
34
+ </view>
35
+ <view class="card-list__yue">
36
+ <text>余额:</text>
37
+ <text>{{info.card_point}} {{ info.unit }}</text>
38
+ </view>
39
+ <view class="card-list__other" v-if="info.other_card_point && info.card_point_type === 2">
40
+ <view><text>购买其他物品可抵:</text><text>{{info.other_card_point}} {{ info.unit }}</text></view>
41
+ </view>
65
42
  </view>
66
43
  </view>
67
- </view>
68
44
  <view class="jfb-base-card-detail-entry__body-qrcode">
69
45
  <view>
70
46
  <view>
@@ -162,23 +138,6 @@ export default {
162
138
  userInfo: null, //用户信息(暂时不可用)
163
139
 
164
140
  info: null,
165
- valueKey: [
166
- {
167
- label: "票券余额",
168
- key: "card_point",
169
- type: "price",
170
- },
171
- {
172
- label: "购买其他物品可抵",
173
- key: "other_card_point",
174
- type: "price",
175
- },
176
- {
177
- label: "有效期限",
178
- key: "end_time",
179
- type: "normal",
180
- },
181
- ],
182
141
  timeStr: "",
183
142
  timeer: null,
184
143
  date: 2, //时间底数
@@ -308,14 +267,12 @@ export default {
308
267
  return item
309
268
  })
310
269
  }
311
- if(res.other_card_point===0 || res.card_point_type === 1) {
312
- this.valueKey.splice(1,1)
313
- }
314
270
  this.info = res;
315
271
  if(!this.$configProject.isPreview) {
316
272
  this.setInval(this.info.card_qrcode_expire);
317
273
  }
318
274
  this.show = false;
275
+ console.log(this.getCardThemes(res.card_type_name),'this.getCardThemes(res.card_type_name)');
319
276
  this.headerBg = this.getCardThemes(res.card_type_name);
320
277
 
321
278
  //显示按钮
@@ -610,65 +567,216 @@ export default {
610
567
  transform: translate(-50rpx, -50rpx);
611
568
  }
612
569
  padding: unit(26, rpx);
613
- &-header {
614
- border-radius: unit(16, rpx);
615
- font-size: unit(40, rpx);
570
+ .card-list {
571
+ overflow: hidden;
572
+ border-radius: unit(16, rpx);
573
+ margin-bottom: unit(30, rpx);
574
+
575
+ &:last-child {
576
+ margin-bottom: 0;
577
+ }
578
+
579
+
580
+ &__title {
581
+ height: unit(56, rpx);
582
+ display: flex;
583
+ justify-content: flex-start;
584
+ align-items: center;
585
+
586
+ & > view {
587
+ padding: 0 unit(80, rpx);
588
+ font-size: unit(24, rpx);
589
+ line-height: unit(56, rpx);
590
+ background: rgba(102, 102, 102, 0.4);
591
+ color: #fff;
592
+ border-radius: 0 0 unit(16, rpx) 0;
593
+ }
594
+
595
+ }
596
+
597
+ &__content {
598
+ padding: unit(10, rpx) unit(40, rpx) 0;
599
+ height: unit(86, rpx);
600
+ display: flex;
601
+ justify-content: space-between;
602
+ align-items: center;
603
+
604
+ & > view:first-child {
605
+ font-size: unit(36, rpx);
606
+ line-height: unit(86, rpx);
607
+ color: #fff;
616
608
  font-weight: 700;
609
+ }
610
+
611
+ & > view:nth-child(2) {
612
+ font-size: unit(24, rpx);
613
+ display: flex;
614
+ justify-content: space-between;
615
+ align-items: center;
616
+ flex-flow: wrap;
617
+ flex-direction: column;
617
618
  color: #fff;
618
- position: relative;
619
- min-height: unit(260,rpx);
620
-
621
- &-wrap {
622
- width: unit(700, rpx);
623
- border-radius: unit(16, rpx);
624
- background-size: 100%;
625
- min-height: unit(260,rpx);
626
- display: flex;
627
- flex-direction: column;
628
- justify-content: center;
619
+ }
620
+ }
621
+
622
+ &__date {
623
+ padding: 0 unit(40, rpx);
624
+ font-size: unit(28, rpx);
625
+ line-height: unit(32, rpx);
626
+ color: #fff;
627
+ }
628
+
629
+ &__yue {
630
+ padding: unit(10, rpx) unit(40, rpx) 0;
631
+ font-size: unit(28, rpx);
632
+ line-height: unit(32, rpx);
633
+ color: #fff;
634
+
635
+ & > text:nth-child(2) {
636
+ font-weight: 700;
637
+ }
638
+ }
639
+
640
+ &__other {
641
+ display: flex;
642
+ justify-content: flex-start;
643
+ align-items: center;
644
+ padding: unit(20, rpx) unit(40, rpx) 0;
645
+ margin-top: unit(0, rpx);
646
+
647
+ & > view {
648
+ border-radius:unit(8, rpx);
649
+ background: rgba(255, 255, 255, 0.2);
650
+ height: unit(48, rpx);
651
+ line-height: unit(48, rpx);
652
+ display: flex;
653
+ justify-content: flex-start;
654
+ align-items: center;
655
+ font-weight: 400;
656
+ font-size: unit(24, rpx);
657
+ padding: 0 unit(20, rpx);
658
+ color: #fff;
659
+ }
660
+
661
+
662
+ }
663
+
664
+ &__nodata {
665
+ padding: unit(20, rpx) unit(40, rpx) 0;
666
+ margin-top: unit(0, rpx);
667
+ color: #fff;
668
+ font-size: unit(28, rpx);
669
+ }
670
+
671
+ &__entry {
672
+ padding: unit(20, rpx) unit(40, rpx) 0;
673
+ & > view {
674
+ line-height: unit(64, rpx);
675
+ text-align: center;
676
+ font-size: unit(26, rpx);
677
+ border-radius: unit(32, rpx);
678
+ background: rgba(255, 255, 255, 1);
679
+ box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
680
+ font-weight: 500;
681
+ }
682
+ }
683
+
684
+ &__entrys {
685
+ margin: unit(20, rpx) unit(20, rpx) 0;
686
+ padding: unit(30, rpx);
687
+ border-radius: unit(16, rpx);
688
+ background: rgba(255, 255, 255, 1);
689
+ box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
690
+
691
+ &-title {
692
+ display: flex;
693
+ justify-content: space-between;
694
+ align-items: center;
695
+
696
+
697
+ & > view:first-child {
698
+ font-size: unit(28, rpx);
699
+ font-weight: 500;
700
+ flex: 1;
629
701
  }
630
-
631
- &-item {
702
+
703
+ & > view:nth-child(2) {
632
704
  display: flex;
633
705
  justify-content: flex-start;
634
- align-content: center;
635
- padding-bottom: unit(32, rpx);
636
- padding-left: unit(40,rpx);
637
-
638
- & > view:first-child {
639
- flex-basis: unit(120,rpx);
640
- flex-shrink: 0;
641
- }
706
+ align-items: center;
707
+ flex-shrink: 0;
708
+ font-size: unit(20, rpx);
709
+ color: #999;
642
710
  }
643
711
  }
644
-
645
- &-content {
646
- background: #fff;
647
- border-radius: unit(16, rpx);
648
- padding: unit(38, rpx) 0;
649
- margin-top: unit(24, rpx);
650
-
651
- &-item {
652
- display: flex;
653
- color: #666;
654
- justify-content: space-between;
655
- align-content: center;
656
- font-size: unit(28, rpx);
657
- padding: unit(16, rpx) unit(48, rpx);
658
- }
659
-
660
- &-special {
712
+
713
+ &-scroll {
714
+
715
+ }
716
+
717
+ &-item {
718
+ display: flex;
719
+ justify-content: flex-start;
720
+ align-items: center;
721
+ flex-flow: nowrap;
722
+ margin-left: unit(-14, rpx);
723
+ padding-top: unit(20, rpx);
724
+
725
+ & > view {
726
+ width: unit(120, rpx);
727
+ margin-right: unit(10, rpx);
728
+ flex-shrink: 0;
661
729
  display: flex;
662
- color: #666;
663
- justify-content: space-between;
664
- font-size: unit(24, rpx);
665
- padding: unit(18, rpx) unit(24, rpx);
666
- margin: 0 unit(24, rpx);
667
- border-radius: unit(16, rpx);
668
- background: #f9f9f9;
669
- align-content: center;
730
+ justify-content: center;
731
+ flex-direction: column;
732
+ align-items: center;
733
+
734
+ & > view:first-child {
735
+ width: unit(76, rpx);
736
+ height: unit(76, rpx);
737
+ overflow: hidden;
738
+
739
+ & > image {
740
+ height: 100%;
741
+ width: 100%;
742
+ }
743
+ }
744
+
745
+ & > view:nth-child(2) {
746
+ margin-top: unit(10, rpx);
747
+ font-size: unit(24, rpx);
748
+ line-height: unit(36, rpx);
749
+ margin-bottom: unit(10, rpx);
750
+ }
751
+
752
+ & > view:nth-child(3) {
753
+ display: flex;
754
+ justify-content: flex-start;
755
+ align-items: center;
756
+ flex-shrink: 0;
757
+ font-size: unit(20, rpx);
758
+ color: #999;
759
+ }
760
+
761
+ &:last-child {
762
+ margin-right: 0;
763
+ }
764
+
670
765
  }
766
+
767
+
671
768
  }
769
+ }
770
+
771
+ &-warp {
772
+ width: unit(700, rpx);
773
+ min-height: unit(290, rpx);
774
+ position: relative;
775
+ border-radius: unit(16, rpx);
776
+ background-size: 100%;
777
+ padding-bottom: unit(20, rpx);
778
+ }
779
+ }
672
780
 
673
781
  &-qrcode {
674
782
  text-align: center;
@@ -57,51 +57,29 @@
57
57
  </view>
58
58
 
59
59
  <view v-if="showInfo && info !== null">
60
- <view
61
- class="jfb-base-card-info-entry__body-header"
62
- :style="{
63
- background: headerBg.color,
64
- backgroundSize: '100%',
65
- }"
66
- >
67
- <view
68
- class="jfb-base-card-info-entry__body-header-wrap"
69
- :style="{
70
- backgroundImage: `url(${headerBg.image})`,
71
- }"
72
- >
73
- <view class="jfb-base-card-info-entry__body-header-item">
74
- <view>券名:</view>
75
- <view>{{ info.card_type_name }}</view>
60
+ <view class="card-list" :style="{
61
+ background: headerBg['color'],
62
+ backgroundSize: '100%'
63
+ }">
64
+ <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
65
+ <view class="card-list__title"><view>{{info['card_type_name']}}</view></view>
66
+ <div class="card-list__content">
67
+ <view>
68
+ <text>券号:</text>
69
+ <text>{{info.card_number}}</text>
70
+ </view>
71
+ </div>
72
+ <view class="card-list__date">
73
+ <text>有效期:</text>
74
+ <text>{{info.end_time}}</text>
76
75
  </view>
77
- <view
78
- style="padding-bottom: 0px"
79
- class="jfb-base-card-info-entry__body-header-item"
80
- >
81
- <view>券号:</view>
82
- <view>{{ info.card_number }}</view>
76
+ <view class="card-list__yue">
77
+ <text>余额:</text>
78
+ <text>{{info.card_point}} {{ info.unit }}</text>
79
+ </view>
80
+ <view class="card-list__other" v-if="info.other_card_point && info.card_point_type === 2">
81
+ <view><text>购买其他物品可抵:</text><text>{{info.other_card_point}} {{ info.unit }}</text></view>
83
82
  </view>
84
- </view>
85
- </view>
86
- <view class="jfb-base-card-info-entry__body-content">
87
- <view
88
- :class="
89
- item.key === 'other_card_point'
90
- ? 'jfb-base-card-info-entry__body-content-special'
91
- : 'jfb-base-card-info-entry__body-content-item'
92
- "
93
- v-for="(item, index) in valueKey"
94
- :key="index"
95
- >
96
- <view> {{ item.label }}: </view>
97
- <view :style="{color:mainColor,fontWeight:500}" v-if="item.type === 'price'">
98
- {{ info[item.key] }}
99
- <text>{{info.unit}}</text>
100
- </view>
101
- <view style="color: #333; font-weight: 500" v-else>
102
- {{ info[item.key] }}
103
- <text v-if="item.type === 'type'">券</text>
104
- </view>
105
83
  </view>
106
84
  </view>
107
85
  <view
@@ -169,23 +147,6 @@ export default {
169
147
  data() {
170
148
  return {
171
149
  info: null,
172
- valueKey: [
173
- {
174
- label: "票券余额",
175
- key: "card_point",
176
- type: "price",
177
- },
178
- {
179
- label: "购买其他物品可抵",
180
- key: "other_card_point",
181
- type: "price",
182
- },
183
- {
184
- label: "有效期限",
185
- key: "end_time",
186
- type: "normal",
187
- },
188
- ],
189
150
  card_number: "", //卡号
190
151
  card_password: "", //卡密码
191
152
  isPassword: true,
@@ -333,9 +294,7 @@ export default {
333
294
  return item
334
295
  })
335
296
  }
336
- if(res.other_card_point===0 || res.card_point_type === 1) {
337
- this.valueKey.splice(1,1);
338
- }
297
+
339
298
  this.headerBg = this.getCardThemes(res.card_type_name);
340
299
  this.showInfo = true;
341
300
  this.info = temp;
@@ -372,9 +331,6 @@ export default {
372
331
  return item
373
332
  })
374
333
  }
375
- if(res.other_card_point===0 || res.card_point_type === 1) {
376
- this.valueKey.splice(1,1);
377
- }
378
334
  this.headerBg = this.getCardThemes(res.card_type_name);
379
335
  this.showInfo = true;
380
336
  this.showForm = false;
@@ -460,65 +416,216 @@ export default {
460
416
  left: 50%;
461
417
  transform: translate(-50rpx, -50rpx);
462
418
  }
463
- &-header {
464
- border-radius: unit(16, rpx);
465
- font-size: unit(40, rpx);
419
+ .card-list {
420
+ overflow: hidden;
421
+ border-radius: unit(16, rpx);
422
+ margin-bottom: unit(30, rpx);
423
+
424
+ &:last-child {
425
+ margin-bottom: 0;
426
+ }
427
+
428
+
429
+ &__title {
430
+ height: unit(56, rpx);
431
+ display: flex;
432
+ justify-content: flex-start;
433
+ align-items: center;
434
+
435
+ & > view {
436
+ padding: 0 unit(80, rpx);
437
+ font-size: unit(24, rpx);
438
+ line-height: unit(56, rpx);
439
+ background: rgba(102, 102, 102, 0.4);
440
+ color: #fff;
441
+ border-radius: 0 0 unit(16, rpx) 0;
442
+ }
443
+
444
+ }
445
+
446
+ &__content {
447
+ padding: unit(10, rpx) unit(40, rpx) 0;
448
+ height: unit(86, rpx);
449
+ display: flex;
450
+ justify-content: space-between;
451
+ align-items: center;
452
+
453
+ & > view:first-child {
454
+ font-size: unit(36, rpx);
455
+ line-height: unit(86, rpx);
456
+ color: #fff;
466
457
  font-weight: 700;
458
+ }
459
+
460
+ & > view:nth-child(2) {
461
+ font-size: unit(24, rpx);
462
+ display: flex;
463
+ justify-content: space-between;
464
+ align-items: center;
465
+ flex-flow: wrap;
466
+ flex-direction: column;
467
467
  color: #fff;
468
- position: relative;
469
- min-height: unit(260,rpx);
470
-
471
- &-wrap {
472
- width: unit(700, rpx);
473
- border-radius: unit(16, rpx);
474
- background-size: 100%;
475
- min-height: unit(260,rpx);
476
- display: flex;
477
- flex-direction: column;
478
- justify-content: center;
468
+ }
469
+ }
470
+
471
+ &__date {
472
+ padding: 0 unit(40, rpx);
473
+ font-size: unit(28, rpx);
474
+ line-height: unit(32, rpx);
475
+ color: #fff;
476
+ }
477
+
478
+ &__yue {
479
+ padding: unit(10, rpx) unit(40, rpx) 0;
480
+ font-size: unit(28, rpx);
481
+ line-height: unit(32, rpx);
482
+ color: #fff;
483
+
484
+ & > text:nth-child(2) {
485
+ font-weight: 700;
486
+ }
487
+ }
488
+
489
+ &__other {
490
+ display: flex;
491
+ justify-content: flex-start;
492
+ align-items: center;
493
+ padding: unit(20, rpx) unit(40, rpx) 0;
494
+ margin-top: unit(0, rpx);
495
+
496
+ & > view {
497
+ border-radius:unit(8, rpx);
498
+ background: rgba(255, 255, 255, 0.2);
499
+ height: unit(48, rpx);
500
+ line-height: unit(48, rpx);
501
+ display: flex;
502
+ justify-content: flex-start;
503
+ align-items: center;
504
+ font-weight: 400;
505
+ font-size: unit(24, rpx);
506
+ padding: 0 unit(20, rpx);
507
+ color: #fff;
508
+ }
509
+
510
+
511
+ }
512
+
513
+ &__nodata {
514
+ padding: unit(20, rpx) unit(40, rpx) 0;
515
+ margin-top: unit(0, rpx);
516
+ color: #fff;
517
+ font-size: unit(28, rpx);
518
+ }
519
+
520
+ &__entry {
521
+ padding: unit(20, rpx) unit(40, rpx) 0;
522
+ & > view {
523
+ line-height: unit(64, rpx);
524
+ text-align: center;
525
+ font-size: unit(26, rpx);
526
+ border-radius: unit(32, rpx);
527
+ background: rgba(255, 255, 255, 1);
528
+ box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
529
+ font-weight: 500;
530
+ }
531
+ }
532
+
533
+ &__entrys {
534
+ margin: unit(20, rpx) unit(20, rpx) 0;
535
+ padding: unit(30, rpx);
536
+ border-radius: unit(16, rpx);
537
+ background: rgba(255, 255, 255, 1);
538
+ box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
539
+
540
+ &-title {
541
+ display: flex;
542
+ justify-content: space-between;
543
+ align-items: center;
544
+
545
+
546
+ & > view:first-child {
547
+ font-size: unit(28, rpx);
548
+ font-weight: 500;
549
+ flex: 1;
479
550
  }
480
-
481
- &-item {
551
+
552
+ & > view:nth-child(2) {
482
553
  display: flex;
483
554
  justify-content: flex-start;
484
- align-content: center;
485
- padding-bottom: unit(32, rpx);
486
- padding-left: unit(40,rpx);
487
-
488
- & > view:first-child {
489
- flex-basis: unit(120,rpx);
490
- flex-shrink: 0;
491
- }
555
+ align-items: center;
556
+ flex-shrink: 0;
557
+ font-size: unit(20, rpx);
558
+ color: #999;
492
559
  }
493
560
  }
494
-
495
- &-content {
496
- background: #fff;
497
- border-radius: unit(16, rpx);
498
- padding: unit(38, rpx) 0;
499
- margin-top: unit(24, rpx);
500
-
501
- &-item {
502
- display: flex;
503
- color: #666;
504
- justify-content: space-between;
505
- align-content: center;
506
- font-size: unit(28, rpx);
507
- padding: unit(16, rpx) unit(48, rpx);
508
- }
509
-
510
- &-special {
561
+
562
+ &-scroll {
563
+
564
+ }
565
+
566
+ &-item {
567
+ display: flex;
568
+ justify-content: flex-start;
569
+ align-items: center;
570
+ flex-flow: nowrap;
571
+ margin-left: unit(-14, rpx);
572
+ padding-top: unit(20, rpx);
573
+
574
+ & > view {
575
+ width: unit(120, rpx);
576
+ margin-right: unit(10, rpx);
577
+ flex-shrink: 0;
511
578
  display: flex;
512
- color: #666;
513
- justify-content: space-between;
514
- font-size: unit(24, rpx);
515
- padding: unit(18, rpx) unit(24, rpx);
516
- margin: 0 unit(24, rpx);
517
- border-radius: unit(16, rpx);
518
- background: #f9f9f9;
519
- align-content: center;
579
+ justify-content: center;
580
+ flex-direction: column;
581
+ align-items: center;
582
+
583
+ & > view:first-child {
584
+ width: unit(76, rpx);
585
+ height: unit(76, rpx);
586
+ overflow: hidden;
587
+
588
+ & > image {
589
+ height: 100%;
590
+ width: 100%;
591
+ }
592
+ }
593
+
594
+ & > view:nth-child(2) {
595
+ margin-top: unit(10, rpx);
596
+ font-size: unit(24, rpx);
597
+ line-height: unit(36, rpx);
598
+ margin-bottom: unit(10, rpx);
599
+ }
600
+
601
+ & > view:nth-child(3) {
602
+ display: flex;
603
+ justify-content: flex-start;
604
+ align-items: center;
605
+ flex-shrink: 0;
606
+ font-size: unit(20, rpx);
607
+ color: #999;
608
+ }
609
+
610
+ &:last-child {
611
+ margin-right: 0;
612
+ }
613
+
520
614
  }
615
+
616
+
521
617
  }
618
+ }
619
+
620
+ &-warp {
621
+ width: unit(700, rpx);
622
+ min-height: unit(290, rpx);
623
+ position: relative;
624
+ border-radius: unit(16, rpx);
625
+ background-size: 100%;
626
+ padding-bottom: unit(20, rpx);
627
+ }
628
+ }
522
629
 
523
630
  &-qrcode {
524
631
  text-align: center;
@@ -21,78 +21,54 @@
21
21
  v-if="info !== null"
22
22
  :style="{minHeight: layoutInfo.bodyMinHeightRpx + 'rpx'}"
23
23
  >
24
- <view
25
- class="jfb-base-card-shift-entry__body-header"
26
- :style="{
27
- background: headerBg.color,
28
- backgroundSize: '100%',
29
- }"
30
- >
31
- <view
32
- class="jfb-base-card-shift-entry__body-header-wrap"
33
- :style="{
34
- backgroundImage: `url(${headerBg.image})`,
35
- }"
36
- >
37
- <view class="jfb-base-card-shift-entry__body-header__title">
38
- <view>
39
- <xd-font-icon
40
- size="40"
41
- color="#fff"
42
- icon="iconzhuanhuanshitu"
43
- style="margin-right:10rpx"
44
- ></xd-font-icon>
45
- 转换的票券
46
- </view>
24
+ <view class="card-list" :style="{
25
+ background: headerBg['color'],
26
+ backgroundSize: '100%'
27
+ }">
28
+ <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
29
+ <view class="card-list__title">
30
+ <view style="display:flex;align-items:center">
31
+ <xd-font-icon
32
+ size="40"
33
+ color="#fff"
34
+ icon="iconzhuanhuanshitu"
35
+ style="margin-right:10rpx"
36
+ ></xd-font-icon>
37
+ <text>转换的票券</text>
47
38
  </view>
48
- <view style="padding-top:40rpx" class="jfb-base-card-shift-entry__body-header-item">
49
- <view>券名:</view>
50
- <view>{{info.card_type_name}}</view>
51
- </view>
52
- <view
53
- style="padding-bottom: 20rpx"
54
- class="jfb-base-card-shift-entry__body-header-item"
55
- >
56
- <view>券号:</view>
57
- <view>{{info.card_number}}</view>
39
+ </view>
40
+ <div class="card-list__content">
41
+ <view>
42
+ <text>券号:</text>
43
+ <text>{{info.card_number}}</text>
44
+ </view>
45
+ </div>
46
+ <view class="card-list__date">
47
+ <text>有效期:</text>
48
+ <text>{{info.end_time}}</text>
49
+ </view>
50
+ <view class="card-list__yue">
51
+ <text>余额:</text>
52
+ <text>{{info.card_point}} {{ info.unit }}</text>
53
+ </view>
54
+ <view class="card-list__other" v-if="info.other_card_point && info.card_point_type === 2">
55
+ <view><text>购买其他物品可抵:</text><text>{{info.other_card_point}} {{ info.unit }}</text></view>
56
+ </view>
58
57
  </view>
59
58
  </view>
60
- </view>
61
- <!-- 转换之前 -->
62
- <view
63
- class="jfb-base-card-shift-entry__body-content"
64
- >
65
- <view
66
- :class="
67
- item.key === 'other_card_point'
68
- ? 'jfb-base-card-shift-entry__body-content-special'
69
- : 'jfb-base-card-shift-entry__body-content-item'
70
- "
71
- v-for="(item, index) in valueKey"
72
- :key="index"
73
- >
74
- <view> {{ item.label }}: </view>
75
- <view :style="{color:mainColor,fontWeight:500}" v-if="item.type === 'price'">
76
- {{ info[item.key] }}
77
- <text>{{info.unit}}</text>
78
- </view>
79
- <view style="color: #333; font-weight: 500" v-else>
80
- {{ info[item.key] }}
81
- <text v-if="item.type === 'type'">券</text>
82
- </view>
83
- </view>
84
- </view>
85
59
  <!-- 转换剩余 -->
60
+ <view>
61
+ <xd-font-icon
62
+ size="32"
63
+ color="#bbb"
64
+ icon="iconrepository-xialaxuanxiangdown"
65
+ ></xd-font-icon>
66
+ </view>
86
67
  <view
87
68
  class="jfb-base-card-shift-entry__body-content"
88
69
  :style="{background:changeBg}"
89
70
  >
90
71
  <view class="jfb-base-card-shift-entry__body-content-title">
91
- <xd-font-icon
92
- size="32"
93
- :color="mainColor"
94
- icon="iconrepository-xialaxuanxiangdown"
95
- ></xd-font-icon>
96
72
  <view>转换后预估票券额度</view>
97
73
  </view>
98
74
  <view
@@ -188,23 +164,6 @@ export default {
188
164
  data() {
189
165
  return {
190
166
  info: null,
191
- valueKey: [
192
- {
193
- label: "票券余额",
194
- key: "card_point",
195
- type: "price",
196
- },
197
- {
198
- label: "购买其他物品可抵",
199
- key: "other_card_point",
200
- type: "price",
201
- },
202
- {
203
- label: "有效期限",
204
- key: "end_time",
205
- type: "normal",
206
- },
207
- ],
208
167
  changeValueKey: [
209
168
  {
210
169
  label: "票券余额",
@@ -287,14 +246,13 @@ export default {
287
246
  .then((res) => {
288
247
  let temp = {};
289
248
  Object.keys(res).map((key) => {
290
- if (key === "card_point" || key === "exchange_card_point") {
249
+ if (key === "card_point" || key === "exchange_card_point" || key=== "other_card_point") {
291
250
  temp[key] = this.$xdUniHelper.divisionFloatNumber(res[key], 100);
292
251
  } else {
293
252
  temp[key] = res[key];
294
253
  }
295
254
  });
296
255
  if(res.other_card_point===0 || res.card_point_type === 1) {
297
- this.valueKey.splice(1,1);
298
256
  this.changeValueKey.splice(1,1)
299
257
  }
300
258
  this.headerBg = this.getCardThemes(res.card_type_name);
@@ -323,57 +281,216 @@ export default {
323
281
  position: relative;
324
282
  color: #333;
325
283
  padding: unit(26, rpx);
326
- &-header {
327
- border-radius: unit(16, rpx);
328
- font-size: unit(40, rpx);
284
+ .card-list {
285
+ overflow: hidden;
286
+ border-radius: unit(16, rpx);
287
+ margin-bottom: unit(30, rpx);
288
+
289
+ &:last-child {
290
+ margin-bottom: 0;
291
+ }
292
+
293
+
294
+ &__title {
295
+ height: unit(56, rpx);
296
+ display: flex;
297
+ justify-content: flex-start;
298
+ align-items: center;
299
+
300
+ & > view {
301
+ padding: 0 unit(80, rpx);
302
+ font-size: unit(24, rpx);
303
+ line-height: unit(56, rpx);
304
+ background: rgba(102, 102, 102, 0.4);
305
+ color: #fff;
306
+ border-radius: 0 0 unit(16, rpx) 0;
307
+ }
308
+
309
+ }
310
+
311
+ &__content {
312
+ padding: unit(10, rpx) unit(40, rpx) 0;
313
+ height: unit(86, rpx);
314
+ display: flex;
315
+ justify-content: space-between;
316
+ align-items: center;
317
+
318
+ & > view:first-child {
319
+ font-size: unit(36, rpx);
320
+ line-height: unit(86, rpx);
321
+ color: #fff;
322
+ font-weight: 700;
323
+ }
324
+
325
+ & > view:nth-child(2) {
326
+ font-size: unit(24, rpx);
327
+ display: flex;
328
+ justify-content: space-between;
329
+ align-items: center;
330
+ flex-flow: wrap;
331
+ flex-direction: column;
332
+ color: #fff;
333
+ }
334
+ }
335
+
336
+ &__date {
337
+ padding: 0 unit(40, rpx);
338
+ font-size: unit(28, rpx);
339
+ line-height: unit(32, rpx);
340
+ color: #fff;
341
+ }
342
+
343
+ &__yue {
344
+ padding: unit(10, rpx) unit(40, rpx) 0;
345
+ font-size: unit(28, rpx);
346
+ line-height: unit(32, rpx);
347
+ color: #fff;
348
+
349
+ & > text:nth-child(2) {
329
350
  font-weight: 700;
351
+ }
352
+ }
353
+
354
+ &__other {
355
+ display: flex;
356
+ justify-content: flex-start;
357
+ align-items: center;
358
+ padding: unit(20, rpx) unit(40, rpx) 0;
359
+ margin-top: unit(0, rpx);
360
+
361
+ & > view {
362
+ border-radius:unit(8, rpx);
363
+ background: rgba(255, 255, 255, 0.2);
364
+ height: unit(48, rpx);
365
+ line-height: unit(48, rpx);
366
+ display: flex;
367
+ justify-content: flex-start;
368
+ align-items: center;
369
+ font-weight: 400;
370
+ font-size: unit(24, rpx);
371
+ padding: 0 unit(20, rpx);
330
372
  color: #fff;
331
- position: relative;
332
- min-height: unit(260,rpx);
333
-
334
- &__title {
335
- height: unit(56, rpx);
373
+ }
374
+
375
+
376
+ }
377
+
378
+ &__nodata {
379
+ padding: unit(20, rpx) unit(40, rpx) 0;
380
+ margin-top: unit(0, rpx);
381
+ color: #fff;
382
+ font-size: unit(28, rpx);
383
+ }
384
+
385
+ &__entry {
386
+ padding: unit(20, rpx) unit(40, rpx) 0;
387
+ & > view {
388
+ line-height: unit(64, rpx);
389
+ text-align: center;
390
+ font-size: unit(26, rpx);
391
+ border-radius: unit(32, rpx);
392
+ background: rgba(255, 255, 255, 1);
393
+ box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
394
+ font-weight: 500;
395
+ }
396
+ }
397
+
398
+ &__entrys {
399
+ margin: unit(20, rpx) unit(20, rpx) 0;
400
+ padding: unit(30, rpx);
401
+ border-radius: unit(16, rpx);
402
+ background: rgba(255, 255, 255, 1);
403
+ box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
404
+
405
+ &-title {
406
+ display: flex;
407
+ justify-content: space-between;
408
+ align-items: center;
409
+
410
+
411
+ & > view:first-child {
412
+ font-size: unit(28, rpx);
413
+ font-weight: 500;
414
+ flex: 1;
415
+ }
416
+
417
+ & > view:nth-child(2) {
336
418
  display: flex;
337
419
  justify-content: flex-start;
338
420
  align-items: center;
339
-
340
-
341
- & > view {
342
- padding: 0 unit(80, rpx);
343
- font-size: unit(24, rpx);
344
- line-height: unit(56, rpx);
345
- background: rgba(102, 102, 102, 0.4);
346
- color: #fff;
347
- border-radius:unit(16, rpx) 0 unit(16, rpx) 0;
348
- display: flex;
421
+ flex-shrink: 0;
422
+ font-size: unit(20, rpx);
423
+ color: #999;
349
424
  }
425
+ }
426
+
427
+ &-scroll {
350
428
 
351
429
  }
352
-
353
- &-wrap {
354
- width: unit(700, rpx);
355
- border-radius: unit(16, rpx);
356
- background-size: 100%;
357
- min-height: 100%;
430
+
431
+ &-item {
432
+ display: flex;
433
+ justify-content: flex-start;
434
+ align-items: center;
435
+ flex-flow: nowrap;
436
+ margin-left: unit(-14, rpx);
437
+ padding-top: unit(20, rpx);
438
+
439
+ & > view {
440
+ width: unit(120, rpx);
441
+ margin-right: unit(10, rpx);
442
+ flex-shrink: 0;
358
443
  display: flex;
359
- flex-direction: column;
360
444
  justify-content: center;
361
- }
362
-
363
- &-item {
364
- display: flex;
365
- justify-content: flex-start;
366
- align-content: center;
367
- padding-bottom: unit(32, rpx);
368
- padding-left: unit(40,rpx);
369
-
445
+ flex-direction: column;
446
+ align-items: center;
447
+
370
448
  & > view:first-child {
371
- flex-basis: unit(120,rpx);
449
+ width: unit(76, rpx);
450
+ height: unit(76, rpx);
451
+ overflow: hidden;
452
+
453
+ & > image {
454
+ height: 100%;
455
+ width: 100%;
456
+ }
457
+ }
458
+
459
+ & > view:nth-child(2) {
460
+ margin-top: unit(10, rpx);
461
+ font-size: unit(24, rpx);
462
+ line-height: unit(36, rpx);
463
+ margin-bottom: unit(10, rpx);
464
+ }
465
+
466
+ & > view:nth-child(3) {
467
+ display: flex;
468
+ justify-content: flex-start;
469
+ align-items: center;
372
470
  flex-shrink: 0;
471
+ font-size: unit(20, rpx);
472
+ color: #999;
473
+ }
474
+
475
+ &:last-child {
476
+ margin-right: 0;
477
+ }
478
+
373
479
  }
374
- }
480
+
481
+
375
482
  }
376
-
483
+ }
484
+
485
+ &-warp {
486
+ width: unit(700, rpx);
487
+ min-height: unit(290, rpx);
488
+ position: relative;
489
+ border-radius: unit(16, rpx);
490
+ background-size: 100%;
491
+ padding-bottom: unit(20, rpx);
492
+ }
493
+ }
377
494
  &-content {
378
495
  background: #fff;
379
496
  border-radius: unit(16, rpx);