vue 数据上报组件

有些场景下，须要咱们去上报一些数据，给到BI进行统计。 为了简化上报步骤，使用自定义指令进行数据上报封装。

如何使用？

// 引入
import Vue from 'vue'
import { Report } from './components/testReport'
Vue.use(Report)
// dom use
<p v-report.view="reportObj">沙发上纷纷</p>
<p v-report.click="reportObj">沙发上111</p>
<p v-report="reportObj">沙发上111</p>
复制代码

testReport 内容

import RePortEventInfo from './event-info'
let Report = {}
Report.RePortEventInfo = RePortEventInfo
Report.install = function (Vue) {
  Vue.directive('report', {
    inserted: function (el, binding) {
      // view 上报
      console.log(binding)
      if (binding.modifiers.view || (!binding.modifiers.view && !binding.modifiers.click)) {
        Report.RePortEventInfo(binding.value)
      }
      // 点击上报
      if (binding.modifiers.click) {
        el.addEventListener('click', function () {
          Report.RePortEventInfo(binding.value)
        })
      }
    }
  })
}

export {
  Report
}

复制代码

上报到BI函数封装，进行统一，具体上报的字段、id双方沟通好。 eg：

reportObj = {
  event_id: '', // 必传 具体申请操做在https://appdata.oa.fenqile.com
  label: '', // 选传 在申请event_id时建立
  tag_list: [], // 选传 渠道码过滤标签key数组
  extend_info: {} // 选传拓展字段对象集合
}
复制代码

event-info.js 内容

import axios from 'axios'
export default function (evt = {}) {
  reportEventInfoH5(evt)
}
function reportEventInfoH5 (evt) {
  axios.post('/XXXXXXXX/uploadData.json', {
    data: {
      system: {
        app_version: '',
        new_version: '',
        machine_code: '',
        os: 'H5'
      },
      data_list: [{
        data_type: 2,
        record_list: [{
          event_id: evt.event_id,
          label: evt.label || '',
          time: Date.now(),
          extend_info: evt.extend_info
        }]
      }]
    }
  })
}
复制代码

3-5年内部岗位（平安、乐信、vivo、oppo）推荐机会，欢迎发简历到： zgxie@126.com