playlet/qwh5/src/views/userSopH5.vue

<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';
import { initQYConfig } 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 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()
  localStorage.removeItem('USER_SOP')
})


// 获取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: 10,
})
// 获取待跟进客户列表
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)
  handleSetSop(customer) // 存储当前sop到本地
  console.log('wx => ', wx)
  const res = 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") {
        //错误处理
    }
  });
  console.log('res => ', res)
}

// 存储当前sop到本地
const handleSetSop = (customer) => {
  localStorage.removeItem('USER_SOP')
  const list = JSON.parse(JSON.stringify(sopDetail.value.msg_list))
  list.forEach(item => {
    item.content.rule_id = params.rule_id
  })
  // const USER_SOP = {
  //   [customer.external_userid]: list,
  // }
  const USER_SOP = list
  console.log('USER_SOP => ', USER_SOP)
  localStorage.setItem('USER_SOP', JSON.stringify(USER_SOP))
}

</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: 1px solid #00b38a;
        width: 56px;
        height: 24px;
        font-size: 14px;
        color: #00b38a;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
      }
    }
  }

}
</style>