Browse Source

feat: 企微助手 - 客户群群发 - h5页面

zhengxy 2 years ago
parent
commit
25d7ac37f8
3 changed files with 114 additions and 2 deletions
  1. 6 0
      qwh5/src/router/index.ts
  2. 2 2
      qwh5/src/utils/getWxConfig.ts
  3. 106 0
      qwh5/src/views/shareToGroupH5.vue

+ 6 - 0
qwh5/src/router/index.ts

@@ -5,6 +5,7 @@ import radarH5 from '../views/radarH5.vue'
5 5
 import quickwordH5 from '../views/quickwordH5.vue'
6 6
 import groupCodeH5 from '../views/groupCodeH5.vue' // 渠道群活码H5
7 7
 import userSopH5 from '../views/userSopH5.vue' // 个人SOP H5
8
+import shareToGroupH5 from '../views/shareToGroupH5.vue' // 群发消息到客户群
8 9
 
9 10
 
10 11
 const routes: Array<RouteRecordRaw> = [
@@ -39,6 +40,11 @@ const routes: Array<RouteRecordRaw> = [
39 40
     component: userSopH5
40 41
   },
41 42
   {
43
+    path: '/shareToGroupH5',
44
+    name: 'shareToGroupH5',
45
+    component: shareToGroupH5
46
+  },
47
+  {
42 48
     path: '/radarH5',
43 49
     name: 'radarH5',
44 50
     component: radarH5

+ 2 - 2
qwh5/src/utils/getWxConfig.ts

@@ -38,7 +38,7 @@ export function initQYConfig(authInfo, cb) { // 企业
38 38
     timestamp: authInfo.timestamp, // 必填,生成签名的时间戳
39 39
     nonceStr: authInfo.nonce_str, // 必填,生成签名的随机串
40 40
     signature: authInfo.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法 企业签名
41
-    jsApiList: ['getCurExternalContact','sendChatMessage','getCurExternalContact', 'openUserProfile'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
41
+    jsApiList: ['getCurExternalContact','sendChatMessage','getCurExternalContact', 'openUserProfile', 'shareToExternalChat'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
42 42
   })
43 43
   wx.ready(function (res) {
44 44
     console.log(res, 'QYready')
@@ -58,7 +58,7 @@ function initYYConfig(authInfo, cb) { // 应用
58 58
     timestamp: authInfo.timestamp, // 必填,生成签名的时间戳
59 59
     nonceStr: authInfo.nonce_str, // 必填,生成签名的随机串
60 60
     signature: authInfo.app_signature, // 必填,签名,见附录-JS-SDK使用权限签名算法  应用签名
61
-    jsApiList: ['getCurExternalContact','sendChatMessage','getCurExternalContact', 'openUserProfile'], // 必填,传入需要使用的接口名称
61
+    jsApiList: ['getCurExternalContact','sendChatMessage','getCurExternalContact', 'openUserProfile', 'shareToExternalChat'], // 必填,传入需要使用的接口名称
62 62
     success: function (res) {
63 63
       console.log(res, 'YYready')
64 64
       cb ? cb(authInfo) : ''

+ 106 - 0
qwh5/src/views/shareToGroupH5.vue

@@ -0,0 +1,106 @@
1
+<template>
2
+  <div class="user-sop-wrap">
3
+    <div class="title-1">群发消息到客户群</div>
4
+  </div>
5
+</template>
6
+
7
+<script lang="ts" setup>
8
+import { ref, reactive, onBeforeMount } from 'vue'
9
+import { Toast } from 'vant';
10
+import { getQueryString, isJSON } from '@/utils/common'
11
+import $axios from '@/utils/axios'
12
+import getWxConfig from '@/utils/getWxConfig';
13
+
14
+interface IRes<T = any> {
15
+  errno: string | number
16
+  rst: T
17
+  [index: string]: any
18
+}
19
+
20
+// 请求参数
21
+const params = reactive({
22
+  corpid: getQueryString('corpid'),
23
+  rule_id: getQueryString('rule_id'),
24
+  user_id: getQueryString('user_id'),
25
+})
26
+
27
+onBeforeMount(() => {//组件挂载之前
28
+  if (getQueryString('againJump')) {
29
+    params.corpid = getQueryString('corpid')
30
+    params.rule_id = getQueryString('rule_id')
31
+    params.user_id = getQueryString('user_id')
32
+    getWxConfig(() => {
33
+      handleGetSendContent()
34
+    });
35
+  } else {//获取用户信息
36
+    getWxConfig('', (authInfo) => {
37
+      let redirect_uri = encodeURIComponent(window.location.href + '&againJump=true')
38
+      let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${authInfo.corpid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=1&agentid=${authInfo.agent_id}#wechat_redirect`;
39
+      let link = document.createElement("a");
40
+      link.href = url;
41
+      document.body.appendChild(link);
42
+      link.click();
43
+      document.body.removeChild(link);
44
+    });
45
+  }
46
+});
47
+
48
+// 获取SOP规则详情
49
+const handleGetSendContent = async () => {
50
+  try {
51
+    Toast.loading({
52
+      message: '加载中...',
53
+      duration: 0,
54
+      forbidClick: true,
55
+    })
56
+    // const { errno, rst } = await $axios.get('/api/h5/userSop/detail', {
57
+    //   corpid: params.corpid,
58
+    //   rule_id: params.rule_id,
59
+    // }) as IRes
60
+    // if (errno == 0) {
61
+    //   console.log('rst => ', rst)
62
+    // }
63
+
64
+    // 发送消息到群聊
65
+    handleShareToExternalChat()
66
+
67
+  } catch (error) {
68
+    console.log('error =>', error)
69
+  } finally {
70
+    Toast.clear();
71
+  }
72
+}
73
+
74
+const handleShareToExternalChat = () => {
75
+  Toast('执行 shareToExternalChat => ')
76
+  setTimeout(() => {
77
+    wx.invoke("shareToExternalChat", {
78
+      text: {
79
+        content: "测试发送消息到客户群",
80
+      },
81
+      attachments: []
82
+    }, function(res) {
83
+      if (res.err_msg == "shareToExternalChat:ok") {
84
+        Toast('发送成功!')
85
+      }
86
+    });
87
+  }, 1000);
88
+}
89
+
90
+
91
+</script>
92
+
93
+<style lang="scss" scoped>
94
+.user-sop-wrap {
95
+  box-sizing: border-box;
96
+  min-height: 100vh;
97
+  background-color: #FFF;
98
+  padding: 20px;
99
+  .title-1 {
100
+    margin-top: 20px;
101
+    font-size: 16px;
102
+    font-weight: 600;
103
+    color: #333;
104
+  }
105
+}
106
+</style>