feat:布展单元、读者功能联调

env.development

 NODE_ENV = 'development'
 VUE_APP_CURRENTMODE = 'dev'
-VUE_APP_BASE_API = 'http://172.24.100.189:8080'
+# VUE_APP_BASE_API = 'http://172.24.100.189:8080'
\ No newline at end of file
+VUE_APP_BASE_API = 'http://222.85.214.245:9062/api'
\ No newline at end of file

package.json

@@ -17,6 +17,8 @@
     "js-cookie": "^3.0.1",
     "mockjs": "^1.1.0",
     "qrcodejs2": "^0.0.2",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo": "^2.8.0",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/App.vue

@@ -13,22 +13,5 @@ export default {
 };
 </script>
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-html,
-body {
-  margin: 0;
-  padding: 0;
-  background: #f7f7f7;
-  box-sizing: border-box;
-}
-div,
-span,
-ul,
-li {
-  box-sizing: border-box;
-}
+@import url('@/assets/styles/index.scss');
 </style>

src/api/user.js

 import request from '@/utils/request'
 
+
+export function getVerify() {
+  return request({
+    url: '/sys/getVerify',
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+
 export function login(data) {
   return request({
-    url: '/user/login',
+    url: 'sys/user/login',
     method: 'post',
     data
   })
@@ -16,57 +26,31 @@ export function updatePassword(data) {
   })
 }
 
-export function getInfo(token) {
-  return request({
-    url: '/user/getUserInfo',
-    method: 'get',
-    params: {
-      token
-    }
-  })
-}
-
 export function logout() {
   return request({
-    url: '/qljc-web-vue/user/logout',
-    method: 'post'
+    url: '/sys/user/logout',
+    method: 'get'
   })
 }
-
-// 手机短信验证
-export function sendSmsCode(params) {
+// 收藏、取消收藏
+export function toggleCollect(data) {
   return request({
-    url: '/auth/api/smsCaptcha',
+    url: '/bizCollection/update',
     method: 'post',
-    params: params
-  })
-}
-/** *
- * 获取eventType常量
- */
-export function getEventTypePage() {
-  return request({
-    url: '/eventType/page?size=20',
-    method: 'get'
+    data
   })
 }
 
-
-/** *
- * 获取用户姓名
- */
-export function getUserNameById(params) {
+// 点赞、取消点赞
+export function toggleLike(data) {
   return request({
-    url: '/auth/user/userInfo',
-    method: 'get',
-    params
+    url: '/bizLove/update',
+    method: 'post',
+    data
   })
 }
 
 
-
-
-
 // /** *
 //  * 上传头像
 //  */
@@ -91,5 +75,3 @@ export function getUserNameById(params) {
 //     params
 //   })
 // }
-
-

src/assets/styles/index.scss

+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    background: #f7f7f7;
+    box-sizing: border-box;
+  }
+  div,
+  span,
+  ul,
+  li {
+    box-sizing: border-box;
+  }
\ No newline at end of file

src/components/MenuList/index.vue

+<!-- -->
+<template>
+  <el-menu
+    class="sidebar-el-menu"
+    default-active=""
+    @open="handleOpen"
+    @close="handleClose"
+    :collapse="isCollapse"
+  >
+    <!-- 遍历菜单 -->
+    <template v-for="item in items">
+      <!-- 含有子菜单 -->
+      <template v-if="item.children">
+        <!-- 第一层 含有子菜单菜单 -->
+        <el-submenu :index="item.title" :key="item.title">
+          <template slot="title">
+            <span slot="title">{{ item.title }}</span>
+          </template>
+          <menu-list :items="item.children"></menu-list
+          ><!--递归调用-->
+        </el-submenu>
+      </template>
+
+      <!-- 第一层 不含子菜单  -->
+      <template v-else>
+        <el-menu-item :index="item.title" :key="item.title">
+          <!-- <i :class="item.meta.icon"></i> -->
+          <span slot="title">{{ item.title }}</span>
+        </el-menu-item>
+      </template>
+    </template>
+  </el-menu>
+</template>
+
+<script>
+export default {
+  name: "MenuList",
+  props: {
+    items: Array,
+    isCollapse: Boolean,
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/NavBar/index.vue

@@ -8,19 +8,20 @@
             :to="item.path"
             v-for="(item, index) in pages"
             :key="index"
-            class="tab-item"
+            :class="['tab-item', currentTab == item ? 'active' : '']"
+            @click="handleClickTab(item)"
             >{{ item.name }}</router-link
           >
         </div>
         <div class="operation">
-          <span v-if="isLogged">欢迎你，{{ userInfo.userName }}</span>
-          <router-link v-if="!isLogged" to="/login" class="operation-item"
+          <span v-if="hasToken" class="operation-item">欢迎你，{{ userInfo.username }}</span>
+          <router-link v-if="!hasToken" to="/login" class="operation-item"
             >登陆</router-link
-          >|
-          <router-link to="/personal" class="operation-item"
+          >
+          <router-link v-if="hasToken" to="/personal" class="operation-item"
             >个人中心</router-link
-          >|
-          <span class="logout">
+          >
+          <span class="logout" v-if="hasToken">
             <el-popover
               placement="bottom"
               width="200"
@@ -54,8 +55,8 @@ export default {
   name: "NavBar",
   computed: {
     ...mapGetters(["token", "userInfo"]),
-    isLogged() {
-      return this.userInfo && this.userInfo.userName;
+    hasToken() {
+      return this.token;
     },
   },
   data() {
@@ -84,6 +85,7 @@ export default {
       ],
       userName: "",
       logoutDialogVisible: false,
+      currentTab: "",
     };
   },
   methods: {
@@ -92,6 +94,9 @@ export default {
       this.logoutDialogVisible = false;
       this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     },
+    handleClickTab(tab) {
+      this.currentTab = tab;
+    },
   },
 };
 </script>
@@ -117,6 +122,7 @@ a {
       font-size: 30px;
       // font-weight: bold;
       font-family: LiSu;
+      min-width: 330px;
       // color: #c8945b;
     }
     .right {
@@ -125,14 +131,29 @@ a {
       .tabs {
         display: flex;
         margin-right: 100px;
-        .tab-item{
-          margin-right: 80px;
+        .tab-item {
+          margin-right: 40px;
+          min-width: 64px;
           // color: #fff;
         }
+        .router-link-exact-active {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            bottom: -4px;
+            left: 0;
+            background-color: #000;
+          }
+        }
+        // .router-link-active{}
       }
       .operation {
+        min-width: 270px;
         .operation-item {
-          margin-right: 8px;
+          margin: 0 8px;
           cursor: pointer;
           // color: #fff;
         }

src/components/SvgIcon/index.vue

+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>