Commit 5844ab5070b4761ab83fd424ece2087cc74f6e34
Merge branch 'ww' into 'main'
fix: tabbar badge not real update See merge request huang/thingskit-app!91
Showing
2 changed files
with
354 additions
and
333 deletions
1 | -<template> | |
2 | - <view class="alarm-detail-page"> | |
3 | - <!-- 公共组件-每个页面必须引入 --> | |
4 | - <public-module></public-module> | |
5 | - <view class="alarm-detail-column"> | |
6 | - <view class="u-flex detail-column"> | |
7 | - <view class="u-flex column"> | |
8 | - <text class="text-org-bold">{{ list.deviceName == null ? '暂无数据' : list.deviceName }}</text> | |
9 | - <image class="image" src="/static/alarm-device.png"></image> | |
10 | - </view> | |
11 | - <view class="column"> | |
12 | - <text class="text-org-bold ">告警级别:</text> | |
13 | - <text class="text-device-muted" style="color:#DE4437"> | |
14 | - {{ | |
15 | - list.severity == 'CRITICAL' | |
16 | - ? '危险' | |
17 | - : list.severity == 'MAJOR' | |
18 | - ? '重要' | |
19 | - : list.severity == 'MINOR' | |
20 | - ? '次要' | |
21 | - : list.severity == 'WARNING' | |
22 | - ? '警告' | |
23 | - : '不确定' | |
24 | - }} | |
25 | - </text> | |
26 | - </view> | |
27 | - <view class="column"> | |
28 | - <text class="text-org-bold">所属组织:</text> | |
29 | - <text class="text-device-muted">{{ list.organizationName == null ? '暂无数据' : list.organizationName }}</text> | |
30 | - </view> | |
31 | - <view class="column"> | |
32 | - <text class="text-org-bold">告警值:</text> | |
33 | - <text class="text-device-muted">{{ list.details == null ? '暂无数据' : formatDetailText(list.details.data) }}</text> | |
34 | - </view> | |
35 | - <view class="column"> | |
36 | - <text class="text-org-bold">告警时间:</text> | |
37 | - <text class="text-device-muted">{{ list.createdTime }}</text> | |
38 | - </view> | |
39 | - <view class="column"> | |
40 | - <text class="text-org-bold">告警状态:</text> | |
41 | - <text class="text-device-muted" style="color: #DE4437;"> | |
42 | - {{ | |
43 | - list.status == 'CLEARED_UNACK' | |
44 | - ? '清除未确认' | |
45 | - : list.status == 'ACTIVE_UNACK' | |
46 | - ? '激活未确认' | |
47 | - : list.status == 'CLEARED_ACK' | |
48 | - ? '清除已确认' | |
49 | - : '激活已确认' | |
50 | - }} | |
51 | - </text> | |
52 | - </view> | |
53 | - </view> | |
54 | - </view> | |
55 | - <!-- #ifdef MP --> | |
56 | - <view class="handle-result text-org-bold" style="">处理结果</view> | |
57 | - <view class="hanle-main"> | |
58 | - <u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left" :model="formModel" ref="form1"> | |
59 | - <u-form-item label="." prop="result" ref="item3"> | |
60 | - <view style="position: relative;left: -60rpx;"> | |
61 | - <u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea> | |
62 | - </view> | |
63 | - </u-form-item> | |
64 | - </u--form> | |
65 | - </view> | |
66 | - <!-- #endif --> | |
67 | - <!-- #ifdef APP-PLUS --> | |
68 | - <view class="handle-result text-org-bold">处理结果</view> | |
69 | - <view class="hanle-main"> | |
70 | - <view><u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea></view> | |
71 | - </view> | |
72 | - <!-- #endif --> | |
73 | - <view style="margin-top: 44rpx;display: flex;align-items: center;justify-content: space-between;"> | |
74 | - <view | |
75 | - :style="[ | |
76 | - { position: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? 'relative' : '' }, | |
77 | - { right: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? '-210rpx' : '' } | |
78 | - ]" | |
79 | - v-if="list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK'" | |
80 | - class="u-flex" | |
81 | - style="width: 260rpx" | |
82 | - > | |
83 | - <u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button> | |
84 | - </view> | |
85 | - <view style="width: 30rpx;"></view> | |
86 | - <view | |
87 | - :style="[{ position: list.status == 'ACTIVE_ACK' ? 'relative' : '' }, { right: list.status == 'ACTIVE_ACK' ? '207rpx' : '' }]" | |
88 | - v-if="list.status == 'ACTIVE_ACK'" | |
89 | - class="u-flex" | |
90 | - style="width: 260rpx" | |
91 | - > | |
92 | - <u-button @click="handleRemove" type="error" shape="circle" text="清除"></u-button> | |
93 | - </view> | |
94 | - </view> | |
95 | - </view> | |
96 | -</template> | |
97 | - | |
98 | -<script> | |
99 | -export default { | |
100 | - data() { | |
101 | - return { | |
102 | - formModel: { | |
103 | - result: '' | |
104 | - }, | |
105 | - list: {} | |
106 | - }; | |
107 | - }, | |
108 | - onLoad(e) { | |
109 | - if (e.data !== null) { | |
110 | - let params = JSON.parse(e.data); | |
111 | - this.list = params; | |
112 | - } | |
113 | - // 隐藏原生的tabbar | |
114 | - uni.hideTabBar(); | |
115 | - }, | |
116 | - methods: { | |
117 | - //处理 | |
118 | - handleSubmit() { | |
119 | - if (this.formModel.result == '') return uni.$u.toast('请输入处理结果'); | |
120 | - else | |
121 | - uni.$u.http | |
122 | - .post(`/alarm/${this.list.id}/ack`) | |
123 | - .then(res => { | |
124 | - if (res == '') { | |
125 | - uni.showToast({ | |
126 | - title: '处理成功~', | |
127 | - icon: 'none' | |
128 | - }); | |
129 | - let pages = getCurrentPages(); //获取所有页面栈实例列表 | |
130 | - let nowPage = pages[pages.length - 1]; //当前页页面实例 | |
131 | - let prevPage = pages[pages.length - 2]; //上一页页面实例 | |
132 | - prevPage.$vm.detailStatus = true; | |
133 | - setTimeout(() => { | |
134 | - uni.navigateBack({ | |
135 | - delta: 1 | |
136 | - }); | |
137 | - }, 500); | |
138 | - } | |
139 | - }) | |
140 | - .catch(e => { | |
141 | - uni.$u.toast(e.data?.message); | |
142 | - }); | |
143 | - }, | |
144 | - // 清除 | |
145 | - handleRemove() { | |
146 | - uni.$u.http | |
147 | - .post(`/alarm/${this.list.id}/clear`) | |
148 | - .then(res => { | |
149 | - if (res == '') { | |
150 | - uni.showToast({ | |
151 | - title: '清除成功~', | |
152 | - icon: 'none' | |
153 | - }); | |
154 | - let pages = getCurrentPages(); //获取所有页面栈实例列表 | |
155 | - let nowPage = pages[pages.length - 1]; //当前页页面实例 | |
156 | - let prevPage = pages[pages.length - 2]; //上一页页面实例 | |
157 | - prevPage.$vm.detailStatus = true; | |
158 | - setTimeout(() => { | |
159 | - uni.navigateBack({ | |
160 | - delta: 1 | |
161 | - }); | |
162 | - }, 500); | |
163 | - } | |
164 | - }) | |
165 | - .catch(e => { | |
166 | - uni.$u.toast(e.data?.message); | |
167 | - }); | |
168 | - }, | |
169 | - formatDetailText(e) { | |
170 | - //去除字符串双引号 | |
171 | - const jsonStr = JSON.stringify(e); | |
172 | - const str = jsonStr.substring(1, jsonStr.length - 1); | |
173 | - const newStr = str.replace(/\"/g, ''); | |
174 | - return newStr; | |
175 | - } | |
176 | - } | |
177 | -}; | |
178 | -</script> | |
179 | - | |
180 | -<style lang="scss" scoped> | |
181 | -@import './static/alarmDetail.scss'; | |
182 | -/deep/ .u-button--primary { | |
183 | - background-color: #377dff !important; | |
184 | - border-color: #377dff !important; | |
185 | -} | |
1 | +<template> | |
2 | + <view class="alarm-detail-page"> | |
3 | + <!-- 公共组件-每个页面必须引入 --> | |
4 | + <public-module></public-module> | |
5 | + <view class="alarm-detail-column"> | |
6 | + <view class="u-flex detail-column"> | |
7 | + <view class="u-flex column"> | |
8 | + <text class="text-org-bold">{{ list.deviceName == null ? '暂无数据' : list.deviceName }}</text> | |
9 | + <image class="image" src="/static/alarm-device.png"></image> | |
10 | + </view> | |
11 | + <view class="column"> | |
12 | + <text class="text-org-bold ">告警级别:</text> | |
13 | + <text class="text-device-muted" style="color:#DE4437"> | |
14 | + {{ | |
15 | + list.severity == 'CRITICAL' | |
16 | + ? '危险' | |
17 | + : list.severity == 'MAJOR' | |
18 | + ? '重要' | |
19 | + : list.severity == 'MINOR' | |
20 | + ? '次要' | |
21 | + : list.severity == 'WARNING' | |
22 | + ? '警告' | |
23 | + : '不确定' | |
24 | + }} | |
25 | + </text> | |
26 | + </view> | |
27 | + <view class="column"> | |
28 | + <text class="text-org-bold">所属组织:</text> | |
29 | + <text | |
30 | + class="text-device-muted">{{ list.organizationName == null ? '暂无数据' : list.organizationName }}</text> | |
31 | + </view> | |
32 | + <view class="column"> | |
33 | + <text class="text-org-bold">告警值:</text> | |
34 | + <text | |
35 | + class="text-device-muted">{{ list.details == null ? '暂无数据' : formatDetailText(list.details.data) }}</text> | |
36 | + </view> | |
37 | + <view class="column"> | |
38 | + <text class="text-org-bold">告警时间:</text> | |
39 | + <text class="text-device-muted">{{ list.createdTime }}</text> | |
40 | + </view> | |
41 | + <view class="column"> | |
42 | + <text class="text-org-bold">告警状态:</text> | |
43 | + <text class="text-device-muted" style="color: #DE4437;"> | |
44 | + {{ | |
45 | + list.status == 'CLEARED_UNACK' | |
46 | + ? '清除未确认' | |
47 | + : list.status == 'ACTIVE_UNACK' | |
48 | + ? '激活未确认' | |
49 | + : list.status == 'CLEARED_ACK' | |
50 | + ? '清除已确认' | |
51 | + : '激活已确认' | |
52 | + }} | |
53 | + </text> | |
54 | + </view> | |
55 | + </view> | |
56 | + </view> | |
57 | + <!-- #ifdef MP --> | |
58 | + <view class="handle-result text-org-bold" style="">处理结果</view> | |
59 | + <view class="hanle-main"> | |
60 | + <u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left" | |
61 | + :model="formModel" ref="form1"> | |
62 | + <u-form-item label="." prop="result" ref="item3"> | |
63 | + <view style="position: relative;left: -60rpx;"> | |
64 | + <u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count> | |
65 | + </u--textarea> | |
66 | + </view> | |
67 | + </u-form-item> | |
68 | + </u--form> | |
69 | + </view> | |
70 | + <!-- #endif --> | |
71 | + <!-- #ifdef APP-PLUS --> | |
72 | + <view class="handle-result text-org-bold">处理结果</view> | |
73 | + <view class="hanle-main"> | |
74 | + <view> | |
75 | + <u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count> | |
76 | + </u--textarea> | |
77 | + </view> | |
78 | + </view> | |
79 | + <!-- #endif --> | |
80 | + <view style="margin-top: 44rpx;display: flex;align-items: center;justify-content: space-between;"> | |
81 | + <view :style="[ | |
82 | + { position: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? 'relative' : '' }, | |
83 | + { right: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? '-210rpx' : '' } | |
84 | + ]" v-if="list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK'" class="u-flex" style="width: 260rpx"> | |
85 | + <u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button> | |
86 | + </view> | |
87 | + <view style="width: 30rpx;"></view> | |
88 | + <view | |
89 | + :style="[{ position: list.status == 'ACTIVE_ACK' ? 'relative' : '' }, { right: list.status == 'ACTIVE_ACK' ? '207rpx' : '' }]" | |
90 | + v-if="list.status == 'ACTIVE_ACK'" class="u-flex" style="width: 260rpx"> | |
91 | + <u-button @click="handleRemove" type="error" shape="circle" text="清除"></u-button> | |
92 | + </view> | |
93 | + </view> | |
94 | + </view> | |
95 | +</template> | |
96 | + | |
97 | +<script> | |
98 | + import { | |
99 | + mapActions | |
100 | + } from 'vuex' | |
101 | + export default { | |
102 | + data() { | |
103 | + return { | |
104 | + formModel: { | |
105 | + result: '' | |
106 | + }, | |
107 | + list: {} | |
108 | + }; | |
109 | + }, | |
110 | + onLoad(e) { | |
111 | + if (e.data !== null) { | |
112 | + let params = JSON.parse(e.data); | |
113 | + this.list = params; | |
114 | + } | |
115 | + // 隐藏原生的tabbar | |
116 | + uni.hideTabBar(); | |
117 | + }, | |
118 | + methods: { | |
119 | + //处理 | |
120 | + handleSubmit() { | |
121 | + if (this.formModel.result == '') return uni.$u.toast('请输入处理结果'); | |
122 | + else | |
123 | + uni.$u.http | |
124 | + .post(`/alarm/${this.list.id}/ack`) | |
125 | + .then(res => { | |
126 | + if (res == '') { | |
127 | + uni.showToast({ | |
128 | + title: '处理成功~', | |
129 | + icon: 'none' | |
130 | + }); | |
131 | + let pages = getCurrentPages(); //获取所有页面栈实例列表 | |
132 | + let nowPage = pages[pages.length - 1]; //当前页页面实例 | |
133 | + let prevPage = pages[pages.length - 2]; //上一页页面实例 | |
134 | + prevPage.$vm.detailStatus = true; | |
135 | + setTimeout(() => { | |
136 | + uni.navigateBack({ | |
137 | + delta: 1 | |
138 | + }); | |
139 | + }, 500); | |
140 | + } | |
141 | + }) | |
142 | + .catch(e => { | |
143 | + uni.$u.toast(e.data?.message); | |
144 | + }); | |
145 | + }, | |
146 | + // 清除 | |
147 | + handleRemove() { | |
148 | + uni.$u.http | |
149 | + .post(`/alarm/${this.list.id}/clear`) | |
150 | + .then(res => { | |
151 | + if (res == '') { | |
152 | + uni.showToast({ | |
153 | + title: '清除成功~', | |
154 | + icon: 'none' | |
155 | + }); | |
156 | + | |
157 | + let pages = getCurrentPages(); //获取所有页面栈实例列表 | |
158 | + let nowPage = pages[pages.length - 1]; //当前页页面实例 | |
159 | + let prevPage = pages[pages.length - 2]; //上一页页面实例 | |
160 | + prevPage.$vm.detailStatus = true; | |
161 | + setTimeout(async () => { | |
162 | + uni.navigateBack({ | |
163 | + delta: 1 | |
164 | + }); | |
165 | + const res = await uni.$u.http.get('/yt/homepage/app?login=true'); | |
166 | + if (res) { | |
167 | + //异步实时更新告警徽标数 | |
168 | + await this.updateBadgeTotal(res.totalAlarm?.activedAlarm); | |
169 | + } | |
170 | + }, 500); | |
171 | + } | |
172 | + }) | |
173 | + .catch(e => { | |
174 | + uni.$u.toast(e.data?.message); | |
175 | + }); | |
176 | + }, | |
177 | + ...mapActions(['updateBadgeTotal']), | |
178 | + formatDetailText(e) { | |
179 | + //去除字符串双引号 | |
180 | + const jsonStr = JSON.stringify(e); | |
181 | + const str = jsonStr.substring(1, jsonStr.length - 1); | |
182 | + const newStr = str.replace(/\"/g, ''); | |
183 | + return newStr; | |
184 | + } | |
185 | + } | |
186 | + }; | |
187 | +</script> | |
188 | + | |
189 | +<style lang="scss" scoped> | |
190 | + @import './static/alarmDetail.scss'; | |
191 | + | |
192 | + /deep/ .u-button--primary { | |
193 | + background-color: #377dff !important; | |
194 | + border-color: #377dff !important; | |
195 | + } | |
186 | 196 | </style> | ... | ... |
... | ... | @@ -2,21 +2,17 @@ |
2 | 2 | <view> |
3 | 3 | <view :class="[isFixed ? 'f-fixed' : '']"> |
4 | 4 | <!-- 二次封装tabbar --> |
5 | - <u-tabbar | |
6 | - :value="tabIndex" | |
7 | - @change="onTabbar" | |
8 | - :fixed="false" | |
9 | - :placeholder="false" | |
10 | - :safeAreaInsetBottom="false" | |
11 | - :activeColor="activeColor" | |
12 | - :inactiveColor="inactiveColor" | |
13 | - :border="border" | |
14 | - > | |
5 | + <u-tabbar :value="tabIndex" @change="onTabbar" :fixed="false" :placeholder="false" | |
6 | + :safeAreaInsetBottom="false" :activeColor="activeColor" :inactiveColor="inactiveColor" :border="border"> | |
15 | 7 | <block v-for="(item, index) in list" :key="index"> |
16 | 8 | <!-- 自定义icon --> |
17 | 9 | <u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle"> |
18 | - <view slot="active-icon"><image style="width:50rpx;height: 50rpx;" :src="item.iconFill" mode=""></image></view> | |
19 | - <view slot="inactive-icon"><image style="width:50rpx;height: 50rpx;" :src="item.icon" mode=""></image></view> | |
10 | + <view slot="active-icon"> | |
11 | + <image style="width:50rpx;height: 50rpx;" :src="item.iconFill" mode=""></image> | |
12 | + </view> | |
13 | + <view slot="inactive-icon"> | |
14 | + <image style="width:50rpx;height: 50rpx;" :src="item.icon" mode=""></image> | |
15 | + </view> | |
20 | 16 | </u-tabbar-item> |
21 | 17 | </block> |
22 | 18 | </u-tabbar> |
... | ... | @@ -29,153 +25,168 @@ |
29 | 25 | </template> |
30 | 26 | |
31 | 27 | <script> |
32 | -import base from '@/config/baseUrl.js'; | |
33 | -import { mapState } from 'vuex'; | |
28 | + import base from '@/config/baseUrl.js'; | |
29 | + import { | |
30 | + mapState | |
31 | + } from 'vuex'; | |
34 | 32 | |
35 | -export default { | |
36 | - name: 'f-tabbar', | |
37 | - props: { | |
38 | - // 是否固定在底部 | |
39 | - isFixed: { | |
40 | - type: Boolean, | |
41 | - default: true | |
42 | - }, | |
43 | - // 是否设置防止塌陷高度 | |
44 | - isFillHeight: { | |
45 | - type: Boolean, | |
46 | - default: true | |
47 | - }, | |
48 | - // 选中的颜色 | |
49 | - activeColor: { | |
50 | - type: String, | |
51 | - default: '#377dff' | |
52 | - }, | |
53 | - // 未选中颜色 | |
54 | - inactiveColor: { | |
55 | - type: String, | |
56 | - default: '#606266' | |
33 | + export default { | |
34 | + name: 'f-tabbar', | |
35 | + props: { | |
36 | + // 是否固定在底部 | |
37 | + isFixed: { | |
38 | + type: Boolean, | |
39 | + default: true | |
40 | + }, | |
41 | + // 是否设置防止塌陷高度 | |
42 | + isFillHeight: { | |
43 | + type: Boolean, | |
44 | + default: true | |
45 | + }, | |
46 | + // 选中的颜色 | |
47 | + activeColor: { | |
48 | + type: String, | |
49 | + default: '#377dff' | |
50 | + }, | |
51 | + // 未选中颜色 | |
52 | + inactiveColor: { | |
53 | + type: String, | |
54 | + default: '#606266' | |
55 | + }, | |
56 | + // 是否显示边框色 | |
57 | + border: { | |
58 | + type: Boolean, | |
59 | + default: true | |
60 | + }, | |
61 | + // 右上角的角标提示信息 | |
62 | + badge: { | |
63 | + type: [String, Number, null], | |
64 | + default: uni.$u.props.tabbarItem.badge | |
65 | + }, | |
66 | + // 是否显示圆点,将会覆盖badge参数 | |
67 | + dot: { | |
68 | + type: Boolean, | |
69 | + default: uni.$u.props.tabbarItem.dot | |
70 | + }, | |
71 | + // 控制徽标的位置,对象或者字符串形式,可以设置top和right属性 | |
72 | + badgeStyle: { | |
73 | + type: [Object, String], | |
74 | + default: uni.$u.props.tabbarItem.badgeStyle | |
75 | + } | |
57 | 76 | }, |
58 | - // 是否显示边框色 | |
59 | - border: { | |
60 | - type: Boolean, | |
61 | - default: true | |
77 | + data() { | |
78 | + return { | |
79 | + systemInfo: base.systemInfo, | |
80 | + tabIndex: 0, | |
81 | + path: '', //当前路径 | |
82 | + //#ifdef MP | |
83 | + list: [{ | |
84 | + name: '首页', | |
85 | + url: 'pages/index/index', | |
86 | + icon: '../../../static/home-un.png', | |
87 | + iconFill: '../../../static/home-yes.png' | |
88 | + }, | |
89 | + { | |
90 | + name: '设备', | |
91 | + url: 'pages/device/device', | |
92 | + icon: '../../../static/device-un.png', | |
93 | + iconFill: '../../../static/device-yes.png' | |
94 | + }, | |
95 | + { | |
96 | + name: '告警', | |
97 | + url: 'pages/alarm/alarm', | |
98 | + icon: '../../../static/alert-un.png', | |
99 | + iconFill: '../../../static/alert-yes.png', | |
100 | + badge: this.$store.state.badgeInfo | |
101 | + }, | |
102 | + { | |
103 | + name: '我的', | |
104 | + url: 'pages/personal/personal', | |
105 | + icon: '../../../static/my-un.png', | |
106 | + iconFill: '../../../static/my-yes.png' | |
107 | + } | |
108 | + ], | |
109 | + //#endif | |
110 | + //#ifdef APP-PLUS | |
111 | + list: [{ | |
112 | + name: '首页', | |
113 | + url: 'pages/index/index', | |
114 | + icon: '/static/home-un.png', | |
115 | + iconFill: '/static/home-yes.png' | |
116 | + }, | |
117 | + { | |
118 | + name: '设备', | |
119 | + url: 'pages/device/device', | |
120 | + icon: '/static/device-un.png', | |
121 | + iconFill: '/static/device-yes.png' | |
122 | + }, | |
123 | + { | |
124 | + name: '告警', | |
125 | + url: 'pages/alarm/alarm', | |
126 | + icon: '/static/alert-un.png', | |
127 | + iconFill: '/static/alert-yes.png', | |
128 | + badge: this.$store.state.badgeInfo | |
129 | + }, | |
130 | + { | |
131 | + name: '我的', | |
132 | + url: 'pages/personal/personal', | |
133 | + icon: '/static/my-un.png', | |
134 | + iconFill: '/static/my-yes.png' | |
135 | + } | |
136 | + ] | |
137 | + //#endif | |
138 | + }; | |
62 | 139 | }, |
63 | - // 右上角的角标提示信息 | |
64 | - badge: { | |
65 | - type: [String, Number, null], | |
66 | - default: uni.$u.props.tabbarItem.badge | |
140 | + created() { | |
141 | + //获取页面路径 | |
142 | + let currentPages = getCurrentPages(); | |
143 | + let page = currentPages[currentPages.length - 1]; | |
144 | + this.path = page.route; | |
145 | + if (this.list.length > 0) { | |
146 | + this.list.forEach((item, index) => { | |
147 | + if (this.path == item.url) { | |
148 | + this.tabIndex = index; | |
149 | + } | |
150 | + }); | |
151 | + } | |
67 | 152 | }, |
68 | - // 是否显示圆点,将会覆盖badge参数 | |
69 | - dot: { | |
70 | - type: Boolean, | |
71 | - default: uni.$u.props.tabbarItem.dot | |
153 | + computed: { | |
154 | + getAlarmBadge() { | |
155 | + return this.$store.state.badgeInfo | |
156 | + } | |
72 | 157 | }, |
73 | - // 控制徽标的位置,对象或者字符串形式,可以设置top和right属性 | |
74 | - badgeStyle: { | |
75 | - type: [Object, String], | |
76 | - default: uni.$u.props.tabbarItem.badgeStyle | |
77 | - } | |
78 | - }, | |
79 | - data() { | |
80 | - return { | |
81 | - systemInfo: base.systemInfo, | |
82 | - tabIndex: 0, | |
83 | - path: '', //当前路径 | |
84 | - //#ifdef MP | |
85 | - list: [ | |
86 | - { | |
87 | - name: '首页', | |
88 | - url: 'pages/index/index', | |
89 | - icon: '../../../static/home-un.png', | |
90 | - iconFill: '../../../static/home-yes.png' | |
91 | - }, | |
92 | - { | |
93 | - name: '设备', | |
94 | - url: 'pages/device/device', | |
95 | - icon: '../../../static/device-un.png', | |
96 | - iconFill: '../../../static/device-yes.png' | |
97 | - }, | |
98 | - { | |
99 | - name: '告警', | |
100 | - url: 'pages/alarm/alarm', | |
101 | - icon: '../../../static/alert-un.png', | |
102 | - iconFill: '../../../static/alert-yes.png', | |
103 | - badge: this.$store.state.badgeInfo | |
104 | - }, | |
105 | - { | |
106 | - name: '我的', | |
107 | - url: 'pages/personal/personal', | |
108 | - icon: '../../../static/my-un.png', | |
109 | - iconFill: '../../../static/my-yes.png' | |
158 | + methods: { | |
159 | + onTabbar(index) { | |
160 | + // this.list[2].badge = this.getAlarmBadge; | |
161 | + | |
162 | + if (this.list[index].url) { | |
163 | + if (this.path !== this.list[index].url) { | |
164 | + uni.switchTab({ | |
165 | + url: '/' + this.list[index].url | |
166 | + }); | |
167 | + } | |
110 | 168 | } |
111 | - ], | |
112 | - //#endif | |
113 | - //#ifdef APP-PLUS | |
114 | - list: [ | |
115 | - { | |
116 | - name: '首页', | |
117 | - url: 'pages/index/index', | |
118 | - icon: '/static/home-un.png', | |
119 | - iconFill: '/static/home-yes.png' | |
120 | - }, | |
121 | - { | |
122 | - name: '设备', | |
123 | - url: 'pages/device/device', | |
124 | - icon: '/static/device-un.png', | |
125 | - iconFill: '/static/device-yes.png' | |
126 | - }, | |
127 | - { | |
128 | - name: '告警', | |
129 | - url: 'pages/alarm/alarm', | |
130 | - icon: '/static/alert-un.png', | |
131 | - iconFill: '/static/alert-yes.png', | |
169 | + } | |
170 | + }, | |
171 | + watch: { | |
172 | + getAlarmBadge(oldValue, newValue) { | |
173 | + const oldRecord = this.list[2] | |
174 | + this.$set(this.list, 2, { | |
175 | + ...oldRecord, | |
132 | 176 | badge: this.$store.state.badgeInfo |
133 | - }, | |
134 | - { | |
135 | - name: '我的', | |
136 | - url: 'pages/personal/personal', | |
137 | - icon: '/static/my-un.png', | |
138 | - iconFill: '/static/my-yes.png' | |
139 | - } | |
140 | - ] | |
141 | - //#endif | |
142 | - }; | |
143 | - }, | |
144 | - created() { | |
145 | - //获取页面路径 | |
146 | - let currentPages = getCurrentPages(); | |
147 | - let page = currentPages[currentPages.length - 1]; | |
148 | - this.path = page.route; | |
149 | - if (this.list.length > 0) { | |
150 | - this.list.forEach((item, index) => { | |
151 | - if (this.path == item.url) { | |
152 | - this.tabIndex = index; | |
153 | - } | |
154 | - }); | |
155 | - } | |
156 | - }, | |
157 | - methods: { | |
158 | - onTabbar(index) { | |
159 | - this.list[2].badge = this.$store.state.badgeInfo; | |
177 | + }) | |
160 | 178 | |
161 | - if (this.list[index].url) { | |
162 | - if (this.path !== this.list[index].url) { | |
163 | - uni.switchTab({ | |
164 | - url: '/' + this.list[index].url | |
165 | - }); | |
166 | - } | |
167 | 179 | } |
168 | 180 | } |
169 | - } | |
170 | -}; | |
181 | + }; | |
171 | 182 | </script> |
172 | 183 | |
173 | 184 | <style lang="scss" scoped> |
174 | -.f-fixed { | |
175 | - position: fixed; | |
176 | - bottom: 0; | |
177 | - left: 0; | |
178 | - right: 0; | |
179 | - z-index: 1000; | |
180 | -} | |
185 | + .f-fixed { | |
186 | + position: fixed; | |
187 | + bottom: 0; | |
188 | + left: 0; | |
189 | + right: 0; | |
190 | + z-index: 1000; | |
191 | + } | |
181 | 192 | </style> | ... | ... |