<template> <div class="channel-trans-list"> <el-form ref="searchFrom" :model="searchFrom" label-width="100px" inline> <el-form-item label="进量日期"> <el-date-picker v-model="searchFrom.payTime" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}" :default-time="['00:00:00','23:59:59']" @change="getChannelTransList" ></el-date-picker> </el-form-item> <el-form-item label="渠道code"> <el-input v-model="searchFrom.invite_type" style="width: 110px"></el-input> </el-form-item> <el-form-item label="商品名称"> <el-select v-model="searchFrom.goods_id" filterable placeholder="请选择" style="width: 150px" @change="getChannelTransList" clearable > <el-option v-for="(data,index) in goodList" :key="index" :label="data | filterGoods" :value="data.id" ></el-option> </el-select> </el-form-item> <el-form-item label="渠道类别"> <el-select v-model="searchFrom.type_id" filterable placeholder="请选择" style="width: 150px" @change="getChannelTransList" clearable > <el-option v-for="(data,index) in typeList" :key="index" :label="data.value" :value="data.id" ></el-option> </el-select> </el-form-item> <el-form-item> <div class="flexRow"> <el-button type="primary" plain @click="seachData">搜索</el-button> </div> </el-form-item> </el-form> <el-table border :span-method="objectSpanMethod" :data="list" :style="{width: width+'px'}" @sort-change="sortMethod" fixed > <el-table-column prop="is_other" label="渠道来源"> <template slot-scope="scope">{{scope.row.is_other==0?"内部":"外部"}}</template> </el-table-column> <el-table-column prop="invite_type_name" label="渠道类别"></el-table-column> <el-table-column prop="invite_type" label="渠道类型"></el-table-column> <el-table-column prop="sum_total_num" label="订单数" :render-header="rendertip" sortable="custom"> <!-- <template slot="header" slot-scope="scope"> <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/> </template> <template slot-scope="scope"> {{scope.row.}} </template>--> </el-table-column> <el-table-column prop="sum_class_num" label="到班数" :render-header="rendertip" sortable="custom"></el-table-column> <el-table-column prop="class_num_except_total_num" label="到班率" :render-header="rendertip" sortable="custom"> <template slot-scope="scope">{{scope.row.class_num_except_total_num}}%</template> </el-table-column> <el-table-column prop="sum_friend_num" label="好友数" :render-header="rendertip" sortable="custom"></el-table-column> <el-table-column prop="friend_num_except_total_num" label="好友率" :render-header="rendertip" sortable="custom"> <template slot-scope="scope">{{scope.row.friend_num_except_total_num}}%</template> </el-table-column> <el-table-column prop="sum_come_num" label="到课数" :render-header="rendertip" sortable="custom"></el-table-column> <el-table-column prop="come_num_except_total_num" label="到课率" :render-header="rendertip" sortable="custom" > <template slot-scope="scope">{{scope.row.come_num_except_total_num}}%</template> </el-table-column> <el-table-column prop="sum_buy_num" label="转化人数" :render-header="rendertip" sortable="custom"></el-table-column> <el-table-column prop="sum_buy_num_except_total_num" label="转化率" :render-header="rendertip" sortable="custom"> <template slot-scope="scope">{{scope.row.sum_buy_num_except_total_num}}%</template> </el-table-column> <el-table-column prop="sum_one_buy_num" width="120" label="一年课购买人数" :render-header="rendertip" sortable="custom"></el-table-column> <el-table-column prop="sum_two_buy_num" width="120" label="两年课购买人数" :render-header="rendertip" sortable="custom"></el-table-column> <el-table-column prop="sum_buy_money" width="120" label="转化总额" :render-header="rendertip" sortable="custom"></el-table-column> <el-table-column prop="sum_one_buy_money" label="一年课转化金额" :render-header="rendertip" sortable="custom"></el-table-column> <el-table-column prop="sum_two_buy_money" label="两年课转化金额" :render-header="rendertip" sortable="custom"></el-table-column> </el-table> <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange" /> </div> </template> <script> import { getChannelConversionListApi, getGoodsListApi, getConfigListApi } from "../../service/api"; import { GOODSTYPE, CLASSSOURCE } from "../../util/wordbook"; import { tipArr2 } from "../../util/tipArr"; import common from "../../util/common"; import page from "../framework/page"; export default { name: "channelConversionList", data() { return { typeList:[], width: 0, nowPage: 1, total: 0, limit: 20, list: [], goods_id: null, teacherList: [], goodsList: [], //periodList: [], today: { text: "今天", onClick: () => { this.searchFrom.payTime = [ this.formatTime(new Date()) + " 00:00:00", this.formatTime(new Date()) + " 23:59:59" ]; } }, yesterday: { text: "昨天", onClick: () => { let preDate = this.formatTime( new Date(new Date().getTime() - 24 * 60 * 60 * 1000) ); this.searchFrom.payTime = [ preDate + " 00:00:00", preDate + " 23:59:59" ]; } }, last30Day: { text: "过去30天", onClick: () => { let preDate = this.formatTime( new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000) ); this.searchFrom.payTime = [ preDate + " 00:00:00", this.formatTime(new Date()) + " 23:59:59" ]; } }, last7Day: { text: "过去7天", onClick: () => { let preDate = this.formatTime( new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000) ); this.searchFrom.payTime = [ preDate + " 00:00:00", this.formatTime(new Date()) + " 23:59:59" ]; } }, propertyList: [], spanArr: [], contentSpanArr: [], searchFrom: { payTime: [], start_at: "", end_at: "", invite_type: "", invite_name: "", watch_num: "", periods_id: "", squad: "", teacher_id: "", periods_title: "" }, propertyList: [], watchList: [ { id: 0, title: 5 }, { id: 1, title: 6 }, { id: 2, title: 10 }, { id: 3, title: 20 } ], goodList: [] }; }, filters: { filterGoods(val) { // console.log(val,229) return ( "[" + val.id + "][" + GOODSTYPE[val.goods_type] + "]" + "【" + val.current_price / 100 + "元】" + val.name ); } }, components: { page }, methods: { rendertip(h, { column }) { // common.tipFilter(h,column,tipArr2) return h("span", [ h("span", column.label), h( "el-tooltip", { props: { effect: "dark", content: tipArr2[column.label], placement: "top" } }, [ h("i", { class: "el-icon-question", style: "color:#409eff;display:block;" }) ] ) ]); }, sortMethod(data) { this.searchFrom.sort_key = data.prop; if (data.order == "ascending") { this.searchFrom.sort_value = "asc"; } else { this.searchFrom.sort_value = "desc"; } this.getChannelTransList(); }, getGoodsOption() { let json = { page: 1, limit: 100, goods_type: "1,2" }; getGoodsListApi(json).then(res => { this.goodList = res.list; console.log(this.goodList, 176); }); getConfigListApi({page:1, limit: 100,key:'code_rule_type'}).then(res=>{ this.typeList = res.list }) }, seachData() { this.total = 0; this.nowPage = 1; this.getChannelTransList(); }, onPeriodChange(value) { let str = ""; if (value.length > 1) { str = value.join(","); } else { str = value[0]; } this.periods_id = str; console.log(str); }, objectSpanMethod(data) { }, handleItemChange(val) { getPeriodsApi({ goods_id: val[0], limit: 100 }).then(res => { res.list.forEach(i => { i.name = i.title; }); this.goodsList.find(i => { return i.id === val[0]; }).children = res.list; }); }, changePeriods(data) { if (data.length > 1) { this.goods_id = data[0]; let nowGoods = this.goodsList.find(i => { return i.id === data[0]; }); this.periods = nowGoods.children.find(i => { return i.id === data[1]; }); this.searchFrom.periods_id = this.periods.id; this.getChannelTransList(); } }, changeTeacher(value) { this.searchFrom.teacher_id = value; this.getChannelTransList(); }, selectChange(value) { this.searchFrom.watch_num = this.watchList[value].title; this.getChannelTransList(); }, formatTime(date) { let year = date.getFullYear(); let Month = date.getMonth() + 1; if (Month < 10) { Month = `0${Month}`; } let Day = date.getDate(); if (Day < 10) Day = `0${Day}`; return `${year}-${Month}-${Day}`; }, onPageChange(val) { this.nowPage = val; this.getChannelTransList(); }, onSizeChange(val) { this.nowPage = 1; this.limit = val; this.getChannelTransList(); }, /*getPeriodsOtherList() { let json = { limit: 1000, page: 1,max_watch_num:20 }; getPeriodsOtherListApi(json).then(res => { this.periodList = res.list; }); },*/ getChannelTransList() { let json = { limit: this.limit, page: this.nowPage }; // 搜索筛选 if (this.searchFrom.invite_type) { json.invite_type = this.searchFrom.invite_type; } if (this.searchFrom.goods_id) { json.goods_id = this.searchFrom.goods_id; } if (this.searchFrom.type_id) { json.type_id = this.searchFrom.type_id; } if (this.searchFrom.sort_value) { json.sort_value = this.searchFrom.sort_value; json.sort_key = this.searchFrom.sort_key; } if (this.searchFrom.payTime && this.searchFrom.payTime.length > 0) { if ( this.searchFrom.payTime[0] && this.searchFrom.payTime[0].length > 0 ) { this.searchFrom.start_at = this.searchFrom.payTime[0]; json.start_at = this.searchFrom.start_at; } if ( this.searchFrom.payTime[1] && this.searchFrom.payTime[1].length > 0 ) { this.searchFrom.end_at = this.searchFrom.payTime[1]; json.end_at = this.searchFrom.end_at; } } getChannelConversionListApi(json).then(res => { if (res) { if (res.list && res.list.length > 0) { this.total = res.total; this.list = res.list.map((item, index) => { item.index = index; if (index == 0) { this.spanArr.push(1); this.pos = 0; } else { if (item.cur_date == res.list[index - 1].cur_date) { this.spanArr[this.pos] += 1; this.spanArr.push(0); } else { this.spanArr.push(1); this.pos = index; } } let name = item.invite_name && item.invite_name.length > 0 ? `(${item.invite_name})` : ""; let goods_id = item.goods_id && item.goods_id > 0 ? `【${item.goods_id}】` : ""; let watch_num = item.watch_num && item.watch_num > 0 ? `【${item.watch_num}个课时】` : ""; item.invite_type = `${item.invite_type}${name}`; item.goods_name = `${goods_id}${item.goods_name}${watch_num}`; return item; }); for (let key in this.list[0]) { this.propertyList.push(key); } this.width = document.documentElement.clientWidth - 200; } if (res.list && res.list.length === 0) { this.list = []; } } else { this.list = []; } }); } }, mounted() { this.getChannelTransList(); this.getGoodsOption(); // this.getGoodsList(); } }; </script> <style lang="less" scope> .channel-trans-list { padding: 20px 0; } </style>