用户中心，多收藏删除

pages/home/index.vue

@@ -14,10 +14,7 @@
       </div>
       <div class="incon-carousel">
         <Icon type="ios-arrow-back" class="bg-b" @click="clickLeft" :class="num1<0?'bg-b1':'bg-b'" />
-        <div
-          class="list-shoucang"
-          :style="{'margin-left': num1 * 230 + 'px','transition': 'all .3s ease-out .1s',}"
-        >
+        <div class="list-shoucang" :style="{'margin-left': num1 * 230 + 'px',width :'990px',}">
           <div class="bg" v-for="(item,i) in collect" :key="i" @click="toPage(item)">
             <Icon :type="item.icon||'md-mail'" />
             <p>{{item.title}}</p>
@@ -29,10 +26,13 @@
           @click="clickRight"
           :class="collect.length>8 && showIcon ?'bg-l1':'bg-l'"
         />
+        <a class="down-delete" @click="setDelete">
+          <Icon type="md-settings" class="f20" />
+        </a>
       </div>
     </div>
     <div class="card-list">
-      <Icon type="ios-arrow-back" @click="leftmove" :class="shuliang<=5?'bg-b1':'bg-b'" />
+      <Icon type="ios-arrow-back" @click="leftmove" :class="num<0?'bg-b1':'bg-b'" />
       <div class="list-c" :style="{width:'98%','margin-left': num * 740 + 'px',}">
         <div
           v-for="(item,index) in listTask"
@@ -49,7 +49,11 @@
           </div>
         </div>
       </div>
-      <Icon type="ios-arrow-forward" :class="shuliang>5?'bg-l1':'bg-l'" @click="rightmove" />
+      <Icon
+        type="ios-arrow-forward"
+        :class="listTask.length>5&& showArrow?'bg-l1':'bg-l'"
+        @click="rightmove"
+      />
     </div>
     <Row class="table" :gutter="16">
       <Col :span="15">
@@ -91,7 +95,7 @@
         <MaterielChart />
       </Col>
     </Row>
-    <Modal v-model="modal1" title="统计列表显示设置" width="900" footer-hide>
+    <Modal v-model="modal1" title="统计列表显示设置" width="900" footer-hide :mask-closable="false">
       <Divider>
         <span style="color: #2680eb;">
           生产计划状态监控
@@ -138,6 +142,22 @@
         <img src="@/assets/images/home/user-img5.png" style="width:310px;height:165px" />
       </div>
     </Modal>
+    <Modal v-model="modal" title="删除收藏" width="300" footer-hide :mask-closable="false">
+      <ul class="modal-r">
+        <li
+          v-for="(li,i) in collect"
+          :key="i"
+          class="right-delete"
+          v-dragging="{ item: li, list: collect}"
+        >
+          <Icon :type="li.icon||'md-mail'" />&nbsp;&nbsp;
+          <span>{{li.title}}</span>
+          <a @click="remover(li.menuId)">
+            <Icon type="md-trash" />
+          </a>
+        </li>
+      </ul>
+    </Modal>
   </div>
 </template>
 <script>
@@ -163,6 +183,7 @@ export default {
   },
   data() {
     return {
+      modal: false,
       modal1: false,
       listTask: [],
       listFavorite: [],
@@ -178,12 +199,8 @@ export default {
       show4: false,
       num: 0,
       num1: 0,
-      shuliang: 0,
       showIcon: true,
-      // listdatas: [],
-      // index: 0,
-      // collectNum: this.$store.state.collect.length,
-      // collectNum1: this.$store.state.collect.length,
+      showArrow: true,
     };
   },
   async fetch({ store, params }) {
@@ -192,62 +209,52 @@ export default {
   created() {
     this.get();
     this.getUserInfoFn();
-    this.listdatas = this.collect;
     // console.log(this.$store.state.collect);
     //  this.getList();
   },
+  mounted() {
+    this.$dragging.$on("dragged", ({ value }) => {
+      // console.log("-----------" + value);
+    });
+  },
   computed: {
     ...mapState({ collect: "collect" }),
-    // newList() {
-    //   var arr = [];
-    //   let data = this.listdatas;
-    //   arr = data.slice(0, 8);
-    //   return arr;
-    // },
   },
   methods: {
     clickLeft() {
       if (this.num1 < 0) {
         this.num1 += 1;
+        if (this.num1 == 0) {
+          this.showIcon = true;
+        }
       }
-      alert(this.num1);
     },
     clickRight() {
-      alert("----:" + this.num1);
-      alert("----:" + this.collect.length);
       if (this.num1 + this.collect.length > 8) {
         this.num1 -= 1;
-
-        // if (this.num1 + this.collect.length == 8) {
-        //   this.showIcon = true;
-        //   return false;
-        // }
-        // } else if (
-        //   this.num1 < -(this.collect.length + this.num1) &&
-        //   -(this.collect.length + this.num1) != -0
-        // ) {
-        // if (this.num1 + this.collect.length == 8) {
-        //   this.showIcon = true;
-        //   return false;
-        // }
-        alert("-====:" + this.num1);
+        if (this.num1 + this.collect.length == 8) {
+          this.showIcon = false;
+        }
       } else {
         this.showIcon = false;
       }
-      alert(this.num1);
     },
     leftmove() {
-      if (this.shuliang <= 5) {
       if (this.num < 0) {
         this.num += 1;
-          this.shuliang += 1;
+        if (this.num == 0) {
+          this.showArrow = true;
         }
       }
     },
     rightmove() {
-      if (this.shuliang > 5) {
+      if (this.num + this.listTask.length > 5) {
         this.num -= 1;
-        this.shuliang -= 1;
+        if (this.num + this.listTask.length == 5) {
+          this.showArrow = false;
+        }
+      } else {
+        this.showArrow = false;
       }
     },
     getUserInfoFn() {
@@ -309,6 +316,32 @@ export default {
     clickEye4() {
       this.show4 = !this.show4;
     },
+    setDelete() {
+      this.modal = true;
+    },
+    remover(id) {
+      this.$Modal.confirm({
+        title: "删除收藏",
+        content: "<p>您确定要删除收藏吗</p>",
+        onOk: () => {
+          let url = `${systemUrl}/favorite/delete`;
+          let menuId = [];
+          menuId.push(id);
+          this.$api.post(url, menuId).then((r) => {
+            if (r.success) {
+              this.$Message.success("收藏已删除");
+              this.$store.dispatch("collectList");
+            }
+          });
+        },
+        onCancel: () => {
+          // this.$Message.info("Clicked cancel");
+        },
+      });
+    },
+    cancel() {
+      this.modal = false;
+    },
   },
 };
 </script>
@@ -319,15 +352,18 @@ export default {
 .home {
   padding: 10px 0;
   .card-user {
-    padding: 25px 15px;
+    padding: 25px 0 0 15px;
     height: 120px;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
     border-radius: 8px;
     display: flex;
     display: -webkit-flex;
+
     .img-header {
       margin-top: -10px;
+      z-index: 999;
+      background: rgba(255, 255, 255, 1);
     }
     .ivu-avatar > img {
       width: 100%;
@@ -335,19 +371,23 @@ export default {
     }
     .user-text {
       width: 43%;
+      z-index: 999;
+      background: rgba(255, 255, 255, 1);
       p {
         margin: 10px 20px;
       }
     }
     .incon-carousel {
-      width: 980px;
+      width: 1000px;
       position: relative;
       text-align: center;
+      z-index: 100;
       .bg-b {
         margin-top: 10px;
         font-size: 30px;
         color: #dcdfe6;
         position: absolute;
+        width: 40px;
         top: 13px;
         left: 0;
       }
@@ -357,11 +397,12 @@ export default {
         color: #a7b8cc;
         cursor: pointer;
         position: absolute;
+        width: 40px;
         top: 13px;
         left: 0;
       }
       .bg-l {
-        float: right;
+        width: 40px;
         margin-top: 10px;
         font-size: 30px;
         color: #dcdfe6;
@@ -370,7 +411,7 @@ export default {
         right: 0;
       }
       .bg-l1 {
-        float: right;
+        width: 40px;
         margin-top: 10px;
         font-size: 30px;
         color: #a7b8cc;
@@ -380,15 +421,14 @@ export default {
         right: 0;
       }
       .list-shoucang {
-        width: 960px;
+        // width: 960px;
         display: -webkit-inline-box;
         display: inline-box;
         transition: margin-left 1s;
       }
       .bg {
         text-align: center;
-        width: 120px;
-
+        width: 122px;
         .ivu-icon {
           font-size: 35px;
           color: #2680eb;
@@ -398,6 +438,14 @@ export default {
           margin-top: 8px;
         }
       }
+      .down-delete {
+        position: absolute;
+        top: -17px;
+        right: 7px;
+        .ivu-icon {
+          font-size: 16px;
+        }
+      }
     }
   }
   .card-list {
@@ -524,4 +572,19 @@ export default {
   text-align: center;
   margin-bottom: 25px;
 }
+.modal-r {
+  height: 400px;
+  overflow: auto;
+  .right-delete {
+    height: 35px;
+    line-height: 35px;
+    border-bottom: 1px solid #eee;
+    .ivu-icon {
+      color: #2680eb;
+    }
+    a {
+      float: right;
+    }
+  }
+}
 </style>