客户sop

lottery/clientSop.html

@@ -52,7 +52,12 @@
     height: 20px;
     margin-right: 10px;
   }
-
+  .tag_list {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    overflow-x: auto;
+  }
   .content {
     padding: 20px;
     margin-bottom: 10px;
@@ -74,58 +79,40 @@
   .font {
     color: #1890ff;
   }
-
-  .send_title {
-    padding: 20px;
-    background: #FFF;
-    border-bottom: 1px solid #d2d3d4;
+  .sop_list {
+    padding: 10px 20px;
   }
-
-  .send_content {
-    padding: 20px;
-    background: #FFF;
-    margin-bottom: 10px;
+  .sop_time {
+    font-weight: 600;
   }
-
-  .send_item {
-    background: #F8F8F8;
+  .dot {
+    width: 10px;
+    height: 10px;
+    color: #1890ff;
+  }
+  .sop_item {
+    background: #FFF;
     padding: 20px;
-    margin-bottom: 10px;
-    border-radius: 10px;
+    margin: 10px 0;
     font-size: 14px;
   }
-
-  .send_logo {
-    width: 60px;
-    height: 60px;
-    margin-right: 10px;
-    border-radius: 10px;
+  .sop_body {
+    margin: 10px 0;
   }
-
-  .follow_client {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px;
-    font-size: 14px;
-    background: #FFF;
+  .sop_c {
+    background: #FAFAFA;
+    padding: 10px;
   }
-
-  .client_msg {
+  .sop_foot {
     display: flex;
-    flex-direction: column;
-  }
-
-  .avatar {
-    width: 60px;
-    height: 60px;
-    border-radius: 10px;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0;
   }
-
-  .follow_btn {
-    background: #f1f9ff;
-    color: #1890ff;
-    padding: 5px;
+ .sop_btn {
+    background: #1890ff;
+    color: #FFFFFF;
+    padding: 5px 20px;
     border-radius: 4px;
     font-size: 12px;
   }
@@ -139,31 +126,101 @@
         <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> -->
+      <el-tabs v-model="activeName" stretch @tab-click="handleClickTab">
+        <el-tab-pane label="执行中" name="playing">
+          <div class="tag_list">
+            <el-tag style="margin-right: 10px;" :type="item.type" effect="plain" v-for="(item, index) in executeData" :key="index" @click="getSop(item)">{{item.sopName}}</el-tag>
+          </div>
+          <div class="content">
+            <div class="sop_content">
+              <img class="icon_logo" :src="sopItem.clientAvatar || './img/avatar.png'"></img>
+              <span>「{{sopItem.clientName}}」在「{{timeFormat(sopItem.triggerTime, 'yyyy-MM-dd hh:mm:ss')}}」</span>
+              <span class="font" v-if="sopItem.triggerType">添加好友后触发客户SOP任务，</span>
+              <span class="font" v-else>打上标签后触发客户SOP任务，</span>
+              <span>快去跟进吧</span>
+            </div>
+          </div>
+          <div class="sop_list" v-for="(item, index) in sopPlans" :key="index">
+            <div class="sop_time">
+              <span class="dot">·</span>
+              {{timeFormat(item.executeTime, 'yyyy-MM-dd')}}
+            </div>
+            <div class="sop_item">
+              <div><span style="color: #1890ff;">{{timeFormat(item.executeTime, 'hh:mm:ss')}}</span>发送</div>
+              <div class="sop_body" v-if="item.ctOthers.length > 0">
+                <div v-for="(c, cIndex) in item.ctOthers" :key="cIndex">
+                  <div class="sop_c" v-if="c.matterType === 0">
+                    <span>{{ c.matterText }}</span>
+                  </div>
+                  <div class="sop_c" v-if="c.matterType === 1">
+                    <img style="width: 100px;" :src="c.imgUrl" />
+                  </div>
+                  <div class="sop_c" v-if="c.matterType === 5">
+                    <span>{{ c.linkTitle }}</span>
+                  </div>
+                  <div class="sop_c" v-if="c.matterType === 2">
+                    <span>自定义视频</span>
+                  </div>
+                  <div class="sop_c" v-if="c.matterType === 4">
+                    <span>{{ c.fileName }}</span>
+                  </div>
+                  <div class="sop_foot">
+                    <span style="color: #999;">{{item.isSend ? '已发送' : ''}}</span>
+                    <div class="sop_btn" @click="handleSend(item.id, c)">发送</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="已完成" name="ending">
+          <div class="tag_list">
+            <el-tag style="margin-right: 10px;" :type="item.type" effect="plain" v-for="(item, index) in executeData" :key="index"
+              @click="getSop(item)">{{item.sopName}}</el-tag>
+          </div>
+          <div class="content">
+            <div class="sop_content">
+              <img class="icon_logo" :src="sopItem.clientAvatar || './img/avatar.png'"></img>
+              <span>「{{sopItem.clientName}}」在「{{timeFormat(sopItem.triggerTime, 'yyyy-MM-dd hh:mm:ss')}}」</span>
+              <span class="font" v-if="sopItem.triggerType">添加好友后触发客户SOP任务，</span>
+              <span class="font" v-else>打上标签后触发客户SOP任务，</span>
+              <span>快去跟进吧</span>
+            </div>
+          </div>
+          <div class="sop_list" v-for="(item, index) in sopPlans" :key="index">
+            <div class="sop_time">
+              <span class="dot">·</span>
+              {{timeFormat(item.executeTime, 'yyyy-MM-dd')}}
+            </div>
+            <div class="sop_item">
+              <div><span style="color: #1890ff;">{{timeFormat(item.executeTime, 'hh:mm:ss')}}</span>发送</div>
+              <div class="sop_body" v-if="item.ctOthers.length > 0">
+                <div v-for="(c, cIndex) in item.ctOthers" :key="cIndex">
+                  <div class="sop_c" v-if="c.matterType === 0">
+                    <span>{{ c.matterText }}</span>
+                  </div>
+                  <div class="sop_c" v-if="c.matterType === 1">
+                    <img style="width: 100px;" :src="c.imgUrl" />
+                  </div>
+                  <div class="sop_c" v-if="c.matterType === 5">
+                    <span>{{ c.linkTitle }}</span>
+                  </div>
+                  <div class="sop_c" v-if="c.matterType === 2">
+                    <span>自定义视频</span>
+                  </div>
+                  <div class="sop_c" v-if="c.matterType === 4">
+                    <span>{{ c.fileName }}</span>
+                  </div>
+                  <div class="sop_foot">
+                    <span style="color: #999;">{{item.isSend ? '已发送' : ''}}</span>
+                    <div class="sop_btn" @click="handleSend(item.id, c)">发送</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
     </div>
   </div>
 </body>
@@ -178,6 +235,10 @@
         memberId: null,
         activeName: 'playing',
         executeData: [],
+        sopItem: {},
+        sopPlans: [],
+        historyId: null,
+        externalUserId: null,
       }
     },
     created() {
@@ -197,6 +258,9 @@
         // 授权
         this.getAuth()
       }
+      // this.memberId = "woU17nDAAAnoSca19vZVKiNEKdc9tyYQ"
+      // this.externalUserId = "wmU17nDAAAGT2PF6G8PUHdSx2DY1ljpg"
+      // this.executeSopList()
     },
     methods: {
       getAuth() {
@@ -230,6 +294,7 @@
         }).then(result => {
           let { data, code, msg } = result
           if (code === 1) {
+			      let that = this
             wx.agentConfig({
               corpid: data.corpid,
               agentid: data.agentId,
@@ -243,7 +308,9 @@
                 wx.invoke('getCurExternalContact', {
                 }, function (res) {
                   if (res.err_msg == "getCurExternalContact:ok") {
-                    this.executeSopList(res.userId)
+                    console.log('invoke成功:', res.userId);
+                    that.externalUserId = res.userId
+                    that.executeSopList()
                   } else {
                     //错误处理
                     console.log('invoke失败:', res)
@@ -258,7 +325,7 @@
               },
               complete: function (res) {
                 // 回调
-                console.log('complete', res);
+                console.log('complete1', res);
               }
             });
 
@@ -270,15 +337,28 @@
           }
         })
       },
+      handleClickTab(tab) {
+        if (tab.name === 'playing') {
+          this.executeSopList(0)
+        } else {
+          this.executeSopList(1)
+        }
+      },
       //获取执行中的sop计划
-      executeSopList(externalUserId) {
-        fetch(this.httpUrl + `/scrm/v1/wxcp-sop/p/executeSopList?externalUserId=${externalUserId}&memberId=${this.memberId}}$bId=${this.bId}&env=${this.env}`)
+      executeSopList(status) {
+        fetch(this.httpUrl + `/scrm/v1/wxcp-sop/p/executeSopList?externalUserId=${this.externalUserId}&memberId=${this.memberId}&bId=${this.bId}&status=${status || 0}`)
           .then(res => {
             return res.json()
           }).then(result => {
             let { data, code, msg } = result
             if (code === 1) {
               this.executeData = data
+              if (data.length > 0) {
+                this.executeData.forEach(i => {
+                  i.type = ''
+                })
+                this.getSop(data[0], status)
+              }
             } else {
               this.$message({
                 message: msg,
@@ -287,6 +367,211 @@
             }
           })
       },
+      getSop (item, status) {
+        this.sopItem = item
+        this.executeData.forEach(i => {
+          if (i.sopId !== item.sopId) {
+            i.type = '' 
+          } else {
+            i.type = 'success'
+          }
+        })
+        this.getSopHistoryList(item, status)
+      },
+      // 获取sop内容
+      getSopHistoryList(item, status) {
+        fetch(this.httpUrl + `/scrm/v1/wxcp-sop/p/executeSopHistoryList?clientId=${item.clientId}&memberId=${this.memberId}&sopId=${item.sopId}&status=${status || 0}`)
+          .then(res => {
+            return res.json()
+          }).then(result => {
+            let { data, code, msg } = result
+            if (code === 1) {
+              this.sopPlans = data
+            } else {
+              this.$message({
+                message: msg,
+                type: 'warning'
+              })
+            }
+          })
+      },
+      handleSend(historyId, c) {
+        this.historyId = historyId
+        if (c.matterType === 1 || c.matterType === 2 || c.matterType === 4) {
+          fetch(this.httpUrl + `/scrm/v1/wxcp-sop/p/getMedia?planContentId=${c.id}`)
+            .then(res => {
+              return res.json()
+            }).then(result => {
+              let { data, code, msg } = result
+              if (code === 1) {
+                this.sendData(c, data.mediaId)
+              } else {
+                this.$message({
+                  message: msg,
+                  type: 'warning'
+                })
+              }
+            })
+        } else {
+          this.sendData(c)
+        }
+      },
+      sendData (c, mediaId) {
+        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: ['sendChatMessage'], // 必填，需要使用的JS接口列表
+              success: function (res) {
+                // 回调
+                if (c.matterType === 0) {
+                  wx.invoke('sendChatMessage', {
+                    msgtype: "text", //消息类型，必填
+                    enterChat: false, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
+                    text: {
+                      content: c.matterText, //文本内容
+                    },
+                  }, function (res) {
+                    if (res.err_msg == 'sendChatMessage:ok') {
+                      that.updateSop()
+                      //发送成功
+                      that.$message({
+                        message: '发送成功',
+                        type: 'success'
+                      })
+                    }
+                  })
+                } else if (c.matterType === 1) {
+                  wx.invoke('sendChatMessage', {
+                    msgtype: "image", //消息类型，必填
+                    enterChat: false, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
+                    image:
+                    {
+                      mediaid: mediaId, //图片的素材id
+                    },
+                  }, function (res) {
+                    if (res.err_msg == 'sendChatMessage:ok') {
+                      that.updateSop()
+                      //发送成功
+                      that.$message({
+                        message: '发送成功',
+                        type: 'success'
+                      })
+                    }
+                  })
+                } else if (c.matterType === 2) {
+                  wx.invoke('sendChatMessage', {
+                    msgtype: "video", //消息类型，必填
+                    enterChat: false, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
+                    video:
+                    {
+                      mediaid: mediaId, //视频的素材id
+                    },
+                  }, function (res) {
+                    if (res.err_msg == 'sendChatMessage:ok') {
+                      that.updateSop()
+                      //发送成功
+                      that.$message({
+                        message: '发送成功',
+                        type: 'success'
+                      })
+                    }
+                  })
+                } else if (c.matterType === 4) {
+                  wx.invoke('sendChatMessage', {
+                    msgtype: "file", //消息类型，必填
+                    enterChat: false, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
+                    file:
+                    {
+                      mediaid: mediaId, //文件的素材id
+                    },
+                  }, function (res) {
+                    if (res.err_msg == 'sendChatMessage:ok') {
+                      that.updateSop()
+                      //发送成功
+                      that.$message({
+                        message: '发送成功',
+                        type: 'success'
+                      })
+                    }
+                  })
+                } else if (c.matterType === 5) {
+                  wx.invoke('sendChatMessage', {
+                    msgtype: "news", //消息类型，必填
+                    enterChat: false, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
+                    news:
+                    {
+                      link: c.linkUrl, //H5消息页面url 必填
+                      title: c.linkTitle, //H5消息标题
+                      desc: c.linkDescription, //H5消息摘要
+                      imgUrl: c.linkThumbUrl, //H5消息封面图片URL 
+                    }
+                  }, function (res) {
+                    if (res.err_msg == 'sendChatMessage:ok') {
+                      that.updateSop()
+                      //发送成功
+                      that.$message({
+                        message: '发送成功',
+                        type: 'success'
+                      })
+                    }
+                  })
+                }
+              },
+              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'
+            })
+          }
+        })
+      },
+      // 发送成功后刷新数据
+      updateSop() {
+        fetch(this.httpUrl + `/scrm/v1/wxcp-sop/p/updateHistorySendStatus?historyId=${this.historyId}`)
+          .then(res => {
+            return res.json()
+          }).then(result => {
+            let { data, code, msg } = result
+            if (code === 1) {
+              this.getSopHistoryList(this.sopItem)
+            } else {
+              this.$message({
+                message: msg,
+                type: 'warning'
+              })
+            }
+          }).finally(() => {
+            this.historyId = null 
+          })
+      },
       // 截取url中的数据
       getQueryParam(paramName) {
         // 获取当前URL的查询字符串部分  
@@ -298,29 +583,50 @@
       },
       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 '/';
+        }
+
+        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'));
           }
-          return format
         }
-      },
+
+        // 如果格式只包含时间部分，移除日期部分可能的占位符
+        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;
+      }
     }
   })   
 </script>

lottery/groupSopTip.html

@@ -0,0 +1,337 @@
+<!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>

lottery/index.html

@@ -611,13 +611,17 @@
 						var currentQueryParams = window.location.search;
 						window.location.replace('sessionList.html' + currentQueryParams)
 					} else if (this.h5Type == 24) {
-						// SOP
+						// 客户SOP提醒
 						var currentQueryParams = window.location.search;
-						window.location.replace('sop.html' + currentQueryParams)
+						window.location.replace('clientSopTip.html' + currentQueryParams)
 					} else if (this.h5Type == 25) {
-						// 客户SOP
+						// 客户SOP内容
 						var currentQueryParams = window.location.search;
 						window.location.replace('clientSop.html' + currentQueryParams)
+					} else if (this.h5Type == 26) {
+						// 群SOP提醒
+						var currentQueryParams = window.location.search;
+						window.location.replace('groupSopTip.html' + currentQueryParams)
 					} else if (!this.h5Type) {
 						this.getAuth()
 					}