jufubao-base 1.0.67-beta203 → 1.0.67-beta204

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/JfbBaseConList/JfbBaseConList.vue +146 -105
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jufubao-base",
3
- "version": "1.0.67-beta203",
3
+ "version": "1.0.67-beta204",
4
4
  "private": false,
5
5
  "description": "聚福宝业务组件基础插件包",
6
6
  "main": "index.js",
package/src/components/JfbBaseConList/JfbBaseConList.vue CHANGED
@@ -16,109 +16,120 @@
16
16
  <view class="jfb-base-con-list__edit-icon" @click="delEdit">删除</view>
17
17
  </view>
18
18
  <!-- #endif -->
19
- <view
20
- class="jfb-base-con-list__body"
21
- :style="{
22
- backgroundImage: `url(${background})`,
23
- backgroundSize: '100% 100%',
24
- backgroundRepeat: 'no-repeat',
25
- height: `${layoutInfo.bodyMinHeightRpx}rpx`,
26
- }"
27
- >
28
- <view class="jfb-base-con-list__body-content">
29
- <view class="jfb-base-con-list__body-content-header">
30
- <view class="jfb-base-con-list__body-content-header-left">
31
- <view :style="{ backgroundColor: mainColor }"></view>
32
- <view>赠送优惠券</view>
33
- </view>
34
- <view
35
- :style="{ color: mainColor, background: contentBackground }"
36
- class="jfb-base-con-list__body-content-header-right"
37
- @click="showRule = true"
38
- >
39
- <text>领券规则</text>
40
- <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
41
- </view>
42
- </view>
43
- <view class="jfb-base-con-list__body-content-list">
44
- <view
45
- v-for="(item, index) in couponList"
46
- :key="index"
47
- class="jfb-base-con-list__body-content-list-item"
48
- :style="{ background: contentBackground }"
49
- >
50
- <view class="jfb-base-con-list__body-content-list-item-left">
51
- <view
52
- :style="couponBackground"
53
- class="jfb-base-con-list__body-content-list-item-left-info"
54
- >
55
- <view :style="{ color: mainColor }">满减券</view>
56
- <view>{{ item.prize_name }}</view>
57
- </view>
19
+ <view class="jfb-base-con-list__body" v-if="done">
20
+ <view
21
+ v-if="couponList.length > 0"
22
+ :style="{
23
+ backgroundImage: `url(${background})`,
24
+ backgroundSize: '100% 100%',
25
+ backgroundRepeat: 'no-repeat',
26
+ height: `${layoutInfo.bodyMinHeightRpx}rpx`,
27
+ }"
28
+ >
29
+ <view class="jfb-base-con-list__body-content">
30
+ <view class="jfb-base-con-list__body-content-header">
31
+ <view class="jfb-base-con-list__body-content-header-left">
32
+ <view :style="{ backgroundColor: mainColor }"></view>
33
+ <view>赠送优惠券</view>
34
+ </view>
35
+ <view
36
+ :style="{ color: mainColor, background: contentBackground }"
37
+ class="jfb-base-con-list__body-content-header-right"
38
+ @click="showRule = true"
39
+ >
40
+ <text>领券规则</text>
41
+ <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
58
42
  </view>
59
- <view class="jfb-base-con-list__body-content-list-item-right">
60
- <view
61
- class="jfb-base-con-list__body-content-list-item-right-name"
62
- >
63
- <view>{{ item.prize_name }}</view>
64
- <xd-font-icon
65
- v-if="item.remain_card_count > 0"
66
- size="100"
67
- :style="{
68
- color: item.can_take === 'N' ? '#D6D6D6' : mainColor,
69
- position: 'absolute',
70
- right: '-30rpx',
71
- top: '-40rpx',
72
- }"
73
- :icon="
74
- item.can_take === 'N' ? 'iconyilingqu' : 'icondailingqu'
75
- "
76
- ></xd-font-icon>
77
- <xd-font-icon
78
- v-else
79
- size="100"
80
- :style="{
81
- color: '#D6D6D6',
82
- position: 'absolute',
83
- right: '-30rpx',
84
- top: '-40rpx',
85
- }"
86
- icon="iconyifawan"
87
- ></xd-font-icon>
43
+ </view>
44
+ <view class="jfb-base-con-list__body-content-list">
45
+ <view
46
+ v-for="(item, index) in couponList"
47
+ :key="index"
48
+ class="jfb-base-con-list__body-content-list-item"
49
+ :style="{ background: contentBackground }"
50
+ >
51
+ <view class="jfb-base-con-list__body-content-list-item-left">
52
+ <view
53
+ :style="item.couponBackground"
54
+ class="jfb-base-con-list__body-content-list-item-left-info"
55
+ >
56
+ <view :style="{ color: mainColor }">满减券</view>
57
+ <view>{{ item.prize_name }}</view>
58
+ </view>
88
59
  </view>
89
- <view class="jfb-base-con-list__body-content-list-item-right-num">
60
+ <view class="jfb-base-con-list__body-content-list-item-right">
90
61
  <view
91
- :style="{
92
- color: mainColor,
93
- display: 'flex',
94
- alignItems: 'center',
95
- fontSize: '28rpx',
96
- }"
62
+ class="jfb-base-con-list__body-content-list-item-right-name"
97
63
  >
64
+ <view>{{ item.prize_name }}</view>
98
65
  <xd-font-icon
99
- style="margin-right: 10rpx"
100
- size="22"
101
- icon="icondanchuangguanbi_xian"
66
+ v-if="item.remain_card_count > 0"
67
+ size="100"
68
+ :style="{
69
+ color: item.can_take === 'N' ? '#D6D6D6' : mainColor,
70
+ position: 'absolute',
71
+ right: '-30rpx',
72
+ top: '-40rpx',
73
+ }"
74
+ :icon="
75
+ item.can_take === 'N' ? 'iconyilingqu' : 'icondailingqu'
76
+ "
77
+ ></xd-font-icon>
78
+ <xd-font-icon
79
+ v-else
80
+ size="100"
81
+ :style="{
82
+ color: '#D6D6D6',
83
+ position: 'absolute',
84
+ right: '-30rpx',
85
+ top: '-40rpx',
86
+ }"
87
+ icon="iconyifawan"
102
88
  ></xd-font-icon>
103
- {{ item.prize_num }}
104
89
  </view>
105
-
106
- <xd-button
107
- size="small"
108
- :disabled="item.can_take === 'N'"
109
- @click="getCoupont(item)"
110
- type="primary"
111
- :style="btn"
112
- >{{ item.can_take === "N" ? "已领取" : "领取" }}</xd-button
90
+ <view
91
+ class="jfb-base-con-list__body-content-list-item-right-num"
113
92
  >
93
+ <view
94
+ :style="{
95
+ color: mainColor,
96
+ display: 'flex',
97
+ alignItems: 'center',
98
+ fontSize: '28rpx',
99
+ }"
100
+ >
101
+ <xd-font-icon
102
+ style="margin-right: 10rpx"
103
+ size="22"
104
+ icon="icondanchuangguanbi_xian"
105
+ ></xd-font-icon>
106
+ {{ item.prize_num }}
107
+ </view>
108
+
109
+ <xd-button
110
+ size="small"
111
+ :disabled="item.can_take === 'N'"
112
+ @click="getCoupont(item)"
113
+ type="primary"
114
+ :style="item.btn"
115
+ >{{ item.can_take === "N" ? "已领取" : "领取" }}</xd-button
116
+ >
117
+ </view>
114
118
  </view>
115
119
  </view>
116
120
  </view>
117
121
  </view>
122
+ <view class="jfb-base-con-list__body-foot"
123
+ >可在个人中心-我的票券进行查看</view
124
+ >
118
125
  </view>
119
- <view class="jfb-base-con-list__body-foot"
120
- >可在个人中心-我的票券进行查看</view
126
+ <view
127
+ v-else
128
+ class="empty_data"
129
+ :style="{ minHeight: layoutInfo.bodyMinHeightPx + 'px' }"
121
130
  >
131
+ <image src="https://img.jufubao.cn/component/sp_nodata.png"></image>
132
+ </view>
122
133
  <xd-dailog
123
134
  :cancel="false"
124
135
  :confirm="false"
@@ -171,16 +182,10 @@ export default {
171
182
  time: 1, //时间幂指数
172
183
  timeer: null,
173
184
  order_num: null,
185
+ done: false,
174
186
  };
175
187
  },
176
188
  computed: {
177
- couponBackground() {
178
- return {
179
- background: `url(${this.app_coupon_url})`,
180
- backgroundSize: "100% 100%",
181
- backgroundRepeat: "no-repeat",
182
- };
183
- },
184
189
  ...mapState(["pageBusinessCode"]),
185
190
  },
186
191
  watch: {
@@ -211,16 +216,39 @@ export default {
211
216
  })
212
217
  .then((res) => {
213
218
  this.background = getServiceUrl(res.background);
214
- this.app_coupon_url = getServiceUrl(res.app_coupon_url);
215
- this.btn = res.app_activity_button
216
- ? {
217
- background: `url(${getServiceUrl(res.app_activity_button)})`,
218
- backgroundSize: "100% 100%",
219
- backgroundRepeat: "no-repeat",
220
- margin: "0",
219
+ this.couponList =
220
+ res.list &&
221
+ res.list.length > 0 &&
222
+ res.list.map((item) => {
223
+ if (item.can_take === "Y") {
224
+ item.btn = res.app_coupon_button_bg_url
225
+ ? {
226
+ background: `url(${getServiceUrl(
227
+ res.app_coupon_button_bg_url
228
+ )})`,
229
+ backgroundSize: "100% 100%",
230
+ backgroundRepeat: "no-repeat",
231
+ margin: "0",
232
+ }
233
+ : { background: this.mainColor, margin: "0" };
234
+ item.couponBackground = {
235
+ background: `url(${getServiceUrl(res.app_coupon_url)})`,
236
+ backgroundSize: "100% 100%",
237
+ backgroundRepeat: "no-repeat",
238
+ };
239
+ } else {
240
+ item.btn = { background: "#D6D6D6", margin: "0" };
241
+ item.couponBackground = {
242
+ background: `url(${getServiceUrl(
243
+ res.app_coupon_invalid_url
244
+ )})`,
245
+ backgroundSize: "100% 100%",
246
+ backgroundRepeat: "no-repeat",
247
+ };
221
248
  }
222
- : { background: this.mainColor, margin: "0" };
223
- this.couponList = res.list;
249
+ return item;
250
+ });
251
+ this.done = true;
224
252
  })
225
253
  .catch((err) => {
226
254
  console.log(err, "err");
@@ -356,6 +384,19 @@ export default {
356
384
  &__body {
357
385
  position: relative;
358
386
  overflow-y: auto;
387
+ .empty_data {
388
+ text-align: center;
389
+ color: #999999;
390
+ font-size: 28rpx;
391
+ display: flex;
392
+ flex-direction: column;
393
+ align-items: center;
394
+ justify-content: center;
395
+ & > image {
396
+ width: unit(400, rpx);
397
+ height: unit(400, rpx);
398
+ }
399
+ }
359
400
  &-content {
360
401
  border-radius: unit(20, rpx);
361
402
  background: #fff;