Skip to content

M
marketing
Commit ca426ef9 by chenxin
Options

fix： 计费中心 - 视频资费

parent bf2fb15e
Showing with 604 additions and 48 deletions
dist/index.html
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=./static/img/favicon.ico><title>GIC后台</title><link rel=stylesheet type=text/css href=static/fonts/iconfont.css><link rel=stylesheet type=text/css href=static/css/common.css><link rel=stylesheet href=//web-1251519181.file.myqcloud.com/components/element.2.12.0.css><link href=/marketing/static/css/main.12587ce16d65d66288d37ae5458b95b2.css rel=stylesheet></head><body><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.5.2/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/components/element.2.12.0.js></script><script src=//web-1251519181.file.myqcloud.com/components/header.2.0.38.js></script><script src=//web-1251519181.file.myqcloud.com/components/footer.2.0.04.js></script><script src=//web-1251519181.file.myqcloud.com/components/card.2.0.12.js></script><script src=//web-1251519181.file.myqcloud.com/components/store.2.0.01.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/member-group.2.2.24.js></script><script src=//web-1251519181.file.myqcloud.com/components/store-card.2.0.18.js></script><script src=//web-1251519181.file.myqcloud.com/components/confirm-people.2.0.01.js></script><script src=//web-1251519181.file.myqcloud.com/components/people.2.0.42.js></script><script src=//web-1251519181.file.myqcloud.com/components/export-excel.2.0.13.js></script><script src=//web-1251519181.file.myqcloud.com/components/input.2.0.20.js></script><script src=//web-1251519181.file.myqcloud.com/components/delete.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/selector.1.2.13.js></script><script src=//web-1251519181.file.myqcloud.com/components/pagination.1.0.8.js></script><script src=//web-1251519181.file.myqcloud.com/components/track.1.0.1.js></script><script type=text/javascript src=/marketing/static/js/manifest.85e6498efb584253f173.js></script><script type=text/javascript src=/marketing/static/js/vendor.b30a466c3b2d11195801.js></script><script type=text/javascript src=/marketing/static/js/main.da43878e175cef3d17fe.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=./static/img/favicon.ico><title>GIC后台</title><link rel=stylesheet type=text/css href=static/fonts/iconfont.css><link rel=stylesheet type=text/css href=static/css/common.css><link rel=stylesheet href=//web-1251519181.file.myqcloud.com/components/element.2.12.0.css><link href=/marketing/static/css/main.4f1dbb390a98f0d1264ea71cbee447c4.css rel=stylesheet></head><body><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.5.2/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/components/element.2.12.0.js></script><script src=//web-1251519181.file.myqcloud.com/components/header.2.0.38.js></script><script src=//web-1251519181.file.myqcloud.com/components/footer.2.0.04.js></script><script src=//web-1251519181.file.myqcloud.com/components/card.2.0.12.js></script><script src=//web-1251519181.file.myqcloud.com/components/store.2.0.01.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/member-group.2.2.24.js></script><script src=//web-1251519181.file.myqcloud.com/components/store-card.2.0.18.js></script><script src=//web-1251519181.file.myqcloud.com/components/confirm-people.2.0.01.js></script><script src=//web-1251519181.file.myqcloud.com/components/people.2.0.42.js></script><script src=//web-1251519181.file.myqcloud.com/components/export-excel.2.0.13.js></script><script src=//web-1251519181.file.myqcloud.com/components/input.2.0.20.js></script><script src=//web-1251519181.file.myqcloud.com/components/delete.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/selector.1.2.13.js></script><script src=//web-1251519181.file.myqcloud.com/components/pagination.1.0.8.js></script><script src=//web-1251519181.file.myqcloud.com/components/track.1.0.1.js></script><script type=text/javascript src=/marketing/static/js/manifest.c0c2a29ff7c329c9ccc5.js></script><script type=text/javascript src=/marketing/static/js/vendor.b30a466c3b2d11195801.js></script><script type=text/javascript src=/marketing/static/js/main.da43878e175cef3d17fe.js></script></body></html>
\ No newline at end of file
dist/static/fonts/demo_index.html
......@@ -31,6 +31,48 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xeb4d;</span>
<div class="name">视频流量</div>
<div class="code-name">&amp;#xeb4d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe656;</span>
<div class="name">图标_图片空间</div>
<div class="code-name">&amp;#xe656;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64b;</span>
<div class="name">视频</div>
<div class="code-name">&amp;#xe64b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe716;</span>
<div class="name">开卡</div>
<div class="code-name">&amp;#xe716;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64a;</span>
<div class="name">订单</div>
<div class="code-name">&amp;#xe64a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e2;</span>
<div class="name">会员数量</div>
<div class="code-name">&amp;#xe6e2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe649;</span>
<div class="name">好友</div>
<div class="code-name">&amp;#xe649;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe661;</span>
<div class="name">兑换记录</div>
<div class="code-name">&amp;#xe661;</div>
......@@ -1353,6 +1395,69 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-shipinliuliang"></span>
<div class="name">
视频流量
</div>
<div class="code-name">.icon-shipinliuliang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tubiao_tupiankongjian"></span>
<div class="name">
图标_图片空间
</div>
<div class="code-name">.icon-tubiao_tupiankongjian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-video1"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-video1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kaika"></span>
<div class="name">
开卡
</div>
<div class="code-name">.icon-kaika
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingdan1"></span>
<div class="name">
订单
</div>
<div class="code-name">.icon-dingdan1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huiyuanshuliang"></span>
<div class="name">
会员数量
</div>
<div class="code-name">.icon-huiyuanshuliang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-haoyou"></span>
<div class="name">
好友
</div>
<div class="code-name">.icon-haoyou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duihuanjilu"></span>
<div class="name">
兑换记录
......@@ -3291,6 +3396,62 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shipinliuliang"></use>
</svg>
<div class="name">视频流量</div>
<div class="code-name">#icon-shipinliuliang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tubiao_tupiankongjian"></use>
</svg>
<div class="name">图标_图片空间</div>
<div class="code-name">#icon-tubiao_tupiankongjian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-video1"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-video1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kaika"></use>
</svg>
<div class="name">开卡</div>
<div class="code-name">#icon-kaika</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dingdan1"></use>
</svg>
<div class="name">订单</div>
<div class="code-name">#icon-dingdan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huiyuanshuliang"></use>
</svg>
<div class="name">会员数量</div>
<div class="code-name">#icon-huiyuanshuliang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-haoyou"></use>
</svg>
<div class="name">好友</div>
<div class="code-name">#icon-haoyou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duihuanjilu"></use>
</svg>
<div class="name">兑换记录</div>
......@@ -5024,26 +5185,23 @@
</div>
</div>
<script>
$(document).ready(function() {
$('.tab-container .content:first').show();
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function(e) {
var tabContent = $('.tab-container .content');
var index = $(this).index();
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return;
} else {
$('#tabs li').removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent
.hide()
.eq(index)
.fadeIn();
}
});
});
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
dist/static/fonts/iconfont.css
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/fonts/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/fonts/iconfont.json
......@@ -6,6 +6,55 @@
"description": "",
"glyphs": [
{
"icon_id": "17675917",
"name": "视频流量",
"font_class": "shipinliuliang",
"unicode": "eb4d",
"unicode_decimal": 60237
},
{
"icon_id": "10501417",
"name": "图标_图片空间",
"font_class": "tubiao_tupiankongjian",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "5722952",
"name": "视频",
"font_class": "video1",
"unicode": "e64b",
"unicode_decimal": 58955
},
{
"icon_id": "12472553",
"name": "开卡",
"font_class": "kaika",
"unicode": "e716",
"unicode_decimal": 59158
},
{
"icon_id": "12987636",
"name": "订单",
"font_class": "dingdan1",
"unicode": "e64a",
"unicode_decimal": 58954
},
{
"icon_id": "12996480",
"name": "会员数量",
"font_class": "huiyuanshuliang",
"unicode": "e6e2",
"unicode_decimal": 59106
},
{
"icon_id": "8922363",
"name": "好友",
"font_class": "haoyou",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "3824532",
"name": "兑换记录",
"font_class": "duihuanjilu",
......
dist/static/js/manifest.85e6498efb584253f173.js → dist/static/js/manifest.c0c2a29ff7c329c9ccc5.js
!function(e){var r=window.webpackJsonp;window.webpackJsonp=function(t,a,c){for(var f,i,d,u=0,s=[];u<t.length;u++)i=t[u],n[i]&&s.push(n[i][0]),n[i]=0;for(f in a)Object.prototype.hasOwnProperty.call(a,f)&&(e[f]=a[f]);for(r&&r(t,a,c);s.length;)s.shift()();if(c)for(u=0;u<c.length;u++)d=o(o.s=c[u]);return d};var t={},n={14:0};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.e=function(e){var r=n[e];if(0===r)return new Promise(function(e){e()});if(r)return r[2];var t=new Promise(function(t,o){r=n[e]=[t,o]});r[2]=t;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+({0:"card",1:"game",2:"wechat",3:"message",4:"ewash",5:"ecm",6:"evaluation",7:"activity",8:"cdKey",9:"recharge",10:"msg",11:"calllog"}[e]||e)+"."+{0:"0ddc3d68685e848dd774",1:"a6f795143dcb35b5cb4c",2:"21a2ae8bde8fd576d6c1",3:"108440167bb83f4091b2",4:"391130c8f773cb8775d6",5:"7e7a76a9ddc9096921cf",6:"faf17b909ac1f2528782",7:"8cde246f205e5d60d01a",8:"1b4d07f3689020998359",9:"d0c7fdeaae259a8befad",10:"0d4820f42ef1fa47e4cc",11:"07f9326e2a68fd201646"}[e]+".js";var f=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(f);var r=n[e];0!==r&&(r&&r[1](new Error("Loading chunk "+e+" failed.")),n[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),t},o.m=e,o.c=t,o.d=function(e,r,t){o.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},o.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(r,"a",r),r},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},o.p="/marketing/",o.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
!function(e){var r=window.webpackJsonp;window.webpackJsonp=function(t,a,c){for(var f,i,d,u=0,s=[];u<t.length;u++)i=t[u],n[i]&&s.push(n[i][0]),n[i]=0;for(f in a)Object.prototype.hasOwnProperty.call(a,f)&&(e[f]=a[f]);for(r&&r(t,a,c);s.length;)s.shift()();if(c)for(u=0;u<c.length;u++)d=o(o.s=c[u]);return d};var t={},n={14:0};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.e=function(e){var r=n[e];if(0===r)return new Promise(function(e){e()});if(r)return r[2];var t=new Promise(function(t,o){r=n[e]=[t,o]});r[2]=t;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+({0:"card",1:"game",2:"wechat",3:"message",4:"ewash",5:"ecm",6:"evaluation",7:"activity",8:"cdKey",9:"recharge",10:"msg",11:"calllog"}[e]||e)+"."+{0:"0ddc3d68685e848dd774",1:"a6f795143dcb35b5cb4c",2:"21a2ae8bde8fd576d6c1",3:"108440167bb83f4091b2",4:"391130c8f773cb8775d6",5:"7e7a76a9ddc9096921cf",6:"faf17b909ac1f2528782",7:"8cde246f205e5d60d01a",8:"1b4d07f3689020998359",9:"175a7788df2ea1a360cf",10:"0d4820f42ef1fa47e4cc",11:"07f9326e2a68fd201646"}[e]+".js";var f=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(f);var r=n[e];0!==r&&(r&&r[1](new Error("Loading chunk "+e+" failed.")),n[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),t},o.m=e,o.c=t,o.d=function(e,r,t){o.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},o.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(r,"a",r),r},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},o.p="/marketing/",o.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
src/service/api/rechargeApi.js
......@@ -41,3 +41,15 @@ export const rechargeStep2 = params => requests(PREFIX + 'recharge-step-3', para
//获取账户状态 是否欠费
export const getAccountStateInfo = params => requests(PREFIX + 'account-state-info', params);
//计费中心--消费详情-视频列表
export const videoPage = params => requests('api-mall/' + 'get-traffic-cost-page', params);
//计费中心--视频流量
export const todayVideoTraffic = params => requests('api-mall/' + 'today-traffic', params);
//计费中心--消费详情-视频折线图
export const videoChartData = params => requests('api-mall/' + 'get-traffic-cost-picture', params);
//计费中心--消费详情-视频列表-导出
export const downloadTrafficCostListExcel = config.api + 'api-mall/' + 'download-traffic-cost-list-execl';
src/views/recharge/board.vue
......@@ -9,7 +9,7 @@
<div class="dm-wrap">
<h3 class="dm-title__label--outer">今日消费</h3>
<el-row class="recharge-today" :gutter="20">
<el-col :span="5">
<el-col :span="8">
<div class="recharge-today-item border2 clearfix">
<div class="text-center fl">
<div class="icon-box">
......@@ -25,7 +25,7 @@
</div>
</div>
</el-col>
<el-col :span="5">
<el-col :span="8">
<div class="recharge-today-item border2 clearfix">
<div class="text-center fl">
<div class="icon-box color2">
......@@ -41,7 +41,7 @@
</div>
</div>
</el-col>
<el-col :span="5">
<el-col :span="8">
<div class="recharge-today-item border2 clearfix">
<div class="text-center fl">
<div class="icon-box color3">
......@@ -57,7 +57,7 @@
</div>
</div>
</el-col>
<el-col :span="5">
<el-col :span="8">
<div class="recharge-today-item border2 clearfix">
<div class="text-center fl">
<div class="icon-box color4">
......@@ -73,7 +73,7 @@
</div>
</div>
</el-col>
<el-col :span="5">
<el-col :span="8">
<div class="recharge-today-item border2 clearfix">
<div class="text-center fl">
<div class="icon-box color5">
......@@ -89,6 +89,22 @@
</div>
</div>
</el-col>
<el-col :span="8">
<div class="recharge-today-item border2 clearfix">
<div class="text-center fl">
<div class="icon-box color6">
<i class="iconfont icon-shipinliuliang fz26"></i>
</div>
<p>视频流量</p>
</div>
<div class="text-center fr">
<p class="text-right">
<span class="fz30">{{ videoTraffic.traffic || 0 }}</span> GB
</p>
<p class="regular-font-color">合计费用：￥{{ videoTraffic.trafficCost | amount }}</p>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="dm-wrap" v-loading="loading">
......@@ -130,7 +146,7 @@
</template>
<script>
import { rechargeCenter, consumeRecord } from '@/service/api/rechargeApi.js';
import { rechargeCenter, consumeRecord, todayVideoTraffic } from '@/service/api/rechargeApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
export default {
......@@ -145,6 +161,7 @@ export default {
beginTime: '',
endTime: ''
},
videoTraffic: {},
pickerOptions: {
disabledDate(val) {
return Date.now() >= val.getTime() + 6 * 30 * 24 * 60 * 60 * 1000;
......@@ -156,6 +173,7 @@ export default {
this.$store.commit('aside_handler', false);
this.rechargeCenter();
this.consumeRecord();
this.getTodayVideoTraffic();
this.$store.commit('mutations_breadcrumb', [{ name: '企业管理', path: '' }, { name: '计费中心', path: '' }]); // eslint-disable-line
},
filters: {
......@@ -167,6 +185,15 @@ export default {
}
},
methods: {
// 视频流量资费
async getTodayVideoTraffic() {
try {
let res = await todayVideoTraffic();
this.videoTraffic = res.result || {};
} catch (err) {
console.log(err);
}
},
async rechargeCenter() {
try {
let res = await rechargeCenter();
......@@ -225,6 +252,9 @@ export default {
&.color5 {
background: #f39925;
}
&.color6 {
background: #52c41a;
}
i {
line-height: 60px;
color: #fff;
......
src/views/recharge/consume.vue
<template>
<section class="recharge">
<div class="dm-wrap">
日期：<el-date-picker :pickerOptions="pickerOptions" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="loadAll(false)"></el-date-picker>
日期：<el-date-picker :clearable="false" :pickerOptions="pickerOptions" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="loadAll(false)"></el-date-picker>
<span class="fz12 gray">* 此处仅支持筛选近半年的统计数据</span>
</div>
<div class="dm-form__wrap">
<h3 class="dm-title__label">趋势分析图</h3>
<div class="text-center fz16" v-if="$route.params.type === 'record'">{{ formatDateTimeByType(dateTime[0], 'yyyy-MM-dd') }}至{{ formatDateTimeByType(dateTime[1], 'yyyy-MM-dd') }} 成功存储：{{ sumCount || 0 }} 分钟 总计消费：{{ (sumFee / 100).toFixed(2) }} 元</div>
<div class="text-center fz16" v-if="$route.params.type === 'video'">{{ formatDateTimeByType(dateTime[0], 'yyyy-MM-dd') }}至{{ formatDateTimeByType(dateTime[1], 'yyyy-MM-dd') }} 共消耗流量{{ sumCount }}MB 累计支出{{ sumFee }}元</div>
<div class="text-center fz16" v-else>{{ formatDateTimeByType(dateTime[0], 'yyyy-MM-dd') }}至{{ formatDateTimeByType(dateTime[1], 'yyyy-MM-dd') }} 成功发送：{{ sumCount || 0 }} 条 总计消费：{{ (sumFee / 1000).toFixed(2) }} 元</div>
<div>
<div id="mountNode" ref="mountNode" v-show="list.length"></div>
......@@ -14,7 +15,14 @@
</div>
</div>
<div class="dm-form__wrap" v-loading="loading">
<div class="pb22" style="overflow:hidden;line-height:40px;">
<div class="pb22" style="overflow:hidden;line-height:40px;" v-if="$route.params.type === 'video'">
<!-- 视频资费 -->
<el-date-picker :clearable="false" v-model="dateTimeVideo" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeVideoTime"></el-date-picker>
<span class="fz12 gray">* 此处时间跨度不超过7天</span>
<el-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14 mr5" @click="downloadTrafficCostListExcel">导出记录</el-button>
</div>
<div v-else class="pb22" style="overflow:hidden;line-height:40px;">
<!-- 非视频资费 -->
<!-- <el-select v-if="$route.params.type === 'call'" class="dm-select" v-model="taskType" placeholder="选择发送状态" @change="loadAll(true)">
<el-option v-for="item in taskTypeOptions" :key="item.taskType" :label="item.ecmName" :value="item.taskType"></el-option>
</el-select> -->
......@@ -187,12 +195,29 @@
<template slot-scope="scope"> {{ Number(scope.row.storageFee / 100).toFixed(2) }}元 </template>
</el-table-column>
</el-table>
<!-- 视频资费 -->
<el-table tooltipEffect="light" :data="tableList" style="width:100%" v-if="$route.params.type === 'video'">
<el-table-column align="left" prop="createTime" label="时间">
<template slot-scope="scope">
<p class="cell-time">
{{ formatDateTimeByType(scope.row.time, 'yyyy-MM-dd-HH-mm-ss') }}
</p>
</template>
</el-table-column>
<el-table-column align="left" prop="traffic" label="流量消耗统计">
<template slot-scope="scope"> {{ scope.row.traffic }}GB </template>
</el-table-column>
<el-table-column align="left" prop="trafficCost" label="流量费用支出">
<template slot-scope="scope"> ¥ {{ scope.row.trafficCost }} </template>
</el-table-column>
</el-table>
<dm-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
</div>
<vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableList" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
</section>
</template>
<script>
import { messageMarketingChart, messageMarketingPage, smsData, voiceData, callData, recordData } from '@/service/api/rechargeApi.js';
import { messageMarketingChart, messageMarketingPage, smsData, voiceData, callData, recordData, videoPage, videoChartData, downloadTrafficCostListExcel } from '@/service/api/rechargeApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import G2 from '@antv/g2';
export default {
......@@ -204,6 +229,8 @@ export default {
defaultAvatar: require('../../assets/img/head_default.png'),
formatDateTimeByType,
dateTime: [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
dateTimeVideo: [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
dateTimeVideoCopy: [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
loading: false,
tableList: [],
listParams: {
......@@ -223,7 +250,18 @@ export default {
disabledDate(val) {
return Date.now() >= val.getTime() + 6 * 30 * 24 * 60 * 60 * 1000;
}
}
},
videoListParams: {
currentPage: 1,
pageSize: 20,
requestProject: 'marketing',
startTime: '',
endTime: ''
},
projectName: 'marketing', // 当前项目名
dialogVisible: false,
excelUrl: '', // 下载数据的地址
params: {} // 传递的参数
};
},
created() {
......@@ -282,6 +320,12 @@ export default {
}
this.recordData('list');
}
if (this.$route.params.type === 'video') {
if (!onlyList) {
this.videoPage('charts');
}
this.videoPage('list');
}
},
async marketingList() {
this.loading = true;
......@@ -406,6 +450,62 @@ export default {
} catch (err) {}
this.loading = false;
},
// 视频资费相关接口
async videoPage(type = 'list') {
this.loading = true;
try {
this.videoListParams.startTime = formatDateTimeByType(this.dateTimeVideo[0], 'yyyy-MM-dd');
this.videoListParams.endTime = formatDateTimeByType(this.dateTimeVideo[1], 'yyyy-MM-dd');
if (type === 'list') {
let res = await videoPage(this.videoListParams);
if (res.errorCode === 0 && res.result.result) {
this.tableList = res.result.result || [];
this.total = res.result.totalCount;
} else {
this.tableList = [];
}
} else if (type === 'charts') {
const params = { ...this.listParams, startTime: this.listParams.beginTime };
let res = await videoChartData(params);
this.sumCount = res.result.sumCount;
this.sumFee = res.result.sumFee;
let chartList = res.result.chartList || [];
let list = [];
chartList.map(v => {
list.push({ day: v.chartsDate, name: '支出费用', temperature: v.trafficCost || 0 });
});
list.sort((a, b) => {
return a.temperature - b.temperature;
});
this.list = list;
this.$nextTick(_ => {
this.initCharts(list, 'mountNode');
});
}
} catch (err) {}
this.loading = false;
},
// 修改视频时间 范围不能超过7天
changeVideoTime(date) {
// 单张卡券可以设置领取n久
if (new Date(this.dateTimeVideo[1]).getTime() - new Date(this.dateTimeVideo[0]).getTime() > 7 * 24 * 60 * 60 * 1000) {
this.$tips({ message: '领取时间段范围不能超过7天', type: 'warning' });
this.dateTimeVideo = [...this.dateTimeVideoCopy];
return;
}
this.dateTimeVideoCopy = [...this.dateTimeVideo];
this.videoPage('list');
},
// 导出
downloadTrafficCostListExcel() {
this.dialogVisible = true;
this.excelUrl = downloadTrafficCostListExcel;
this.params = {
startTime: formatDateTimeByType(this.dateTimeVideo[0], 'yyyy-MM-dd'),
endTime: formatDateTimeByType(this.dateTimeVideo[1], 'yyyy-MM-dd'),
requestProject: 'marketing'
};
},
async recordData(type = 'list') {
this.loading = true;
try {
......
static/fonts/demo_index.html
......@@ -31,6 +31,48 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xeb4d;</span>
<div class="name">视频流量</div>
<div class="code-name">&amp;#xeb4d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe656;</span>
<div class="name">图标_图片空间</div>
<div class="code-name">&amp;#xe656;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64b;</span>
<div class="name">视频</div>
<div class="code-name">&amp;#xe64b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe716;</span>
<div class="name">开卡</div>
<div class="code-name">&amp;#xe716;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64a;</span>
<div class="name">订单</div>
<div class="code-name">&amp;#xe64a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e2;</span>
<div class="name">会员数量</div>
<div class="code-name">&amp;#xe6e2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe649;</span>
<div class="name">好友</div>
<div class="code-name">&amp;#xe649;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe661;</span>
<div class="name">兑换记录</div>
<div class="code-name">&amp;#xe661;</div>
......@@ -1353,6 +1395,69 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-shipinliuliang"></span>
<div class="name">
视频流量
</div>
<div class="code-name">.icon-shipinliuliang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tubiao_tupiankongjian"></span>
<div class="name">
图标_图片空间
</div>
<div class="code-name">.icon-tubiao_tupiankongjian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-video1"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-video1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kaika"></span>
<div class="name">
开卡
</div>
<div class="code-name">.icon-kaika
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingdan1"></span>
<div class="name">
订单
</div>
<div class="code-name">.icon-dingdan1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huiyuanshuliang"></span>
<div class="name">
会员数量
</div>
<div class="code-name">.icon-huiyuanshuliang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-haoyou"></span>
<div class="name">
好友
</div>
<div class="code-name">.icon-haoyou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duihuanjilu"></span>
<div class="name">
兑换记录
......@@ -3291,6 +3396,62 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shipinliuliang"></use>
</svg>
<div class="name">视频流量</div>
<div class="code-name">#icon-shipinliuliang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tubiao_tupiankongjian"></use>
</svg>
<div class="name">图标_图片空间</div>
<div class="code-name">#icon-tubiao_tupiankongjian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-video1"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-video1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kaika"></use>
</svg>
<div class="name">开卡</div>
<div class="code-name">#icon-kaika</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dingdan1"></use>
</svg>
<div class="name">订单</div>
<div class="code-name">#icon-dingdan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huiyuanshuliang"></use>
</svg>
<div class="name">会员数量</div>
<div class="code-name">#icon-huiyuanshuliang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-haoyou"></use>
</svg>
<div class="name">好友</div>
<div class="code-name">#icon-haoyou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duihuanjilu"></use>
</svg>
<div class="name">兑换记录</div>
......@@ -5024,26 +5185,23 @@
</div>
</div>
<script>
$(document).ready(function() {
$('.tab-container .content:first').show();
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function(e) {
var tabContent = $('.tab-container .content');
var index = $(this).index();
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return;
} else {
$('#tabs li').removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent
.hide()
.eq(index)
.fadeIn();
}
});
});
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
static/fonts/iconfont.css
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.json
......@@ -6,6 +6,55 @@
"description": "",
"glyphs": [
{
"icon_id": "17675917",
"name": "视频流量",
"font_class": "shipinliuliang",
"unicode": "eb4d",
"unicode_decimal": 60237
},
{
"icon_id": "10501417",
"name": "图标_图片空间",
"font_class": "tubiao_tupiankongjian",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "5722952",
"name": "视频",
"font_class": "video1",
"unicode": "e64b",
"unicode_decimal": 58955
},
{
"icon_id": "12472553",
"name": "开卡",
"font_class": "kaika",
"unicode": "e716",
"unicode_decimal": 59158
},
{
"icon_id": "12987636",
"name": "订单",
"font_class": "dingdan1",
"unicode": "e64a",
"unicode_decimal": 58954
},
{
"icon_id": "12996480",
"name": "会员数量",
"font_class": "huiyuanshuliang",
"unicode": "e6e2",
"unicode_decimal": 59106
},
{
"icon_id": "8922363",
"name": "好友",
"font_class": "haoyou",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "3824532",
"name": "兑换记录",
"font_class": "duihuanjilu",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment