行为上报

使用方法

1、下载依赖包

npm i user-action

2、引入(分为 vue2 和 vue3)

vue2 使用

import Vue from 'vue'
import { loadDirectives } from 'user-action'
loadDirectives.init({
  headers: {
    user_id: '111',
    tenant_id: '111',
    client_version: '111', // 后台可以不传
    user_name: '111',
    tenant_name: '111',
    report_module: 1 // 上报模块 1:CLIENT 2:WEB,默认或错误值为CLIENT
  },
  params: {
    whatsId: '111' // 后台可以不传
  }
})
loadDirectives.loadDirectivesV2(Vue)

vue3 使用

import { createApp } from 'vue'
import { loadDirectives } from 'user-action'
loadDirectives.init({
  headers: {
    user_id: '111',
    tenant_id: '111',
    client_version: '111',
    user_name: '111',
    tenant_name: '111',
    report_module: '1' // 上报模块 1:CLIENT 2:WEB 默认或错误值为CLIENT
  },
  params: {
    whatsId: '111'
  }
})
const app = createApp()
loadDirectives.loadDirectivesV3(app)

whatId 更改函数

// whatsId 更改
loadDirectives.update({
  whatsId: '222'
})

3、参数说明

headers

{
  "cpu_info": "amd", // cpu信息
  "video_card": "1001", // 显卡型号
  "window_version": "win7", // windows版本
  "memory_size": "18217331122", // 内存大小(G)
  "hard_memory_size": "500", // 硬盘大小(G)
  "client_version": "2", // 客户端版本
  "user_id": "200106", // 用户id - 必填
  "tenant_id": "200106", // 公司id - 必填
  "user_name": "add", // 用户名称 - 必填
  "tenant_name": "add", // 公司名称 - 必填
  "report_module": "2" // 上报模块 1:CLIENT 2:WEB,默认或错误值为CLIENT - 必填
}

params

[
  {
    "whatsId": "18217331122" // 客服号id
  }
]

行为类型(见 5 中,使用方式)

{
  "moduleCode": "OTHER", // 模块code
  "menuId": "110000", // 菜单(页面)id
  "actionType": "add" //行为类型
}

whatId 获取

// node 获取 whatsId
let whatsId = userInfo().selectWhats.userInfo.whatsId // 带有 '@' 符号
whatsId.slice(0, whatsId.indexOf('@'))

4、跨域处理

Vue2 跨域

devServer: {
  proxy: {
    '/useraction': {
      target: 'http://192.168.2.96:10013',
      changeOrigin: true,
      pathRewrite: {
        '^/useraction': '/'
      }
    },
  }
}

Vue3(vite) 跨域

proxy: {
  '/useraction': {
    target: 'http://192.168.2.96:10013',
    changeOrigin: true,
    rewrite: (path) => path.replace('/useraction', '')
  }
}

5、使用

点击事件使用

<button
  v-user-action="{ module_code: 'TXL', action_type: 'click' }"
  menu_id="300500"
>
  行为上报
</button>

tabs 使用

<el-tabs
  v-model="activeName"
  @tab-click="handleClick"
  v-user-action="{ module_code: 'TXL', action_type: 'click' }"
>
  <el-tab-pane
    v-for="(item,index) in tabsList"
    :key="index"
    :name="item.name"
    :label="item.label"
  >
    <template #label>
      <div :menu_id="item.menu_id">{{ item.label }}</div>
    </template>
  </el-tab-pane>
</el-tabs>

dropdown-menu

<el-dropdown-menu
  v-user-action="{ module_code: 'YHHX', action_type: 'unsettled' }"
>
  <el-dropdown-item @click="openMask(); addCollaboratorShowHide();">
    {{ $t('main.addCollaborator') }}
  </el-dropdown-item>
  <el-dropdown-item @click="noTransferred" menu_id="200006">
    {{ $t('main.inTheHighSeas') }}
  </el-dropdown-item>
</el-dropdown-menu>