修改菜单的弹窗

ruoyi-ui/src/views/bookmark/index/index.vue

@@ -118,6 +118,7 @@
 <!--            <div class="aside-title"><i class="el-icon-s-flag" style="color: #569cd5"></i><span>RSS订阅</span></div>-->
 <!--            <div class="aside-title" @click="goRouter(7)"><i class="el-icon-collection"></i><span>功能管理</span></div>-->
             <div class="aside-title" @click="goRouter(6)"><i class="el-icon-delete" ></i><span>垃圾桶</span></div>
+            <div class="aside-title" @click="goRouter(12)"><i class="el-icon-house" ></i><span>我的导航</span></div>
 <!--            <div class="aside-title"><i class="el-icon-chat-dot-square"></i><span>意见反馈</span></div>-->
 <!--            <div class="aside-title" @click="goRouter(2)"><i class="el-icon-suitcase"></i><span>小工具</span></div>-->
             <div class="aside-title " style="margin-bottom: 100px"  @click="goRouter(11)"><i class="el-icon-setting"></i><span>更多设置</span></div>
@@ -984,6 +985,12 @@
               path: "/bkindex",
             })
             break;
+          case 12:
+            //用户中心
+            that.$router.push({
+              path: "/daohang",
+            })
+            break;
           default:
             that.$router.push({
               path: "/content",
@@ -1603,7 +1610,8 @@
 
 
 </style>
-<style scoped>
+<!--这里不能scoped-->
+<style >
 
   #popupDiv {
     position: absolute;

ruoyi-ui/src/views/daohang/index/index.vue

@@ -49,6 +49,7 @@
           <i class="el-icon-setting"></i>
           <i class="el-icon-sunrise-1"></i>
           <i class="el-icon-moon-night"></i>
+          <i class="el-icon-price-tag" @click="goRouter(3)"></i>
         </div>
 
       </el-header>
@@ -71,13 +72,13 @@
         <el-aside class="mains-left mbl" width="400px">
           <div class="label-title">
             <div class="title">
-              <el-dropdown trigger="click">
+              <el-dropdown trigger="click"  @command="handleCommand">
               <span class="el-dropdown-link menu-list">
                 最新收藏<i class="el-icon-caret-bottom el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item icon="el-icon-star-off">我的星标</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-star-off" command="asterisk">我的星标</el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-reading">稍后再读</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-reading" command="seeYouLater">稍后再读</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </div>
@@ -90,26 +91,24 @@
           </div>
           <el-divider class="mians-hr"></el-divider>
           <div class="contenList" v-infinite-scroll="load" style="overflow:auto">
-            <div v-for="o in count" :key="o" class="bookmarContext item">
+            <div v-for="item in bookmarkList" :key="item.bookmarkId" class="bookmarContext item">
 
               <div class="bookmar-title text-lenght">
-                {{'阿达瓦发我的发我法师法师法师法师法挖的挖的挖的挖的挖的挖的挖列表内容 ' + o }}
+                {{item.title}}
               </div>
               <div class="bookmark-tag-Time">
-                <div class="b-left text-lenght">#java #php 我是个簡介</div>
+                <div class="b-left text-lenght">{{item.description}}</div>
                 <div class="b-center">22小时前</div>
                 <div class="b-right">
                   <i class="el-icon-view">22</i>
                 </div>
 
               </div>
-
             </div>
           </div>
         </el-aside>
 
 
-
         <!-- 中间-->
         <el-main class="mains mbl" width="500px">
           <div class="mains-title">
@@ -123,7 +122,6 @@
                   <el-dropdown-item icon="el-icon-reading">稍后再读</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-
             </div>
             <div class="status">
               <span>最新</span>
@@ -132,7 +130,7 @@
             </div>
           </div>
           <el-divider class="mians-hr"></el-divider>
-          <div class="contenList" v-infinite-scroll="load" style="overflow:auto;">
+          <div class="contenList" v-infinite-scroll="load" style="overflow:auto;overflow-x: hidden">
             <el-row :gutter="10">
               <draggable
                 class="dragArea list-group"
@@ -140,24 +138,18 @@
                 :group="people"
                 @change="log"
               >
-
+                <el-col :xs="12" :sm="4" v-for="item in iconlist" :key="item.id" class="bookmarkUrl urlWd "
-              <el-col  :xs="12" :sm="4" v-for="item in iconlist" :key="item.id" class="bookmarkUrl urlWd " @click.native="urlOpen(item.icon)">
+                        @click.native="urlOpen(item.icon)">
                   <div class="bookmarkImg">
                     <img err-src="https://favicon.lucq.fun/?url=https://www.5118.com/" class="sousouicon"
                          :ng-src="'https://favicon.lucq.fun/?url='+item.icon"
                          :src="'https://favicon.lucq.fun/?url='+item.icon"/>
                   </div>
                   <div class="bookmarkTitle">
-
                     <div class="titles">{{item.title }}</div>
                     <div class="desc text-lenght">我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介我是个简介</div>
-
-
-
                   </div>
-
                 </el-col>
-
               </draggable>
             </el-row>
           </div>
@@ -198,9 +190,7 @@
                 <div class="b-right">
                   <i class="el-icon-view">22</i>
                 </div>
-
               </div>
-
             </div>
           </div>
         </el-aside>
@@ -214,6 +204,10 @@
 
 <script>
   import draggable from "vuedraggable";
+  import {
+    listByUserAndPolymerization
+  } from "@/api/bookmark/bookmark";
+
   export default {
     components: {draggable},
     data: function () {
@@ -271,10 +265,104 @@
           height: '100%',
           backgroundRepeat: 'no-repeat',
           backgroundSize: '100% 100%',
-        }
+        },
+        queryParams: {
+          pageNum: 1,
+          pageSize: 15,
+          userid: undefined,
+          title: undefined,
+          url: undefined,
+          urls: undefined,
+          description: undefined,
+          image: undefined,
+          label: undefined,
+          menuId: undefined,
+          zcount: undefined,
+          idelete: undefined,
+          start: undefined,
+          sqTags: [],
+          sort: 0,
+          sousuo: '',
+          type:'',
+          bkOrderBy:'',
+        },
+        bookmarkList:[],
+        sortState:true,//是否进行请求书签的拼接,切换排序规则时,不能进行拼接，重新渲染数据  false表示切换了 true没切换
+
       }
     },
     methods: {
+      goRouter(e){
+        var flag=e;
+        var that = this;
+        switch (flag) {
+          case 1:
+            that.$router.push({
+              path: "/profile",
+            })
+            break;
+          case 2:
+            //工具箱
+            that.$router.push({
+              path: "/tool",
+            })
+            break;
+          case 3:
+            that.$router.push({
+              path: "/content",
+            })
+            break;
+          default:
+            that.$router.push({
+              path: "/content",
+              query: {
+                menuId: 'newest',
+                t:Date.now(),
+              }
+            })
+        }
+      },
+      /** 最新 星标 回收站 稍后看**/
+      listByUserAndPolymerization(str) {
+        console.log(" 最新 星标 回收站 稍后看");
+        // this.loading = true;
+        this.queryParams.type=str;
+        this.queryParams.bkOrderBy="";
+        listByUserAndPolymerization(this.queryParams).then(response => {
+          if (response.code == 200) {
+            //如果进行了排序切换 就不能进行拼接
+            if (this.sortState){
+              this.bookmarkList = this.bookmarkList.concat(response.rows);
+            }else{
+              this.bookmarkList = response.rows;
+              this.sortState = false;
+            }
+            this.total = response.total;
+            this.listloading = false
+            this.loading = false;
+            if (response.total == 0){
+              this.showimg = true;//空提示
+            }
+            console.log("请求完毕" + this.queryParams.pageNum)
+          } else {
+            //出错了加载完毕了 禁止滚动
+            this.noMore = true;
+            this.listloading = false
+            this.loading = false;
+            this.showimg = true;
+          }
+        });
+      },
+      /**切换排序规则**/
+      handleCommand(command) {
+        if (this.queryParams.sort != command){
+          this.sortState = false;//是否切换了新的排序规则方式 false表示切换了 true没切换
+        }
+        this.queryParams.sort = command;
+        this.bookmarkList=[]
+        this.listByUserAndPolymerization(command)
+      },
+
       urlOpen(url) {
         console.log(url)
         window.open(url);
@@ -330,6 +418,8 @@
       //光标自动选中
       that.$refs.sousouref.focus()
 
+      that.listByUserAndPolymerization('newest');
+
 
     },
 
@@ -346,6 +436,7 @@
     display: flex;
     padding-top: 10px;
   }
+
   .bookmarkImg {
     width: 40px;
     height: 40px;
@@ -357,6 +448,7 @@
     margin-right: 3px;
     margin-top: 4px;
   }
+
   .bookmarkImg img {
     margin-left: 10px;
     margin-top: 10px;
@@ -364,9 +456,11 @@
     height: 20px;
 
   }
+
   .bookmarkTitle {
     width: 70%;
   }
+
   .bookmarkTitle .titles {
 
     font-size: 12px;
@@ -374,6 +468,7 @@
     line-height: 25px;
 
   }
+
   .bookmarkTitle .desc {
     height: 25px;
     line-height: 25px;
@@ -383,10 +478,12 @@
   .bookmarkUrl:hover {
     background: rgba(255, 255, 255, 0.2);
   }
+
   .bookmarContext {
     border-radius: 2px;
     padding: 7px;
   }
+
   .bookmarContext:hover {
     background: rgba(255, 255, 255, 0.4);
   }
@@ -396,21 +493,18 @@
   }
 
 
-
-
-
-
-
   .mains-left {
     margin-left: 10px;
     padding: 7px 7px;
     /*background-color:transparent;*/
+    margin-bottom: 0px;
 
   }
 
   .mains-right {
     margin-right: 10px;
     padding: 7px 7px;
+    margin-bottom: 0px;
   }
 
   .header-top {
@@ -461,6 +555,7 @@
     width: 400px;
     float: left;
   }
+
   .menu-list {
     width: 100px;
     display: block;
@@ -479,22 +574,23 @@
 
   .contenList {
     font-size: 14px;
-    height: 580px;
+    height: 480px;
-    padding-bottom: 150px;
   }
 
   .mians-hr {
     margin-top: 2px;
     margin-bottom: 8px;
   }
+
   .top-icon-list {
     color: #ffffff;
     float: right;
-    width: 140px;
+    width: 190px;
     font-size: 30px;
     line-height: 55px;
     opacity: 0.7;
   }
+
   .top-icon-list i {
     margin-left: 10px;
   }
@@ -511,6 +607,7 @@
     height: 30px;
     color: #50565c;
   }
+
   .bookmark-tag-Time .b-right {
 
   }
@@ -525,7 +622,6 @@
   }
 
 
-
 </style>
 <style>
   /*文本超长变成点*/
@@ -534,6 +630,7 @@
     white-space: nowrap;
     overflow: hidden;
   }
+
   /*禁止复制*/
   .notCopyText {
     -moz-user-select: none; /* Firefox私有属性 */
@@ -543,6 +640,7 @@
     -o-user-select: none; /* Opera私有属性 */
     user-select: none; /* CSS3属性 */
   }
+
   /*毛玻璃*/
   .maoboli {
     background: hsla(0, 0%, 100%, 0.11) border-box;
@@ -557,6 +655,7 @@
     -webkit-filter: blur(6.4px);
     filter: blur(10px);
   }
+
   .mbl {
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(3px);
@@ -583,6 +682,7 @@
       width: 30% !important;
     }
   }
+
   @media screen and (min-width: 1200px) and (max-width: 1399px) {
     .urlWd {
       width: 30% !important;
@@ -755,7 +855,7 @@
   /*滚动条移上去的背景*/
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: #7c6fff;
+    background-color: #ffffff;
   }
 
   /*滚动条美化结束*/