|
@@ -0,0 +1,318 @@
|
|
|
|
|
+<!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>超时消息列表</title>
|
|
|
|
|
+ <!--引入 element-ui 的样式,-->
|
|
|
|
|
+ <link rel="stylesheet"
|
|
|
|
|
+ href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742018383195/element-ui.css">
|
|
|
|
|
+ <!-- 必须先引入vue, 后使用element-ui -->
|
|
|
|
|
+ <script
|
|
|
|
|
+ src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
|
|
|
|
|
+ <!-- 引入element 的组件库-->
|
|
|
|
|
+ <script
|
|
|
|
|
+ src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017747738/element-ui.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;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .client_list {
|
|
|
|
|
+ padding: 15px 10px;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .client_item {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 20px 10px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .client_head {
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #222222;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .client_right {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ }
|
|
|
|
|
+ .to_iocn {
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|
|
|
|
|
+
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div id="box" class="box">
|
|
|
|
|
+ <!-- 数据查看 -->
|
|
|
|
|
+ <div class="page4">
|
|
|
|
|
+ <div class="client_list">
|
|
|
|
|
+ <div class="client_item" v-for="(item, index) in timeOutList" :key="index" @click="handleTimeOut(item)">
|
|
|
|
|
+ <div class="client_head">{{item.clientName}}</div>
|
|
|
|
|
+ <div class="client_right">已等待
|
|
|
|
|
+ <span style="color: #FF4E4E;">{{formatTime(item.waitSeconds)}}</span>
|
|
|
|
|
+ <img class="to_iocn" src="./img/to-icon.png" alt="">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</body>
|
|
|
|
|
+<script>
|
|
|
|
|
+ new Vue({
|
|
|
|
|
+ el: '#box',
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ httpUrl: '',
|
|
|
|
|
+ bId: null,
|
|
|
|
|
+ env: '',
|
|
|
|
|
+ memberId: null,
|
|
|
|
|
+ timeOutList: [],
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ 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.getQyWxSign()
|
|
|
|
|
+ this.executeDetail()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 授权
|
|
|
|
|
+ this.getAuth()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ 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'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ 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) {
|
|
|
|
|
+ wx.config({
|
|
|
|
|
+ beta: true,
|
|
|
|
|
+ debug: false,
|
|
|
|
|
+ appId: data.corpid, // 必填,企业号的唯一标识,此处填写企业号corpid
|
|
|
|
|
+ timestamp: data.timestamp, // 必填,生成签名的时间戳
|
|
|
|
|
+ nonceStr: data.nonceStr, // 必填,生成签名的随机串
|
|
|
|
|
+ signature: data.agentSignature, // 必填,签名,见附录1
|
|
|
|
|
+ jsApiList: ['checkJsApi', 'openEnterpriseChat'] // 必填,需要使用的JS接口列表
|
|
|
|
|
+ })
|
|
|
|
|
+ wx.agentConfig({
|
|
|
|
|
+ corpid: data.corpid,
|
|
|
|
|
+ agentid: data.agentId,
|
|
|
|
|
+ timestamp: data.timestamp, // 必填,生成签名的时间戳
|
|
|
|
|
+ nonceStr: data.nonceStr, // 必填,生成签名的随机串
|
|
|
|
|
+ signature: data.agentSignature, // 必填,签名,见附录1
|
|
|
|
|
+ jsApiList: ['openEnterpriseChat'], // 必填,需要使用的JS接口列表
|
|
|
|
|
+ success: function (res) {
|
|
|
|
|
+ // 回调
|
|
|
|
|
+ console.log('agentConfig成功', res);
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: function (res) {
|
|
|
|
|
+ if (res.errMsg.indexOf('function not exist') > -1) {
|
|
|
|
|
+ alert('版本过低请升级');
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ complete: function (res) {
|
|
|
|
|
+ // 回调
|
|
|
|
|
+ console.log('complete', res);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: msg,
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ executeDetail() {
|
|
|
|
|
+ fetch(this.httpUrl + `/wxcp/monitoredMessage/p/member/wait-handle-message?memberId=${this.memberId}`)
|
|
|
|
|
+ .then(res => {
|
|
|
|
|
+ return res.json()
|
|
|
|
|
+ }).then(result => {
|
|
|
|
|
+ let { data, code, msg } = result
|
|
|
|
|
+ if (code === 1) {
|
|
|
|
|
+ this.timeOutList = data || []
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: msg,
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ handleTimeOut(item) {
|
|
|
|
|
+ if (item.sessionType === 1) {
|
|
|
|
|
+ this.toFollowGroup(item)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.toFollowClient(item)
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ toFollowGroup(item) {
|
|
|
|
|
+ wx.openEnterpriseChat({
|
|
|
|
|
+ groupName: "", // 会话名称。单聊时该参数传入空字符串""即可。
|
|
|
|
|
+ chatId: item.chatId,
|
|
|
|
|
+ success: function (res) {
|
|
|
|
|
+ var chatId = res.chatId; //返回当前群聊ID,仅当使用agentConfig注入该接口权限时才返回chatId
|
|
|
|
|
+ // 回调
|
|
|
|
|
+ console.log('打开客户群聊成功', res)
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: function (res) {
|
|
|
|
|
+ // 回调
|
|
|
|
|
+ if (res.errMsg.indexOf('function not exist') > -1) {
|
|
|
|
|
+ alert('版本过低请升级');
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log('失败', res);
|
|
|
|
|
+ },
|
|
|
|
|
+ complete: function (res) {
|
|
|
|
|
+ // 回调
|
|
|
|
|
+ console.log('完成', res);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ toFollowClient (item) {
|
|
|
|
|
+ wx.openEnterpriseChat({
|
|
|
|
|
+ externalUserIds: item.wxcpClientExternalUserId, // 参与会话的外部联系人列表,格式为userId1;userId2;…,用分号隔开。
|
|
|
|
|
+ groupName: "", // 会话名称。单聊时该参数传入空字符串""即可。
|
|
|
|
|
+ chatId: "",
|
|
|
|
|
+ success: function (res) {
|
|
|
|
|
+ var chatId = res.chatId; //返回当前群聊ID,仅当使用agentConfig注入该接口权限时才返回chatId
|
|
|
|
|
+ // 回调
|
|
|
|
|
+ console.log('打开客户成功', res)
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: function (res) {
|
|
|
|
|
+ // 回调
|
|
|
|
|
+ if (res.errMsg.indexOf('function not exist') > -1) {
|
|
|
|
|
+ alert('版本过低请升级');
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log('失败', res);
|
|
|
|
|
+ },
|
|
|
|
|
+ complete: function (res) {
|
|
|
|
|
+ // 回调
|
|
|
|
|
+ console.log('完成', res);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ formatTime(seconds) {
|
|
|
|
|
+ if (seconds === undefined || seconds === '' || seconds === null) {
|
|
|
|
|
+ return '--'
|
|
|
|
|
+ }
|
|
|
|
|
+ if (seconds >= 3600) {
|
|
|
|
|
+ // 转换为小时并保留整数部分
|
|
|
|
|
+ const hour = this.formatNumber(seconds / 3600);
|
|
|
|
|
+ return `${hour}小时`;
|
|
|
|
|
+ } else if (seconds >= 60) {
|
|
|
|
|
+ // 转换为分钟并保留整数部分
|
|
|
|
|
+ const minutes = this.formatNumber(seconds / 60);
|
|
|
|
|
+ return `${minutes}分钟`;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return `${seconds}秒`;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ formatNumber(num) {
|
|
|
|
|
+ const number = Number(num);
|
|
|
|
|
+
|
|
|
|
|
+ if (isNaN(number) || !isFinite(number)) {
|
|
|
|
|
+ return num;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 整数直接返回
|
|
|
|
|
+ if (Number.isInteger(number)) {
|
|
|
|
|
+ return number.toString();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 非整数处理:先保留两位小数,再移除末尾的零
|
|
|
|
|
+ let str = number.toFixed(2);
|
|
|
|
|
+ // 正则表达式移除末尾的零(保留有效小数位)
|
|
|
|
|
+ return str.replace(/(\.[1-9]?0+)$|(\.[1-9])0+$/g, '$1$2');
|
|
|
|
|
+ },
|
|
|
|
|
+ // 截取url中的数据
|
|
|
|
|
+ getQueryParam(paramName) {
|
|
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
|
|
+ const queryString = window.location.search;
|
|
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
|
|
+ // 返回指定参数的值,如果不存在则返回null
|
|
|
|
|
+ return urlParams.get(paramName);
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+</html>
|