|
|
@@ -0,0 +1,148 @@
|
|
|
+
|
|
|
+<link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css />
|
|
|
+<style>
|
|
|
+ [v-cloak] {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ #tabMesg .van-tabbar-item__icon img {
|
|
|
+ width: .48rem;
|
|
|
+ height: .48rem;
|
|
|
+ }
|
|
|
+ #tabMesg .van-tabbar-item .van-tabbar-item__icon .van-info {
|
|
|
+ margin-top: .12rem;
|
|
|
+ background: #FB483D;
|
|
|
+ }
|
|
|
+ #tabMesg .a-badge .van-tabbar-item__icon .van-info{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<div id="tabMesg" v-cloak>
|
|
|
+ <van-tabbar v-model="tabActive" active-color="#2ABED1" inactive-color="#171826">
|
|
|
+ <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 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>
|
|
|
+</div>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js></script>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js></script>
|
|
|
+<script src='{{Msg "seo" "cdn"}}/common-module/messageCenter/js/func.js?v={{Msg "seo" "version"}}'></script>
|
|
|
+<script>
|
|
|
+new Vue({
|
|
|
+ el: '#tabMesg',
|
|
|
+ delimiters: ['{', '}'],
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ tabActive: 0,
|
|
|
+ counts: 0,
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
+ label: '首页',
|
|
|
+ icon: 'home',
|
|
|
+ url: '/jy_mobile/tabbar/home',
|
|
|
+ index: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '订阅',
|
|
|
+ icon: 'book',
|
|
|
+ url: '/jy_mobile/tabbar/subscribe',
|
|
|
+ index: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '消息',
|
|
|
+ icon: 'mesg',
|
|
|
+ url: '/jyapp/frontPage/messageCenter/sess/index',
|
|
|
+ index: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '百宝箱',
|
|
|
+ icon: 'box',
|
|
|
+ url: '/page_treasurebox/index.html',
|
|
|
+ index: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '我的',
|
|
|
+ icon: 'mine',
|
|
|
+ url: '/jyapp/free/me',
|
|
|
+ index: 4
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ Object.assign(this.$data, this.$options.data())
|
|
|
+ var uMsg = Number(this.getQueryString('msg') || this.getURLIndex())
|
|
|
+ this.tabActive = uMsg
|
|
|
+ this.tabsCount()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getMsgCount: function () {
|
|
|
+ return this.counts ? (this.counts > 99 ? '99+' : this.counts) : ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取url中"?"符后的字符串并正则匹配
|
|
|
+ getQueryString(name) {
|
|
|
+ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
|
+ var r = window.location.search.substr(1).match(reg);
|
|
|
+ var context = "";
|
|
|
+ if (r != null)
|
|
|
+ context = r[2];
|
|
|
+ reg = null;
|
|
|
+ r = null;
|
|
|
+ return context == null || context == "" || context == "undefined" ? "" : context;
|
|
|
+ },
|
|
|
+ getURLIndex: function () {
|
|
|
+ try {
|
|
|
+ var tempUrl = this.findMapsForUrl(this.tabList, location.pathname)
|
|
|
+ if (tempUrl.length) {
|
|
|
+ return tempUrl[0].index
|
|
|
+ } else if (location.pathname.indexOf('/swordfish/historypush') !== -1) {
|
|
|
+ return 1
|
|
|
+ } 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/getCount?t=' + Date.now(),
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
