使用说明
# 套件调用示例
- 示例代码：
<template>
<div class="app-wrapper">
<DofConsumables :materialParams="materialParams1" width="686" :isDiablo="isDiablo" :isScale="isScale" :isCurrentHome="isCurrentHome" :needBackground="needBackground" @renderEnd="renderEnd"></DofConsumables>
<DofConsumables :materialParams="materialParams2" width="686" :isDiablo="isDiablo" :isScale="isScale" :isCurrentHome="isCurrentHome" :needBackground="needBackground" @renderEnd="renderEnd"></DofConsumables>
<DofConsumables :data="deviceMaterialList" width="686" :isDiablo="isDiablo" :isScale="isScale" :isCurrentHome="isCurrentHome" :needBackground="needBackground" @renderEnd="renderEnd"></DofConsumables>
</div>
</template>
<script>
import { DofConsumables, MaterialEvent } from 'dolphin-weex-bc'
export default {
components: {
DofBcConsumables
},
data() {
return {
materialParams1:{
homeGroupInfoList: [
{
homegroupId:'',
applianceCodes:[]
}
],
remainingStatusSet: [0, 1, 2], // 余量状态, 0-已耗尽, 1-余量不足, 2-余量充足
returnNullRemaining: true, //是否需要展示未获取余量耗材(默认不传则代表展示)
},
materialParams2:{
applianceCodes: [],
homegroupId: '',
remainingStatusSet: [0, 1, 2] // 余量状态, 0-已耗尽, 1-余量不足, 2-余量充足
returnNullRemaining: true, //是否需要展示未获取余量耗材(默认不传则代表展示)
},
deviceMaterialList:[],
isDiablo: false,
isScale: false,
isCurrentHome: false,
needBackground: false,
}
},
methods:{
renderEnd(height){
console.log('材料盒子高度：'+height);
},
//批量获取家庭耗材列表数据
async getAllMaterialList() {
try {
//isDiablo 是否是暗黑模式
//isScale 是否需要缩放
//needBackground 是否需要背景色
const options = {
isDiablo: this.isDiablo,
isScale: this.isDiablo,
needBackground: this.needBackground
}
this.deviceMaterialList = await MaterialEvent.getAllMaterialList(this.materialParams1,options)
} catch (error) {
if (error.msg) {
this.$bridge.showToast(error.msg)
}
}
},
//获取单个家庭耗材列表数据
async getMaterialList() {
try {
//isCurrentHome 是否是当前家庭
//isDiablo 是否是暗黑模式
//isScale 是否需要缩放
//needBackground 是否需要背景色
const options = {
isDiablo: this.isDiablo,
isScale: this.isDiablo,
isCurrentHome: this.isCurrentHome,
needBackground: this.needBackground
}
this.deviceMaterialList = await MaterialEvent.getMaterialList(this.materialParams2,options)
} catch (error) {
if (error.msg) {
this.$bridge.showToast(error.msg)
}
}
},
}
}
</script>
<style scoped>
.app-wrapper {
flex: 1;
background-color: #f9f9f9;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
# 方法调用
| 方法名称 | 说明 | 回调参数 |
|---|---|---|
getAllMaterialList | 批量获取家庭耗材列表数据，详见示例代码 | 耗材列表数据，注3 |
getMaterialList | 获取单个家庭耗材列表数据，详见示例代码 | 耗材列表数据，注3 |
# 属性（data）
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
materialParams | Json | N | {} | 耗材参数，支持两种模式（1.根据单个家庭id请求；2.批量请求）注2 |
data | Array | N | [] | 耗材列表数据 注3 |
width | String | N | '686' | 组件宽度（目前只支持630px和686px，设置了width为630，则需要设置isScale为true） |
isDiablo | Boolean | N | false | 是否暗黑模式 |
isScale | Boolean | N | false | 是否缩放 |
isCurrentHome | Boolean | N | false | 是否当前家庭 ( 只对单个家庭耗材列表有效 ) |
needBackground | Boolean | N | false | 为true是背景色#fff，为false时背景色#F6F7F9 |
needErrorTip | Boolean | N | false | 在请求耗材数据时报错时是否需要toast提示信息 |
注1：data和materialParams二者必传一
注2：materialParams格式详见接口 https://yapi.smartmidea.net/project/465/interface/api/43894 和 https://yapi.smartmidea.net/project/465/interface/api/43390
注3：data数据格式
// 解释部分为处理后添加进去的值，其他未解释部分详见接口返回
[{
"applianceCode": "dolor et",
"deviceInfo":{},// 设备信息，详见设备返回数据
"consumables": [
{
"chartData":{},// 水波纹数据，详见水波纹组件
"goodsInfo":{},// 耗材购买商品信息，接口返回参数，增加skuId，可以根据该skuId跳转商详页
"washingServiceGoodsInfo":{},// 清洗服务商品信息，接口返回参数，增加skuId，可以根据该skuId跳转商详页
"btnType":"1", // 1商品购买 2保养换芯 3售后维修 4清洗服务
"btnText":"购买", // 根据btnType确定文案
"bookingService": {
"enableToDoorService": false,
"serviceHotline": "quis"
},
"classification": "laboris nostrud commodo irure",
"consumablesCode": "elit",
"icons": {
"icon1": "dolor amet nulla dolore",
"icon2": "labore laborum amet",
"icon3": "labore voluptate adipisicing pariatur eiusmod"
},
"introduction": "adipis",
"lowLevelAlertThreshold": -25489851.9044573,
"model": "dolor Excepteur amet nostrud ipsum",
"name": "magna",
"percent": -24062426.815592855,
"productCode": "deserunt",
"purchaseInfo": {
"linkUrl": "Excepteur",
"productCodes": [
"Duis magna dolor tempor",
"exercitation",
"consequat si",
"ad",
"in velit"
],
"purchaseEnable": false
},
"remainingStatus": "cillum",
"remainingValue": "reprehenderit",
"remainingValueType": "laboris",
"replacementMethodInfo": {
"desc": "consequat deserunt dolore fugiat",
"h5Url": "Ut laborum ve",
"replaceEnable": false
},
"resetInfo": {
"requestBodyTemplate": "do",
"requestMethod": "voluptate consectetur dolore quis aliquip",
"resetEnable": false,
"resetType": "ullamco exercitation",
"resetUrl": "commodo aute",
"resultCodePathFromResponse": "tempor Excepteur do",
"successResultCodeValue": "occaecat Ut elit"
},
"serviceSupport": {
"bookingService": {
"enable": false,
"serviceType": "eiusmod"
},
"washingService": {
"enable": false,
"productCode": "in id officia Excepteur aliquip",
"serviceUrl": "exercitation eiusmod qui"
}
},
"slot": "dolore ipsum incididunt consequat cillum",
"status": "consequat aliquip ipsum pariatur reprehenderit",
"total": 4641238.563652068,
"unit": "amet quis in reprehenderit"
},
{
"bookingService": {
"enableToDoorService": false,
"serviceHotline": "adipisicing"
},
"classification": "amet",
"consumablesCode": "enim anim exercitation esse irure",
"icons": {
"icon1": "aute ut adipisicing voluptate",
"icon2": "do consequat",
"icon3": "amet irure consect"
},
"introduction": "laborum sed aute",
"lowLevelAlertThreshold": 23030304.82972583,
"model": "ad",
"name": "ut",
"percent": 62120709.953276426,
"productCode": "commodo",
"purchaseInfo": {
"linkUrl": "est",
"productCodes": [
"est ullamco",
"ex ea in",
"elit nisi",
"mollit"
],
"purchaseEnable": true
},
"remainingStatus": "do esse ea",
"remainingValue": "ea nulla consectetur ullamco",
"remainingValueType": "officia",
"replacementMethodInfo": {
"desc": "labore nulla",
"h5Url": "cillum mollit quis ut",
"replaceEnable": false
},
"resetInfo": {
"requestBodyTemplate": "in consectetur sed do",
"requestMethod": "incididunt sed",
"resetEnable": true,
"resetType": "labore mollit magna",
"resetUrl": "ea ullamco sit in",
"resultCodePathFromResponse": "veniam",
"successResultCodeValue": "fugiat pariatur reprehenderit"
},
"serviceSupport": {
"bookingService": {
"enable": true,
"serviceType": "ipsum ea"
},
"washingService": {
"enable": false,
"productCode": "deserunt minim aute",
"serviceUrl": "velit mollit Excepteur laborum"
}
},
"slot": "ad",
"status": "Duis tempor nisi sint incididunt",
"total": 11215404.493095174,
"unit": "Lorem dolore Excepteur do dolore"
}
],
"onlineStatus": -6758003
},
{
"applianceCode": "ipsum",
"consumables": [
{
"bookingService": {
"enableToDoorService": false,
"serviceHotline": "cupidatat ullamco culpa in"
},
"classification": "cillum ullamco",
"consumablesCode": "velit non",
"icons": {
"icon1": "consequat incidid",
"icon2": "in est ullamco fugiat eu",
"icon3": "qui ip"
},
"introduction": "veniam",
"lowLevelAlertThreshold": -55122352.016698085,
"model": "pariatur reprehenderit veni",
"name": "nisi est ut",
"percent": 3597165.398062259,
"productCode": "ad incididunt Ut",
"purchaseInfo": {
"linkUrl": "incididunt aliqua est sunt",
"productCodes": [
"aute non",
"labore Ut consectetur ad fugiat",
"est ad magna laborum",
"deserunt"
],
"purchaseEnable": false
},
"remainingStatus": "d",
"remainingValue": "ut in dolor",
"remainingValueType": "elit laboris qui pariatur dolore",
"replacementMethodInfo": {
"desc": "dolore fugiat",
"h5Url": "aliquip occaecat nulla deserunt",
"replaceEnable": false
},
"resetInfo": {
"requestBodyTemplate": "in sunt tempo",
"requestMethod": "eu do consectetur anim Lorem",
"resetEnable": true,
"resetType": "anim reprehenderit in labore consectetur",
"resetUrl": "consectetur dolore eiusmod",
"resultCodePathFromResponse": "occaecat esse sint ut",
"successResultCodeValue": "in est sit ex"
},
"serviceSupport": {
"bookingService": {
"enable": true,
"serviceType": "ut"
},
"washingService": {
"enable": true,
"productCode": "irure",
"serviceUrl": "irure nisi officia"
}
},
"slot": "ea ut minim",
"status": "aute eu anim nisi in",
"total": -5437153.603492379,
"unit": "aute et"
},
{
"bookingService": {
"enableToDoorService": true,
"serviceHotline": "ei"
},
"classification": "cupidatat veniam sit culpa",
"consumablesCode": "ad minim occaecat sunt",
"icons": {
"icon1": "quis minim magna",
"icon2": "aliquip incididunt in est",
"icon3": "laboris dolore occaecat exercitation"
},
"introduction": "eiusmod",
"lowLevelAlertThreshold": 13480073.70869717,
"model": "incididunt Duis nulla irure commodo",
"name": "ullamco culpa Duis",
"percent": -44846039.3635334,
"productCode": "eu voluptate sunt",
"purchaseInfo": {
"linkUrl": "in ad aliqua voluptate eiusmod",
"productCodes": [
"reprehenderit dolor fugiat commodo",
"ullamco labore",
"proident officia consequat Excepteur aliqua",
"ex irure amet tempor",
"proident pariatur cillum fugiat"
],
"purchaseEnable": false
},
"remainingStatus": "mag",
"remainingValue": "incididunt dolore ul",
"remainingValueType": "mollit Duis voluptate consequat",
"replacementMethodInfo": {
"desc": "ut pariatur do nisi nostrud",
"h5Url": "ea eu fugiat commodo",
"replaceEnable": false
},
"resetInfo": {
"requestBodyTemplate": "cillum dolor",
"requestMethod": "aliquip",
"resetEnable": true,
"resetType": "pariatur non voluptate reprehenderit culp",
"resetUrl": "ut sunt id",
"resultCodePathFromResponse": "id culpa et",
"successResultCodeValue": "id velit si"
},
"serviceSupport": {
"bookingService": {
"enable": true,
"serviceType": "in"
},
"washingService": {
"enable": false,
"productCode": "aute voluptate ullamco exercitation adipi",
"serviceUrl": "amet ad dolore cupidatat voluptate"
}
},
"slot": "dolor dolor proident",
"status": "est sit cillum ullamco",
"total": 20247533.668197766,
"unit": "aliquip nisi"
},
{
"bookingService": {
"enableToDoorService": false,
"serviceHotline": "qui"
},
"classification": "qui non",
"consumablesCode": "aliqua",
"icons": {
"icon1": "reprehenderit adipisicing sed eu consectetur",
"icon2": "mo",
"icon3": "mollit eiusmod velit aliqua"
},
"introduction": "sint proident esse dolor",
"lowLevelAlertThreshold": 21330322.995108813,
"model": "qui",
"name": "irure",
"percent": 96612482.24949542,
"productCode": "consectetur proident incididunt",
"purchaseInfo": {
"linkUrl": "Excepteur sunt",
"productCodes": [
"commodo in velit fugiat Excepteur",
"esse reprehenderit",
"sit"
],
"purchaseEnable": true
},
"remainingStatus": "ea quis",
"remainingValue": "exercitation occaecat",
"remainingValueType": "commodo enim dolore",
"replacementMethodInfo": {
"desc": "qui incididunt sed anim eu",
"h5Url": "occaecat dolor",
"replaceEnable": true
},
"resetInfo": {
"requestBodyTemplate": "fugiat est dolore",
"requestMethod": "cillum",
"resetEnable": true,
"resetType": "quis",
"resetUrl": "cillum dolor Duis proident labore",
"resultCodePathFromResponse": "voluptate exercitation deserunt incididunt",
"successResultCodeValue": "fugiat esse Lorem ipsum"
},
"serviceSupport": {
"bookingService": {
"enable": false,
"serviceType": "non consectetur amet id ad"
},
"washingService": {
"enable": false,
"productCode": "ad dolor ullamco",
"serviceUrl": "incididunt mollit"
}
},
"slot": "sed cupidatat incididunt tempor aliqua",
"status": "deserunt nisi magna enim officia",
"total": -3953631.559073448,
"unit": "sint sit tempor reprehenderit"
},
{
"bookingService": {
"enableToDoorService": false,
"serviceHotline": "in proident laborum eu"
},
"classification": "nisi exercitation",
"consumablesCode": "qui eu et mollit",
"icons": {
"icon1": "Excepteur pariatur",
"icon2": "ex dolor tempor",
"icon3": "irure pariatur fugiat"
},
"introduction": "enim",
"lowLevelAlertThreshold": 93411049.8867538,
"model": "magna elit Excepteur ipsum dolor",
"name": "reprehenderit",
"percent": -80747673.6178399,
"productCode": "amet officia sunt pariatur",
"purchaseInfo": {
"linkUrl": "do dolore amet",
"productCodes": [
"officia e"
],
"purchaseEnable": true
},
"remainingStatus": "dolor nulla do d",
"remainingValue": "dolore",
"remainingValueType": "in proident Duis culpa amet",
"replacementMethodInfo": {
"desc": "do proident nulla",
"h5Url": "ea anim consectetur officia ullamco",
"replaceEnable": false
},
"resetInfo": {
"requestBodyTemplate": "dolor consequat in laboris",
"requestMethod": "Excepteur ut magna",
"resetEnable": true,
"resetType": "enim adipisicing",
"resetUrl": "in irure voluptate Ut",
"resultCodePathFromResponse": "cillum qui sunt",
"successResultCodeValue": "adipisicing culpa elit"
},
"serviceSupport": {
"bookingService": {
"enable": false,
"serviceType": "sint nostrud id"
},
"washingService": {
"enable": false,
"productCode": "incididunt est officia occaecat",
"serviceUrl": "Lorem ea laboris"
}
},
"slot": "et in tempor",
"status": "labore id mollit tempor velit",
"total": -83593356.828078,
"unit": "qui"
}
],
"onlineStatus": 54341725
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
renderEnd | 渲染完成返回组件高度 | e |
consumablesInfo | 渲染完成后耗材信息 | e |
← 小美卡片