jufubao-base 1.0.79 → 1.0.80

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.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/JfbBaseAfterOrderList/JfbBaseAfterOrderList.vue +101 -44
  3. package/src/components/JfbBaseCard/JfbBaseCard.vue +75 -65
  4. package/src/components/JfbBaseCardDisabled/JfbBaseCardDisabled.vue +93 -43
  5. package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue +161 -92
  6. package/src/components/JfbBaseCardV2/JfbBaseCardV2.vue +101 -45
  7. package/src/components/JfbBaseCardV3/JfbBaseCardV3.vue +24 -14
  8. package/src/components/JfbBaseEntry/JfbBaseEntry.vue +19 -1
  9. package/src/components/JfbBaseOrderList/JfbBaseOrderList.vue +176 -107
  10. package/src/components/JfbBaseRechargeOrder/JfbBaseRechargeOrder.vue +95 -30
  11. package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jufubao-base",
3
- "version": "1.0.79",
3
+ "version": "1.0.80",
4
4
  "private": false,
5
5
  "description": "聚福宝业务组件基础插件包",
6
6
  "main": "index.js",
package/src/components/JfbBaseAfterOrderList/JfbBaseAfterOrderList.vue CHANGED
@@ -20,12 +20,9 @@
20
20
  <!-- #endif -->
21
21
  <view class="jfb-base-after-order-list__body">
22
22
  <view :style="{ padding: outMargin }">
23
- <view v-if="orderList && orderList.length > 0">
23
+ <view v-if="loadingList" class="skeleton-wrap">
24
24
  <view
25
- class="jfb-base-after-order-list__body-order"
26
- v-for="(item, index) in orderList"
27
- :key="index"
28
- @click="handleToLink(item)"
25
+ class="jfb-base-after-order-list__body-order" v-for="i in 3" :key="i"
29
26
  :style="{
30
27
  background: backgroundColor,
31
28
  border: borderBox,
@@ -35,52 +32,81 @@
35
32
  }"
36
33
  >
37
34
  <view class="jfb-base-after-order-list__body-order-biz">
38
- <view
39
- v-if="item.business_icon"
40
- class="jfb-base-after-order-list__body-order-biz-icon"
41
- >
42
- <xd-font-icon
43
- :icon="item.business_icon"
44
- :size="item.business_icon_size"
45
- ></xd-font-icon>
46
- </view>
47
-
48
- <view>{{ item.business_name }}订单</view>
35
+ <view></view>
49
36
  </view>
50
37
  <view class="jfb-base-after-order-list__body-order-title">
51
- <view>服务单号：{{ item.order_id }}</view>
52
- <view :style="{ color: mainColor }">
53
- <!-- <xd-font-icon
54
- style="margin-right: 16rpx"
55
- icon="iconqianbao-01"
56
- size="40rpx"
57
- :color="mainColor"
58
- ></xd-font-icon> -->
59
- {{ item.after_sale_method_name }}
60
- </view>
38
+ <view></view>
39
+ <view></view>
40
+ </view>
41
+ <view class="jfb-base-after-order-list__body-order-content">
42
+ <view class="image"></view>
43
+ <view></view>
61
44
  </view>
45
+ </view>
46
+ </view>
47
+ <template v-else>
48
+ <view v-if="orderList && orderList.length > 0">
62
49
  <view
63
- class="jfb-base-after-order-list__body-order-content"
64
- v-for="(Sitem, Sindex) in item.sale_goods"
65
- :key="Sindex"
50
+ class="jfb-base-after-order-list__body-order"
51
+ v-for="(item, index) in orderList"
52
+ :key="index"
53
+ @click="handleToLink(item)"
54
+ :style="{
55
+ background: backgroundColor,
56
+ border: borderBox,
57
+ borderRadius: radius + 'rpx',
58
+ boxShadow: shadowBox,
59
+ marginBottom: padding + 'rpx',
60
+ }"
66
61
  >
67
- <image
68
- style="background: #ffffff"
69
- mode="aspectFit"
70
- :src="Sitem.thumb"
71
- ></image>
72
- <view>{{ Sitem.product_name }}</view>
62
+ <view class="jfb-base-after-order-list__body-order-biz">
63
+ <view
64
+ v-if="item.business_icon"
65
+ class="jfb-base-after-order-list__body-order-biz-icon"
66
+ >
67
+ <xd-font-icon
68
+ :icon="item.business_icon"
69
+ :size="item.business_icon_size"
70
+ ></xd-font-icon>
71
+ </view>
72
+
73
+ <view>{{ item.business_name }}订单</view>
74
+ </view>
75
+ <view class="jfb-base-after-order-list__body-order-title">
76
+ <view>服务单号：{{ item.order_id }}</view>
77
+ <view :style="{ color: mainColor }">
78
+ <!-- <xd-font-icon
79
+ style="margin-right: 16rpx"
80
+ icon="iconqianbao-01"
81
+ size="40rpx"
82
+ :color="mainColor"
83
+ ></xd-font-icon> -->
84
+ {{ item.after_sale_method_name }}
85
+ </view>
86
+ </view>
87
+ <view
88
+ class="jfb-base-after-order-list__body-order-content"
89
+ v-for="(Sitem, Sindex) in item.sale_goods"
90
+ :key="Sindex"
91
+ >
92
+ <image
93
+ style="background: #ffffff"
94
+ mode="aspectFit"
95
+ :src="Sitem.thumb"
96
+ ></image>
97
+ <view>{{ Sitem.product_name }}</view>
98
+ </view>
73
99
  </view>
74
100
  </view>
75
- </view>
76
- <view v-else class="jfb-base-after-order-list__body-no">
77
- <xd-font-icon
78
- size="120"
79
- color="#B3C1C4"
80
- icon="iconzanwudingdan"
81
- ></xd-font-icon>
82
- <view>暂无订单</view>
83
- </view>
101
+ <view v-else class="jfb-base-after-order-list__body-no">
102
+ <xd-font-icon
103
+ size="120"
104
+ color="#B3C1C4"
105
+ icon="iconzanwudingdan"
106
+ ></xd-font-icon>
107
+ <view>暂无订单</view>
108
+ </view>
109
+ </template>
84
110
  </view>
85
111
  </view>
86
112
  </view>
@@ -109,6 +135,7 @@ export default {
109
135
  page_token: 1,
110
136
  hasNext: true,
111
137
  next_page_token: "",
138
+ loadingList: false,
112
139
 
113
140
  //基础
114
141
  radius: 0,
@@ -221,6 +248,7 @@ export default {
221
248
  },
222
249
  getList() {
223
250
  this.$xdShowLoading({});
251
+ this.loadingList = true;
224
252
  jfbRootExec("getAfterOrderList", {
225
253
  vm: this,
226
254
  data: {
@@ -229,6 +257,7 @@ export default {
229
257
  },
230
258
  })
231
259
  .then((res) => {
260
+ this.loadingList = false;
232
261
  this.$xdHideLoading();
233
262
  let list =
234
263
  res.list &&
@@ -314,6 +343,12 @@ export default {
314
343
  display: flex;
315
344
  align-items: center;
316
345
 
346
+ & > view {
347
+ .skeleton-wrap &{
348
+ .skeleton-item(100rpx, 40rpx, 20rpx);
349
+ }
350
+ }
351
+
317
352
  &-icon {
318
353
  margin-right: unit(10, rpx);
319
354
  }
@@ -328,10 +363,19 @@ export default {
328
363
  padding-top: unit(40, rpx);
329
364
  color: #333333;
330
365
 
366
+ & > view:first-child {
367
+ .skeleton-wrap &{
368
+ .skeleton-item(300rpx, 40rpx, 20rpx);
369
+ }
370
+ }
371
+
331
372
  & > view:nth-child(2) {
332
373
  display: flex;
333
374
  align-items: center;
334
375
  font-weight: 400;
376
+ .skeleton-wrap &{
377
+ .skeleton-item(100rpx);
378
+ }
335
379
  }
336
380
  }
337
381
 
@@ -347,6 +391,19 @@ export default {
347
391
  flex-shrink: 0;
348
392
  }
349
393
 
394
+ .image{
395
+ .skeleton-wrap &{
396
+ .skeleton-item(160rpx, 160rpx);
397
+ max-height: none;
398
+ flex: none;
399
+ }
400
+ }
401
+ & > :last-child{
402
+ .skeleton-wrap &{
403
+ .skeleton-item(300rpx);
404
+ }
405
+ }
406
+
350
407
  view {
351
408
  margin-left: unit(20, rpx);
352
409
  flex: 1;
package/src/components/JfbBaseCard/JfbBaseCard.vue CHANGED
@@ -124,77 +124,82 @@
124
124
  :style="{ color: warningColor }"
125
125
  v-if="tabIndex === 2"
126
126
  >* 目前仅支持电影票兑换券进行转换</view>
127
- <view
128
- v-if="tabIndex === 2 || tabIndex === 1"
129
- class="jfb-base-card__body-card"
130
- >
131
- <template v-if="cardLayout === '1'">
132
- <view
133
- v-for="(item, index) in showList"
134
- :key="index"
135
- @click="handleBindLogin(item)"
136
- class="jfb-base-card__body-card-item"
137
- >
138
- <view class="jfb-base-card__body-card-item-left">
139
- <xd-font-icon
140
- size="100"
141
- :color="mainColor"
142
- icon="iconyouhuiquan1-011"
143
- ></xd-font-icon>
144
- <view>{{ tabIndex === 1 ? login_name : "转换" }}</view>
145
- </view>
146
- <view class="jfb-base-card__body-card-item-right">
147
- <view class="jfb-base-card__body-card-item-right-top">
148
- <view>
149
- <xd-font-icon
150
- icon="iconkaquan"
151
- size="38"
152
- :style="{marginRight: '18rpx'}"
153
- :color="mainColor"
154
- ></xd-font-icon>
155
- <view>{{ item.card_type_name }}</view>
156
- </view>
157
- <view>
158
- <view>{{ item.card_number }}</view>
159
- <view>有效期至：{{ item.end_time }}</view>
160
- </view>
127
+ <view v-if="loadingCardList">
128
+ <xd-card-v2-skelton v-for="i in 3" :key="i"></xd-card-v2-skelton>
129
+ </view>
130
+ <template v-else>
131
+ <view
132
+ v-if="tabIndex === 2 || tabIndex === 1"
133
+ class="jfb-base-card__body-card"
134
+ >
135
+ <template v-if="cardLayout === '1'">
136
+ <view
137
+ v-for="(item, index) in showList"
138
+ :key="index"
139
+ @click="handleBindLogin(item)"
140
+ class="jfb-base-card__body-card-item"
141
+ >
142
+ <view class="jfb-base-card__body-card-item-left">
143
+ <xd-font-icon
144
+ size="100"
145
+ :color="mainColor"
146
+ icon="iconyouhuiquan1-011"
147
+ ></xd-font-icon>
148
+ <view>{{ tabIndex === 1 ? login_name : "转换" }}</view>
161
149
  </view>
162
- <view class="jfb-base-card__body-card-item-right-bottom">
163
- <view class="jfb-base-card__body-card-item-right-bottom-info">
164
- <view
165
- class="jfb-base-card__body-card-item-right-bottom-info-residue"
166
- >
167
- 剩余{{ item.unit }}数：{{ item.card_point }}{{ item.unit }}
150
+ <view class="jfb-base-card__body-card-item-right">
151
+ <view class="jfb-base-card__body-card-item-right-top">
152
+ <view>
153
+ <xd-font-icon
154
+ icon="iconkaquan"
155
+ size="38"
156
+ :style="{marginRight: '18rpx'}"
157
+ :color="mainColor"
158
+ ></xd-font-icon>
159
+ <view>{{ item.card_type_name }}</view>
160
+ </view>
161
+ <view>
162
+ <view>{{ item.card_number }}</view>
163
+ <view>有效期至：{{ item.end_time }}</view>
164
+ </view>
165
+ </view>
166
+ <view class="jfb-base-card__body-card-item-right-bottom">
167
+ <view class="jfb-base-card__body-card-item-right-bottom-info">
168
+ <view
169
+ class="jfb-base-card__body-card-item-right-bottom-info-residue"
170
+ >
171
+ 剩余{{ item.unit }}数：{{ item.card_point }}{{ item.unit }}
172
+ </view>
173
+ <view
174
+ v-if="item.other_card_point && item.card_point_type !== 1"
175
+ class="jfb-base-card__body-card-item-right-bottom-info-deduction"
176
+ >
177
+ 购买其他物品可抵：{{ item.other_card_point }}
178
+ </view>
168
179
  </view>
169
180
  <view
170
- v-if="item.other_card_point && item.card_point_type !== 1"
171
- class="jfb-base-card__body-card-item-right-bottom-info-deduction"
181
+ @click.stop="toDetail(item)"
182
+ :style="{ background: mainColor }"
183
+ >查看</view
172
184
  >
173
- 购买其他物品可抵：{{ item.other_card_point }}
174
- </view>
175
185
  </view>
176
- <view
177
- @click.stop="toDetail(item)"
178
- :style="{ background: mainColor }"
179
- >查看</view
180
- >
181
186
  </view>
182
187
  </view>
183
- </view>
184
- </template>
185
- <template v-else>
186
- <xd-card-v2
187
- :login-name="login_name"
188
- v-for="(item, index) in showList"
189
- :mainColor="mainColor"
190
- :key="index"
191
- :cardInfo="item"
192
- :tabIndex="tabIndex"
193
- @toDetail="toDetail(item)"
194
- @bindLogin="handleBindLogin(item)">
195
- </xd-card-v2>
196
- </template>
197
- </view>
188
+ </template>
189
+ <template v-else>
190
+ <xd-card-v2
191
+ :login-name="login_name"
192
+ v-for="(item, index) in showList"
193
+ :mainColor="mainColor"
194
+ :key="index"
195
+ :cardInfo="item"
196
+ :tabIndex="tabIndex"
197
+ @toDetail="toDetail(item)"
198
+ @bindLogin="handleBindLogin(item)">
199
+ </xd-card-v2>
200
+ </template>
201
+ </view>
202
+ </template>
198
203
  <view v-if="showDisabled==='Y'" @click="handleToDisabled" class="jfb-base-card__body-disabled">
199
204
  已失效票券>>>
200
205
  </view>
@@ -224,6 +229,7 @@
224
229
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
225
230
  import XdButton from "@/components/XdButton/XdButton";
226
231
  import XdCardV2 from "@/components/XdCardV2/XdCardV2";
232
+ import XdCardV2Skelton from "@/components/XdCardV2/XdCardV2Skeleton"
227
233
  import { jfbRootExec } from "@/utils/xd.event";
228
234
  import JfbBaseCardMixin from "./JfbBaseCardMixin";
229
235
  import componentsMixins from "@/mixins/componentsMixins";
@@ -239,7 +245,8 @@ export default {
239
245
  XdFontIcon,
240
246
  XdButton,
241
247
  XdNoticeBar,
242
- XdCardV2
248
+ XdCardV2,
249
+ XdCardV2Skelton
243
250
  },
244
251
  mixins: [componentsMixins, extsMixins, JfbBaseCardMixin],
245
252
  computed: {
@@ -279,6 +286,7 @@ export default {
279
286
  changeList: [],
280
287
  disableList: [],
281
288
  inCallback: null, //内部跳转地址
289
+ loadingCardList: true,
282
290
 
283
291
  //页面跳转地址
284
292
  login_name:'',//登陆文案
@@ -500,11 +508,13 @@ export default {
500
508
  params['card_business_code'] = options['jfb_business_code'];
501
509
  }
502
510
  this.$xdShowLoading({});
511
+ this.loadingCardList = true;
503
512
  jfbRootExec("getListCardBind", {
504
513
  vm: this,
505
514
  data: params
506
515
  })
507
516
  .then((res) => {
517
+ this.loadingCardList = false;
508
518
  this.showDisabled = res.is_show_invalid_card_entrance;
509
519
  res.list = res.list.map((item) => {
510
520
  return {
package/src/components/JfbBaseCardDisabled/JfbBaseCardDisabled.vue CHANGED
@@ -16,56 +16,78 @@
16
16
  </view>
17
17
  <!-- #endif -->
18
18
  <view class="jfb-base-card-disabled__body">
19
- <view
20
- class="jfb-base-card-disabled__body-card"
21
- v-if="disableList && disableList.length > 0"
22
- >
23
- <view
24
- v-for="(item, index) in disableList"
25
- :key="index"
26
- class="jfb-base-card-disabled__body-card-item"
27
- >
28
- <view class="jfb-base-card-disabled__body-card-item-left">
29
- <xd-font-icon
30
- color="#B8B7BE"
31
- size="100"
32
- icon="iconyouhuiquan1-011"
33
- ></xd-font-icon>
34
- <view style="color: #b8b7be">票券失效</view>
35
- </view>
36
- <view class="jfb-base-card-disabled__body-card-item-right">
37
- <view class="jfb-base-card-disabled__body-card-item-right-top">
38
- <view>
39
- <xd-font-icon
40
- icon="iconkaquan"
41
- size="38"
42
- :style="{marginRight: '18rpx'}"
43
- color="#B8B7BE"
44
- ></xd-font-icon>
45
- <view style="color: #b8b7be">{{ item.card_type_name }}</view>
19
+ <view v-if="loadingList">
20
+ <view class="jfb-base-card-disabled__body-card skeleton-card">
21
+ <view v-for="i in 3" :key="i" class="jfb-base-card-disabled__body-card-item" >
22
+ <view class="jfb-base-card-disabled__body-card-item-left">
23
+ <view></view>
24
+ </view>
25
+ <view class="jfb-base-card-disabled__body-card-item-right">
26
+ <view class="jfb-base-card-disabled__body-card-item-right-top">
27
+ <view> <view> </view> </view>
28
+ <view> </view>
46
29
  </view>
47
- <view>
48
- <view>{{ item.card_number }}</view>
49
- <view>有效期至:--</view>
30
+ <view class="jfb-base-card-disabled__body-card-item-right-bottom">
31
+ <view class="jfb-base-card-disabled__body-card-item-right-bottom-info">
32
+ <view class="jfb-base-card-disabled__body-card-item-right-bottom-info-residue"></view>
33
+ </view>
50
34
  </view>
51
35
  </view>
52
- <view class="jfb-base-card-disabled__body-card-item-right-bottom">
53
- <view class="jfb-base-card-disabled__body-card-item-right-bottom-info">
36
+ </view>
37
+ </view>
38
+ </view>
39
+ <template v-else>
40
+ <view
41
+ class="jfb-base-card-disabled__body-card"
42
+ v-if="disableList && disableList.length > 0"
43
+ >
44
+ <view
45
+ v-for="(item, index) in disableList"
46
+ :key="index"
47
+ class="jfb-base-card-disabled__body-card-item"
48
+ >
49
+ <view class="jfb-base-card-disabled__body-card-item-left">
50
+ <xd-font-icon
51
+ color="#B8B7BE"
52
+ size="100"
53
+ icon="iconyouhuiquan1-011"
54
+ ></xd-font-icon>
55
+ <view style="color: #b8b7be">票券失效</view>
56
+ </view>
57
+ <view class="jfb-base-card-disabled__body-card-item-right">
58
+ <view class="jfb-base-card-disabled__body-card-item-right-top">
59
+ <view>
60
+ <xd-font-icon
61
+ icon="iconkaquan"
62
+ size="38"
63
+ :style="{marginRight: '18rpx'}"
64
+ color="#B8B7BE"
65
+ ></xd-font-icon>
66
+ <view style="color: #b8b7be">{{ item.card_type_name }}</view>
67
+ </view>
68
+ <view>
69
+ <view>{{ item.card_number }}</view>
70
+ <view>有效期至:--</view>
71
+ </view>
72
+ </view>
73
+ <view class="jfb-base-card-disabled__body-card-item-right-bottom">
74
+ <view class="jfb-base-card-disabled__body-card-item-right-bottom-info">
75
+ <view
76
+ style="color: #b8b7be"
77
+ class="jfb-base-card-disabled__body-card-item-right-bottom-info-residue"
78
+ >剩余{{ item.unit }}数：--{{ item.unit }}</view>
79
+ </view>
54
80
  <view
55
- style="color: #b8b7be"
56
- class="jfb-base-card-disabled__body-card-item-right-bottom-info-residue"
57
- >剩余{{ item.unit }}数：--{{ item.unit }}</view>
81
+ @click.stop="handleUnBindCard(item)"
82
+ v-if="isShowUnbind"
83
+ :style="{ background: '#fff',color:'#999',border: '1px solid #999' }"
84
+ >解绑</view>
58
85
  </view>
59
- <view
60
- @click.stop="handleUnBindCard(item)"
61
- v-if="isShowUnbind"
62
- :style="{ background: '#fff',color:'#999',border: '1px solid #999' }"
63
- >解绑</view>
64
86
  </view>
65
87
  </view>
66
88
  </view>
67
- </view>
68
- <xd-no-data height="80vh" v-else></xd-no-data>
89
+ <xd-no-data height="80vh" v-else></xd-no-data>
90
+ </template>
69
91
  </view>
70
92
  </view>
71
93
  </template>
@@ -88,7 +110,8 @@ export default {
88
110
  data() {
89
111
  return {
90
112
  disableList: [],
91
- isShowUnbind: false
113
+ isShowUnbind: false,
114
+ loadingList: false,
92
115
  };
93
116
  },
94
117
  watch: {
@@ -106,6 +129,7 @@ export default {
106
129
  },
107
130
  getCardList() {
108
131
  this.$xdShowLoading({});
132
+ this.loadingList = true;
109
133
  jfbRootExec("getDisableCardList", {
110
134
  vm: this,
111
135
  data: {
@@ -113,6 +137,7 @@ export default {
113
137
  },
114
138
  })
115
139
  .then((res) => {
140
+ this.loadingList = false;
116
141
  this.isShowUnbind = (res["is_can_unbind"] === 'Y' || res["is_can_unbind"] === undefined);
117
142
  res.list = res.list.map((item) => {
118
143
  return {
@@ -206,6 +231,14 @@ export default {
206
231
  align-items: center;
207
232
  justify-content: center;
208
233
  font-size: unit(24, rpx);
234
+
235
+ & > view{
236
+ .skeleton-card &{
237
+ background-color: #DDDD;
238
+ height: 100rpx;
239
+ width: 100rpx;
240
+ }
241
+ }
209
242
  }
210
243
 
211
244
  &-right {
@@ -220,11 +253,19 @@ export default {
220
253
  display: flex;
221
254
  font-size: unit(28, rpx);
222
255
  margin-bottom: unit(18, rpx);
256
+ .skeleton-card &{
257
+ background-color: #DDDD;
258
+ height: 28rpx;
259
+ }
223
260
  }
224
261
 
225
262
  & > view:nth-child(2) {
226
263
  font-size: unit(24, rpx);
227
264
  color: #bbb;
265
+ .skeleton-card &{
266
+ background-color: #DDDD;
267
+ height: 70rpx;
268
+ }
228
269
 
229
270
  & > view:nth-child(1) {
230
271
  margin-right: unit(30, rpx);
@@ -242,11 +283,20 @@ export default {
242
283
  &-residue {
243
284
  font-size: unit(24, rpx);
244
285
  margin-bottom: unit(8, rpx);
286
+ .skeleton-card &{
287
+ width: 200rpx;
288
+ background-color: #DDDD;
289
+ height: 34rpx;
290
+ }
245
291
  }
246
292
 
247
293
  &-deduction {
248
294
  font-size: unit(24, rpx);
249
295
  color: #bbb;
296
+ .skeleton-card &{
297
+ background-color: #DDDD;
298
+ height: 18rpx;
299
+ }
250
300
  }
251
301
  }
252
302