jufubao-base 1.0.76 → 1.0.77-beta1

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.
@@ -26,130 +26,161 @@
26
26
  show-footer-line
27
27
  @onTab="handleChange"
28
28
  ></xd-tab>
29
- <view
30
- v-if="orderList && orderList.length > 0"
31
- class="jfb-base-order-list__body-order"
32
- :style="{ padding: outMargin }"
33
- >
34
- <view
35
- @click="handleToLink(detailPath, item)"
36
- class="jfb-base-order-list__body-order-item"
37
- v-for="item in orderList"
38
- :key="item.main_order_id"
39
- :style="{
40
- background: backgroundColor,
41
- border: borderBox,
42
- borderRadius: radius + 'rpx',
43
- boxShadow: shadowBox,
44
- marginBottom: padding + 'rpx',
45
- }"
29
+ <view v-if="loadingList" class="jfb-base-order-list__body-order skeleton-wrap">
30
+ <view class="jfb-base-order-list__body-order-item"
31
+ v-for="i in 5" :key="i"
46
32
  >
47
- <view class="jfb-base-order-list__body-order-item-biz">
48
- <xd-font-icon
49
- v-if="item.biz_code_icon"
50
- :icon="item.biz_code_icon"
51
- :size="item['biz_code_icon_size']"
52
- ></xd-font-icon>
53
- <view :class="{ marginLeft: item.biz_code_icon }">{{
54
- item.biz_code_name
55
- }}</view>
56
- </view>
33
+ <view class="jfb-base-order-list__body-order-item-biz"><view></view></view>
57
34
  <view class="jfb-base-order-list__body-order-item-title">
58
- <view>订单编号:{{ item.main_order_id }}</view>
59
- <view
60
- :style="{color:item.status.status_type !== 'error' ? mainColor : '#999999',}"
61
- >{{ item.status.status_name }}</view>
35
+ <view></view>
36
+ <view></view>
62
37
  </view>
63
38
  <view class="order-list">
64
39
  <view
65
- class="jfb-base-order-list__body-order-item-content"
66
- v-for="(Sitem, Sindex) in item.products"
67
- :key="Sitem.product_id + Sindex"
68
- v-if="(item['isOpen'] === false && Sindex < showLen) || item['isOpen']">
69
- <image
70
- :src="Sitem.product_thumb"
71
- style="background: #ffffff"
72
- mode="aspectFit"
73
- ></image>
40
+ class="jfb-base-order-list__body-order-item-content">
41
+ <image></image>
74
42
  <view class="jfb-base-order-list__body-order-item-content-info">
75
- <view
76
- class="jfb-base-order-list__body-order-item-content-info-name"
77
- >{{ Sitem.product_name }}</view
78
- >
79
- <view
80
- v-if="Sitem.product_sku_name"
81
- class="jfb-base-order-list__body-order-item-content-info-skuname"
82
- >规格:{{ Sitem.product_sku_name }}</view
83
- >
84
- <view
85
- class="jfb-base-order-list__body-order-item-content-info-price"
86
- >
87
- <view :style="{ fontSize: '32rpx', color: mainColor }">
88
- <xd-unit
89
- :isOld="false"
90
- :price="Sitem.sale_price"
91
- :color="mainColor"
92
- :fontSize="32"
93
- v-if="item.biz_code !== 'gift'"
94
- ></xd-unit>
95
- </view>
96
- <view class="info-price">
97
- <text>X</text>
98
- <text>{{ Sitem.product_num }}</text>
99
- </view>
43
+ <view class="jfb-base-order-list__body-order-item-content-info-name"></view>
44
+ <view class="jfb-base-order-list__body-order-item-content-info-price">
45
+ <view></view>
46
+ <view class="info-price"></view>
100
47
  </view>
101
48
  </view>
102
49
  </view>
103
- <view
104
- class="order-list-icon"
105
- :style="{ bottom: item['isOpen'] ? '-30rpx' : '-54rpx' }"
106
- v-if="item.products.length > showLen"
107
- @click.stop="item['isOpen'] = !item['isOpen']"
108
- >
109
- <view :style="{ background: backgroundColor }">
110
- <xd-font-icon
111
- color="#666"
112
- :icon="item['isOpen'] ? 'iconshang_up' : 'iconxia_down'"
113
- size="24"
114
- ></xd-font-icon>
115
- </view>
116
- </view>
117
50
  </view>
118
51
  <view class="jfb-base-order-list__body-order-item-bottom">
119
- <view>下单时间:{{ item.created_time_text }}</view>
120
- <view v-if="item.biz_code !== 'gift'">
121
- <text>合计:</text>
122
- <xd-unit
123
- :isOld="false"
124
- :price="item.total_amount"
125
- :color="mainColor"
126
- :fontSize="28"
127
- ></xd-unit>
128
- </view>
52
+ <view></view>
53
+ <view></view>
129
54
  </view>
55
+ </view>
56
+ </view>
57
+ <template v-else>
58
+ <view
59
+ v-if="orderList && orderList.length > 0"
60
+ class="jfb-base-order-list__body-order"
61
+ :style="{ padding: outMargin }"
62
+ >
130
63
  <view
131
- class="jfb-base-order-list__body-order-item-pay"
132
- v-if="item.buttons.length"
64
+ @click="handleToLink(detailPath, item)"
65
+ class="jfb-base-order-list__body-order-item"
66
+ v-for="item in orderList"
67
+ :key="item.main_order_id"
68
+ :style="{
69
+ background: backgroundColor,
70
+ border: borderBox,
71
+ borderRadius: radius + 'rpx',
72
+ boxShadow: shadowBox,
73
+ marginBottom: padding + 'rpx',
74
+ }"
133
75
  >
134
- <view v-for="(btn,index) in item.buttons" :key="btn.action+index">
135
- <xd-button
136
- :type="getBtnType(btn.action)"
137
- size="mini"
138
- @click="handleBtnEvent(btn.action, item)"
139
- >{{ btn.text }}
140
- </xd-button>
76
+ <view class="jfb-base-order-list__body-order-item-biz">
77
+ <xd-font-icon
78
+ v-if="item.biz_code_icon"
79
+ :icon="item.biz_code_icon"
80
+ :size="item['biz_code_icon_size']"
81
+ ></xd-font-icon>
82
+ <view :class="{ marginLeft: item.biz_code_icon }">{{
83
+ item.biz_code_name
84
+ }}</view>
85
+ </view>
86
+ <view class="jfb-base-order-list__body-order-item-title">
87
+ <view>订单编号:{{ item.main_order_id }}</view>
88
+ <view
89
+ :style="{color:item.status.status_type !== 'error' ? mainColor : '#999999',}"
90
+ >{{ item.status.status_name }}</view>
91
+ </view>
92
+ <view class="order-list">
93
+ <view
94
+ class="jfb-base-order-list__body-order-item-content"
95
+ v-for="(Sitem, Sindex) in item.products"
96
+ :key="Sitem.product_id + Sindex"
97
+ v-if="(item['isOpen'] === false && Sindex < showLen) || item['isOpen']">
98
+ <image
99
+ :src="Sitem.product_thumb"
100
+ style="background: #ffffff"
101
+ mode="aspectFit"
102
+ ></image>
103
+ <view class="jfb-base-order-list__body-order-item-content-info">
104
+ <view
105
+ class="jfb-base-order-list__body-order-item-content-info-name"
106
+ >{{ Sitem.product_name }}</view
107
+ >
108
+ <view
109
+ v-if="Sitem.product_sku_name"
110
+ class="jfb-base-order-list__body-order-item-content-info-skuname"
111
+ >规格:{{ Sitem.product_sku_name }}</view
112
+ >
113
+ <view
114
+ class="jfb-base-order-list__body-order-item-content-info-price"
115
+ >
116
+ <view :style="{ fontSize: '32rpx', color: mainColor }">
117
+ <xd-unit
118
+ :isOld="false"
119
+ :price="Sitem.sale_price"
120
+ :color="mainColor"
121
+ :fontSize="32"
122
+ v-if="item.biz_code !== 'gift'"
123
+ ></xd-unit>
124
+ </view>
125
+ <view class="info-price">
126
+ <text>X</text>
127
+ <text>{{ Sitem.product_num }}</text>
128
+ </view>
129
+ </view>
130
+ </view>
131
+ </view>
132
+ <view
133
+ class="order-list-icon"
134
+ :style="{ bottom: item['isOpen'] ? '-30rpx' : '-54rpx' }"
135
+ v-if="item.products.length > showLen"
136
+ @click.stop="item['isOpen'] = !item['isOpen']"
137
+ >
138
+ <view :style="{ background: backgroundColor }">
139
+ <xd-font-icon
140
+ color="#666"
141
+ :icon="item['isOpen'] ? 'iconshang_up' : 'iconxia_down'"
142
+ size="24"
143
+ ></xd-font-icon>
144
+ </view>
145
+ </view>
146
+ </view>
147
+ <view class="jfb-base-order-list__body-order-item-bottom">
148
+ <view>下单时间:{{ item.created_time_text }}</view>
149
+ <view v-if="item.biz_code !== 'gift'">
150
+ <text>合计:</text>
151
+ <xd-unit
152
+ :isOld="false"
153
+ :price="item.total_amount"
154
+ :color="mainColor"
155
+ :fontSize="28"
156
+ ></xd-unit>
157
+ </view>
158
+ </view>
159
+ <view
160
+ class="jfb-base-order-list__body-order-item-pay"
161
+ v-if="item.buttons.length"
162
+ >
163
+ <view v-for="(btn,index) in item.buttons" :key="btn.action+index">
164
+ <xd-button
165
+ :type="getBtnType(btn.action)"
166
+ size="mini"
167
+ @click="handleBtnEvent(btn.action, item)"
168
+ >{{ btn.text }}
169
+ </xd-button>
170
+ </view>
141
171
  </view>
142
172
  </view>
143
173
  </view>
144
- </view>
145
- <view v-else class="jfb-base-order-list__body-no">
146
- <xd-font-icon
147
- size="120"
148
- color="#ccc"
149
- icon="iconzanwudingdan"
150
- ></xd-font-icon>
151
- <view>暂无订单</view>
152
- </view>
174
+ <view v-else class="jfb-base-order-list__body-no">
175
+ <xd-font-icon
176
+ size="120"
177
+ color="#ccc"
178
+ icon="iconzanwudingdan"
179
+ ></xd-font-icon>
180
+ <view>暂无订单</view>
181
+ </view>
182
+ </template>
183
+
153
184
  </view>
154
185
  </view>
155
186
  </template>
@@ -189,6 +220,7 @@ export default {
189
220
  payPath: "",
190
221
  status: null, //全部、已完成、已取消
191
222
  initStatus: false,
223
+ loadingList: false,
192
224
 
193
225
  //基础
194
226
  radius: 0,
@@ -387,6 +419,7 @@ export default {
387
419
  this.$xdShowLoading({});
388
420
  let tab = "all";
389
421
  if (status) tab = this.tabList[this.tabIndex].status;
422
+ this.loadingList = true;
390
423
  jfbRootExec("getBaseOrderList", {
391
424
  vm: this,
392
425
  data: {
@@ -396,6 +429,7 @@ export default {
396
429
  },
397
430
  })
398
431
  .then((res) => {
432
+ this.loadingList = false;
399
433
  this.$xdHideLoading();
400
434
  console.log(res.list, "list");
401
435
  let list = res.list.map((item) => {
@@ -496,6 +530,12 @@ export default {
496
530
  }
497
531
  &-order {
498
532
  &-item {
533
+ .skeleton-wrap & {
534
+ background-color: #FFFFFF;
535
+ border: 1px solid #EEEEEE;
536
+ border-radius: 10rpx;
537
+ margin: 20rpx;
538
+ }
499
539
  &-biz {
500
540
  color: #333333;
501
541
  font-size: unit(28, rpx);
@@ -504,6 +544,12 @@ export default {
504
544
  border-bottom: unit(2, rpx) solid #eee;
505
545
  display: flex;
506
546
  align-items: center;
547
+
548
+ & > view{
549
+ .skeleton-wrap &{
550
+ .skeleton-item(100rpx, 28rpx);
551
+ }
552
+ }
507
553
  }
508
554
 
509
555
  &-title {
@@ -517,9 +563,15 @@ export default {
517
563
 
518
564
  & > view:first-child {
519
565
  color: #333;
566
+ .skeleton-wrap &{
567
+ .skeleton-item(300rpx, 28rpx);
568
+ }
520
569
  }
521
570
 
522
571
  & > view:nth-child(2) {
572
+ .skeleton-wrap &{
573
+ .skeleton-item(100rpx, 28rpx);
574
+ }
523
575
  }
524
576
  }
525
577
 
@@ -534,6 +586,9 @@ export default {
534
586
  height: unit(160, rpx);
535
587
  border-radius: unit(8, rpx);
536
588
  flex-shrink: 0;
589
+ .skeleton-wrap &{
590
+ .skeleton-item(160rpx, 160rpx);
591
+ }
537
592
  }
538
593
 
539
594
  &-info {
@@ -549,6 +604,10 @@ export default {
549
604
  font-weight: 500;
550
605
  .uni-max-cut(1, 64);
551
606
  line-height: unit(64, rpx);
607
+
608
+ .skeleton-wrap &{
609
+ .skeleton-item(160rpx, 48rpx);
610
+ }
552
611
  }
553
612
 
554
613
  &-skuname {
@@ -573,6 +632,10 @@ export default {
573
632
  display: flex;
574
633
  justify-content: space-between;
575
634
  align-items: center;
635
+ .skeleton-wrap &{
636
+ .skeleton-item(100%, 32rpx);
637
+ margin-top: 20rpx;
638
+ }
576
639
  }
577
640
  }
578
641
  }
@@ -588,6 +651,9 @@ export default {
588
651
 
589
652
  & > view:first-child {
590
653
  color: #999;
654
+ .skeleton-wrap &{
655
+ .skeleton-item(300rpx, 28rpx);
656
+ }
591
657
  }
592
658
 
593
659
  & > view:nth-child(2) {
@@ -596,6 +662,9 @@ export default {
596
662
  & > view {
597
663
  margin-left: unit(10, rpx);
598
664
  }
665
+ .skeleton-wrap &{
666
+ .skeleton-item(300rpx, 28rpx);
667
+ }
599
668
  }
600
669
  }
601
670
 
@@ -16,12 +16,8 @@
16
16
  </view>
17
17
  <!-- #endif -->
18
18
  <view class="jfb-base-recharge-order__body">
19
- <view v-if="orderList&&orderList.length>0" :style="{ padding: outMargin }">
20
- <view
21
- v-for="(item, index) in orderList"
22
- :key="index"
23
- class="jfb-base-recharge-order__body-order"
24
- @click="handleToDetail(item)"
19
+ <view v-if="loadingList" :style="{ padding: outMargin }" class="skeleton-wrap">
20
+ <view v-for="i in 3" :key="i" class="jfb-base-recharge-order__body-order"
25
21
  :style="{
26
22
  background: backgroundColor,
27
23
  border: borderBox,
@@ -31,40 +27,72 @@
31
27
  }"
32
28
  >
33
29
  <view class="jfb-base-recharge-order__body-order-header">
34
- 充值订单
30
+ <view></view>
35
31
  </view>
36
32
  <view class="jfb-base-recharge-order__body-order-middle">
37
- <view
38
- >订单编号:
39
- {{ item.order_id }}
40
- </view>
41
- <view :style="{ color: item.textColor }">
42
- {{ item.pay_status_name }}
43
- </view>
33
+ <view></view>
34
+ <view></view>
44
35
  </view>
45
36
  <view class="jfb-base-recharge-order__body-order-bottom">
46
- <view>交易日期:{{ item.created_time }} </view>
37
+ <view></view>
47
38
  </view>
39
+ <view class="jfb-base-recharge-order__body-order-bbb">
40
+ <view></view>
41
+ </view>
42
+ </view>
43
+ </view>
44
+ <template v-else>
45
+ <view v-if="orderList&&orderList.length>0" :style="{ padding: outMargin }">
48
46
  <view
49
- style="margin-top: 32rpx; display: flex; justify-content: space-between"
47
+ v-for="(item, index) in orderList"
48
+ :key="index"
49
+ class="jfb-base-recharge-order__body-order"
50
+ @click="handleToDetail(item)"
51
+ :style="{
52
+ background: backgroundColor,
53
+ border: borderBox,
54
+ borderRadius: radius + 'rpx',
55
+ boxShadow: shadowBox,
56
+ marginBottom: padding + 'rpx',
57
+ }"
50
58
  >
51
- <view style="display: flex; align-items: center;font-size: 24rpx;"
52
- >合计:<xd-unit :fontSize="24" iconSize="0.24" :price="item.total_amount"></xd-unit
53
- ></view>
54
- <xd-button
55
- v-if="item.pay_status !== '3000'"
56
- width="200rpx"
57
- style="margin: 0"
58
- size="mini"
59
- type="primary"
60
- :bgColor="mainColor"
61
- @click="handleToPay(item)"
59
+ <view class="jfb-base-recharge-order__body-order-header">
60
+ 充值订单
61
+ </view>
62
+ <view class="jfb-base-recharge-order__body-order-middle">
63
+ <view
64
+ >订单编号:
65
+ {{ item.order_id }}
66
+ </view>
67
+ <view :style="{ color: item.textColor }">
68
+ {{ item.pay_status_name }}
69
+ </view>
70
+ </view>
71
+ <view class="jfb-base-recharge-order__body-order-bottom">
72
+ <view>交易日期:{{ item.created_time }} </view>
73
+ </view>
74
+ <view
75
+ style="margin-top: 32rpx; display: flex; justify-content: space-between"
62
76
  >
63
- {{ item.pay_status === "3007" ? "去支付" : "重新支付" }}
64
- </xd-button>
77
+ <view style="display: flex; align-items: center;font-size: 24rpx;"
78
+ >合计:<xd-unit :fontSize="24" iconSize="0.24" :price="item.total_amount"></xd-unit
79
+ ></view>
80
+ <xd-button
81
+ v-if="item.pay_status !== '3000'"
82
+ width="200rpx"
83
+ style="margin: 0"
84
+ size="mini"
85
+ type="primary"
86
+ :bgColor="mainColor"
87
+ @click="handleToPay(item)"
88
+ >
89
+ {{ item.pay_status === "3007" ? "去支付" : "重新支付" }}
90
+ </xd-button>
91
+ </view>
65
92
  </view>
66
93
  </view>
67
- </view>
94
+ </template>
95
+
68
96
  </view>
69
97
  </view>
70
98
  </template>
@@ -95,6 +123,7 @@ export default {
95
123
  orderList: [],
96
124
  detailPath: "",
97
125
  payPath: "",
126
+ loadingList: false,
98
127
 
99
128
  //基础
100
129
  radius: 0,
@@ -211,6 +240,7 @@ export default {
211
240
  }).value;
212
241
  },
213
242
  getList() {
243
+ this.loadingList = true;
214
244
  jfbRootExec("getRechargeOrderList", {
215
245
  vm: this,
216
246
  data: {
@@ -219,6 +249,7 @@ export default {
219
249
  },
220
250
  })
221
251
  .then((res) => {
252
+ this.loadingList = false;
222
253
  this.orderList = res.list.map((item) => {
223
254
  item.total_amount = item.total_amount / 100;
224
255
  item["created_time"] = this.$xdUniHelper.getDate(
@@ -280,11 +311,45 @@ export default {
280
311
  color: #333;
281
312
  border-bottom: unit(2, rpx) solid #f2f2f2;
282
313
  padding-bottom: unit(24, rpx);
314
+
315
+ & > view {
316
+ .skeleton-wrap &{
317
+ .skeleton-item(200rpx, 32rpx);
318
+ }
319
+ }
320
+ }
321
+
322
+ &-middle {
323
+ & > view:first-child {
324
+ .skeleton-wrap &{
325
+ .skeleton-item(400rpx, 32rpx);
326
+ }
327
+ }
328
+ & > view:last-child {
329
+ .skeleton-wrap &{
330
+ .skeleton-item(100rpx, 32rpx);
331
+ }
332
+ }
283
333
  }
284
334
 
285
335
  &-bottom {
286
336
  border-bottom: unit(2, rpx) solid #f2f2f2;
287
337
  padding-bottom: unit(32,rpx);
338
+
339
+ & > view:first-child {
340
+ .skeleton-wrap &{
341
+ .skeleton-item(400rpx, 32rpx);
342
+ }
343
+ }
344
+ }
345
+ &-bbb {
346
+ padding: unit(32,rpx) 0 0;
347
+
348
+ & > view:first-child {
349
+ .skeleton-wrap &{
350
+ .skeleton-item(100%, 32rpx);
351
+ }
352
+ }
288
353
  }
289
354
 
290
355
  &-middle,