# Warmer 暖风机
请扫码查看示例
# 介绍
暖风机插件模版
# 代码演示
# 基本用法
<element name="m-button" src="../../../../node_modules/@minix-iot/mui/src/button/index"></element>
<element name="m-nav-bar" src="../../../../node_modules/@minix-iot/mui/src/navbar/index"></element>
<element name="m-cell" src="../../../../node_modules/@minix-iot/mui/src/cell/index"></element>
<element name="m-card" src="../../../../node_modules/@minix-iot/mui/src/card/index"></element>
<element name="m-slider" src="../../../../node_modules/@minix-iot/mui/src/slider/index"></element>
<element name="m-switch" src="../../../../node_modules/@minix-iot/mui/src/switch/index"></element>
<element name="m-popup" src="../../../../node_modules/@minix-iot/mui/src/popup/index"></element>
<element name="mx-cell" src="../../common/components/cellCard/index"></element>
<div class="wrapper">
<m-nav-bar title="{{deviceData.name}}" fixed="true" color="white"></m-nav-bar>
<!-- 设备数据展示区 -->
<div class="col digital-panel b-linear-{{themeColorName}}">
<!-- 动画 -->
<div show="{{deviceStatusCode !== 0}}" class="animate-circle-large"></div>
<div show="{{deviceStatusCode !== 0}}" class="animate-circle"></div>
<!-- 数据 -->
<text show="{{deviceStatusCode !== 0}}" class="digital-panel-text-1">设置温度</text>
<text show="{{deviceStatusCode !== 0}}" class="digital-panel-text-2">20</text>
<text show="{{deviceStatusCode !== 0}}" class="digital-panel-text-3">周围温度约</text>
<text show="{{deviceStatusCode !== 0}}" class="digital-panel-text-4">20°</text>
<div show="{{deviceStatusCode !== 0}}" class="digital-panel-radius-text b-{{themeColorName}}"><text>{{deviceData[deviceStatusCode].text}}</text></div>
<text show="{{deviceStatusCode === 0}}" class="digital-panel-radius-title">{{deviceData[deviceStatusCode].text}}</text>
</div>
<!-- 操作区 -->
<div class="main">
<!-- 关机状态日志 -->
<m-card if="{{deviceStatusCode === 0}}" padding-left="0" padding-right="0" padding-top="20px" padding-bottom="10px" class="m-b-8">
<div class="col widget-card">
<div class="row">
<div class="col">
<text class="">小美已陪伴您</text>
<div><text class="widget-card-num">234</text><text class="">天</text></div>
</div>
<div class="col second-item">
<text class="">累计节省用电</text>
<div><text class="widget-card-num">326</text><text class="">度</text></div>
</div>
<div class="col">
<text class="">减少二氧化碳</text>
<div><text class="widget-card-num">234</text><text class="">吨</text></div>
</div>
</div>
<divider vertical="false" class="vertical-divider"></divider>
<div @click="onLog"><m-button theme="{{themeColorName}}" type="text" text="查看使用日志"></m-button></div>
</div>
</m-card>
<m-card padding-top="16px" padding-bottom="16px" class="m-b-8">
<div class="row" style="opacity:{{deviceStatusCode !== 0?1:0.3}}">
<div class="avatar-icon b-{{themeColorName}}"><image src="http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/warmer/icon_24_list_grade@3x.png"></image></div>
<text class="title-text">档位</text>
<div class="radius-text bd-{{themeColorName}}"><text class="c-{{themeColorName}}">{{randText}}</text></div>
</div>
<m-slider @m-change="randSlideChange" theme="{{themeColorName}}" value="{{v1}}" scales="{{scales1}}" min="{{1}}" max="{{4}}" disabled="{{widgetDisabled}}"></m-slider>
</m-card>
<m-card padding-top="16px" padding-bottom="16px" class="m-b-8">
<div class="row" style="opacity:{{deviceStatusCode !== 0?1:0.3}}">
<div class="avatar-icon b-{{themeColorName}}"><image src="http://dolphin-weex-dev.msmartlife.cn/cdn/images/business/other/calorifier_icon_temperature@3x.png"></image></div>
<text class="title-text">温度</text>
<div class="radius-text bd-{{themeColorName}}"><text class="c-{{themeColorName}}">{{v2}}℃</text></div>
</div>
<m-slider @m-change="tempSlideChange" theme="{{themeColorName}}" value="{{v2}}" scales="{{scales2}}" disabled="{{widgetDisabled}}"></m-slider>
</m-card>
<m-card class="m-b-8">
<m-cell
for="{{ optData }}"
card
padding-left="{{0}}"
size="middle"
icon-size="middle"
icon-round="{{true}}"
icon-color="{{themeColorValue}}"
disabled="{{widgetDisabled}}"
>
<m-switch theme="{{themeColorName}}" value="{{$item.switchStatus}}" disabled="{{widgetDisabled}}"><m-switch>
</m-cell>
</m-card>
<m-card if="{{deviceStatusCode !== 0}}" padding-left="0" padding-right="0" padding-top="20px" padding-bottom="10px" class="m-b-8">
<div class="col widget-card">
<div class="row">
<div class="col">
<text class="">小美已陪伴您</text>
<div><text class="widget-card-num">234</text><text class="">天</text></div>
</div>
<div class="col second-item">
<text class="">累计节省用电</text>
<div><text class="widget-card-num">326</text><text class="">度</text></div>
</div>
<div class="col">
<text class="">减少二氧化碳</text>
<div><text class="widget-card-num">234</text><text class="">吨</text></div>
</div>
</div>
<divider vertical="false" class="vertical-divider"></divider>
<div @click="onLog"><m-button theme="{{themeColorName}}" type="text" text="查看使用日志"></m-button></div>
</div>
</m-card>
</div>
<!-- 底部导航条 -->
<tab-bar mode="fixed" class="tab-bar" style="padding-bottom:{{paddingBottom}}px;">
<div class="col">
<div class="tab-bar-icon b-{{themeColorName}}" @click="onPowerToggle">
<image src="common/images/warmer/icon_48_bottom_close@3x.png"></image>
</div>
<text class="group">开关</text>
</div>
<div class="col" style="opacity:{{deviceStatusCode !== 0?1:0.3}}" @click="onBottomToggle">
<div class="tab-bar-icon b-{{themeColorName}}"><image src="{{deviceModeData[deviceStatusCode-1].icon}}"></image></div>
<text class="group">{{deviceModeData[deviceStatusCode-1].title}}</text>
</div>
<div class="col" @click="goTo('pages/meijv-template-page-timing/index')">
<div class="tab-bar-icon b-grey"><image src="common/images/warmer/icon_48_bottom_appointmentgray@3x.png"></image></div>
<text class="group">预约</text>
</div>
</tab-bar>
<!-- 弹出层 -->
<m-popup active="{{bActive}}" position="bottom">
<div class="col popup-mode">
<text>选择模式</text>
<div for="{{deviceModeData}}" grab:click="switchMode({{$item.code}})">
<mx-cell
title="{{$item.title}}"
subtitle="{{$item.subtitle}}"
size="middle"
icon="{{$item.icon}}"
icon-size="middle"
icon-round="{{true}}"
icon-color="{{$item.color}}"
>
</mx-cell>
</div>
</div>
</m-popup>
</div>
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
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
@import '../../common/styles/app.scss';
@import '../../common/styles/animate.scss';
.m-b-8 {
margin-bottom: 8px;
}
.b-grey {
background-color: #f2f2f2;
}
.icon-trangle {
width: 0px;
height: 0px;
border-width: 7px;
border-style: solid;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
transform: rotate(-45deg);
}
.wrapper {
flex-direction: column;
align-items: center;
width: 100%;
background-color: #f9f9f9;
font-family: PingFangSC-Regular;
.digital-panel {
justify-content: space-around;
padding: 84px 0 180px;
width: 100%;
height: 500px;
font-size: 16px;
color: #ffffff;
&-text-1 {
opacity: 0.7;
font-size: 12px;
}
&-text-2 {
font-size: 80px;
}
&-text-3 {
opacity: 0.7;
font-size: 12px;
}
&-radius-text {
border-radius: 15px;
padding: 5px 16px;
margin-top: 24px;
}
&-radius-title {
font-size: 48px;
}
}
.main {
padding: 0 16px 148px;
margin-top: -140px;
flex-direction: column;
align-items: center;
}
.avatar-icon {
margin-right: 12px;
}
.radius-text {
margin-left: 12px;
padding: 0 11px;
text-align: center;
line-height: 20px;
border-width: 1px;
border-style: solid;
border-radius: 20px;
}
.btn-item {
margin-top: 20px;
}
.avatar-icon {
width: 24px;
height: 24px;
border-radius: 24px;
}
.title-text {
font-size: 16px;
}
.radius-text {
font-size: 14px;
}
.widget-card {
font-size: 12px;
color: #666666;
.second-item {
border-left: 0.5px solid #f2f2f2;
border-right: 0.5px solid #f2f2f2;
}
&-num {
font-size: 22px;
color: #000000;
}
.vertical-divider {
color: rgba(229, 229, 232, 0.5);
stroke-width: 0.5;
margin-bottom: 8px;
}
}
.tab-bar {
background-color: #ffffff;
box-shadow: 0 -1px 5px 0 #f2f2f2;
width: 100%;
height: 114px;
font-size: 12px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
&-icon {
width: 48px;
height: 48px;
border-radius: 48px;
margin-bottom: 8px;
}
}
.popup-mode {
padding: 0 16px;
background-color: #fff;
border-radius: 0 0 20px 20px;
text {
font-size: 14px;
color: #8a8a8f;
margin: 16px 0;
}
}
}
.animate-circle,
.animate-circle-large {
position: absolute;
top: -180px;
left: 88px;
width: 200px;
height: 200px;
border-radius: 100px;
opacity: 0;
background-color: #eee;
}
.animate-circle {
animation: circleWave 2.8s 2s linear infinite;
}
.animate-circle-large {
animation: circleWaveL 2.8s linear infinite;
}
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
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
import router from '@system.router'
import prompt from '@system.prompt'
import {
OPT_DATA_WARMER,
ASSETS_DATA_WARMER,
MODE_DATA_WARMER,
} from './type.js'
export default {
data: {
optData: OPT_DATA_WARMER, // 开关卡片模拟数据
deviceData: ASSETS_DATA_WARMER, // 设备信息模拟数据
deviceModeData: MODE_DATA_WARMER, // 操作面板模拟数据
deviceStatusCode: 1, // 0-关机、1-睡眠、2-制热、3-冷风、4-节能、5-舒适
randText: '高',
v1: 3,
v2: 36,
scales1: [
{
text: '低',
value: 1,
},
{
text: '中',
value: 2,
},
{
text: '高',
value: 3,
},
{
text: '强',
value: 4,
},
],
scales2: [
{
text: '0%',
value: 0,
},
{
text: '25%',
value: 25,
},
{
text: '50%',
value: 50,
},
{
text: '75%',
value: 75,
},
{
text: '100%',
value: 100,
},
],
bActive: false,
},
computed: {
// 获取底部安全区高度
paddingBottom() {
let result = 20
if (global?.config?.env?.safeAreaBottom) {
if (global?.config?.env?.platform === 'ios') {
// iOS
result = global.config.env.safeAreaBottom
} else {
// 安卓
result = global.config.env.safeAreaBottom / global.config.env.scale
}
}
return result
},
themeColorName() {
switch (this.deviceStatusCode) {
case 0:
return 'gray-offline'
case 1:
return 'orange-red'
case 2:
return 'yellow'
case 3:
return 'brand'
case 4:
return 'cyan'
case 5:
return 'orange'
}
},
themeColorValue() {
switch (this.deviceStatusCode) {
case 0:
return '#7C879B'
case 1:
return '#ff6a4c'
case 2:
return '#ffaa10'
case 3:
return '#267aff'
case 4:
return '#00cbb8'
case 5:
return '#ff8225'
}
},
widgetDisabled() {
return this.deviceStatusCode === 0
},
},
goTo(url) {
router.push({
uri: url,
})
},
randSlideChange(e) {
const randTextArr = ['', '低', '中', '高', '强']
this.randText = randTextArr[e._detail]
},
tempSlideChange(e) {
this.v2 = e._detail
},
onPowerToggle() {
// 当前状态：开机
if (this.deviceStatusCode !== 0) {
this.beforeOffCode = this.deviceStatusCode
this.deviceStatusCode = 0
} else {
this.deviceStatusCode = this.beforeOffCode
}
},
/**
* 显示弹窗
*/
onBottomToggle() {
if (this.deviceStatusCode !== 0) {
this.bActive = !this.bActive
}
},
/**
* 切换设备模式(切换主题色)
* @param {number} val 设备状态码
*/
switchMode(val) {
this.deviceStatusCode = val
this.bActive = false
},
onLog() {
prompt.showToast({
message: '查看日志',
duration: 2000,
})
},
}
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
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
头部信息面板配置文件type.js：
//暖风机
const ASSETS_IMAGE_PATH1 = 'common/images/warmer/'
const ASSETS_IMAGE_PATH2 = 'https://www.smartmidea.net/activity/sit/202204/image/'
//头部电子面板配置项
const ASSETS_DATA_WARMER = {
//设备名称
name: '暖风机',
0: {
code: 0,
text: '已关机',
statusBarBgColor: '#7C879B',
wrapperBgImg: `/animation/gray_transition.png`,
},
//睡眠模式
1: {
code: 1,
text: '睡眠模式|加热中',
statusBarBgColor: '#FF6A4C',
wrapperBgImg: `/animation/bg/红色渐变@2x.png`,
animateBgImg: `/animation/animate_red.png`,
},
//制热模式
2: {
code: 2,
text: '制热模式|加热中',
statusBarBgColor: '#FFAA10',
wrapperBgImg: `/animation/bg/黄色渐变@2x.png`,
animateBgImg: `/animation/animate_yellow.png`,
},
//冷风模式
3: {
code: 3,
text: '冷风模式|运行中',
statusBarBgColor: '#267AFF',
wrapperBgImg: `/animation/blue_transition.png`,
animateBgImg: `/animation/animate_blue.png`,
},
//节能模式
4: {
code: 4,
text: '节能模式',
statusBarBgColor: '#00CBB8',
wrapperBgImg: `/animation/bg/绿色渐变@2x.png`,
animateBgImg: `/animation/animate_green.png`,
},
//舒适模式
5: {
code: 5,
text: '舒适模式|加热中',
statusBarBgColor: '#FF8225',
wrapperBgImg: `/animation/bg/橙色渐变@2x.png`,
animateBgImg: `/animation/animate_orange.png`,
},
}
//开关面板配置项
const OPT_DATA_WARMER = [
{
title: '摇头/摆风',
switchStatus: true,
icon: `${ASSETS_IMAGE_PATH2}icon_32_shake@3x.png`,
},
{
title: '加湿',
subtitle: '一键45%，干爽不干燥',
switchStatus: false,
icon: `${ASSETS_IMAGE_PATH2}icon_32_water@3x.png`,
},
{
title: '童锁',
subtitle: '一键童锁，防小朋友误触',
switchStatus: true,
icon: `${ASSETS_IMAGE_PATH2}icon_32_child_lock@3x.png`,
},
{
title: '屏幕灯',
switchStatus: false,
icon: `${ASSETS_IMAGE_PATH2}icon_32_light@3x.png`,
},
{
title: '按键蜂鸣声提示',
switchStatus: false,
icon: `${ASSETS_IMAGE_PATH2}icon_32_sound@3x.png`,
},
]
//弹窗操作面板配置项
const MODE_DATA_WARMER = [
{
code: 1,
title: '睡眠',
color: '#FF6A4C',
subtitle: '睡眠模式解释，文案待定',
icon: `${ASSETS_IMAGE_PATH2}icon_48_bottom_red@3x.png`,
},
{
code: 2,
title: '制热',
color: '#FFAA10',
subtitle: '制热模式解释，26摄氏度，文案待定',
icon: `${ASSETS_IMAGE_PATH2}icon_48_bottom_yellow@3x.png`,
},
{
code: 3,
title: '冷风',
color: '#267AFF',
subtitle: '冷风模式解释，26摄氏度，文案待定',
icon: `${ASSETS_IMAGE_PATH2}icon_48_bottom_blue@3x.png`,
},
{
code: 4,
title: '节能',
color: '#00CBB8',
subtitle: '节能模式解释，26摄氏度，文案待定',
icon: `${ASSETS_IMAGE_PATH2}icon_48_bottom_green@3x.png`,
},
{
code: 5,
title: '舒适',
color: '#FF8225',
subtitle: '快速加热，提供少量热水',
icon: `${ASSETS_IMAGE_PATH2}icon_48_bottom_orange@3x.png`,
},
]
//底部面板配置选项
const MOCK_BOTTOM_BAR_DATA = [
{
type: 'power',
title: 'power',
text: '开关',
iconColor: '#7C879B',
disabled: false,
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/water_heater/calorifier_icon_on@3x.png',
},
{
type: 'mode',
title: 'modePicker',
disabled: false,
hasDot: true,
text: '节能',
iconColor: '#7C879B',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/warmer/warmer_icon_eco@3x.png',
},
{
type: 'timing',
title: 'timing',
text: '预约',
iconColor: '#f2f2f2',
iconTextColor: '#666666',
disabled: false,
iconText: '18:00',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/warmer/icon_48_bottom_appointmentgray@3x.png',
},
]
export {
OPT_DATA_WARMER,
ASSETS_DATA_WARMER,
MODE_DATA_WARMER,
MOCK_BOTTOM_BAR_DATA,
}
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
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