Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 200e69d

Browse files
增加Badge的逻辑
1 parent 9dfc251 commit 200e69d

File tree

15 files changed

+698
-173
lines changed

15 files changed

+698
-173
lines changed

‎src/assets/js/MHCommonGroup.js‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ class MHCommonItem {
3333
// type 2 : 默认是 icon+title+switch
3434
// type 3 : 默认是 icon+title+avatar+>
3535
// type 4 : 默认是 icon+title+qrcode+>
36+
// type 5 : 默认是 icon+title+avatar+dot+>
3637
type = 0;
3738
tapHighlight = true; // 是否点击高亮
3839
// 行高
@@ -146,9 +147,34 @@ class MHCommonItemAvatar extends MHCommonItem {
146147
this.avatar = avatar;
147148
}
148149
}
150+
151+
// type 5 : 默认是 icon+title+avatar+dot+>
152+
class MHCommonItemMoments extends MHCommonItem {
153+
// 用户头像
154+
avatar = "";
155+
constructor({
156+
icon = "",
157+
title = "",
158+
type = 5,
159+
name = "",
160+
avatar = "",
161+
} = {}) {
162+
// must调用父类
163+
super({
164+
icon: icon,
165+
title: title,
166+
type: type,
167+
name: name
168+
});
169+
this.avatar = avatar;
170+
}
171+
}
172+
173+
149174
export {
150175
MHCommonGroup,
151176
MHCommonItem,
152177
MHCommonItemSwitch,
153-
MHCommonItemAvatar
178+
MHCommonItemAvatar,
179+
MHCommonItemMoments
154180
};

‎src/assets/js/badge/badgeHelper.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// 处理badge的工具类
2+
export default (badge) => {
3+
// 容错处理
4+
if (!badge) {
5+
return {
6+
type: '',
7+
value: 0,
8+
text: '',
9+
show: false,
10+
dot: false
11+
}
12+
}
13+
14+
let type = badge.type
15+
let value = badge.value * 1
16+
let text = ''
17+
let show = false
18+
let dot = false
19+
if (type === 'new' && value > 0) {
20+
text = 'NEW'
21+
show = true
22+
dot = false
23+
} else if (type === 'digit' && value > 0) {
24+
text = value + ''
25+
show = true
26+
dot = false
27+
} else if (type === 'dot' && value > 0) {
28+
text = ''
29+
show = true
30+
dot = true
31+
} else if (type === 'none' && value > 0) {
32+
text = ''
33+
show = true
34+
dot = true
35+
}
36+
return {
37+
type: type,
38+
value: value,
39+
text: text,
40+
show: show,
41+
dot: dot
42+
}
43+
44+
}

‎src/components/actionSheet/ActionSheet.vue‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
<template>
22
<transition name="mh-actionsheet-fade">
3-
<div
4-
class="mh-mask"
5-
@click.stop="didClickItem(0)"
6-
v-show="currentValue"
7-
>
3+
<div class="mh-mask" @click.stop="didClickItem(0)" v-show="currentValue">
84
<!-- 禁止掉事件冒泡 -->
95
<transition name="mh-actionsheet-float">
10-
<div
11-
class="mh-actionsheet"
12-
@click.stop
13-
v-show="currentValue"
14-
>
15-
<div
16-
class="mh-actionsheet__title"
17-
v-if="title"
18-
>
6+
<div class="mh-actionsheet" @click.stop v-show="currentValue">
7+
<div class="mh-actionsheet__title" v-if="title">
198
<p class="mh-actionsheet__title-text">{{ title }}</p>
209
</div>
2110
<div class="mh-actionsheet__menu">
@@ -26,25 +15,19 @@
2615
:style="{ color: item.destructive ? 'red' : '#191919' }"
2716
@click="didClickItem(index + 1)"
2817
>
29-
<span
30-
v-if="item.iconfont"
31-
:class="item.iconfont"
32-
>&nbsp;</span>
18+
<span v-if="item.iconfont" :class="item.iconfont">&nbsp;</span>
3319
{{ item.title }}
3420
<span style="display:block;font-size:12px;color:#888">{{
3521
item.subtitle
36-
}}</span>
22+
}}</span>
3723
</div>
3824
</div>
3925
<div
4026
class="mh-actionsheet__action"
4127
v-if="cancelText"
4228
:style="{ 'margin-top': cancelText ? '6px' : '0' }"
4329
>
44-
<div
45-
class="mh-actionsheet__cell"
46-
@click="didClickItem(0)"
47-
>
30+
<div class="mh-actionsheet__cell" @click="didClickItem(0)">
4831
{{ cancelText }}
4932
</div>
5033
</div>

‎src/components/common/Common.vue‎

Lines changed: 56 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@
77
<div class="mh-group-body">
88
<a
99
class="mh-common__cell"
10-
v-for="(item,row) in group.items"
10+
v-for="(item,row) in group.items"
1111
:key="row"
12-
:class="{'_mh-cell-access':item.tapHighlight}"
13-
:style="{'line-height':item.rowHeight}"
14-
@click="didSelectRow(section,row)"
12+
:class="{'_mh-cell-access':item.tapHighlight}"
13+
:style="{'line-height':item.rowHeight}"
14+
@click="didSelectRow(section,row)"
1515
>
1616
<div class="mh-cell-header">
17-
<img class="mh-image" :class="{'margin-right16px':item.icon}" :src="imageSrc[item.icon]">
17+
<img
18+
class="mh-image"
19+
:class="{ 'margin-right16px': item.icon }"
20+
:src="imageSrc[item.icon]"
21+
/>
1822
</div>
1923
<div class="mh-cell-body">
2024
<div class="mh-body">
@@ -28,16 +32,36 @@
2832
width="20"
2933
height="20"
3034
alt
31-
v-if="item.type===4"
32-
>
35+
v-if="item.type===4"
36+
/>
3337
<!-- 头像 -->
34-
<img :src="item.avatar" alt v-if="item.type===3" height="66px" width="66px">
38+
<img
39+
:src="item.avatar"
40+
alt
41+
v-if="item.type === 3"
42+
height="66px"
43+
width="66px"
44+
/>
45+
<!-- 朋友圈 -->
46+
<div
47+
class="footer__moments"
48+
v-if="item.type === 5 && item.avatar.length !== 0"
49+
>
50+
<img :src="item.avatar" alt="" />
51+
<span class="weui-badge weui-badge_dot"></span>
52+
</div>
53+
<!-- 右箭头 -->
3554
<img
3655
class="mh-right-arrow"
3756
src="@/assets/images/common/tableview_arrow_8x13.png"
38-
v-if="item.type===0 || item.type === 3 || item.type === 4"
39-
>
40-
<mt-switch v-if="item.type===2" v-model="item.off"></mt-switch>
57+
v-if="
58+
item.type === 0 ||
59+
item.type === 3 ||
60+
item.type === 4 ||
61+
item.type === 5
62+
"
63+
/>
64+
<mt-switch v-if="item.type === 2" v-model="item.off"></mt-switch>
4165
</div>
4266
</div>
4367
</a>
@@ -243,6 +267,18 @@ export default {
243267
font-size: 15px;
244268
}
245269
270+
.footer__moments {
271+
position: relative;
272+
}
273+
274+
.footer__moments img {
275+
display: block;
276+
width: 35px;
277+
height: 35px;
278+
border-radius: 4px;
279+
position: relative;
280+
}
281+
246282
/* 修改第三方组件的css */
247283
/* CMH TODO:修改第三方组件的CSS样式
248284
A:[【vue scoped 样式修改 】框架或插件组件样式更改及/deep/ 警告](https://blog.csdn.net/weixin_41000111/article/details/80450397)
@@ -251,5 +287,13 @@ A:[【vue scoped 样式修改 】框架或插件组件样式更改及/deep/
251287
border-color: #57be6a;
252288
background-color: #57be6a;
253289
}
254-
</style>
255290
291+
.weui-badge {
292+
position: absolute;
293+
right: 0;
294+
top: 0;
295+
-webkit-transform: translate3d(50%, -20%, 0);
296+
transform: translate3d(50%, -20%, 0);
297+
z-index: 2;
298+
}
299+
</style>

‎src/components/tabBar/TabBar.vue‎

Lines changed: 49 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@
88
>
99
<span class="mh-tab-icon-box">
1010
<img class="mh-tab-icon" :src="getMainFrameImage" alt />
11-
<span class="mh-tab-badge">9</span>
11+
<span
12+
v-show="mainframe.show"
13+
class="weui-badge"
14+
:class="{ 'weui-badge_dot': mainframe.dot }"
15+
>{{ mainframe.text }}
16+
</span>
1217
</span>
1318
<span class="mh-tab-label">微信</span>
1419
</router-link>
@@ -18,33 +23,54 @@
1823
replace
1924
@click.native.prevent="itemDidClicked(1)"
2025
>
21-
<img class="mh-tab-icon" :src="getContactsImage" alt />
22-
26+
<span class="mh-tab-icon-box">
27+
<img class="mh-tab-icon" :src="getContactsImage" alt />
28+
</span>
2329
<span class="mh-tab-label">通讯录</span>
2430
</router-link>
31+
<!-- 发现 -->
2532
<router-link
2633
class="mh-tab-item"
2734
to="/homepage/discover"
2835
replace
2936
@click.native.prevent="itemDidClicked(2)"
3037
>
31-
<img class="mh-tab-icon" :src="getDiscoverImage" alt />
38+
<span class="mh-tab-icon-box">
39+
<img class="mh-tab-icon" :src="getDiscoverImage" alt />
40+
<span
41+
v-show="discover.show"
42+
class="weui-badge"
43+
:class="{ 'weui-badge_dot': discover.dot }"
44+
>{{ discover.text }}
45+
</span>
46+
</span>
3247
<span class="mh-tab-label">发现</span>
3348
</router-link>
49+
<!-- 我 -->
3450
<router-link
3551
class="mh-tab-item"
3652
to="/homepage/profile"
3753
replace
3854
@click.native.prevent="itemDidClicked(3)"
3955
>
40-
<img class="mh-tab-icon" :src="getProfileImage" alt />
56+
<span class="mh-tab-icon-box">
57+
<img class="mh-tab-icon" :src="getProfileImage" alt />
58+
<span
59+
v-show="profile.show"
60+
class="weui-badge"
61+
:class="{ 'weui-badge_dot': profile.dot }"
62+
>{{ profile.text }}
63+
</span>
64+
</span>
4165
<span class="mh-tab-label">我</span>
4266
</router-link>
4367
</nav>
4468
</template>
4569

4670
<script>
71+
import { mapState } from "vuex";
4772
export default {
73+
name: "tab-bar",
4874
data() {
4975
return {
5076
// 初始化数据
@@ -63,6 +89,11 @@ export default {
6389
this.selectedProfile = name === "profile" ? 1 : 0;
6490
},
6591
92+
mounted() {
93+
console.log("回答哈哈都是");
94+
console.log(this.profile);
95+
},
96+
6697
methods: {
6798
// 按钮点击
6899
itemDidClicked(index) {
@@ -92,12 +123,24 @@ export default {
92123
let sel = require("../../assets/images/tabBar/tabbar_meHL_23x23.png");
93124
let nor = require("../../assets/images/tabBar/tabbar_me_23x23.png");
94125
return this.selectedProfile ? sel : nor;
95-
}
126+
},
127+
...mapState({
128+
profile: state => state.badge.profile,
129+
mainframe: state => state.badge.mainframe,
130+
discover: state => state.badge.discover
131+
})
96132
}
97133
};
98134
</script>
99135

100136
<style lang="scss" scoped>
137+
// 第三方样式
138+
.weui-badge {
139+
position: absolute;
140+
left: 18px;
141+
top: -2px;
142+
}
143+
101144
// tabBar
102145
.mh-tab-bar {
103146
display: -webkit-box;
@@ -117,7 +160,6 @@ export default {
117160
// 该类名,解决 tabbar 点击无法切换的问题
118161
.mh-tab-bar .mh-tab-item {
119162
flex: auto;
120-
overflow: hidden;
121163
height: 49px;
122164
text-align: center;
123165
vertical-align: middle;
@@ -151,23 +193,4 @@ export default {
151193
display: inline-block;
152194
text-overflow: ellipsis;
153195
}
154-
155-
.mh-tab-bar .mh-tab-item .mh-tab-icon-box .mh-tab-badge {
156-
position: absolute;
157-
display: inline-block;
158-
top: -2px;
159-
left: 100%;
160-
margin-left: -5px;
161-
min-width: 8px;
162-
font-size: 12px; // 谷歌最小字体 12px
163-
line-height: 1;
164-
border-radius: 12px;
165-
padding: 3px 5px;
166-
color: #fff;
167-
background-color: red;
168-
-webkit-transform-origin: 0 0;
169-
transform-origin: 0 0;
170-
-webkit-transform: scale(0.5);
171-
transform: scale(0.8);
172-
}
173196
</style>

‎src/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue'
22
import App from './App.vue'
33
import router from './router'
4-
import store from './store'
4+
import store from './store/store'
55

66
Vue.config.productionTip = false
77

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /