|
@@ -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>
|
|
|
+
|