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
<template>
<van-tabbar :fixed="false" v-model="activeIndex">
<template v-for="item,index in items">
<template v-if="!item.hidden">
<van-tabbar-item :key="item.name" :class="{'menu__item':true,'menu__item--active':index == activeIndex}">
<ion-icon slot="icon" :name="getIconName(item)"></ion-icon>
<ion-label>{{ item.caption }}</ion-label>
</van-tabbar-item>
</template>
</template>
</van-tabbar>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { ViewTool } from 'ibiz-core';
@Component({
components: {},
})
export default class AppMobMenuDefaultView extends Vue {
/**
* 菜单数据项
*
* @type {Array<any>}
* @memberof AppMobMenuDefaultView
*/
@Prop() public items!: Array<any>;
/**
* 计数器名称
*
* @type {string}
* @memberof AppMobMenuDefaultView
*/
@Prop() public counterName!: string;
/**
* 当前激活的菜单项
*
* @type {string}
* @memberof AppMobMenuDefaultView
*/
@Prop() public value?: number;
/**
* 当前激活的菜单项
*
* @type {string}
* @memberof AppMobMenuDefaultView
*/
get activeIndex() {
let index = this.items.findIndex((temp: any) => {
return temp.name === this.value;
});
return index;
}
/**
* 激活的菜单项变更
*
* @param {*} item
* @returns
* @memberof AppMobMenuDefaultView
*/
set activeIndex(index:any) {
if(!this.value){
return;
}
this.$emit('select', this.items[index].name);
if(this.items[index].getPSAppFunc?.appFuncType =='APPVIEW'){
sessionStorage.setItem('selectmenu',this.items[index]?.name || '');
}
}
/**
* 计数器数据
*
* @type {*}
* @memberof AppMobMenuDefaultView
*/
public counterdata: any = {};
/**
* 计数器
*
* @memberof AppMobMenuDefaultView
*/
public counterServide: any = null;
/**
* 图标
*
* @type {string}
* @memberof AppMobMenuDefaultView
*/
public getIconName(item: any) {
if (item.getPSSysImage?.cssClass) {
return ViewTool.setIcon(item.getPSSysImage?.cssClass);
} else {
return 'home';
}
}
/**
* 解析菜单模型数据
*
* @memberof AppMobMenuDefaultView
*/
public parseMenuData() {
const selectName = sessionStorage.getItem('selectmenu');
if(selectName){
this.$emit('default-select', selectName);
return;
}
let index = this.items.findIndex((temp: any) => {
return temp.opendefault;
});
if (index != -1) {
this.activeIndex = index;
this.$emit('default-select', this.items[index].name);
} else {
this.$emit('default-select', this.items?.[0]?.name);
}
}
/**
* 生命周期
*
* @memberof AppMobMenuDefaultView
*/
public mounted() {
this.parseMenuData();
}
/**
* vue 生命周期
*
* @memberof AppMobMenuDefaultView
*/
public destroyed() {
if (this.counterServide) {
this.counterServide.destroyCounter();
}
}
/**
* 加载计数器数据
*
* @returns {Promise<any>}
* @memberof AppMobMenuDefaultView
*/
public async loadCounterData(): Promise<any> {
// todo
// const counterServiceConstructor = window.counterServiceConstructor;
// this.counterServide = await counterServiceConstructor.getService(this.counterName);
}
}
</script>