GFRS-2561【前端】智能客服新增图片预览功能--提交人：张齐

src/views/ebiz/customerService/customerService.vue

@@ -1,67 +1,76 @@
 <template>
-  <div class="content">
-    <div class="conversation" id="conversation">
-      <div ref="box" class="conversation-list pt10 pb60 inline-b" v-if="list.length">
-        <div v-for="(item, index) in list" :key="index">
-          <div class="text-center fs10">{{ item.sendTime | formatDate }}</div>
+  <div class='content'>
+    <div class='conversation' id='conversation'>
+      <div ref='box' class='conversation-list pt10 pb60 inline-b' v-if='list.length'>
+        <div v-for='(item, index) in list' :key='index'>
+          <div class='text-center fs10'>{{ item.sendTime | formatDate }}</div>
           <!-- 用户提问 -->
-          <div class="answer-box clearfix pb20 mh10" v-if=" item.singleNode.question">
-            <div class="question-avatar fr">
-              <span class="color2f8 v-super mr8">{{ mandatorName }}</span>
-              <img src="./image/icon-customer.png" alt="" class="w35 v-sub" />
+          <div class='answer-box clearfix pb20 mh10' v-if=' item.singleNode.question'>
+            <div class='question-avatar fr'>
+              <span class='color2f8 v-super mr8'>{{ mandatorName }}</span>
+              <img src='./image/icon-customer.png' alt='' class='w35 v-sub' />
             </div>
-            <div class="answer-title fr radius5 bg-white p10 mh40 mt10">{{ item.singleNode.question }}</div>
+            <div class='answer-title fr radius5 bg-white p10 mh40 mt10'>{{ item.singleNode.question }}</div>
           </div>
           <!-- 机器人回复 -->
-          <div class="question-box clearfix pb20 mh10">
-            <div class="question-avatar fl">
-              <img src="./image/icon-robot.png" alt="" class="w40 v-sub" />
-              <span class="color2f8 v-super ml8">智能客服</span>
+          <div class='question-box clearfix pb20 mh10'>
+            <div class='question-avatar fl'>
+              <img src='./image/icon-robot.png' alt='' class='w40 v-sub' />
+              <span class='color2f8 v-super ml8'>智能客服</span>
             </div>
             <!-- isRichText 0标准回答 1图文 2单图片 3超链接 -->
-            <div class="question-title fl radius7 bg-white p10 mh40 mt10">
-              <template v-if="item.singleNode.isRichText == 0">
-                <div v-html="item.singleNode.answerMsg"></div>
-                <div v-if="item.vagueNode && item.vagueNode.promptVagueMsg" v-html="item.vagueNode.promptVagueMsg"></div>
-                <div class="mt10" v-if="item.vagueNode && item.vagueNode.itemList.length">
-                  <p class="blue mt5" v-for="(item01, index01) in item.vagueNode.itemList" :key="index01" @click="send(item01.question)">
+            <div class='question-title fl radius7 bg-white p10 mh40 mt10'>
+              <template v-if='item.singleNode.isRichText == 0'>
+                <div v-html='item.singleNode.answerMsg'></div>
+                <div v-if='item.vagueNode && item.vagueNode.promptVagueMsg'
+                     v-html='item.vagueNode.promptVagueMsg'></div>
+                <div class='mt10' v-if='item.vagueNode && item.vagueNode.itemList.length'>
+                  <p class='blue mt5' v-for='(item01, index01) in item.vagueNode.itemList' :key='index01'
+                     @click='send(item01.question)'>
                     {{ [index01 + 1] }} {{ item01.question }}
                   </p>
                 </div>
-                <div v-if="item.vagueNode && item.vagueNode.endVagueMsg" v-html="item.vagueNode.endVagueMsg"></div>
+                <div v-if='item.vagueNode && item.vagueNode.endVagueMsg' v-html='item.vagueNode.endVagueMsg'></div>
               </template>
-              <template v-else-if="item.singleNode.isRichText == 2">
-                <img :src="item.singleNode.PicUrl" class="w150 h150" alt="" />
+              <template v-else-if='item.singleNode.isRichText == 2'>
+                <img :src='item.singleNode.PicUrl' class='w150 h150' alt=''
+                     @click='imagePreviewFunc(item.singleNode.PicUrl)' />
+                <!--                <van-uploader class='preview-image' v-model='imgUrlArr[index]' :disabled='true' :deletable='false' />-->
               </template>
-              <template v-else-if="item.singleNode.isRichText == 3">
-                <a :href="item.singleNode.answerMsg">{{ item.singleNode.answerMsg }}</a>
+              <template v-else-if='item.singleNode.isRichText == 3'>
+                <a :href='item.singleNode.answerMsg'>{{ item.singleNode.answerMsg }}</a>
               </template>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="gray talk">
-      <input v-model.trim="sendtext" type="text" class="talk-content" @keyup.enter="send()" id="talkContent" placeholder="请输入您要咨询的问题" />
-      <button class="send-message" @click="send()">发 送</button>
+    <div class='gray talk'>
+      <input v-model.trim='sendtext' type='text' class='talk-content' @keyup.enter='send()' id='talkContent'
+             placeholder='请输入您要咨询的问题' />
+      <button class='send-message' @click='send()'>发 送</button>
     </div>
   </div>
 </template>
 
 <script>
-import { queryHistoryKBSBroker, queryActionKBSBroker } from '@/api/ebiz/customerService/customerService'
-import { getAgentInfo } from '@/api/ebiz/my/my.js'
-import xmlLoad from '@/assets/js/utils/xmlLoad'
-import utils2 from '@/assets/js/business-common'
+import { queryHistoryKBSBroker, queryActionKBSBroker } from '@/api/ebiz/customerService/customerService';
+import { getAgentInfo } from '@/api/ebiz/my/my.js';
+import xmlLoad from '@/assets/js/utils/xmlLoad';
+import utils2 from '@/assets/js/business-common';
+import { ImagePreview } from 'vant';
 
 export default {
+  components: {
+    [ImagePreview.name]: ImagePreview
+  },
   name: 'home',
   props: {
     msg: String
   },
   filters: {
     formatDate(dataStr) {
-      return utils2.formatDate(new Date(dataStr), 'yyyy-MM-dd HH:mm:ss')
+      return utils2.formatDate(new Date(dataStr), 'yyyy-MM-dd HH:mm:ss');
     }
   },
   data() {
@@ -71,8 +80,9 @@ export default {
       MessageId: '',
       sendtext: '', //input发送信息
       //聊天数据  isRichText 0标准回答 1图文 2单图片 3超链接
-      list: []
-    }
+      list: [],
+      imgUrlArr: []
+    };
   },
   created: function() {
     let head = document.getElementsByTagName('head');
@@ -81,84 +91,131 @@ export default {
     //根据实际情况修改referrer的值，可选值参考上文
     meta.content = 'no-referrer';
     head[0].appendChild(meta);
-    this.getHistorylist() //获取对话记录接口
+    this.getHistorylist(); //获取对话记录接口
   },
   mounted: function() {
     getAgentInfo({}).then(res => {
       if (res.result == 0) {
-        this.mandatorName = res.name
+        this.mandatorName = res.name;
       }
-    })
+    });
   },
   methods: {
     //获取对话记录接口
     async getHistorylist() {
-      let that = this
+      let that = this;
       let res = await queryHistoryKBSBroker({
         pageNum: 1,
         pageSize: 1000
-      })
+      });
       if (res.content.list.length) {
-        that.list = res.content.list
+        that.list = res.content.list;
         res.content.list.map(itm => {
           //纯图片需要xml字符串转换json数据，数据解析
           if (itm.singleNode.isRichText == 2) {
-            itm.singleNode.PicUrl = xmlLoad.xmlStr2json(itm.singleNode.answerMsg).root.PicUrl
+            itm.singleNode.PicUrl = xmlLoad.xmlStr2json(itm.singleNode.answerMsg).root.PicUrl;
           }
-        })
-        that.list = res.content.list
+          if ('PicUrl' in itm.singleNode) {
+            that.imgUrlArr.push([{
+              url: itm.singleNode.PicUrl
+            }]);
+          } else {
+            that.imgUrlArr.push([{
+              url: ''
+            }]);
+          }
+        });
+        that.list = res.content.list;
         //加延时器解决历史数据渲染执行顺序时，滚动条未达到底部
         setTimeout(() => {
-          that.scrollToBottom() //滚动条定位底部
-        }, 100)
+          that.scrollToBottom(); //滚动条定位底部
+        }, 100);
       }
     },
     //发送消息
     async send(text) {
-      let that = this
+      let that = this;
       if (text) {
-        that.sendtext = text
+        that.sendtext = text;
       }
       if (that.sendtext) {
         let res = await queryActionKBSBroker({
           isNeedClearHistory: 0,
           query: that.sendtext,
           isQuestionQuery: '0'
-        })
+        });
         if (res.result == 0) {
           //纯图片需要xml字符串转换json数据，数据解析
           if (res.singleNode.isRichText == 2) {
-            res.singleNode.PicUrl = xmlLoad.xmlStr2json(res.singleNode.answerMsg).root.PicUrl
+            res.singleNode.PicUrl = xmlLoad.xmlStr2json(res.singleNode.answerMsg).root.PicUrl;
           }
-          that.list.push(res)
-          that.sendtext = ''
-          that.scrollToBottom() //滚动条定位底部
+          that.list.push(res);
+          that.sendtext = '';
+          that.scrollToBottom(); //滚动条定位底部
         }
       }
     },
     scrollToBottom() {
       this.$nextTick(function() {
-        let e = document.getElementById('conversation')
-        e.scrollTop = e.scrollHeight
-      })
+        let e = document.getElementById('conversation');
+        e.scrollTop = e.scrollHeight;
+      });
+    },
+
+    /**
+     * @Description: 图片预览的方法
+     * Params:imageUrl--预览的图片路径地址
+     * @author:zhangqi
+     * @Date:2021-07-23
+     */
+    imagePreviewFunc(imageUrl) {
+      ImagePreview({
+        images: [imageUrl],
+        closeable: true,
+        closeIconPosition: 'top-right',
+        showIndex: false
+      });
+    }
+  }
+};
+</script>
+
+<style lang='scss' scoped>
+.van-uploader__upload {
+  display: none !important;
+}
+
+.van-uploader {
+  .van-uploader__wrapper--disabled {
+    opacity: 1;
+
+    .van-uploader__upload {
+      display: none !important;
+    }
+
+    .van-uploader__preview-image {
+      width: 16vw;
+      height: 14vw;
     }
   }
 }
-</script>
 
-<style lang="scss" scoped>
 .v-super {
   vertical-align: super;
 }
+
 .v-sub {
   vertical-align: sub;
 }
+
 .fs10 {
   font-size: 10px;
 }
+
 .color2f8 {
   color: #5272f8;
 }
+
 .content {
   position: absolute;
   top: 0;
@@ -171,21 +228,26 @@ export default {
   -webkit-overflow-scrolling: touch;
   // 当手指从触摸屏上移开，会保持一段时间的滚动
 }
+
 .conversation {
   margin: 0;
   background: #f2f2f2;
   width: 100%;
   height: 100%;
   overflow-y: scroll;
+
   .conversation-list {
     width: 100%;
+
     .question-box {
       .question-avatar {
         width: 100%;
         text-align: left;
       }
+
       .question-title {
         position: relative;
+
         &:before {
           display: block;
           content: '';
@@ -200,13 +262,16 @@ export default {
         }
       }
     }
+
     .answer-box {
       .question-avatar {
         width: 100%;
         text-align: right;
       }
+
       .answer-title {
         position: relative;
+
         &:before {
           display: block;
           content: '';
@@ -235,6 +300,7 @@ export default {
   z-index: 10;
   border-top: solid 0.05rem #cccccc;
   background: #f4f4f6;
+
   .talk-content {
     flex: 5;
     border-radius: 0.25rem;
@@ -244,6 +310,7 @@ export default {
     word-wrap: break-word;
     margin: 0.5rem 0.5rem;
   }
+
   .send-message {
     flex: 1;
     border-radius: 0.5rem;
@@ -258,4 +325,6 @@ export default {
     margin-top: 0.6rem;
   }
 }
+
+
 </style>