症状长按显示解释弹窗

src/common/Tiptoast.vue

@@ -0,0 +1,91 @@
+<template>
+    <portal to="notification-outlet">
+      <div class="toast-wrap" v-if="show">
+            <div class="content">
+              <p class="tit" v-show="data.title">{{data.title}}</p>
+              <div class="text">
+                {{data.text}}
+              </div>
+                <img src="../images/icon_close@2x.png"  class="close" @click="handleClose">
+            </div>
+            
+            <div class="mask" @click="handleClose"></div>
+      </div>
+    </portal>
+</template>
+<script type="text/javascript">
+/**
+  提示性弹窗组件
+  接收参数：
+    show-布尔值，是否显示弹窗；
+    data-对象，包含title和text；
+    @close-关闭弹窗的方法（点击关闭按钮或者遮罩都关闭弹窗）
+**/
+  export default {
+    name:'Tiptoast',
+    data(){
+      return {
+        msg:""
+      }
+    },
+    props:{
+      show:{
+        default:false,
+        type:Boolean
+      },
+      data:{
+        default:{
+          title:'',
+          text:''
+        },
+        type:Object
+      },
+    },
+    methods:{
+      handleClose(){
+        this.$emit("close")
+      },
+    },
+  }
+</script>
+<style lang="less" scoped>
+  @import '../less/base.less';
+  .toast-wrap{
+    .content{
+      width: 6rem;
+      background: #fff;
+      z-index: 999;
+      position: fixed;
+      top:50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      padding: .5rem .8rem .8rem;
+      box-sizing: border-box;
+      border-radius: .20rem;
+      z-index: 1000;
+      .tit{
+        font-family:PingFangSC;
+        color:#333333;
+        font-size: .32rem;
+        text-align: center;
+        font-weight: 700;
+      }
+      .text{
+        color:#000;
+        padding-top: .3rem;
+        font-size: .3rem;
+      }
+      .close{
+        width:1rem;
+        position: absolute;
+        bottom: -1.5rem;
+        left: 50%;
+        margin-left: -.5rem;
+      }
+    }
+    .mask{
+      .mask;
+      z-index: 999;
+    }
+  }
+</style>

src/components/Symptom.vue

@@ -18,17 +18,24 @@
         </p>
       </div>
       <div class="label">
-        <p class="quest">{{quesText}}<img
+        <p class="quest" id="test">{{quesText}}<img
             @click="search(true)"
             class="searchImg"
             src="../images/search.png"
             alt=""
           ></p>
-        <span
+        <!-- <span
           class="symp"
           v-for="(it,ind) in symp"
           :key="it.conceptId"
           @click="showDetil(it)"
+        >{{it.description || it.name}}</span> -->
+        <span
+          class="symp"
+          v-for="(it,ind) in symp"
+          :key="it.conceptId"
+          @touchstart.stop.prevent="touchstart(it)"
+          @touchend.stop.prevent="showDetil(it)"
         >{{it.description || it.name}}</span>
       </div>
       <div
@@ -61,12 +68,14 @@
       :chooseSymp="chooseSymp"
       :sexType="sexType"
     ></Search>
+    <Tiptoast :show="showExp" :data="message" @close="closeTip"/>
   </div>
 </template>
 <script type="text/javascript">
 import api from '@utils/api.js';
 import DetailBox from './DetailBox.vue';
 import Toast from '../common/Toast.vue';
+import Tiptoast from '../common/Tiptoast.vue';
 import Search from './Search.vue';
 import {moduleCP,setScroll,trimDots} from '@utils/tools'
 import BScroll from 'better-scroll';
@@ -95,6 +104,13 @@ export default {
       isSearch:false,
       scroll:null,
       quesText:"请问您有哪些不适？",
+      startTime:'',
+      timer:null,
+      showExp:false,
+      message:{
+        title:'',
+        text:''
+      }
     }
   },
   created() {
@@ -115,6 +131,27 @@ export default {
     })
   },
   methods: {
+    touchstart(it){
+      this.startTime = +new Date();
+      const that = this;
+      this.timer = setTimeout(function(){
+        // 长按事件
+          that.showExp = true;
+          if(it.explains){
+            that.message.title = it.description || it.name;
+            that.message.text = it.explains;
+          }else{
+            that.message.title = "";
+            that.message.text = "暂无资料";
+          }
+          
+        },600)
+    },
+    closeTip(){
+      this.showExp = false,
+      this.message.title = '';
+      this.message.text = '';
+    },
     onScroll() {
       document.activeElement.scrollIntoViewIfNeeded(true);        
     },
@@ -151,13 +188,20 @@ export default {
 
     },
     showDetil(item,flg) {
+      clearTimeout(this.timer);
+      let endTime = +new Date();
+      if(endTime - this.startTime > 600){
+        this.startTime = "";
+        return
+      }
+      this.startTime = "";
       this.tmpItem=item
       this.isSearch=flg||false
       this.questId = item.questionId || item.id || item.conceptId;
       const id = item.questionId || item.id; //常见症状questionId，推送id,两者均有可能没有
       //将选中的name存到store中的text
       this.$store.commit('setText', { type: moduleCP['symp'], text: item.name,textP: item.description||item.name, pId: this.questId });
-      this.quesText = "请问您还有其他不适吗？";
+      
       if (id) {
         const param = {
           "age": this.age,
@@ -257,7 +301,8 @@ export default {
   components: {
     DetailBox,
     Toast,
-    Search
+    Search,
+    Tiptoast
   },
   watch:{
     checkText:{//更新推送
@@ -265,8 +310,10 @@ export default {
         const sympText = this.getSympText();
         if(sympText){
           this.getPush(sympText);
+          this.quesText = "请问您还有其他不适吗？";
         }else{
           this.getSympList();
+          this.quesText = "请问您有哪些不适？";
         } 
       },
       deep:true