feat: 重构微信端底部导航栏

src/web/templates/weixin/tabbar.html

@@ -19,34 +19,11 @@
 
 <div id="tabMesg" v-cloak>
   <van-tabbar v-model="tabActive" active-color="#2ABED1" inactive-color="#171826">
-    <van-tabbar-item @click="routeHref('/jylab/mainSearch',0)">
-      <span>首页</span>
+    <van-tabbar-item @click="routeHref(index)" v-for="(item, index) in tabList" :key="index" :badge="index === 2 ? getMsgCount : ''">
+      <span>{item.label}</span>
       <template #icon="props">
-        <img :src="props.active ? home.active : home.inactive" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item @click="routeHref('/swordfish/newhistorypush',1)">
-      <span>订阅</span>
-      <template #icon="props">
-        <img :src="props.active ? book.active : book.inactive" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item @click="routeHref('/weixin/frontPage/messageCenter/sess/index',2)" :class="{'a-badge':counts==0}" :badge="counts">
-      <span>消息</span>
-      <template #icon="props">
-        <img :src="props.active ? mesg.active : mesg.inactive" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item @click="routeHref('/page_treasurebox/index.html',3)">
-      <span>百宝箱</span>
-      <template #icon="props">
-        <img :src="props.active ? box.active : box.inactive" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item @click="routeHref('/front/wxMyOrder/myMenu',4)">
-      <span>我的</span>
-      <template #icon="props">
-        <img :src="props.active ? my.active : my.inactive" />
+        <img v-show="!props.active" :src="'/images/tabbar/' + item.icon + '.png'" />
+        <img v-show="props.active" :src="'/images/tabbar/' + item.icon + '_active.png'" />
       </template>
     </van-tabbar-item>
   </van-tabbar>
@@ -63,49 +40,95 @@
     return {
 			tabActive: 0,
 			counts: 0,
-			home: {
-				active: '/images/tabbar/home_active.png',
-				inactive: '/images/tabbar/home.png',
-			},
-			book: {
-				active: '/images/tabbar/book_active.png',
-				inactive: '/images/tabbar/book.png',
-			},
-			mesg: {
-				active: '/images/tabbar/mesg_active.png',
-				inactive: '/images/tabbar/mesg.png',
-			},
-			box: {
-				active: '/images/tabbar/box_active.png',
-				inactive: '/images/tabbar/box.png',
-			},
-			my: {
-				active: '/images/tabbar/mine_active.png',
-				inactive: '/images/tabbar/mine.png',
-			}
+            tabList: [
+              {
+                label: '首页',
+                icon: 'home',
+                url: '/jylab/mainSearch',
+                index: 0
+              },
+              {
+                label: '订阅',
+                icon: 'book',
+                url: '/swordfish/newhistorypush',
+                index: 1
+              },
+              {
+                label: '消息',
+                icon: 'mesg',
+                url: '/weixin/frontPage/messageCenter/sess/index',
+                index: 2
+              },
+              {
+                label: '百宝箱',
+                icon: 'box',
+                url: '/page_treasurebox/index.html',
+                index: 3
+              },
+              {
+                label: '我的',
+                icon: 'mine',
+                url: '/front/wxMyOrder/myMenu',
+                index: 4
+              },
+            ]
 		}
 	},
 	created() {
 		this.tabsCount()
-    this.tabActive = Number(getQueryString('msg'))
+        var uMsg = Number(getQueryString('msg') || this.getURLIndex())
+        this.tabActive = uMsg
 	},
+    computed: {
+      getMsgCount: function () {
+        return this.counts ? (this.counts > 99 ? '99+' : this.counts) : ''
+      }
+    },
 	methods: {
+        getURLIndex: function () {
+          try {
+            var tempUrl = this.findMapsForUrl(this.tabList, location.pathname)
+            if (tempUrl.length) {
+              return tempUrl[0].index
+            } else {
+              return ''
+            }
+          } catch (e) {
+            return ''
+          }
+        },
+        findMapsForUrl: function (arr, url) {
+          var tempReuslt = []
+          arr.forEach(function (v) {
+            if (url.indexOf(v.url) !== -1) {
+              tempReuslt.push(v)
+            }
+          })
+          return tempReuslt.sort(function(a,b) {
+            return b.url.length - a.url.length
+          })
+        },
 		tabsCount() {
-      const _this = this
-      $.ajax({
-        type:'GET',
-        url:'/jymessageCenter/isMsgOpen',
-        data: {},
-        success:function (res) {
-          if (res && res.status == 1) {
-            _this.counts = res.data.count > 99 ? '99+' : res.data.count
+          const _this = this
+          $.ajax({
+            type:'GET',
+            url:'/jymessageCenter/isMsgOpen',
+            data: {},
+            success:function (res) {
+              if (res && res.status == 1 && res.data && res.data.count) {
+                _this.counts = res.data.count
+              }
+            }
+          })
+        },
+		routeHref(index) {
+          var goHref = this.tabList[index].url + '?msg=' + index
+          if (index === this.tabActive) {
+            location.replace(goHref)
+          } else {
+            location.href = goHref
           }
-        }
-      })
-    },
-		routeHref(url, status) {
-      location.href = url + '?msg=' + status
 		}
 	}
 })
-</script>
+</script>