|
|
@@ -0,0 +1,323 @@
|
|
|
+<!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.0">
|
|
|
+ <title>数据查看</title>
|
|
|
+ <!--引入 element-ui 的样式，-->
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
+ <!-- 必须先引入vue， 后使用element-ui -->
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <!-- 引入element 的组件库-->
|
|
|
+ <script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
+ <script src="https://unpkg.com/vconsole/dist/vconsole.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>
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .top_tip {
|
|
|
+ background: #afdefd;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 6px 0;
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: #FFF;
|
|
|
+ }
|
|
|
+ .icon_logo {
|
|
|
+ width: 20px;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+ .sop_content {
|
|
|
+ background: #f1f9ff;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .font {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+ .send_title {
|
|
|
+ padding: 20px;
|
|
|
+ background: #FFF;
|
|
|
+ border-bottom: 1px solid #d2d3d4;
|
|
|
+ }
|
|
|
+ .send_content {
|
|
|
+ padding: 20px;
|
|
|
+ background: #FFF;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .send_item {
|
|
|
+ background: #F8F8F8;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .send_logo {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .follow_client {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #FFF;
|
|
|
+ }
|
|
|
+ .client_msg {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .avatar {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .follow_btn {
|
|
|
+ background: #f1f9ff;
|
|
|
+ color: #1890ff;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="box" class="box">
|
|
|
+ <!-- 数据查看 -->
|
|
|
+ <div class="page4">
|
|
|
+ <div class="top_tip">
|
|
|
+ <img class="logo" src="./img/wefan.png"></img>
|
|
|
+ 微分机器人提供技术支持
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="sop_content">
|
|
|
+ <img class="icon_logo" :src="executeData.clientAvatar || './img/avatar.png'"></img>
|
|
|
+ <span>「{{executeData.clientName}}」在「{{timeFormat(executeData.triggerTime, 'yyyy/MM/dd hh:mm:ss')}}」</span>
|
|
|
+ <span class="font" v-if="executeData.triggerType">添加好友后触发客户SOP任务，</span>
|
|
|
+ <span class="font" v-else>打上标签后触发客户SOP任务，</span>
|
|
|
+ <span>快去跟进吧</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="send_title">推送内容</div>
|
|
|
+ <div class="send_content">
|
|
|
+ <div class="send_item" v-for="(item, index) in executeData.ctOthers" :key="index">
|
|
|
+ <img v-if="item.imgUrl" class="send_logo" :src="item.imgUrl"></img>
|
|
|
+ <span>{{item.matterText}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="send_title">跟进客户</div>
|
|
|
+ <div class="follow_client">
|
|
|
+ <img class="avatar" :src="executeData.clientAvatar || './img/avatar.png'"></img>
|
|
|
+ <div class="client_msg">
|
|
|
+ <span class="font">{{executeData.clientName}}</span>
|
|
|
+ <span>添加时间：{{timeFormat(executeData.addTime, 'yyyy/MM/dd hh:mm:ss')}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="follow_btn" @click="toFollow">去跟进</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ httpUrl: '',
|
|
|
+ bId: null,
|
|
|
+ env: '',
|
|
|
+ activeName: 'playing',
|
|
|
+ executeData: {
|
|
|
+ clientName: '',
|
|
|
+ addTime: '',
|
|
|
+ triggerTime: '',
|
|
|
+ triggerType: '',
|
|
|
+ ctOthers: [],
|
|
|
+ externalUserid: '',
|
|
|
+ clientAvatar: '',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ this.executeDetail()
|
|
|
+ this.getQyWxSign()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ executeDetail() {
|
|
|
+ fetch(this.httpUrl + `/scrm/v1/wxcp-sop/p/executeDetail?id=${this.bId}`)
|
|
|
+ .then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ this.executeData = 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'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toFollow() {
|
|
|
+ wx.openEnterpriseChat({
|
|
|
+ externalUserIds: this.executeData.externalUserid, // 参与会话的外部联系人列表，格式为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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 截取url中的数据
|
|
|
+ getQueryParam(paramName) {
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
+ const queryString = window.location.search;
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
+ // 返回指定参数的值，如果不存在则返回null
|
|
|
+ return urlParams.get(paramName);
|
|
|
+ },
|
|
|
+ timeFormat(time, format = 'yyyy-MM-dd hh:mm:ss') {
|
|
|
+ if (time === undefined || time === '' || time === null) {
|
|
|
+ return '/'
|
|
|
+ } else {
|
|
|
+ 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)) {
|
|
|
+ format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return format
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
