|
|
@@ -0,0 +1,347 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
|
|
|
+ <title>AI客服记录</title>
|
|
|
+ <!-- 引入样式文件 -->
|
|
|
+ <link rel="stylesheet"
|
|
|
+ href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012584633/vant.css" />
|
|
|
+ <!-- 必须先引入vue， 后使用vant-ui -->
|
|
|
+ <script
|
|
|
+ src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
|
|
|
+ <!-- 引入vant的组件库-->
|
|
|
+ <!-- 引入 Vant 的 JS 文件 -->
|
|
|
+ <script src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012748487/vant.min.js"></script>
|
|
|
+
|
|
|
+ <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
|
|
+ <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
|
|
|
+ <!-- <script src="js/vconsole.min.js"></script>
|
|
|
+ <script>
|
|
|
+ var vConsole = new window.VConsole();
|
|
|
+ </script> -->
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FAFAFA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page4 {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .van-cell {
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+ .table-list {
|
|
|
+ background: #FAFAFA;
|
|
|
+ height: calc(100vh - 94px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai_msg {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-bottom: 22px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .custom_msg {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-bottom: 22px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .ai_msg_content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #899EB2;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+ .ai_msg_sender {
|
|
|
+ max-width: 150px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ .mychat_box {
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: #BAD7FF;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ max-width: 227px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+ .customchat_box {
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: #d8dbdf;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ max-width: 227px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="box" class="box">
|
|
|
+ <!-- 数据查看 -->
|
|
|
+ <div class="page4">
|
|
|
+ <van-cell class="header-cell" title="选择日期" :value="date" @click="showDate = true" is-link arrow-direction="down"></van-cell>
|
|
|
+ <van-calendar type="range" v-model="showDate" @confirm="onConfirm" color="#1677FF" :min-date="minDate"
|
|
|
+ :max-date="maxDate" :allow-same-day="true"></van-calendar>
|
|
|
+ <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
|
|
+ <div class="table-list">
|
|
|
+ <div class="chat_list" v-for="(item, index) in tableData" :key="index">
|
|
|
+ <div class="ai_msg" v-if="item.self">
|
|
|
+ <div class="ai_msg_content">
|
|
|
+ <div>{{timeFormat(item.msgTime, 'yyyy-MM-dd hh:mm:ss')}}</div>
|
|
|
+ <div class="ai_msg_sender">{{item.sender}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="mychat_box" v-html="item.content.replace(/\n/g,'<br/>')"></div>
|
|
|
+ </div>
|
|
|
+ <div class="custom_msg" v-else>
|
|
|
+ <div class="ai_msg_content">
|
|
|
+ <div class="ai_msg_sender">{{item.sender}}</div>
|
|
|
+ <div>{{timeFormat(item.msgTime, 'yyyy-MM-dd hh:mm:ss')}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="customchat_box" v-html="item.content.replace(/\n/g,'<br/>')"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ httpUrl: '',
|
|
|
+ bId: null,
|
|
|
+ env: '',
|
|
|
+ chatId: 'wrU17nDAAASJJ0fAFXX0dTC4W4kwOiGg',
|
|
|
+ date: '',
|
|
|
+ minDate: '',
|
|
|
+ maxDate: '',
|
|
|
+ showDate: false,
|
|
|
+ currentPage: 1,
|
|
|
+ pages: 0,
|
|
|
+ tableData: [],
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ let nowDat = new Date();
|
|
|
+ let dateY = nowDat.getFullYear()
|
|
|
+ let dateM = nowDat.getMonth()
|
|
|
+ let dateD = nowDat.getDate()
|
|
|
+ // 设置日期可选最小值minDate、最大值maxDate
|
|
|
+ this.minDate = new Date(dateY - 1, dateM, dateD)
|
|
|
+ //日历可选范围为一年，dateY + 1
|
|
|
+ this.maxDate = new Date()
|
|
|
+
|
|
|
+ this.getKfMessages()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getQyWxSign() {
|
|
|
+ fetch(this.httpUrl + '/scrm/v1/wxcp-corp/p/getAgentConfig', {
|
|
|
+ method: 'post',
|
|
|
+ body: JSON.stringify({
|
|
|
+ bid: this.bId,
|
|
|
+ url: window.location.href,
|
|
|
+ }),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ let that = this
|
|
|
+ wx.agentConfig({
|
|
|
+ corpid: data.corpid,
|
|
|
+ agentid: data.agentId,
|
|
|
+ timestamp: data.timestamp, // 必填，生成签名的时间戳
|
|
|
+ nonceStr: data.nonceStr, // 必填，生成签名的随机串
|
|
|
+ signature: data.agentSignature, // 必填，签名，见附录1
|
|
|
+ jsApiList: ['getCurExternalChat'], // 必填，需要使用的JS接口列表
|
|
|
+ success: function (res) {
|
|
|
+ // 回调
|
|
|
+ // 此处直接在注入回调中调用了获取当前外部联系人userId的接口，注意此接口是从聊天框的工具栏进入才能获取
|
|
|
+ wx.invoke('getCurExternalChat', {
|
|
|
+ }, function (res) {
|
|
|
+ if (res.err_msg == "getCurExternalChat:ok") {
|
|
|
+ that.chatId = res.chatId
|
|
|
+ that.getKfMessages()
|
|
|
+ } else {
|
|
|
+ //错误处理
|
|
|
+ console.log('invoke失败:', res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: function (res) {
|
|
|
+ if (res.errMsg.indexOf('function not exist') > -1) {
|
|
|
+ alert('版本过低请升级');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ complete: function (res) {
|
|
|
+ // 回调
|
|
|
+ console.log('complete1', res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ vant.Toast.fail(msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getKfMessages () {
|
|
|
+ this.loading = true
|
|
|
+ fetch(this.httpUrl + `/scrm/v1/wxcp-chat-tool/p/kfMessages`, {
|
|
|
+ method: 'post',
|
|
|
+ body: JSON.stringify({
|
|
|
+ bid: 10039,
|
|
|
+ chatId: this.chatId,
|
|
|
+ page: this.currentPage,
|
|
|
+ pageCount: 10,
|
|
|
+ startTime: this.date.split(' - ')[0],
|
|
|
+ endTime: this.date.split(' - ')[1],
|
|
|
+ }),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ this.tableData = [...this.tableData, ...data.records || []]
|
|
|
+ this.pages = data.pages || 0
|
|
|
+ this.loading = false
|
|
|
+ } else {
|
|
|
+ vant.Toast.fail(msg)
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onLoad () {
|
|
|
+ if (this.currentPage < this.pages) {
|
|
|
+ this.currentPage++
|
|
|
+ this.finished = false
|
|
|
+ this.getKfMessages()
|
|
|
+ } else {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ onConfirm(date) {
|
|
|
+ const [start, end] = date
|
|
|
+ this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
|
|
|
+ this.showDate = false
|
|
|
+ this.getKfMessages()
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
|
|
|
+ },
|
|
|
+ timeFormat(time, format = 'yyyy-MM-dd hh:mm:ss') {
|
|
|
+ if (time === undefined || time === '' || time === null) {
|
|
|
+ return '/';
|
|
|
+ }
|
|
|
+
|
|
|
+ const date = new Date(time);
|
|
|
+ const o = {
|
|
|
+ 'M+': date.getMonth() + 1, // 月份
|
|
|
+ 'd+': date.getDate(), // 日
|
|
|
+ 'h+': date.getHours(), // 小时
|
|
|
+ 'm+': date.getMinutes(), // 分钟
|
|
|
+ 's+': date.getSeconds(), // 秒
|
|
|
+ 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
|
|
+ 'S': date.getMilliseconds() // 毫秒
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理年份
|
|
|
+ if (/(y+)/.test(format)) {
|
|
|
+ format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理日期和时间部分
|
|
|
+ for (let k in o) {
|
|
|
+ if (new RegExp('(' + k + ')').test(format)) {
|
|
|
+ let value = o[k];
|
|
|
+ let padding = RegExp.$1.length === 1 ? '' : '00'; // 根据格式字符串中的长度决定是否补零
|
|
|
+ format = format.replace(RegExp.$1, ('' + value).padStart(padding.length + value.toString().length - value.toString().length, '0'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果格式只包含时间部分，移除日期部分可能的占位符
|
|
|
+ if (!/(M+|d+)/.test(format)) {
|
|
|
+ // 移除任何可能存在的日期占位符（如：'yyyy-MM-dd '）
|
|
|
+ format = format.replace(/(\s*-\s*){2}/g, ''); // 移除两个'-'之间的任何内容
|
|
|
+ format = format.replace(/^\s*yyyy-\s*/, ''); // 移除开头的'yyyy-'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果格式只包含日期部分，移除时间部分可能的占位符
|
|
|
+ if (!/(h+|m+|s+)/.test(format)) {
|
|
|
+ // 移除任何可能存在的时间占位符（如：' hh:mm:ss'）
|
|
|
+ format = format.replace(/(\s*:\s*){2}/g, ''); // 移除两个':'之间的任何内容
|
|
|
+ format = format.replace(/\s*hh:\s*$/, ''); // 移除结尾的' hh:'
|
|
|
+ }
|
|
|
+
|
|
|
+ return format;
|
|
|
+ },
|
|
|
+ // 截取url中的数据
|
|
|
+ getQueryParam(paramName) {
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
+ const queryString = window.location.search;
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
+ // 返回指定参数的值，如果不存在则返回null
|
|
|
+ return urlParams.get(paramName);
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
