添加组件

3 months ago · 608c8f44d6
parent 3360d9235a
commit 608c8f44d6
4 changed files with 187 additions and 8 deletions
--- a/src/assets/image/wechatQRCode.png
+++ b/src/assets/image/wechatQRCode.png
--- a/src/components/chat/index.vue
+++ b/src/components/chat/index.vue
@ -14,11 +14,11 @@
        <template v-for="i in chatInfo">
          <div v-if="i.type===0" class="message">
            <div class="userInfo">{{ i.userName }} {{ formatTime(i.time) }}</div>
-            <div class="info">{{ i.content }}</div>
+            <div class="info" @click="handleClick" v-html="i.content"></div>
          </div>
          <div v-if="i.type===1" class="message1">
            <div class="userInfo">{{ i.userName }} {{ formatTime(i.time) }}</div>
-            <div class="info">{{ i.content }}</div>
+            <div class="info" @click="handleClick" v-html="i.content"></div>
          </div>
          <div v-if="i.type===2" class="message">
            <div class="userInfo">{{ i.userName }} {{ formatTime(i.time) }}</div>
@ -28,6 +28,7 @@
              </div>
              <el-button size="mini" @click="busy(1)">设备相关</el-button>
              <el-button size="mini" @click="busy(2)">软件相关</el-button>
+              <el-button size="mini" @click="busy(3)">测试</el-button>
            </div>
            <div>
            </div>
@ -46,6 +47,9 @@
        </el-button>
      </div>
    </div>
+    <div class="viewImg" v-if="imgUrl" @click="imgUrl = ''">
+      <img :src="imgUrl" alt="" class="img"/>
+    </div>
  </div>
 </template>
 <script>
@ -56,6 +60,7 @@ export default {
  name: "Chat",
  data() {
    return {
+      imgUrl: '',
      customerService,
      textarea: '',
      isChat: false,
@ -221,7 +226,7 @@ export default {
        setTimeout(() => {
          this.chatInfo.push({
            type: 0,
-            content: '目前咨询人数过多，如有疑问，请致电xxxx',
+            content: `<text>目前咨询人数过多，如有疑问，请致电xxxx,或</text> <a href="javascript:void(0)" data-action="addWechat">添加微信</a>`,
            time: new Date().getTime(),
            userName: '海威物联',
          })
@ -249,9 +254,63 @@ export default {
          })
        }, 1000)
      }
+      if (e === 3) {
+        window.location.href = "weixin://dl/add";
+      }
      this.$nextTick(() => {
        this.scrollToBottom()
      })
+    },
+
+    handleClick(e) {
+      const action = e.target.dataset.action
+      if (action && typeof this[action] === 'function') {
+        this[action](e.target.dataset.parmas)  // 调用 Vue methods 里的函数
+      }
+    },
+    copyToClipboard(text) {
+      if (!navigator.clipboard) {
+        console.warn('浏览器不支持 Clipboard API，使用 fallback 方法')
+        this.fallbackCopy(text)
+        return
+      }
+      navigator.clipboard.writeText(text)
+    },
+    fallbackCopy(text) {
+      const input = document.createElement('textarea')
+      input.value = text
+      document.body.appendChild(input)
+      input.select()
+      try {
+        document.execCommand('copy')
+      } catch (err) {
+      }
+      document.body.removeChild(input)
+    },
+    addWechat() {
+      window.location.href = "weixin://dl/add";
+      this.copyToClipboard('Yeshenge_')
+      this.chatInfo.push({
+        type: 0,
+        content: '已复制微信号，请打开微信添加好友，或扫描下方二维码添加好友',
+        time: new Date().getTime(),
+        userName: '海威物联',
+      })
+      let img = require('@/assets/image/wechatQRCode.png')
+      this.chatInfo.push({
+        type: 0,
+        content: `<img data-action="viewImg" data-parmas='${JSON.stringify({img: img})}' src="${img}" alt="" style="width: 100px;">`,
+        time: new Date().getTime(),
+        userName: '海威物联',
+      })
+      this.$nextTick(() => {
+        this.scrollToBottom()
+      })
+    },
+    viewImg(e) {
+      let data = JSON.parse(e)
+      console.log(data.img)
+      this.imgUrl = data.img
    }
  }
 }
@ -395,4 +454,22 @@ export default {
    }
  }
 }
+
+.viewImg {
+  z-index: 9999;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .2);
+
+  .img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40vw;
+  }
+}
 </style>
--- a/src/views/serviceSupport/QA1.vue
+++ b/src/views/serviceSupport/QA1.vue
@ -0,0 +1,90 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">Q&A</template>
+      <template slot="subTitle"> 常见问题</template>
+    </TitleGroup>
+    <div class="content">
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item v-for="(i,k) in QAList" :title="i.title" :name="`${k}`">
+          <div style="padding-left: 20px" v-for="(ii,kk) in i.list">{{ kk + 1 }}){{ ii }}</div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      activeName: '',
+      QAList: [
+        {
+          title: '读卡距离近',
+          list: [
+            '检查读写器频点设置是否正确。工作模式应选择跳频，跳频频点范围920MHz--925MHz，跳频点间隔1MHz；',
+            '检查标签与天线的极化方向是否匹配。如果天线是垂直极化的，则标签需要竖直放置；',
+            '检查标签表面是否覆盖有其他材料。如果标签表面覆盖有其他材料，并且这个材料使得标签天线的频点偏移，就会直接影响到读写器的读取效果。如果是金属材质，由于射频信号无法穿透金属，读写器将无法读取到标签；',
+            '检查读写器与天线连接的射频线缆。如果射频线缆的接头松动或同轴线断了，使得射频信号变得很弱，则直接影响到读取的距离；',
+            '检查标签的属性。金属标签一般要求安装在金属表面，这样才能充分发挥金属标签的性能。其他标签，尽可能不要靠近金属表面安装；',
+          ]
+        },
+        {
+          title: '读卡距离近',
+          list: [
+            '检查读写器频点设置是否正确。工作模式应选择跳频，跳频频点范围920MHz--925MHz，跳频点间隔1MHz；',
+            '检查标签与天线的极化方向是否匹配。如果天线是垂直极化的，则标签需要竖直放置；',
+            '检查标签表面是否覆盖有其他材料。如果标签表面覆盖有其他材料，并且这个材料使得标签天线的频点偏移，就会直接影响到读写器的读取效果。如果是金属材质，由于射频信号无法穿透金属，读写器将无法读取到标签；',
+            '检查读写器与天线连接的射频线缆。如果射频线缆的接头松动或同轴线断了，使得射频信号变得很弱，则直接影响到读取的距离；',
+            '检查标签的属性。金属标签一般要求安装在金属表面，这样才能充分发挥金属标签的性能。其他标签，尽可能不要靠近金属表面安装；',
+          ]
+        },
+      ],
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onSubmit() {
+      console.log('submit!');
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  width: 62vw;
+  //height: 20.1vw;
+  border: 1px solid #ccc3;
+  margin-top: 3.7vw;
+  margin-bottom: 5.2vw;
+  vertical-align: top;
+  text-align: left;
+}
+
+/deep/ .el-collapse-item__header {
+  padding-left: 20px;
+}
+</style>
--- a/src/views/serviceSupport/index.vue
+++ b/src/views/serviceSupport/index.vue
@ -20,7 +20,11 @@
      <QA/>
      <preSale/>
    </div>
-    <DownloadTheMaterials v-if='tabsActive===1'/>
+    <div v-if='tabsActive===1'>
+      <QA1/>
+      <preSale/>
+    </div>
+    <DownloadTheMaterials v-if='tabsActive===2'/>
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
@ -29,6 +33,7 @@
 <script>
 import preSale from './preSale.vue'
 import QA from './QA.vue'
+import QA1 from './QA1.vue'
 import DownloadTheMaterials from './downloadTheMaterials.vue'
 import ContactUs from '@/components/contactUs'
 import Copyright from '@/components/copyright'
@ -41,6 +46,7 @@ export default {
    Copyright,
    preSale,
    QA,
+    QA1,
    DownloadTheMaterials
  },
  data() {
@ -54,10 +60,14 @@ export default {
        tabsList: [
          {
            type: 100,
-            title: '联系我们'
+            title: '售前服务'
          },
          {
-            type: 1001,
+            type: 101,
+            title: '售后服务'
+          },
+          {
+            type: 102,
            title: '资料下载'
          },
        ]
@ -67,10 +77,12 @@ export default {
  watch: {
    '$route'() {
      let id = this.$route.query.type || '25'
-      if (id === '25' || id === '26') {
+      if (id === '25') {
        this.tabsActive = 0
-      } else if (id === '27') {
+      } else if (id === '26') {
        this.tabsActive = 1
+      } else if (id === '27') {
+        this.tabsActive = 2
      } else {
        this.tabsActive = 0
      }