Home Explore Help
Register Sign In
wfg
/
lottery
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

会话页

duanshenglang 3 weeks ago
parent
23f24f77c4
commit
781c73fc31
7 changed files with 292 additions and 14 deletions
Unified View Show Diff Stats
  1. BIN
      lottery.zip
  2. 191 9
      lottery/chat.html
  3. BIN
      lottery/img/chatbox_right.png
  4. BIN
      lottery/img/no_send_btn.png
  5. BIN
      lottery/img/send_btn.png
  6. 4 0
      lottery/index.html
  7. 97 5
      lottery/sessionList.html

BIN
lottery.zip
View File


+ 191 - 9
lottery/chat.html
View File 

@@ -30,27 +30,128 @@
 
   }
 
   }
 
   .page5 {
 
   .page5 {
 
     width: 100vw;
 
     width: 100vw;
 
-    height: 100vh;
 
+    height: calc(100vh - 63px);
 
     box-sizing: border-box;
 
     box-sizing: border-box;
 
-    padding: 0 15px;
 
+    padding: 18px 15px;
 
+    overflow-y: auto;
 
+    /* overflow-x: unset; */
 
   }
 
   }
 
   .chat_list {
 
   .chat_list {
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;
 
-    padding: 15px 0;
 
+  }
 
+  .custom_msg {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: flex-start;
 
+    padding-bottom: 22px;
 
+    box-sizing: border-box;
 
+    width: 100%;
 
+  }
 
+  .my_msg {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: flex-end;
 
+    padding-bottom: 22px;
 
+    box-sizing: border-box;
 
+    width: 100%;
 
+  }
 
+  .customchat_box {
 
+    padding: 10px 12px;
 
+    background: #FFFFFF;
 
+    border-radius: 10px;
 
+    font-weight: 400;
 
+    font-size: 14px;
 
+    color: #222222;
 
+    max-width: 227px;
 
+    word-wrap: break-word;
 
+    white-space: normal;
 
+  }
 
+  .mychat_box {
 
+    padding: 10px 12px;
 
+    background: #1677FF;
 
+    border-radius: 10px;
 
+    font-weight: 400;
 
+    font-size: 14px;
 
+    color: #FFFFFF;
 
+    max-width: 227px;
 
+    word-wrap: break-word;
 
+    white-space: normal;
 
+  }
 
+  .chatbox_left {
 
+    width: 6px;
 
+    height: 12px;
 
+    margin-left: 5px;
 
+  }
 
+  .chatbox_right {
 
+    width: 10px;
 
+    height: 12px;
 
+    margin-left: -5px;
 
+    margin-right: 5px;
 
+  }
 
+  .headImg {
 
+    width: 44px;
 
+    height: 44px;
 
+    border-radius: 50%;
 
+  }
 
+  .chat_img {
 
+    max-width: 200px;
 
+    border-radius: 10px;
 
+  }
 
+  .input_style {
 
+    padding: 10px;
 
+    box-sizing: border-box;
 
+    position: relative;
 
+  }
 
+  .el-input__inner {
 
+    border-radius: 22px;
 
+    height: 43px;
 
+    padding-right: 60px;
 
+  }
 
+  .send_btn {
 
+    width: 50px;
 
+    height: 33px;
 
+    position: absolute;
 
+    right: 15px;
 
+    top: 15px;
 
   }
 
   }
 
 </style>
 
 </style>
 
 <body>
 
 <body>
 
   <div id="box" class="box">
 
   <div id="box" class="box">
 
     <!-- 聊天页 -->
 
     <!-- 聊天页 -->
 
-    <div class="page5">
 
-      <div class="chat_list">
 
-        <div class="custom_msg">
 
-          <image class="headImg" src="./img/prize-bg.png"></image>
 
+    <div ref="messageContent" class="page5">
 
+      <div class="chat_list" v-for="(item, index) in chatList" :key="index">
 
+        <div class="my_msg" v-if="item.self">
 
+          <div class="mychat_box" v-if="item.contentType === 0" v-html="item.content"></div>
 
+          <image class="chat_img" mode="aspectFit" v-else-if="item.contentType === 1" :src="item.content"></image>
 
+          <div class="mychat_box" v-else-if="item.contentType === 5" v-html="JSON.parse(item.content).curl"></div>
 
+          <div class="mychat_box" v-else-if="item.contentType === 33">小程序信息（不支持查看）</div>
 
+          <div class="mychat_box" v-else-if="item.contentType === 51">视频号信息（不支持查看）</div>
 
+          <div class="mychat_box" v-else-if="item.contentType === 100">图片已过期（不支持查看）</div>
 
+          <div class="mychat_box" v-else v-html="item.content"></div>
 
+          <image class="chatbox_right" src="./img/chatbox_right.png"></image>
 
+          <image class="headImg" :src="item.sendUrl"></image>
 
+        </div>
 
+        <div class="custom_msg" v-else>
 
+          <image class="headImg" :src="item.sendUrl"></image>
 
+          <image class="chatbox_left" src="./img/chatbox_left.png"></image>
 
+          <div class="customchat_box" v-if="item.contentType === 0" v-html="item.content"></div>
 
+          <image class="chat_img" mode="aspectFit" v-else-if="item.contentType === 1" :src="item.content"></image>
 
+          <div class="customchat_box" v-else-if="item.contentType === 5" v-html="JSON.parse(item.content).curl"></div>
 
+          <div class="customchat_box" v-else-if="item.contentType === 33">小程序信息（不支持查看）</div>
 
+          <div class="customchat_box" v-else-if="item.contentType === 51">视频号信息（不支持查看）</div>
 
+          <div class="customchat_box" v-else-if="item.contentType === 100">图片已过期（不支持查看）</div>
 
+          <div class="customchat_box" v-else v-html="item.content"></div>
 
         </div>
 
         </div>
 
-        <!-- <div class="my_msg"></div> -->
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
+    <div class="input_style">
 
+      <el-input
 
+        placeholder="请输入内容"
 
+        v-model="msgData">
 
+      </el-input>
 
+      <image class="send_btn" :src="msgData ? './img/send_btn.png' : './img/no_send_btn.png'" @click="sendMsg"></image>
 
+    </div>
 
   </div>
 
   </div>
 
 </body>
 
 </body>
 
 <script>
 
 <script>
 
@@ -58,10 +159,26 @@
 
       el: '#box',
 
       el: '#box',
 
       data() {
 
       data() {
 
         return {
 
         return {
 
-          chatList: []
 
+          httpUrl: '',
 
+          memberId: null,
 
+          corpId: null,
 
+          sessionId: null,
 
+          chatList: [],
 
+          msgData: '',
 
+          pollInterval: null,
 
         }
 
         }
 
       },
 
       },
 
       created() {
 
       created() {
 
+        this.httpUrl = this.getQueryParam('httpUrl')
 
+        this.corpId = this.getQueryParam('corpId')
 
+        this.memberId = this.getQueryParam('memberId')
 
+        this.sessionId = this.getQueryParam('sessionId')
 
+        this.chatData()
 
+        this.startPolling()
 
+      },
 
+      beforeDestroy() {
 
+        // 当组件销毁前停止轮询
 
+        this.stopPolling();
 
       },
 
       },
 
       methods: {
 
       methods: {
 
         // 截取url中的数据
 
         // 截取url中的数据
 
@@ -73,6 +190,71 @@
 
           // 返回指定参数的值，如果不存在则返回null  
           // 返回指定参数的值，如果不存在则返回null  
           return urlParams.get(paramName);
 
           return urlParams.get(paramName);
 
         },
 
         },
 
+        startPolling() {
 
+          // 这里写你的轮询逻辑，比如发送API请求
 
+          this.intervalId = setInterval(() => {
 
+            this.chatData()
 
+          }, 5000); // 每5秒发起一次请求
 
+        },
 
+        chatData () {
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/messageListByPage', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              corpId: this.corpId,
 
+              memberId: this.memberId,
 
+              sessionId: this.sessionId,
 
+              page: 1,
 
+              pageCount: 1000,
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (data) {
 
+              this.chatList = data.records.reverse()
 
+              this.$nextTick(() => {
 
+                this.$refs.messageContent.scrollTop = this.$refs.messageContent.scrollHeight
 
+              })
 
+            } else {
 
+              this.$message.error(msg)
 
+            }
 
+          })
 
+        },
 
+        sendMsg () {
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/sendMessage', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              corpId: this.corpId,
 
+              memberId: this.memberId,
 
+              sessionId: this.sessionId,
 
+              text: this.msgData,
 
+              type: 0
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (code === 1) {
 
+              this.msgData = ''
 
+              this.chatData()
 
+            } else {
 
+              this.$message.error(msg)
 
+            }
 
+          })
 
+        },
 
+        stopPolling() {
 
+          // 清除定时器
 
+          if (this.pollInterval) {
 
+            clearInterval(this.pollInterval);
 
+            this.pollInterval = null;
 
+          }
 
+        },
 
       }
 
       }
 
   })   
   })   
 </script>
 
 </script>

BIN
lottery/img/chatbox_right.png
View File


BIN
lottery/img/no_send_btn.png
View File


BIN
lottery/img/send_btn.png
View File


+ 4 - 0
lottery/index.html
View File 

@@ -606,6 +606,10 @@
 
 						// 红包兑换
 
 						// 红包兑换
 
 						var currentQueryParams = window.location.search;
 
 						var currentQueryParams = window.location.search;
 
 						window.location.replace('receiveMoney.html' + currentQueryParams)
 
 						window.location.replace('receiveMoney.html' + currentQueryParams)
 
+					} else if (this.h5Type == 23) {
 
+						// 会话列表
 
+						var currentQueryParams = window.location.search;
 
+						window.location.replace('sessionList.html' + currentQueryParams)
 
 					}
 
 					}
 
         },
 
         },
 
         methods: {
 
         methods: {

+ 97 - 5
lottery/sessionList.html
View File 

@@ -74,8 +74,13 @@
 
   .session_btn {
 
   .session_btn {
 
     font-weight: 500;
 
     font-weight: 500;
 
     font-size: 14px;
 
     font-size: 14px;
 
+  }
 
+  .online {
 
     color: #2885FF;
 
     color: #2885FF;
 
   }
 
   }
 
+ .offline {
 
+    color: #CCCCCC;
 
+  }
 
 </style>
 
 </style>
 
 <body>
 
 <body>
 
   <div id="box" class="box">
 
   <div id="box" class="box">
 
@@ -84,12 +89,12 @@
 
       <div class="session_list" v-for="(item, index) in sessionList" :key="index">
 
       <div class="session_list" v-for="(item, index) in sessionList" :key="index">
 
         <div class="session_item">
 
         <div class="session_item">
 
           <div class="session_head">
 
           <div class="session_head">
 
-            <image class="head_img" src="./img/prize-bg.png"></image>
 
-            <div class="on_line"></div>
 
+            <image class="head_img" :src="item.sessionAvatar"></image>
 
+            <div class="on_line" v-if="item.onlineStatus"></div>
 
           </div>
 
           </div>
 
-          <div class="client_name">客户昵称</div>
 
+          <div class="client_name">{{item.sessionName}}</div>
 
         </div>
 
         </div>
 
-        <div class="session_btn" @click="handlePrize(item)">进入聊天</div>
 
+        <div class="session_btn" :class="item.onlineStatus ? 'online' : 'offline'" @click="handlePrize(item)">进入聊天</div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
@@ -99,12 +104,56 @@
 
       el: '#box',
 
       el: '#box',
 
       data() {
 
       data() {
 
         return {
 
         return {
 
-          sessionList: []
 
+          httpUrl: '',
 
+          bId: null,
 
+          env: '',
 
+          memberId: null,
 
+          corpId: null,
 
+          sessionList: [],
 
+          pollInterval: null,
 
         }
 
         }
 
       },
 
       },
 
       created() {
 
       created() {
 
+        this.bId = this.getQueryParam('bId')
 
+        this.env = this.getQueryParam('env')
 
+
 
+        if (!this.env || this.env === 'prod') {
 
+          this.httpUrl = 'https://wlapi.wefanbot.com'
 
+        } else {
 
+          this.httpUrl = 'http://test.wefanbot.com:18993'
 
+        }
 
+        if (this.getQueryParam('memberId')) {
 
+          // 已授权
 
+          this.memberId = this.getQueryParam('memberId')
 
+          this.corpId = this.getQueryParam('corpId')
 
+          this.getSessionList()
 
+          this.startPolling()
 
+        } else {
 
+          // 授权
 
+          this.getAuth()
 
+        }
 
+      },
 
+      beforeDestroy() {
 
+        // 当组件销毁前停止轮询
 
+        this.stopPolling();
 
       },
 
       },
 
       methods: {
 
       methods: {
 
+        getAuth () {
 
+          fetch(this.httpUrl + `/p/insuite/p/getRedirectUri?env=${this.env}&bId=${this.bId}`)
 
+            .then(res => {
 
+              return res.json()
 
+            }).then(result => {
 
+              let { data, code, msg } = result
 
+              if (code === 1) {
 
+                window.location.replace(data)
 
+              } else {
 
+                this.$message({
 
+                  message: msg,
 
+                  type: 'warning'
 
+                })
 
+              }
 
+            })
 
+        },
 
         // 截取url中的数据
 
         // 截取url中的数据
 
         getQueryParam (paramName) {
 
         getQueryParam (paramName) {
 
           // 获取当前URL的查询字符串部分  
           // 获取当前URL的查询字符串部分  
@@ -114,6 +163,49 @@
 
           // 返回指定参数的值，如果不存在则返回null  
           // 返回指定参数的值，如果不存在则返回null  
           return urlParams.get(paramName);
 
           return urlParams.get(paramName);
 
         },
 
         },
 
+        startPolling() {
 
+          // 这里写你的轮询逻辑，比如发送API请求
 
+          this.intervalId = setInterval(() => {
 
+            this.getSessionList()
 
+          }, 5000); // 每5秒发起一次请求
 
+        },
 
+        getSessionList () {
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/sessionListByPage', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              corpId: this.corpId,
 
+              memberId: this.memberId,
 
+              page: 1,
 
+              pageCount: 1000,
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (data) {
 
+              this.sessionList = data.records
 
+            } else {
 
+              this.$message.error(msg)
 
+            }
 
+          })
 
+        },
 
+        handlePrize (item) {
 
+          if (item.onlineStatus) {
 
+            window.location.href = `chat.html?httpUrl=${this.httpUrl}&corpId=${this.corpId}&memberId=${this.memberId}&sessionId=${item.sessionId}`;
 
+          } else {
 
+            return false
 
+          }
 
+        },
 
+        stopPolling() {
 
+          // 清除定时器
 
+          if (this.pollInterval) {
 
+            clearInterval(this.pollInterval);
 
+            this.pollInterval = null;
 
+          }
 
+        },
 
       }
 
       }
 
   })   
   })   
 </script>
 
 </script>