开发联调用户发展报告

config/dev.env.js

@@ -1,15 +1,4 @@
 'use strict'
-const merge = require('webpack-merge')
-const prodEnv = require('./prod.env')
-
-// module.exports = merge(prodEnv, {
-//   NODE_ENV: '"development"',
-//   BASE_API: '"http://res.yifangjiaoyu.cn:81/cms"',
-//   SKILL_API: '"http://audioskill.efunbox.cn/audio"',
-//   ali_API: '"http://audio-skill-test.ai160.com:81/audio"',
-//   XYYF_API: '"https://asxx.efunbox.cn:81"',
-//   EFUN_API: '"http://ott80test-api.efunbox.cn:81"'
-// })
 module.exports = {
   NODE_ENV: '"production"',
   BASE_API: '"http://resources.ai160.com/cms"',
@@ -18,7 +7,6 @@ module.exports = {
   XYYF_API: '"http://asxx.efunbox.cn"',
   EFUN_API: '"http://ott80-api.ai160.com"',
   OPPO_API: '"http://xxtbfd-api.ai160.com"',
-  BAIDU_API: '"http://bd-audioskill.efunbox.cn:81/audio"'
+  BAIDU_API: '"http://bd-audioskill.efunbox.cn:81/audio"',
+  DEVELOP:'"http://reader-api.efunbox.cn/wx"'
 }
-
-

config/prod.env.js

@@ -1,4 +1,4 @@
-'use strict'
+"use strict";
 module.exports = {
   NODE_ENV: '"production"',
   BASE_API: '"http://resources.ai160.com/cms"',
@@ -7,5 +7,6 @@ module.exports = {
   XYYF_API: '"http://xyyf-api.ai160.com"',
   EFUN_API: '"http://ott80-api.ai160.com"',
   OPPO_API: '"http://xxtbfd-api.ai160.com"',
-  BAIDU_API: '"https://baidu-audio-skill.ai160.com/audio"'
-}
+  BAIDU_API: '"https://baidu-audio-skill.ai160.com/audio"',
+  DEVELOP: '"http://resources.ai160.com/cms"'
+};

src/api/develop.js

@@ -0,0 +1,68 @@
+import axios from "axios";
+import { Message, MessageBox } from "element-ui";
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.DEVELOP, // api 的 base_url
+  timeout: 5000 // 请求超时时间
+});
+
+// request拦截器
+service.interceptors.request.use(
+  config => {
+    if (localStorage.getItem("token")) {
+      config.headers["token"] = localStorage.getItem("token"); // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    return config;
+  },
+  error => {
+    // Do something with request error
+    console.log(error); // for debug
+    Promise.reject(error);
+  }
+);
+
+// response 拦截器
+service.interceptors.response.use(
+  response => {
+    /**
+     * code为非200是抛错 可结合自己业务进行修改
+     */
+    const res = response.data;
+    if (res.code !== 200) {
+      Message({
+        message: res.message,
+        type: "error",
+        duration: 5 * 1000
+      });
+    } else {
+      return response.data;
+    }
+  },
+  error => {
+    console.log("err" + error); // for debug
+    Message({
+      message: error.message,
+      type: "error",
+      duration: 5 * 1000
+    });
+    return Promise.reject(error);
+  }
+);
+
+// 获取三级渠道列表
+export function getCascaderChannel(params) {
+  return service({
+    url: "/statistics/channel/list",
+    method: "get",
+    params
+  });
+}
+// 获取渠道数据
+export function getChannelData(params) {
+  return service({
+    url: "/statistics/develop/list",
+    method: "get",
+    params
+  });
+}

src/main.js

@@ -31,5 +31,3 @@ new Vue({
   store,
   render: (h) => h(App),
 })
-
-console.log(process.env.BASE_API)

src/pages/layout/toptitle/TopTitle.vue

@@ -54,7 +54,6 @@ export default {
           if(element.children) {
             element.children.forEach(item => {
               if (this.$route.path.indexOf(item.meta.url) !== -1) {
-                console.log(item.meta)
                 this.breadListLast.push(item.meta);
                 if(this.breadListLast.length > 1) {
                   this.breadListLast.shift();

src/pages/reader/develop.vue

@@ -1,21 +1,178 @@
 <template>
-  <div class="wrapper">
-    32323
+  <div>
+    <el-card>
+      <el-form :model="skillParams" ref="skillParams" class="clearfix topForm" style="float: left">
+        <div class="leftForm-skill">
+          <el-form-item class="pruductForm-skill" prop="channel" label="渠道选择"
+            :rules="[{ required: true, message: '请选择渠道', trigger: 'blur' }]">
+            <el-cascader :options="options" v-model="skillParams.channel" :props="{ checkStrictly: true ,}"
+              clearable></el-cascader>
+          </el-form-item>
+          <el-form-item class="dateForm-skill" name="data" label="查询日期" style="display:flex">
+            <el-date-picker style="width:140px" v-model="skillParams.startDay" type="date"
+              placeholder="起"></el-date-picker>
+            <el-date-picker style="width:140px" v-model="skillParams.endDay" type="date"
+              placeholder="止"></el-date-picker>
+          </el-form-item>
+        </div>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table id="table" ref="table1" :data="tableData" border style="width: 100%" :height="tableHeight">
+        <el-table-column label="日期" fixed align="left" header-align="center" min-width="140px">
+          <template slot-scope="scope">
+            <span>{{changeDate(scope.row.day)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户数量" header-align="center">
+          <el-table-column label="当日新增" prop="uv" align="right" header-align="center"
+            min-width="100px"></el-table-column>
+          <el-table-column label="当日注销" prop="uv" align="right" header-align="center"
+            min-width="100px"></el-table-column>
+          <el-table-column label="净增量" prop="uv" align="right" header-align="center"
+            min-width="100px"></el-table-column>
+          <el-table-column label="存量" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+        </el-table-column>
+        <el-table-column label="新增订单数量" header-align="center">
+          <el-table-column label="月包" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="年包" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="终身" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="小计" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+        </el-table-column>
+        <el-table-column label="新增销售金额" header-align="center">
+          <el-table-column label="月包" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="年包" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="终身" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="小计" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+        </el-table-column>
+        <el-table-column label="退订订单数量" header-align="center">
+          <el-table-column label="月包" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="年包" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="终身" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="小计" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+        </el-table-column>
+        <el-table-column label="退订销售金额" header-align="center">
+          <el-table-column label="月包" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="年包" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="终身" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+          <el-table-column label="小计" prop="uv" align="right" header-align="center" min-width="100px"></el-table-column>
+        </el-table-column>
+      </el-table>
+      <el-pagination style="text-align: center;" @current-change="handleCurrentChange"
+        :current-page.sync="pagination.pageNo" :page-size="pagination.pageSize" layout="total, prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </el-card>
   </div>
 </template>
-
 <script>
+import formatDate from "../../utils/formatTime";
+import { getCascaderChannel, getChannelData } from '@/api/develop.js'
 export default {
-  components: {},
-  props: {},
   data() {
     return {
+      tableHeight: 500,
+      tableData: [],
+      skillParams: {
+        startDay: "",
+        endDay: "",
+        channel: [],
+      },
+      pagination: {
+        pageSize: 30,
+        pageNo: 1
+      },
+      currentPage1: 1,
+      options: []
     };
   },
-  mounted() {},
-  methods: {},
+  async created() {
+    this.skillParams.startDay = this.getYesterDay();
+    this.skillParams.endDay = this.getYesterDay();
+    this.tableHeight = document.documentElement.clientHeight * 0.75;
+    let res = await getCascaderChannel()
+    let se = this.filterEmptyChildren(res.data)
+    console.log(se, 'sss');
+    this.options = se
+  },
+  methods: {
+    // 搜索
+    async submitForm() {
+      this.skillParams.startDay = this.skillParams.startDay
+        ? formatDate(this.skillParams.startDay, 2)
+        : "";
+      this.skillParams.endDay = this.skillParams.endDay
+        ? formatDate(this.skillParams.endDay, 2)
+        : "";
+      this.$refs['skillParams'].validate(async valid => {
+        if (valid) {
+          await getChannelData(Object.assign({ ...this.skillParams }, { channel: this.skillParams.channel[this.skillParams.channel.length - 1] }, this.pagination))
+        } else {
+          return false;
+        }
+      });
+    },
+    filterEmptyChildren(child) {
+      let arr = []
+      child.forEach(item => {
+        if (item.children.length > 0) {
+          arr.push({ label: item.label, value: item.value, children: this.filterEmptyChildren(item.children) })
+        } else {
+          arr.push({ label: item.label, value: item.value })
+        }
+      })
+      return arr
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    getYesterDay() {
+      let yesterday = new Date().getTime() - 86400000;
+      return formatDate(yesterday, 2);
+    },
+    channelChange(val) {
+    },
+    skillChange(val) {
+      console.log(val)
+    },
+    columnZero() {
+      return "0";
+    },
+    columnZeroPercent(row, column, index) {
+      if (row.totalPayment && column.property === "yearlyConversion") {
+        return "100.00%";
+      } else {
+        return "0.00%";
+      }
+      // if(row.)
+    },
+    changeDate(date) {
+      return formatDate(date, 4)
+    },
+  }
 };
 </script>
-<style lang="scss" scoped>
-.wrapper{}
-</style>
+<style lang="less" scoped>
+.pruductForm-skill {
+  margin-left: 10px;
+  display: flex;
+}
+.topForm {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+}
+.leftForm-skill {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.dateForm-skill {
+  margin-left: 18px;
+}
+</style>
+