增加Badge的逻辑

Author: CoderMikeHe

src/assets/js/MHCommonGroup.js

@@ -33,6 +33,7 @@ class MHCommonItem {
   // type 2 ： 默认是 icon+title+switch
   // type 3 ： 默认是 icon+title+avatar+>
   // type 4 :  默认是 icon+title+qrcode+>
+  // type 5 :  默认是 icon+title+avatar+dot+>
   type = 0;
   tapHighlight = true; // 是否点击高亮
   // 行高
@@ -146,9 +147,34 @@ class MHCommonItemAvatar extends MHCommonItem {
     this.avatar = avatar;
   }
 }
+
+// type 5 :  默认是 icon+title+avatar+dot+>
+class MHCommonItemMoments extends MHCommonItem {
+  // 用户头像
+  avatar = "";
+  constructor({
+    icon = "",
+    title = "",
+    type = 5,
+    name = "",
+    avatar = "",
+  } = {}) {
+    // must调用父类
+    super({
+      icon: icon,
+      title: title,
+      type: type,
+      name: name
+    });
+    this.avatar = avatar;
+  }
+}
+
+
 export {
   MHCommonGroup,
   MHCommonItem,
   MHCommonItemSwitch,
-  MHCommonItemAvatar
+  MHCommonItemAvatar,
+  MHCommonItemMoments
 };

src/assets/js/badge/badgeHelper.js

@@ -0,0 +1,44 @@
+// 处理badge的工具类
+export default (badge) => {
+  // 容错处理
+  if (!badge) {
+    return {
+      type: '',
+      value: 0,
+      text: '',
+      show: false,
+      dot: false
+    }
+  }
+
+  let type = badge.type
+  let value = badge.value * 1
+  let text = ''
+  let show = false
+  let dot = false
+  if (type === 'new' && value > 0) {
+    text = 'NEW'
+    show = true
+    dot = false
+  } else if (type === 'digit' && value > 0) {
+    text = value + ''
+    show = true
+    dot = false
+  } else if (type === 'dot' && value > 0) {
+    text = ''
+    show = true
+    dot = true
+  } else if (type === 'none' && value > 0) {
+    text = ''
+    show = true
+    dot = true
+  }
+  return {
+    type: type,
+    value: value,
+    text: text,
+    show: show,
+    dot: dot
+  }
+
+}

src/components/actionSheet/ActionSheet.vue

@@ -1,21 +1,10 @@
 <template>
   <transition name="mh-actionsheet-fade">
-    <div
-      class="mh-mask"
-      @click.stop="didClickItem(0)"
-      v-show="currentValue"
-    >
+    <div class="mh-mask" @click.stop="didClickItem(0)" v-show="currentValue">
       <!-- 禁止掉事件冒泡 -->
       <transition name="mh-actionsheet-float">
-        <div
-          class="mh-actionsheet"
-          @click.stop
-          v-show="currentValue"
-        >
-          <div
-            class="mh-actionsheet__title"
-            v-if="title"
-          >
+        <div class="mh-actionsheet" @click.stop v-show="currentValue">
+          <div class="mh-actionsheet__title" v-if="title">
             <p class="mh-actionsheet__title-text">{{ title }}</p>
           </div>
           <div class="mh-actionsheet__menu">
@@ -26,25 +15,19 @@
               :style="{ color: item.destructive ? 'red' : '#191919' }"
               @click="didClickItem(index + 1)"
             >
-              <span
-                v-if="item.iconfont"
-                :class="item.iconfont"
-              >&nbsp;</span>
+              <span v-if="item.iconfont" :class="item.iconfont">&nbsp;</span>
               {{ item.title }}
               <span style="display:block;font-size:12px;color:#888">{{
                 item.subtitle
-                }}</span>
+              }}</span>
             </div>
           </div>
           <div
             class="mh-actionsheet__action"
             v-if="cancelText"
             :style="{ 'margin-top': cancelText ? '6px' : '0' }"
           >
-            <div
-              class="mh-actionsheet__cell"
-              @click="didClickItem(0)"
-            >
+            <div class="mh-actionsheet__cell" @click="didClickItem(0)">
               {{ cancelText }}
             </div>
           </div>

src/components/common/Common.vue

@@ -7,14 +7,18 @@
     <div class="mh-group-body">
       <a
         class="mh-common__cell"
-        v-for="(item,row) in group.items"
+        v-for="(item, row) in group.items"
         :key="row"
-        :class="{'_mh-cell-access':item.tapHighlight}"
-        :style="{'line-height':item.rowHeight}"
-        @click="didSelectRow(section,row)"
+        :class="{ '_mh-cell-access': item.tapHighlight }"
+        :style="{ 'line-height': item.rowHeight }"
+        @click="didSelectRow(section, row)"
       >
         <div class="mh-cell-header">
-          <img class="mh-image" :class="{'margin-right16px':item.icon}" :src="imageSrc[item.icon]">
+          <img
+            class="mh-image"
+            :class="{ 'margin-right16px': item.icon }"
+            :src="imageSrc[item.icon]"
+          />
         </div>
         <div class="mh-cell-body">
           <div class="mh-body">
@@ -28,16 +32,36 @@
               width="20"
               height="20"
               alt
-              v-if="item.type===4"
-            >
+              v-if="item.type === 4"
+            />
             <!-- 头像 -->
-            <img :src="item.avatar" alt v-if="item.type===3" height="66px" width="66px">
+            <img
+              :src="item.avatar"
+              alt
+              v-if="item.type === 3"
+              height="66px"
+              width="66px"
+            />
+            <!-- 朋友圈 -->
+            <div
+              class="footer__moments"
+              v-if="item.type === 5 && item.avatar.length !== 0"
+            >
+              <img :src="item.avatar" alt="" />
+              <span class="weui-badge weui-badge_dot"></span>
+            </div>
+            <!-- 右箭头 -->
             <img
               class="mh-right-arrow"
               src="@/assets/images/common/tableview_arrow_8x13.png"
-              v-if="item.type===0 || item.type === 3 || item.type === 4"
-            >
-            <mt-switch v-if="item.type===2" v-model="item.off"></mt-switch>
+              v-if="
+                item.type === 0 ||
+                  item.type === 3 ||
+                  item.type === 4 ||
+                  item.type === 5
+              "
+            />
+            <mt-switch v-if="item.type === 2" v-model="item.off"></mt-switch>
           </div>
         </div>
       </a>
@@ -243,6 +267,18 @@ export default {
   font-size: 15px;
 }
 
+.footer__moments {
+  position: relative;
+}
+
+.footer__moments img {
+  display: block;
+  width: 35px;
+  height: 35px;
+  border-radius: 4px;
+  position: relative;
+}
+
 /* 修改第三方组件的css */
 /* CMH TODO：修改第三方组件的CSS样式
 A：[【vue scoped 样式修改 】框架或插件组件样式更改及/deep/ 警告](https://blog.csdn.net/weixin_41000111/article/details/80450397) 
@@ -251,5 +287,13 @@ A：[【vue scoped 样式修改 】框架或插件组件样式更改及/deep/ 
   border-color: #57be6a;
   background-color: #57be6a;
 }
-</style>
 
+.weui-badge {
+  position: absolute;
+  right: 0;
+  top: 0;
+  -webkit-transform: translate3d(50%, -20%, 0);
+  transform: translate3d(50%, -20%, 0);
+  z-index: 2;
+}
+</style>

src/components/tabBar/TabBar.vue

@@ -8,7 +8,12 @@
     >
       <span class="mh-tab-icon-box">
         <img class="mh-tab-icon" :src="getMainFrameImage" alt />
-        <span class="mh-tab-badge">9</span>
+        <span
+          v-show="mainframe.show"
+          class="weui-badge"
+          :class="{ 'weui-badge_dot': mainframe.dot }"
+          >{{ mainframe.text }}
+        </span>
       </span>
       <span class="mh-tab-label">微信</span>
     </router-link>
@@ -18,33 +23,54 @@
       replace
       @click.native.prevent="itemDidClicked(1)"
     >
-      <img class="mh-tab-icon" :src="getContactsImage" alt />
-
+      <span class="mh-tab-icon-box">
+        <img class="mh-tab-icon" :src="getContactsImage" alt />
+      </span>
       <span class="mh-tab-label">通讯录</span>
     </router-link>
+    <!-- 发现 -->
     <router-link
       class="mh-tab-item"
       to="/homepage/discover"
       replace
       @click.native.prevent="itemDidClicked(2)"
     >
-      <img class="mh-tab-icon" :src="getDiscoverImage" alt />
+      <span class="mh-tab-icon-box">
+        <img class="mh-tab-icon" :src="getDiscoverImage" alt />
+        <span
+          v-show="discover.show"
+          class="weui-badge"
+          :class="{ 'weui-badge_dot': discover.dot }"
+          >{{ discover.text }}
+        </span>
+      </span>
       <span class="mh-tab-label">发现</span>
     </router-link>
+    <!-- 我 -->
     <router-link
       class="mh-tab-item"
       to="/homepage/profile"
       replace
       @click.native.prevent="itemDidClicked(3)"
     >
-      <img class="mh-tab-icon" :src="getProfileImage" alt />
+      <span class="mh-tab-icon-box">
+        <img class="mh-tab-icon" :src="getProfileImage" alt />
+        <span
+          v-show="profile.show"
+          class="weui-badge"
+          :class="{ 'weui-badge_dot': profile.dot }"
+          >{{ profile.text }}
+        </span>
+      </span>
       <span class="mh-tab-label">我</span>
     </router-link>
   </nav>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
+  name: "tab-bar",
   data() {
     return {
       // 初始化数据
@@ -63,6 +89,11 @@ export default {
     this.selectedProfile = name === "profile" ? 1 : 0;
   },
 
+  mounted() {
+    console.log("回答哈哈都是");
+    console.log(this.profile);
+  },
+
   methods: {
     // 按钮点击
     itemDidClicked(index) {
@@ -92,12 +123,24 @@ export default {
       let sel = require("../../assets/images/tabBar/tabbar_meHL_23x23.png");
       let nor = require("../../assets/images/tabBar/tabbar_me_23x23.png");
       return this.selectedProfile ? sel : nor;
-    }
+    },
+    ...mapState({
+      profile: state => state.badge.profile,
+      mainframe: state => state.badge.mainframe,
+      discover: state => state.badge.discover
+    })
   }
 };
 </script>
 
 <style lang="scss" scoped>
+// 第三方样式
+.weui-badge {
+  position: absolute;
+  left: 18px;
+  top: -2px;
+}
+
 // tabBar
 .mh-tab-bar {
   display: -webkit-box;
@@ -117,7 +160,6 @@ export default {
 // 该类名，解决 tabbar 点击无法切换的问题
 .mh-tab-bar .mh-tab-item {
   flex: auto;
-  overflow: hidden;
   height: 49px;
   text-align: center;
   vertical-align: middle;
@@ -151,23 +193,4 @@ export default {
   display: inline-block;
   text-overflow: ellipsis;
 }
-
-.mh-tab-bar .mh-tab-item .mh-tab-icon-box .mh-tab-badge {
-  position: absolute;
-  display: inline-block;
-  top: -2px;
-  left: 100%;
-  margin-left: -5px;
-  min-width: 8px;
-  font-size: 12px; // 谷歌最小字体 12px
-  line-height: 1;
-  border-radius: 12px;
-  padding: 3px 5px;
-  color: #fff;
-  background-color: red;
-  -webkit-transform-origin: 0 0;
-  transform-origin: 0 0;
-  -webkit-transform: scale(0.5);
-  transform: scale(0.8);
-}
 </style>

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store from './store/store'
 
 Vue.config.productionTip = false