feat: 企微H5 - 推送详情

qwh5/src/router/index.ts

@@ -4,6 +4,7 @@ import radar from '../views/radar.vue'
 import radarH5 from '../views/radarH5.vue'
 import quickwordH5 from '../views/quickwordH5.vue'
 import groupCodeH5 from '../views/groupCodeH5.vue' // 渠道群活码H5
+import userSopH5 from '../views/userSopH5.vue' // 个人SOP H5
 
 
 const routes: Array<RouteRecordRaw> = [
@@ -33,6 +34,11 @@ const routes: Array<RouteRecordRaw> = [
     component: groupCodeH5
   },
   {
+    path: '/userSopH5',
+    name: 'userSopH5',
+    component: userSopH5
+  },
+  {
     path: '/radarH5',
     name: 'radarH5',
     component: radarH5

qwh5/src/utils/common.ts

@@ -20,4 +20,21 @@ export function getQueryString(name?: string) {
     return theRequest
   }
   return theRequest[name] ? theRequest[name] : ''
+}
+// 判断字符串是否为JSON格式
+export function isJSON(str) {
+  if (typeof str == 'string') {
+    try {
+      let obj=JSON.parse(str);
+      if(typeof obj == 'object' && obj ){
+        return true;
+      }else{
+        return false;
+      }
+    } catch(e) {
+      return false;
+    }
+  } else {
+    return false
+  }
 }

qwh5/src/views/userSopH5.vue

@@ -0,0 +1,400 @@
+<template>
+  <div class="user-sop-wrap">
+    <div class="tips-1">{{ sopDetail.desc }}</div>
+    <div class="title-1">推送详情</div>
+    <div class="tips-2">企微助手提醒您给一下客户发送消息</div>
+    <div class="title-2">
+      <span>推送内容</span>
+      <span v-if="sopDetail.msg_list && sopDetail.msg_list.length > 1" class="collapse-btn" @click="onClickCollapse">
+        {{ isShowMore ? '收起' : '查看全部' }}
+      </span>
+    </div>
+    <div class="msg-list-wrap">
+      <!-- 默认只展示第一个消息 -->
+      <template v-if="!isShowMore">
+        <div v-if="sopDetail.msg_list && sopDetail.msg_list[0]" class="msg-item-wrap">
+          <template v-if="sopDetail.msg_list[0].msg_type==1">
+            {{ sopDetail.msg_list[0]?.content?.content || '-' }}
+          </template>
+          <template v-else-if="sopDetail.msg_list[0].msg_type==2">
+            <div class="flex">
+              <img :src="sopDetail.msg_list[0]?.content?.oss_url" class="coverImg flex-shrink">
+              <div class="title">{{ sopDetail.msg_list[0]?.content?.name || '-' }}</div>
+            </div>
+          </template>
+          <template v-else-if="sopDetail.msg_list[0].msg_type==3">
+            <div class="flex">
+              <video class="video-wrap flex-shrink" controls :src="sopDetail.msg_list[0]?.content?.oss_url" />
+              <div class="title">{{ sopDetail.msg_list[0]?.content?.name || '-' }}</div>
+            </div>
+          </template>
+          <template v-else-if="sopDetail.msg_list[0].msg_type==4">
+            <div class="flex">
+              <div class="flex-shrink">【文件】：</div>
+              <div class="title">{{ sopDetail.msg_list[0]?.content?.name || '-' }}</div>
+            </div>
+          </template>
+          <template v-else-if="sopDetail.msg_list[0].msg_type==5">
+            <div class="flex">
+              <img :src="sopDetail.msg_list[0]?.content?.imgUrl" class="coverImg flex-shrink">
+              <div>
+                <div class="title">{{ sopDetail.msg_list[0]?.content?.title || '-' }}</div>
+                <div class="desc">{{ sopDetail.msg_list[0]?.content?.desc || '-' }}</div>
+              </div>
+            </div>
+          </template>
+          <template v-else-if="sopDetail.msg_list[0].msg_type==6">
+            <div class="flex">
+              <div class="flex-shrink">【小程序】：</div>
+              <div class="title">{{ sopDetail.msg_list[0]?.content?.title || '-' }}</div>
+            </div>
+          </template>
+        </div>
+      </template>
+      <!-- 展示全部消息 -->
+      <template v-else>
+        <div class="msg-item-wrap" v-for="(item, idx) in sopDetail.msg_list" :key="idx">
+          <template v-if="item.msg_type==1">
+            {{ item?.content?.content || '-' }}
+          </template>
+          <template v-else-if="item.msg_type==2">
+            <div class="flex">
+              <img :src="item?.content?.oss_url" class="coverImg flex-shrink">
+              <div class="title">{{ item?.content?.name || '-' }}</div>
+            </div>
+          </template>
+          <template v-else-if="item.msg_type==3">
+            <div class="flex">
+              <video class="video-wrap flex-shrink" controls :src="item?.content?.oss_url" />
+              <div class="title">{{ item?.content?.name || '-' }}</div>
+            </div>
+          </template>
+          <template v-else-if="item.msg_type==4">
+            <div class="flex">
+              <div class="flex-shrink">【文件】：</div>
+              <div class="title">{{ item?.content?.name || '-' }}</div>
+            </div>
+          </template>
+          <template v-else-if="item.msg_type==5">
+            <div class="flex">
+              <img :src="item?.content?.imgUrl" class="coverImg flex-shrink">
+              <div>
+                <div class="title">{{ item?.content?.title || '-' }}</div>
+                <div class="desc">{{ item?.content?.desc || '-' }}</div>
+              </div>
+            </div>
+          </template>
+          <template v-else-if="item.msg_type==6">
+            <div class="flex">
+              <div class="flex-shrink">【小程序】：</div>
+              <div class="title">{{ item?.content?.title || '-' }}</div>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+    <div class="title-2">选择客户跟进</div>
+    <van-list
+      v-model:loading="customer.loading"
+      :finished="customer.finished"
+      finished-text="没有更多了"
+      @load="handleGetCustomer"
+    >
+      <div class="customer-wrap" v-for="(item, idx) in customer.list" :key="idx">
+        <div class="lt-wrap">
+          <div>
+            <img class="avatar" :src="item.avatar" />
+          </div>
+          <div class="info">
+            <div class="name">
+              <span>{{ item.name }}</span>
+              <span class="source">@{{ item.source }}</span>
+            </div>
+            <div class="time">
+              <span>添加时间：</span>
+              <span>{{ item.createtime }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="rt-wrap">
+          <div class="btn" @click="onClickCustomer(item)">跟进</div>
+        </div>
+      </div>
+    </van-list>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, onBeforeMount } from 'vue'
+import { Toast } from 'vant';
+import { getQueryString, isJSON } from '@/utils/common'
+import $axios from '@/utils/axios'
+import getWxConfig from '@/utils/getWxConfig';
+
+interface IRes<T = any> {
+  errno: string | number
+  rst: T
+  [index: string]: any
+}
+
+// 请求参数
+const params = reactive({
+  corpid: getQueryString('corpid'),
+  rule_id: getQueryString('rule_id'),
+  user_id: getQueryString('user_id'),
+})
+
+const sopDetail = ref<any>({
+  msg_list: []
+})
+const isShowMore = ref(false)
+
+const onClickCollapse = () => {
+  isShowMore.value = !isShowMore.value
+}
+
+onBeforeMount(() => {//组件挂载之前
+  if (getQueryString('againJump')) {
+    params.corpid = getQueryString('corpid')
+    params.rule_id = getQueryString('rule_id')
+    params.user_id = getQueryString('user_id')
+    getWxConfig(() => {
+      // handleGetSopDetail()
+    });
+  } else {//获取用户信息
+    getWxConfig('', (authInfo) => {
+      let redirect_uri = encodeURIComponent(window.location.href + '&againJump=true')
+      // let redirect_uri = encodeURIComponent('http://duanju.wenxingshuju.com/playlet/qwh5/dist/index.html#/userSopH5?corpid=wpezvKNwAA9d7LlcuOOAhvlx5ikwJjHg&user_id=woezvKNwAAitJGbknzFNsLkMN656NUjg&rule_id=7' + '&againJump=true')
+
+
+      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`;
+      let link = document.createElement("a");
+      link.href = url;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    });
+  }
+});
+
+onMounted(() => {
+  handleGetSopDetail()
+})
+
+
+// 获取SOP规则详情
+const handleGetSopDetail = async () => {
+  try {
+    Toast.loading({
+      message: '加载中...',
+      duration: 0,
+      forbidClick: true,
+    })
+    const { errno, rst } = await $axios.get('/api/h5/userSop/detail', {
+      corpid: params.corpid,
+      rule_id: params.rule_id,
+    }) as IRes
+    if (errno == 0) {
+      console.log('rst => ', rst)
+      if (rst?.data?.msg_list && Array.isArray(rst.data.msg_list) ) { // 解析JSON类型消息体
+        rst.data.msg_list.forEach(msg => {
+          if (isJSON(msg.content)) {
+            msg.content = JSON.parse(msg.content)
+          }
+        })
+      }
+      sopDetail.value = rst.data
+    }
+  } catch (error) {
+    console.log('error =>', error)
+  } finally {
+    Toast.clear();
+  }
+}
+
+
+const customer = reactive({
+  list: [],
+  loading: false,
+  finished: false,
+  page: 1,
+  page_size: 5,
+})
+// 获取待跟进客户列表
+const handleGetCustomer = async () => {
+  try {
+    Toast.loading({
+      message: '加载中...',
+      duration: 0,
+      forbidClick: true,
+    })
+    const { errno, rst } = await $axios.get('/api/h5/userSop/customer', {
+      corpid: params.corpid,
+      rule_id: params.rule_id,
+      user_id: params.user_id,
+      page: customer.page,
+      page_size: customer.page_size,
+    }) as IRes
+    if (errno == 0) {
+      console.log('rst => ', rst)
+      if (Array.isArray(rst?.data)) {
+        customer.list = [...customer.list, ...rst.data]
+        if (customer.page < rst?.pageInfo?.pages) {
+          customer.page = customer.page + 1
+        } else {
+          customer.finished = true
+        }
+      }
+    }
+  } catch (error) {
+    console.log('error =>', error)
+  } finally {
+    Toast.clear();
+    customer.loading = false
+  }
+}
+
+// 监听点击"跟进"客户
+const onClickCustomer = (customer) => {
+  console.log('onClickCustomer => ', customer)
+  wx.invoke('openUserProfile', {
+    "type": 2, //1表示该userid是企业成员，2表示该userid是外部联系人
+    "userid": customer.external_userid //可以是企业成员，也可以是外部联系人
+  }, function(res) {
+    console.log('res => ', res)
+    if(res.err_msg != "openUserProfile:ok") {
+        //错误处理
+    }
+  });
+}
+
+</script>
+
+<style lang="scss" scoped>
+.user-sop-wrap {
+  box-sizing: border-box;
+  min-height: 100vh;
+  background-color: #FFF;
+  padding: 20px;
+  .tips-1 {
+    font-weight: 600;
+    font-size: 14px;
+    color: #F59A22;
+  }
+  .title-1 {
+    margin-top: 20px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+  .tips-2 {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #333;
+  }
+  .title-2 {
+    margin-top: 20px;
+    font-size: 14px;
+    color: #333;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    .collapse-btn {
+      color: #32B38C;
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+  .msg-list-wrap {
+    margin-top: 10px;
+    .msg-item-wrap {
+      background-color: #f8f8f8;
+      padding: 13px 14px;
+      margin-top: 4px;
+      color: #333;
+      word-wrap: break-word;
+      font-size: 14px;
+      .flex{
+        display:flex;
+        align-items:center;
+        .flex-shrink {
+          flex-shrink: 0;
+        }
+      }
+      .coverImg{
+        width:100px;
+        margin-right:10px;
+      }
+      .title{
+        color: #444;
+        font-size: 14px;
+        word-wrap:break-word;
+      }
+      .video-wrap {
+        width: 100px;
+        height: 150px;
+        margin-right: 10px;
+        background-color: #666;
+      }
+      .desc{
+        color: #999;
+        margin-top: 4px;
+        font-size: 12px;
+        word-wrap:break-word;
+      }
+    }
+  }
+
+  .customer-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    margin-top: 10px;
+    background-color: #F8F8F8;
+    .lt-wrap {
+      flex: 1;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      .avatar {
+        width: 50px;
+        height: 50px;
+      }
+      .info {
+        margin-left: 4px;
+        font-size: 14px;
+        color: #333;
+        .name {
+          .source {
+            margin-left: 3px;
+            color: #00b38a;
+          }
+        }
+
+        .time {
+          margin-top: 10px;
+          font-size: 12px;
+          color: #666;
+        }
+      }
+    }
+    .rt-wrap {
+      flex-shrink: 0;
+      .btn {
+        box-sizing: border-box;
+        border: 2px solid #00b38a;
+        width: 56px;
+        height: 24px;
+        font-size: 14px;
+        color: #00b38a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+      }
+    }
+  }
+
+}
+</style>