TBtools-顶部导航新增会员标示

htmldev/TBTools/src/App.vue

@@ -10,10 +10,12 @@ import { mapActions } from 'vuex'
 export default {
   created () {
     this.getWebConfig()
+    this.fetchUserConfig()
   },
   methods: {
     ...mapActions({
-      getWebConfig: 'common/getWebConfig'
+      getWebConfig: 'common/getWebConfig',
+      fetchUserConfig: 'user/fetchUserConfig'
     })
   }
 }

htmldev/TBTools/src/store/modules/user.js

@@ -1,10 +1,35 @@
+import httpRequest from '../../utils/httpRequest'
+import { Message } from 'element-ui'
+import Vue from 'vue'
+
 export default {
   namespaced: true,
   state: {
     id: 0,
     name: '',
     token: '', // 登录返回的token
-    userPhone: ''
+    userPhone: '',
+    userconfig: {
+      userVip: 0 // 用户VIP：0非会员 1VIP(金币) 2包月会员 3包年会员
+    }
+  },
+  actions: {
+    fetchUserConfig ({ commit }) {
+      if (!Vue.cookie.get('token')) {
+        return
+      }
+      httpRequest({
+        url: httpRequest.adornUrl('/user/config'),
+        method: 'get',
+        params: ''
+      }).then(({ data }) => {
+        if (data.status) {
+          commit('updateUserconfig', data.data)
+          return
+        }
+        Message.error(data.msg)
+      })
+    }
   },
   mutations: {
     updateId (state, id) {
@@ -18,6 +43,9 @@ export default {
     },
     updateUserPhone (state, val) {
       state.userPhone = val
+    },
+    updateUserconfig (state, val = {}) {
+      state.userconfig = val
     }
   }
 }

htmldev/TBTools/src/views/main-navbar.vue

@@ -22,11 +22,6 @@
                     <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
                   </el-dropdown-item>
                 </div>
-                <!--生意参谋工具-->
-                <!--验号&淘客查询-->
-                <!--运营工具-->
-                <!--sku监控-->
-                <!--淘宝详情页工具 toolsRoutes-->
               </div>
             </el-dropdown-menu>
           </el-dropdown>
@@ -37,7 +32,10 @@
       </ul>
       <template v-if="token">
         <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
-          <span class="el-dropdown-link">我的</span>
+          <span class="el-dropdown-link TT-el-dropdown-link">
+            <img :src="userVipLogo" alt="" v-show="userVipLogo">
+            <p v-show="!userVipLogo">我的</p>
+          </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>
               <router-link :to="{path: '/mine'}">个人中心</router-link>
@@ -77,15 +75,25 @@ export default {
       toolsNav1: toolsNav1,
       toolsNav2: toolsNav2,
       toolsNav3: toolsNav3,
-      toolsRoutes: toolsRoutes
+      toolsRoutes: toolsRoutes,
+      vip1Logo: require('../../static/img/mine/vip_1@2x.png'),
+      vip2Logo: require('../../static/img/mine/vip_2@2x.png')
     }
   },
   computed: {
     ...mapState({
-      webConfig: state => state.common.webConfig
+      webConfig: state => state.common.webConfig,
+      payConfig: state => state.user.userconfig
     }),
     token () {
       return this.$store.state.user.token || Vue.cookie.get('token')
+    },
+    userVipLogo () {
+      const { userVip } = this.payConfig
+      if (Object.prototype.toString.call(userVip) !== '[object Number]') {
+        return ''
+      }
+      return ['', this.vip1Logo, this.vip2Logo, ''][userVip]
     }
   },
   methods: {
@@ -202,4 +210,15 @@ a {
 .btn-register {
   margin-left: 16px;
 }
+
+.TT-el-dropdown-link {
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+  }
+}
 </style>

htmldev/TBTools/src/views/modules/mine/pay/pay-check.vue

@@ -52,30 +52,25 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex'
+
 export default {
   name: 'pay-check',
   data () {
-    return {
-      payConfig: {}
-    }
+    return {}
+  },
+  computed: {
+    ...mapState({
+      payConfig: state => state.user.userconfig
+    })
   },
   activated () {
-    this.funInit()
+    this.fetchUserConfig()
   },
   methods: {
-    funInit () {
-      this.$http({
-        url: this.$http.adornUrl('/user/config'),
-        method: 'get',
-        params: this.$http.adornParams()
-      }).then(({ data }) => {
-        if (data.status) {
-          this.payConfig = data.data
-          return
-        }
-        this.$message.error(data.msg)
-      })
-    }
+    ...mapActions({
+      fetchUserConfig: 'user/fetchUserConfig'
+    })
   }
 }
 </script>