增加longpress事件

src/router/index.js

@@ -253,6 +253,17 @@ const routes = [
     component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/my'),
   },
 
+  // 我的地盘页面
+  {
+    path: '/danger',
+    name: 'danger',
+    meta: {
+      title:'隐患上报',
+      index: 1
+    },
+    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/danger'),
+  },
+
 ]
 
 const router = new VueRouter({

src/views/danger/index.vue

+<template>
+  <div>
+      隐含上报
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods:{
+
+  }
+}
+</script>
+<style scoped>
+/* @import url(); 引入css类 */
+
+</style>
\ No newline at end of file

src/views/messageCenter/messageNews/index.vue

@@ -35,6 +35,8 @@
           v-for="(item, index) in messageList"
           :key="index"
           @click="read(item)"
+          @touchstart="touchstart(index, item)"
+          @touchend="touchend(index)"
         >
           <div class="messgae-title">{{ item.noticeTitle }}</div>
           <div class="message-content">
@@ -42,6 +44,14 @@
               item.createUserName
             }}的{{ item.noticeTitle }}相关的待处理任务...
           </div>
+
+          <!-- 长按显示遮罩层 -->
+          <van-overlay :show="showIndex == index">
+            <div class="wrapper" @click.stop='closeModal' >
+              <van-button round type="info" @click="goDetail(item)">详情</van-button>
+              <van-button round type="danger" @click="goDelete(item)">删除</van-button>
+            </div>
+          </van-overlay>
         </van-cell-group>
 
         <!-- </van-list>
@@ -52,6 +62,7 @@
 </template>
 
 <script>
+document.oncontextmenu=function(e){return false;}
 import { postMessgaelist, noticeRemove } from "@/service/message";
 export default {
   data() {
@@ -71,12 +82,15 @@ export default {
         }
       ],
       activeIndex: 0,
-      activeVal: '全部',
+      activeVal: "全部",
       searchVal: "",
-      messageList: [] // 消息列表
+      messageList: [], // 消息列表
       // refreshing: false, // 下拉刷新开关
       // loading: false, // 列表滚动到底部会触发load事件
       // finished: false // 列表数据全部加载完成
+
+      Loop: "", // 定时器
+      showIndex: null // 是否显示遮罩层
     };
   },
   created() {
@@ -86,8 +100,9 @@ export default {
   methods: {
     // 点击类别
     clickCategory(index, data) {
+      console.log(12312312310);
       this.activeIndex = index;
-      this.activeVal = this.messageCategory[index].category
+      this.activeVal = this.messageCategory[index].category;
       // 点击全部还是已读还是未读
       this.selectCategory(data);
     },
@@ -110,6 +125,12 @@ export default {
 
     // 点击消息条目时的点击事件 变成已读
     read(data) {
+      console.log('触发了点击事件');
+      // 判断showIndex是否等于null 如果不等于则先将showIndex改为null
+      if(this.showIndex !== null) {
+        this.showIndex = null
+        return
+      }
       if (data.status == "未读") {
         let formData = new FormData();
         formData.append("ids", data.pid);
@@ -118,7 +139,7 @@ export default {
             // 如果请求接口成功 则重新请求一下未读消息的条数
             this.unRead();
             //  重新请求对应的接口 刷新列表数据
-            let val = this.activeVal
+            let val = this.activeVal;
             this.selectCategory(val);
           }
         });
@@ -142,7 +163,7 @@ export default {
       postMessgaelist("/mobile/notice", data).then(res => {
         this.messageList = res.rows;
       });
-    }
+    },
 
     //  // 下拉刷新事件
     // onRefresh() {
@@ -173,6 +194,35 @@ export default {
     //     // }
     //   }, 5000);
     // }
+
+    touchstart(index, item) {
+      clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
+      this.Loop = setTimeout(
+        function() {
+          this.showIndex = index
+        }.bind(this),
+        300
+      ); // 这里的1000是指需要长按的时间，单位为ms
+    },
+    touchend(index) {
+      // 这个方法主要是用来将每次手指移出之后将计时器清零
+      clearInterval(this.Loop);
+    },
+    // 关闭遮罩层
+    closeModal(){
+      this.showIndex = null
+    },
+    // 详情
+    goDetail(data){
+      console.log(data);
+      this.showIndex = null
+    },
+    // 删除
+    goDelete(data){
+      console.log(data);
+      this.showIndex = null
+    },
+    
   }
 };
 </script>
@@ -213,16 +263,35 @@ export default {
   }
   //  内容
   .con-list {
+               -webkit-touch-callout:none; /*系统默认菜单被禁用*/
+      -webkit-user-select:none; /*webkit浏览器*/
+      -khtml-user-select:none; /*早期浏览器*/
+      -moz-user-select:none;/*火狐*/
+      -ms-user-select:none; /*IE10*/
+      user-select:none; 
     .van-cell-group--inset {
       margin: 0;
       margin-bottom: 10px;
       padding: 10px;
       font-size: 13px;
+      position: relative;
+   
       .messgae-title {
       }
       .message-content {
         margin-top: 10px;
+
+      }
+      .van-overlay{
+        position: absolute;
+        .wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        height: 100%;
+      }
       }
+      
     }
   }
 }

src/views/saveWorkbench/index.vue

@@ -59,6 +59,7 @@
         <van-cell value="隐患排查治理" />
         <van-grid :column-num="5">
           <van-grid-item
+           @click="dangerJump(item.path)"
             v-for="item in finalDangerList"
             :key="item.key"
             :icon="item.imgUrl"
@@ -142,6 +143,7 @@ export default {
         // 隐患排查治理
         {
           key: "1",
+          path: "/danger",
           imgUrl: require("@/assets/workbench/danger-report.png"),
           text: "隐患上报"
         },
@@ -234,6 +236,11 @@ export default {
         this.$router.push(path);
       }
     },
+    dangerJump(path){
+      if (path) {
+        this.$router.push(path);
+      }
+    },
     // 搜索事件
     onSearch(val) {
       console.log(val);