jufubao-base 1.0.78 → 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.
- package/package.json +1 -1
- package/src/components/JfbBaseAfterOrderList/JfbBaseAfterOrderList.vue +101 -44
- package/src/components/JfbBaseCard/JfbBaseCard.vue +75 -65
- package/src/components/JfbBaseCardDisabled/JfbBaseCardDisabled.vue +93 -43
- package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue +161 -92
- package/src/components/JfbBaseCardV2/JfbBaseCardV2.vue +101 -45
- package/src/components/JfbBaseCardV3/JfbBaseCardV3.vue +24 -14
- package/src/components/JfbBaseEntry/JfbBaseEntry.vue +19 -1
- package/src/components/JfbBaseLogin/JfbBaseLogin.vue +43 -1
- package/src/components/JfbBaseOrderList/JfbBaseOrderList.vue +176 -107
- package/src/components/JfbBaseRechargeOrder/JfbBaseRechargeOrder.vue +95 -30
- package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue +2 -2
|
@@ -123,114 +123,144 @@
|
|
|
123
123
|
v-if="tabIndex === 2"
|
|
124
124
|
>* 目前仅支持电影票兑换券进行转换</view>
|
|
125
125
|
<view class="card-content">
|
|
126
|
-
<view
|
|
127
|
-
v-
|
|
128
|
-
|
|
129
|
-
|
|
126
|
+
<view v-if="loadingCardList" class="jfb-base-card-entry__body-card skeleton-card">
|
|
127
|
+
<view v-for="i in 3" class="card-list" :key="i">
|
|
128
|
+
<view class="card-list-warp">
|
|
129
|
+
<view class="card-list__title"><view> </view></view>
|
|
130
|
+
<view class="card-list__content"> </view>
|
|
131
|
+
<view class="card-list__date"> </view>
|
|
132
|
+
<view class="card-list__yue"> </view>
|
|
133
|
+
<view class="card-list__entrys">
|
|
134
|
+
<view class="card-list__entrys-title">
|
|
135
|
+
<view></view>
|
|
136
|
+
<view></view>
|
|
137
|
+
</view>
|
|
138
|
+
<view class="card-list__entrys-list">
|
|
139
|
+
<scroll-view scroll-x class="card-list__entrys-scroll">
|
|
140
|
+
<view class="card-list__entrys-item">
|
|
141
|
+
<view v-for="ii in 5" :key="ii">
|
|
142
|
+
<view></view>
|
|
143
|
+
<view></view>
|
|
144
|
+
<view></view>
|
|
145
|
+
</view>
|
|
146
|
+
</view>
|
|
147
|
+
</scroll-view>
|
|
148
|
+
</view>
|
|
149
|
+
</view>
|
|
150
|
+
</view>
|
|
151
|
+
</view>
|
|
152
|
+
</view>
|
|
153
|
+
<template v-else>
|
|
130
154
|
<view
|
|
131
|
-
v-
|
|
132
|
-
|
|
133
|
-
:data-idx="index"
|
|
134
|
-
:data-top="item.top"
|
|
135
|
-
class="card-list"
|
|
136
|
-
:key="item.card_number"
|
|
137
|
-
@click="toDetail(item)"
|
|
138
|
-
v-if="setCardItemShow(item,index)"
|
|
139
|
-
:style="{
|
|
140
|
-
background: item['theme']['color'],
|
|
141
|
-
backgroundSize: '100%',
|
|
142
|
-
height: item.height + 'px'
|
|
143
|
-
}"
|
|
155
|
+
v-if="tabIndex === 2 || tabIndex === 1 && (cardList && cardList.length > 0)"
|
|
156
|
+
class="jfb-base-card-entry__body-card"
|
|
144
157
|
>
|
|
145
|
-
<view
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
158
|
+
<view
|
|
159
|
+
v-for="(item,index) in cardList"
|
|
160
|
+
:data-index="item.card_number"
|
|
161
|
+
:data-idx="index"
|
|
162
|
+
:data-top="item.top"
|
|
163
|
+
class="card-list"
|
|
164
|
+
:key="item.card_number"
|
|
165
|
+
@click="toDetail(item)"
|
|
166
|
+
v-if="setCardItemShow(item,index)"
|
|
167
|
+
:style="{
|
|
168
|
+
background: item['theme']['color'],
|
|
169
|
+
backgroundSize: '100%',
|
|
170
|
+
height: item.height + 'px'
|
|
171
|
+
}"
|
|
172
|
+
>
|
|
173
|
+
<view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
|
|
174
|
+
<view class="card-list__title"><view>1{{item['card_type_name']}}</view></view>
|
|
175
|
+
<view class="card-list__content">
|
|
153
176
|
<view>
|
|
154
|
-
<
|
|
177
|
+
<text>券号：</text>
|
|
178
|
+
<text>{{item.card_number}}</text>
|
|
179
|
+
</view>
|
|
180
|
+
<view @click.stop="toDetail(item)" v-if="0">
|
|
181
|
+
<view>
|
|
182
|
+
<xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
|
|
183
|
+
</view>
|
|
184
|
+
<view>点击查看</view>
|
|
155
185
|
</view>
|
|
156
|
-
<view>点击查看</view>
|
|
157
186
|
</view>
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
<text>{{item.end_time}}</text>
|
|
162
|
-
</view>
|
|
163
|
-
<view class="card-list__yue">
|
|
164
|
-
<text>余额：</text>
|
|
165
|
-
<text>{{item.card_point}} {{ item.unit }}</text>
|
|
166
|
-
</view>
|
|
167
|
-
<view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
|
|
168
|
-
<view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
|
|
169
|
-
</view>
|
|
170
|
-
<template v-if="tabIndex === 1">
|
|
171
|
-
<view class="card-list__entry" v-if="item.entries.length === 1">
|
|
172
|
-
<view
|
|
173
|
-
@click.stop="handleBindLogin(item,item['entries'][0])"
|
|
174
|
-
:style="{color: item['theme']['color']}"
|
|
175
|
-
>进入{{item['entries'][0]['entry_name']}}</view>
|
|
187
|
+
<view class="card-list__date">
|
|
188
|
+
<text>有效期：</text>
|
|
189
|
+
<text>{{item.end_time}}</text>
|
|
176
190
|
</view>
|
|
177
|
-
<view class="card-
|
|
178
|
-
|
|
179
|
-
<
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
191
|
+
<view class="card-list__yue">
|
|
192
|
+
<text>余额：</text>
|
|
193
|
+
<text>{{item.card_point}} {{ item.unit }}</text>
|
|
194
|
+
</view>
|
|
195
|
+
<view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
|
|
196
|
+
<view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
|
|
197
|
+
</view>
|
|
198
|
+
<template v-if="tabIndex === 1">
|
|
199
|
+
<view class="card-list__entry" v-if="item.entries.length === 1">
|
|
200
|
+
<view
|
|
201
|
+
@click.stop="handleBindLogin(item,item['entries'][0])"
|
|
202
|
+
:style="{color: item['theme']['color']}"
|
|
203
|
+
>进入{{item['entries'][0]['entry_name']}}</view>
|
|
185
204
|
</view>
|
|
186
|
-
<view class="card-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
205
|
+
<view class="card-list__nodata" v-if="item.entries.length === 0">暂无支持服务列表</view>
|
|
206
|
+
<view class="card-list__entrys" v-if="item.entries.length > 1" @click.stop>
|
|
207
|
+
<view class="card-list__entrys-title">
|
|
208
|
+
<view>可兑换权益</view>
|
|
209
|
+
<view @click.stop="toDetail(item, false)">
|
|
210
|
+
<text>查看详情</text>
|
|
211
|
+
<xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
|
|
212
|
+
</view>
|
|
213
|
+
</view>
|
|
214
|
+
<view class="card-list__entrys-list">
|
|
215
|
+
<scroll-view scroll-x class="card-list__entrys-scroll">
|
|
216
|
+
<view class="card-list__entrys-item">
|
|
217
|
+
<view
|
|
218
|
+
v-for="(entry,idx) in item.entries"
|
|
219
|
+
:key="idx"
|
|
220
|
+
@click.stop="handleBindLogin(item, entry)"
|
|
221
|
+
>
|
|
222
|
+
<view><image :src="entry.image_url"></image></view>
|
|
223
|
+
<view>{{entry|cutstr}}</view>
|
|
224
|
+
<view>
|
|
225
|
+
<text>去兑换</text>
|
|
226
|
+
<xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
|
|
227
|
+
</view>
|
|
199
228
|
</view>
|
|
200
229
|
</view>
|
|
201
|
-
</view>
|
|
202
|
-
</
|
|
230
|
+
</scroll-view>
|
|
231
|
+
</view>
|
|
203
232
|
</view>
|
|
233
|
+
</template>
|
|
234
|
+
<view class="card-list__entry" v-else>
|
|
235
|
+
<view
|
|
236
|
+
@click.stop="handleBindLogin(item,item['entries'][0])"
|
|
237
|
+
:style="{color: item['theme']['color']}"
|
|
238
|
+
>票券转换</view>
|
|
204
239
|
</view>
|
|
205
|
-
</template>
|
|
206
|
-
<view class="card-list__entry" v-else>
|
|
207
|
-
<view
|
|
208
|
-
@click.stop="handleBindLogin(item,item['entries'][0])"
|
|
209
|
-
:style="{color: item['theme']['color']}"
|
|
210
|
-
>票券转换</view>
|
|
211
240
|
</view>
|
|
212
241
|
</view>
|
|
242
|
+
<view
|
|
243
|
+
class="card-content-empty card-list"
|
|
244
|
+
:data-index="item.card_number"
|
|
245
|
+
:data-idx="index"
|
|
246
|
+
:data-top="item.top"
|
|
247
|
+
v-else
|
|
248
|
+
:style="{
|
|
249
|
+
height: item.height + 'px',
|
|
250
|
+
backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
|
|
251
|
+
}"
|
|
252
|
+
></view>
|
|
213
253
|
</view>
|
|
214
|
-
<view
|
|
215
|
-
class="card-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
:style="{
|
|
221
|
-
height: item.height + 'px',
|
|
222
|
-
backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
|
|
223
|
-
}"
|
|
224
|
-
></view>
|
|
225
|
-
</view>
|
|
226
|
-
<view v-else-if="cardList !== null && cardList.length === 0">
|
|
227
|
-
<view class="jfb-base-card-entry__body-empty">
|
|
228
|
-
<view class="jfb-base-card-entry__body-empty-wrap">
|
|
229
|
-
<image :src="emptyBg"></image>
|
|
230
|
-
暂无票券
|
|
254
|
+
<view v-else-if="cardList !== null && cardList.length === 0">
|
|
255
|
+
<view class="jfb-base-card-entry__body-empty">
|
|
256
|
+
<view class="jfb-base-card-entry__body-empty-wrap">
|
|
257
|
+
<image :src="emptyBg"></image>
|
|
258
|
+
暂无票券
|
|
259
|
+
</view>
|
|
231
260
|
</view>
|
|
232
261
|
</view>
|
|
233
|
-
</
|
|
262
|
+
</template>
|
|
263
|
+
|
|
234
264
|
<view
|
|
235
265
|
v-if="showDisabled==='Y'"
|
|
236
266
|
@click="handleToDisabled"
|
|
@@ -398,6 +428,7 @@ export default {
|
|
|
398
428
|
notice: "",
|
|
399
429
|
isPreview: false,
|
|
400
430
|
noticeStatus: false,
|
|
431
|
+
loadingCardList: false,
|
|
401
432
|
|
|
402
433
|
isWx: true,
|
|
403
434
|
cutIndex: 1,
|
|
@@ -650,12 +681,14 @@ export default {
|
|
|
650
681
|
if(options['jfb_business_code']) {
|
|
651
682
|
params['card_business_code'] = options['jfb_business_code'];
|
|
652
683
|
}
|
|
684
|
+
this.loadingCardList = true;
|
|
653
685
|
this.$xdShowLoading({});
|
|
654
686
|
jfbRootExec("getListEntryCardBind", {
|
|
655
687
|
vm: this,
|
|
656
688
|
data: params
|
|
657
689
|
})
|
|
658
690
|
.then((res) => {
|
|
691
|
+
this.loadingCardList = false;
|
|
659
692
|
this.showDisabled = res.is_show_invalid_card_entrance;
|
|
660
693
|
res.list = res.list.map((item) => {
|
|
661
694
|
return {
|
|
@@ -844,6 +877,9 @@ export default {
|
|
|
844
877
|
overflow: hidden;
|
|
845
878
|
border-radius: unit(16, rpx);
|
|
846
879
|
margin-bottom: unit(30, rpx);
|
|
880
|
+
.skeleton-card &{
|
|
881
|
+
background: #F6F6F6;
|
|
882
|
+
}
|
|
847
883
|
|
|
848
884
|
&:last-child {
|
|
849
885
|
margin-bottom: 0;
|
|
@@ -863,6 +899,10 @@ export default {
|
|
|
863
899
|
background: rgba(102, 102, 102, 0.4);
|
|
864
900
|
color: #fff;
|
|
865
901
|
border-radius: 0 0 unit(16, rpx) 0;
|
|
902
|
+
|
|
903
|
+
.skeleton-card &{
|
|
904
|
+
.skeleton-item(120rpx, 50rpx, 0 0 16rpx 0, #EEEEEE);
|
|
905
|
+
}
|
|
866
906
|
}
|
|
867
907
|
|
|
868
908
|
}
|
|
@@ -874,6 +914,11 @@ export default {
|
|
|
874
914
|
justify-content: space-between;
|
|
875
915
|
align-items: center;
|
|
876
916
|
|
|
917
|
+
.skeleton-card &{
|
|
918
|
+
.skeleton-item(500rpx, 40rpx, 20rpx, #EEEEEE);
|
|
919
|
+
margin: 20rpx 40rpx;
|
|
920
|
+
}
|
|
921
|
+
|
|
877
922
|
& > view:first-child {
|
|
878
923
|
font-size: unit(36, rpx);
|
|
879
924
|
line-height: unit(86, rpx);
|
|
@@ -897,6 +942,10 @@ export default {
|
|
|
897
942
|
font-size: unit(28, rpx);
|
|
898
943
|
line-height: unit(32, rpx);
|
|
899
944
|
color: #fff;
|
|
945
|
+
.skeleton-card &{
|
|
946
|
+
.skeleton-item(300rpx, 40rpx, 20rpx, #EEEEEE);
|
|
947
|
+
margin-left: 40rpx;
|
|
948
|
+
}
|
|
900
949
|
}
|
|
901
950
|
|
|
902
951
|
&__yue {
|
|
@@ -904,6 +953,11 @@ export default {
|
|
|
904
953
|
font-size: unit(28, rpx);
|
|
905
954
|
line-height: unit(32, rpx);
|
|
906
955
|
color: #fff;
|
|
956
|
+
.skeleton-card &{
|
|
957
|
+
.skeleton-item(300rpx, 28rpx, 20rpx, #EEEEEE);
|
|
958
|
+
margin-top: 8rpx;
|
|
959
|
+
margin-left: 40rpx;
|
|
960
|
+
}
|
|
907
961
|
|
|
908
962
|
& > text:nth-child(2) {
|
|
909
963
|
font-weight: 700;
|
|
@@ -971,6 +1025,10 @@ export default {
|
|
|
971
1025
|
font-size: unit(28, rpx);
|
|
972
1026
|
font-weight: 500;
|
|
973
1027
|
flex: 1;
|
|
1028
|
+
|
|
1029
|
+
.skeleton-card &{
|
|
1030
|
+
.skeleton-item(100rpx, 28rpx);
|
|
1031
|
+
}
|
|
974
1032
|
}
|
|
975
1033
|
|
|
976
1034
|
& > view:nth-child(2) {
|
|
@@ -1013,6 +1071,10 @@ export default {
|
|
|
1013
1071
|
justify-content: center;
|
|
1014
1072
|
align-items: center;
|
|
1015
1073
|
|
|
1074
|
+
.skeleton-card &{
|
|
1075
|
+
.skeleton-item(76rpx, 76rpx, 50%);
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1016
1078
|
& > image {
|
|
1017
1079
|
height: 100%;
|
|
1018
1080
|
width: 100%;
|
|
@@ -1024,6 +1086,10 @@ export default {
|
|
|
1024
1086
|
font-size: unit(24, rpx);
|
|
1025
1087
|
line-height: unit(36, rpx);
|
|
1026
1088
|
margin-bottom: unit(10, rpx);
|
|
1089
|
+
|
|
1090
|
+
.skeleton-card &{
|
|
1091
|
+
.skeleton-item(50rpx, 20rpx);
|
|
1092
|
+
}
|
|
1027
1093
|
}
|
|
1028
1094
|
|
|
1029
1095
|
& > view:nth-child(3) {
|
|
@@ -1033,6 +1099,9 @@ export default {
|
|
|
1033
1099
|
flex-shrink: 0;
|
|
1034
1100
|
font-size: unit(20, rpx);
|
|
1035
1101
|
color: #999;
|
|
1102
|
+
.skeleton-card &{
|
|
1103
|
+
.skeleton-item(70rpx, 20rpx);
|
|
1104
|
+
}
|
|
1036
1105
|
}
|
|
1037
1106
|
|
|
1038
1107
|
&:last-child {
|
|
@@ -14,63 +14,97 @@
|
|
|
14
14
|
</view>
|
|
15
15
|
<!-- #endif -->
|
|
16
16
|
<view class="jfb-base-card-v2__body">
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
:style="{
|
|
20
|
-
margin: marginUi,
|
|
21
|
-
}"
|
|
22
|
-
>
|
|
17
|
+
|
|
18
|
+
<view v-if="loadingCardList">
|
|
23
19
|
<view
|
|
24
|
-
|
|
25
|
-
:
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
class="jfb-base-card__body-card skeleton-card"
|
|
21
|
+
:style="{
|
|
22
|
+
margin: marginUi,
|
|
23
|
+
}"
|
|
28
24
|
>
|
|
29
|
-
<view class="jfb-base-card__body-card-item
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
<xd-font-icon
|
|
41
|
-
icon="iconkaquan"
|
|
42
|
-
size="30"
|
|
43
|
-
:style="{marginRight: '10rpx'}"
|
|
44
|
-
></xd-font-icon>
|
|
45
|
-
<view>{{ item.card_type_name }}</view>
|
|
25
|
+
<view v-for="i in 4" :key="i" class="jfb-base-card__body-card-item">
|
|
26
|
+
<view class="jfb-base-card__body-card-item-left">
|
|
27
|
+
<view> </view>
|
|
28
|
+
</view>
|
|
29
|
+
<view class="jfb-base-card__body-card-item-right">
|
|
30
|
+
<view class="jfb-base-card__body-card-item-right-top">
|
|
31
|
+
<view> <view></view> </view>
|
|
32
|
+
<view>
|
|
33
|
+
<view> </view>
|
|
34
|
+
<view> </view>
|
|
35
|
+
</view>
|
|
46
36
|
</view>
|
|
47
|
-
<view>
|
|
48
|
-
<view
|
|
49
|
-
|
|
37
|
+
<view class="jfb-base-card__body-card-item-right-bottom">
|
|
38
|
+
<view class="jfb-base-card__body-card-item-right-bottom-info">
|
|
39
|
+
<view class="jfb-base-card__body-card-item-right-bottom-info-residue"></view>
|
|
40
|
+
<view class="jfb-base-card__body-card-item-right-bottom-info-deduction"></view>
|
|
41
|
+
</view>
|
|
42
|
+
<view :style="{ background: mainColor }"></view>
|
|
50
43
|
</view>
|
|
51
44
|
</view>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
45
|
+
</view>
|
|
46
|
+
</view>
|
|
47
|
+
</view>
|
|
48
|
+
<template v-else>
|
|
49
|
+
<view
|
|
50
|
+
class="jfb-base-card__body-card"
|
|
51
|
+
:style="{
|
|
52
|
+
margin: marginUi,
|
|
53
|
+
}"
|
|
54
|
+
>
|
|
55
|
+
<view
|
|
56
|
+
v-for="(item, index) in cardList"
|
|
57
|
+
:key="index"
|
|
58
|
+
@click="handleBindLogin(item)"
|
|
59
|
+
class="jfb-base-card__body-card-item"
|
|
60
|
+
>
|
|
61
|
+
<view class="jfb-base-card__body-card-item-left">
|
|
62
|
+
<xd-font-icon
|
|
63
|
+
size="100"
|
|
64
|
+
color="#8D5F18"
|
|
65
|
+
icon="iconyouhuiquan1-011"
|
|
66
|
+
></xd-font-icon>
|
|
67
|
+
<view>{{login_name}}</view>
|
|
68
|
+
</view>
|
|
69
|
+
<view class="jfb-base-card__body-card-item-right">
|
|
70
|
+
<view class="jfb-base-card__body-card-item-right-top">
|
|
71
|
+
<view>
|
|
72
|
+
<xd-font-icon
|
|
73
|
+
icon="iconkaquan"
|
|
74
|
+
size="30"
|
|
75
|
+
:style="{marginRight: '10rpx'}"
|
|
76
|
+
></xd-font-icon>
|
|
77
|
+
<view>{{ item.card_type_name }}</view>
|
|
78
|
+
</view>
|
|
79
|
+
<view>
|
|
80
|
+
<view>ID:{{ item.card_number }}</view>
|
|
81
|
+
<view>有效期至:{{ item.end_time }}</view>
|
|
82
|
+
</view>
|
|
83
|
+
</view>
|
|
84
|
+
<view class="jfb-base-card__body-card-item-right-bottom">
|
|
85
|
+
<view class="jfb-base-card__body-card-item-right-bottom-info">
|
|
86
|
+
<view
|
|
87
|
+
class="jfb-base-card__body-card-item-right-bottom-info-residue"
|
|
88
|
+
>
|
|
89
|
+
剩余{{ item.unit }}数：{{ item.card_point }}{{ item.unit }}
|
|
90
|
+
</view>
|
|
91
|
+
<view
|
|
92
|
+
class="jfb-base-card__body-card-item-right-bottom-info-deduction"
|
|
93
|
+
>
|
|
94
|
+
购买其他物品可抵：{{ item.other_card_point }}
|
|
95
|
+
</view>
|
|
58
96
|
</view>
|
|
59
97
|
<view
|
|
60
|
-
|
|
98
|
+
@click.stop="toDetail(item)"
|
|
99
|
+
:style="{ background: mainColor }"
|
|
100
|
+
>查看</view
|
|
61
101
|
>
|
|
62
|
-
购买其他物品可抵：{{ item.other_card_point }}
|
|
63
|
-
</view>
|
|
64
102
|
</view>
|
|
65
|
-
<view
|
|
66
|
-
@click.stop="toDetail(item)"
|
|
67
|
-
:style="{ background: mainColor }"
|
|
68
|
-
>查看</view
|
|
69
|
-
>
|
|
70
103
|
</view>
|
|
71
104
|
</view>
|
|
72
105
|
</view>
|
|
73
|
-
</
|
|
106
|
+
</template>
|
|
107
|
+
|
|
74
108
|
<view :style="{height: '50rpx'}"></view>
|
|
75
109
|
<view class="bottom_fix" :style="button_bottom">
|
|
76
110
|
<view>
|
|
@@ -116,6 +150,7 @@
|
|
|
116
150
|
bottom: 0,
|
|
117
151
|
right: 0
|
|
118
152
|
},
|
|
153
|
+
loadingCardList: false
|
|
119
154
|
}
|
|
120
155
|
},
|
|
121
156
|
watch: {
|
|
@@ -154,10 +189,12 @@
|
|
|
154
189
|
params['card_business_code'] = options['jfb_business_code'];
|
|
155
190
|
}
|
|
156
191
|
|
|
192
|
+
this.loadingCardList = true;
|
|
157
193
|
jfbRootExec("getListCardBind", {
|
|
158
194
|
vm: this,
|
|
159
195
|
data: params,
|
|
160
196
|
}).then((res) => {
|
|
197
|
+
this.loadingCardList = false;
|
|
161
198
|
this.cardList = res.list.map((item) => {
|
|
162
199
|
item['card_point'] = this.$xdUniHelper.divisionFloatNumber(item.card_point,100);
|
|
163
200
|
item['other_card_point'] = this.$xdUniHelper.divisionFloatNumber(item.other_card_point,100);
|
|
@@ -274,6 +311,12 @@
|
|
|
274
311
|
align-items: center;
|
|
275
312
|
justify-content: center;
|
|
276
313
|
font-size: unit(24, rpx);
|
|
314
|
+
|
|
315
|
+
& > view{
|
|
316
|
+
.skeleton-card &{
|
|
317
|
+
.skeleton-item(100rpx, 100rpx, 20rpx);
|
|
318
|
+
}
|
|
319
|
+
}
|
|
277
320
|
}
|
|
278
321
|
|
|
279
322
|
&-right {
|
|
@@ -288,6 +331,10 @@
|
|
|
288
331
|
display: flex;
|
|
289
332
|
font-size: unit(28, rpx);
|
|
290
333
|
margin-bottom: unit(20, rpx);
|
|
334
|
+
|
|
335
|
+
.skeleton-card &{
|
|
336
|
+
.skeleton-item(auto, 28rpx);
|
|
337
|
+
}
|
|
291
338
|
}
|
|
292
339
|
|
|
293
340
|
& > view:nth-child(2) {
|
|
@@ -295,6 +342,9 @@
|
|
|
295
342
|
/*align-items: center;*/
|
|
296
343
|
font-size: unit(18, rpx);
|
|
297
344
|
color: #777777;
|
|
345
|
+
.skeleton-card &{
|
|
346
|
+
.skeleton-item(auto, 70rpx);
|
|
347
|
+
}
|
|
298
348
|
|
|
299
349
|
& > view:nth-child(1) {
|
|
300
350
|
margin-right: unit(30, rpx);
|
|
@@ -312,11 +362,17 @@
|
|
|
312
362
|
&-residue {
|
|
313
363
|
font-size: unit(24, rpx);
|
|
314
364
|
margin-bottom: unit(8, rpx);
|
|
365
|
+
.skeleton-card &{
|
|
366
|
+
.skeleton-item(200rpx, 34rpx, 20rpx);
|
|
367
|
+
}
|
|
315
368
|
}
|
|
316
369
|
|
|
317
370
|
&-deduction {
|
|
318
371
|
font-size: unit(18, rpx);
|
|
319
372
|
color: #777777;
|
|
373
|
+
.skeleton-card &{
|
|
374
|
+
.skeleton-item(auto, 18rpx);
|
|
375
|
+
}
|
|
320
376
|
}
|
|
321
377
|
}
|
|
322
378
|
|
|
@@ -15,19 +15,24 @@
|
|
|
15
15
|
<!-- #endif -->
|
|
16
16
|
<view class="jfb-base-card-v3__body">
|
|
17
17
|
<view class="v3_title">选择登入票券</view>
|
|
18
|
-
<view
|
|
19
|
-
<xd-card-v2 v-for="
|
|
20
|
-
:mainColor="mainColor"
|
|
21
|
-
:login-name="login_name"
|
|
22
|
-
:key="index"
|
|
23
|
-
:cardInfo="item"
|
|
24
|
-
:tabIndex="1"
|
|
25
|
-
:showLeft="false"
|
|
26
|
-
@toDetail="toDetail(item)"
|
|
27
|
-
@bindLogin="handleBindLogin(item)"
|
|
28
|
-
></xd-card-v2>
|
|
18
|
+
<view v-if="loadingCardList">
|
|
19
|
+
<xd-card-v2-skeleton v-for="i in 3" :key="i"></xd-card-v2-skeleton>
|
|
29
20
|
</view>
|
|
30
|
-
<
|
|
21
|
+
<template v-else>
|
|
22
|
+
<view class="card_list" v-if="cardList.length">
|
|
23
|
+
<xd-card-v2 v-for="(item, index) in cardList"
|
|
24
|
+
:mainColor="mainColor"
|
|
25
|
+
:login-name="login_name"
|
|
26
|
+
:key="index"
|
|
27
|
+
:cardInfo="item"
|
|
28
|
+
:tabIndex="1"
|
|
29
|
+
:showLeft="false"
|
|
30
|
+
@toDetail="toDetail(item)"
|
|
31
|
+
@bindLogin="handleBindLogin(item)"
|
|
32
|
+
></xd-card-v2>
|
|
33
|
+
</view>
|
|
34
|
+
<view v-else class="empty_data">暂时没有票券</view>
|
|
35
|
+
</template>
|
|
31
36
|
<view class="bottom_fix" :style="button_bottom">
|
|
32
37
|
<xd-button type="primary" @click="toBindCard">绑定新票券</xd-button>
|
|
33
38
|
</view>
|
|
@@ -38,6 +43,7 @@
|
|
|
38
43
|
<script>
|
|
39
44
|
import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
|
|
40
45
|
import XdCardV2 from "@/components/XdCardV2/XdCardV2";
|
|
46
|
+
import XdCardV2Skeleton from "@/components/XdCardV2/XdCardV2Skeleton"
|
|
41
47
|
import XdButton from "@/components/XdButton/XdButton";
|
|
42
48
|
import { jfbRootExec } from "@/utils/xd.event";
|
|
43
49
|
import JfbBaseCardV3Mixin from "./JfbBaseCardV3Mixin";
|
|
@@ -50,7 +56,8 @@
|
|
|
50
56
|
components: {
|
|
51
57
|
XdFontIcon,
|
|
52
58
|
XdCardV2,
|
|
53
|
-
XdButton
|
|
59
|
+
XdButton,
|
|
60
|
+
XdCardV2Skeleton
|
|
54
61
|
},
|
|
55
62
|
mixins: [
|
|
56
63
|
componentsMixins, extsMixins, JfbBaseCardV3Mixin
|
|
@@ -63,7 +70,8 @@
|
|
|
63
70
|
cardBindPath: "",
|
|
64
71
|
changeUrl: "",
|
|
65
72
|
detailUrl: "",
|
|
66
|
-
login_name:''
|
|
73
|
+
login_name:'',
|
|
74
|
+
loadingCardList: false,
|
|
67
75
|
}
|
|
68
76
|
},
|
|
69
77
|
watch: {
|
|
@@ -100,10 +108,12 @@
|
|
|
100
108
|
params['card_business_code'] = options['jfb_business_code'];
|
|
101
109
|
}
|
|
102
110
|
|
|
111
|
+
this.loadingCardList = true;
|
|
103
112
|
jfbRootExec("getListCardBind", {
|
|
104
113
|
vm: this,
|
|
105
114
|
data: params,
|
|
106
115
|
}).then((res) => {
|
|
116
|
+
this.loadingCardList = false;
|
|
107
117
|
this.cardList = res.list.map((item) => {
|
|
108
118
|
item['card_point'] = this.$xdUniHelper.divisionFloatNumber(item.card_point,100);
|
|
109
119
|
item['other_card_point'] = this.$xdUniHelper.divisionFloatNumber(item.other_card_point,100);
|