v1.1
1、提货点 2、客服(腾讯云智服) 3、接口权限控制 4、复制第三方商品可配置 4、优化附件上传配置 5、手机端核销订单 6、手机端订单统计、订单管理 7、短信优化 8、订阅消息全自动化
This commit is contained in:
张乐
477
admin/src/views/mobile/orderStatistics/Statistics.vue
Normal file
477
admin/src/views/mobile/orderStatistics/Statistics.vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<template>
|
||||
<div class="statistical-page" ref="container">
|
||||
<div class="navs">
|
||||
<div class="list">
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'today' ? 'on' : ''"
|
||||
@click="setTime('today')"
|
||||
>
|
||||
今天
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'yesterday' ? 'on' : ''"
|
||||
@click="setTime('yesterday')"
|
||||
>
|
||||
昨天
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'lately7' ? 'on' : ''"
|
||||
@click="setTime('lately7')"
|
||||
>
|
||||
最近7天
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'month' ? 'on' : ''"
|
||||
@click="setTime('month')"
|
||||
>
|
||||
本月
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'date' ? 'on' : ''"
|
||||
@click="dateTitle"
|
||||
>
|
||||
<!-- <span class="iconfont icon-xiangxia"></span>
|
||||
<span v-for="(value, index) in renderValues" :key="index">
|
||||
{{ value }}</span
|
||||
> -->
|
||||
自定义
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="title">
|
||||
{{ title }}{{ this.where.type == 1 ? "营业额（元）" : "订单量（份）" }}
|
||||
</div>
|
||||
<div class="money">{{ time_price }}</div>
|
||||
<div class="increase acea-row row-between-wrapper">
|
||||
<div>
|
||||
{{ title }}增长率：<span
|
||||
:class="increase_time_status === 1 ? 'red' : 'green'"
|
||||
>{{ increase_time_status === 1 ? "" : "-" }}{{ growth_rate }}%
|
||||
<span
|
||||
class="iconfont"
|
||||
:class="
|
||||
increase_time_status === 1
|
||||
? 'icon-xiangshang1'
|
||||
: 'icon-xiangxia2'
|
||||
"
|
||||
></span
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
{{ title }}增长：<span
|
||||
:class="increase_time_status === 1 ? 'red' : 'green'"
|
||||
>{{ Number(increase_time).toFixed(2) }}
|
||||
<span
|
||||
class="iconfont"
|
||||
:class="
|
||||
increase_time_status === 1
|
||||
? 'icon-xiangshang1'
|
||||
: 'icon-xiangxia2'
|
||||
"
|
||||
></span
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="company">
|
||||
{{ where.type === 1 ? "单位（元）" : "单位（份）" }}
|
||||
</div>
|
||||
<ECharts :options="polar"></ECharts>
|
||||
</div>
|
||||
<!--<div class="public-wrapper">-->
|
||||
<!--<div class="title">-->
|
||||
<!--<span class="iconfont icon-xiangxishuju"></span>详细数据-->
|
||||
<!--</div>-->
|
||||
<!--<div class="nav acea-row row-between-wrapper">-->
|
||||
<!--<div class="data">日期</div>-->
|
||||
<!--<div class="browse">订单量</div>-->
|
||||
<!--<div class="turnover">成交额</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="conter">-->
|
||||
<!--<div-->
|
||||
<!--class="item acea-row row-between-wrapper"-->
|
||||
<!--v-for="(item, index) in list"-->
|
||||
<!--:key="index"-->
|
||||
<!-->-->
|
||||
<!--<div class="data">{{ item.time }}</div>-->
|
||||
<!--<div class="browse">{{ item.count }}</div>-->
|
||||
<!--<div class="turnover">{{ item.price }}</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<statistics-data :list="list"></statistics-data>
|
||||
<div class="calendar-wrapper" :class="current === true ? 'on' : ''">
|
||||
<div class="calendar">
|
||||
<Calendar
|
||||
:clean="clean"
|
||||
:lunar="lunar"
|
||||
ref="calendar"
|
||||
:range="isrange"
|
||||
:multi="ismulti"
|
||||
@select="select"
|
||||
@next="next"
|
||||
@prev="prev"
|
||||
:value="value"
|
||||
:weekSwitch="weekSwitch"
|
||||
:monthRange="monthRange"
|
||||
rangeMonthFormat="yyyy-mm-dd"
|
||||
monFirst
|
||||
responsive
|
||||
:begin="[1992, 5, 20]"
|
||||
:end="[2049, 5, 20]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="maskModel"
|
||||
@touchmove.prevent
|
||||
v-show="current === true"
|
||||
@click="close"
|
||||
></div>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import statisticsData from "../components/statisticsData";
|
||||
import ECharts from "vue-echarts";
|
||||
import "echarts/lib/chart/line";
|
||||
import "echarts/lib/component/polar";
|
||||
import Calendar from "mpvue-calendar";
|
||||
import "mpvue-calendar/src/browser-style.css";
|
||||
import { statisticsDataApi, orderTimeApi } from '@/api/order';
|
||||
import { parseTime } from '@/utils';
|
||||
import Loading from "../components/Loading";
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const day = new Date().getDate();
|
||||
export default {
|
||||
name: "Statistics",
|
||||
components: {
|
||||
ECharts,
|
||||
Calendar,
|
||||
Loading,
|
||||
statisticsData
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
polar: {
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
legend: {
|
||||
data: [""]
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ["line"] },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
width: 1 //这里是为了突出显示加上的
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#f5f5f5"],
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
width: 1 //这里是为了突出显示加上的
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "邮件营销",
|
||||
type: "line",
|
||||
stack: "总量",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2291f8", //折点颜色
|
||||
lineStyle: {
|
||||
color: "#2291f8" //折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [120, 132.5, 101, 134, 90, 150, 30]
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
x: 30,
|
||||
x2: 10,
|
||||
y: 20,
|
||||
y2: 110,
|
||||
left: 40
|
||||
},
|
||||
animationDuration: 2000
|
||||
},
|
||||
value: [[year, month, day - 1], [year, month, day]],
|
||||
isrange: true,
|
||||
weekSwitch: false,
|
||||
ismulti: false,
|
||||
monFirst: true,
|
||||
clean: true, //简洁模式
|
||||
lunar: false, //显示农历
|
||||
renderValues: [],
|
||||
monthRange: [],
|
||||
current: false,
|
||||
where: {
|
||||
dateLimit : '',
|
||||
type: ''
|
||||
},
|
||||
types: "", //类型|order=订单数|price=营业额
|
||||
time: "", //时间|today=今天|yesterday=昨天|month=本月
|
||||
title: "", //时间|today=今天|yesterday=昨天|month=本月
|
||||
growth_rate: "", //增长率
|
||||
increase_time: "", //增长率
|
||||
increase_time_status: "", //增长率
|
||||
time_price: "", //增长率
|
||||
loaded: false,
|
||||
loading: false,
|
||||
filter: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
dateLimit: ""
|
||||
},
|
||||
list: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"$route.params": function(newVal) {
|
||||
var that = this;
|
||||
if (newVal != undefined) {
|
||||
that.setType(newVal.type);
|
||||
that.setTime(newVal.time);
|
||||
that.getIndex();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.handelRenderValues();
|
||||
this.setTime(this.$route.params.time);
|
||||
this.setType(this.$route.params.type);
|
||||
this.getIndex();
|
||||
this.getInfo();
|
||||
this.$scroll(this.$refs.container, () => {
|
||||
!this.loading && this.getInfo();
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
monthRangeText() {
|
||||
return this.monthRange.length ? "固定" : "指定范围";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getIndex: function() {
|
||||
var that = this;
|
||||
orderTimeApi(that.where).then(
|
||||
res => {
|
||||
var _info = res.chart,
|
||||
day = [],
|
||||
num = [];
|
||||
_info.forEach(function(item) {
|
||||
day.push(item.time);
|
||||
num.push(item.num);
|
||||
});
|
||||
that.polar.xAxis[0].data = day;
|
||||
that.polar.series[0].data = num;
|
||||
that.growth_rate = res.growthRate;
|
||||
that.increase_time = res.increaseTime;
|
||||
that.increase_time_status = res.increaseTimeStatus;
|
||||
that.time_price = res.time;
|
||||
},
|
||||
error => {
|
||||
that.$dialog.error(error.msg);
|
||||
}
|
||||
);
|
||||
},
|
||||
setTime: function(time) {
|
||||
this.time = time;
|
||||
this.where.dateLimit = time
|
||||
this.list = [];
|
||||
this.filter.page = 1;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
this.getIndex();
|
||||
this.getInfo();
|
||||
},
|
||||
setType: function(type) {
|
||||
switch (type) {
|
||||
case "price":
|
||||
this.where.type = 1;
|
||||
break;
|
||||
case "order":
|
||||
this.where.type = 2;
|
||||
break;
|
||||
}
|
||||
},
|
||||
handelRenderValues(data) {
|
||||
if (this.ismulti) {
|
||||
this.renderValues = this.value.map(v => v.join("-"));
|
||||
} else if (this.isrange) {
|
||||
const values = [];
|
||||
data || this.value;
|
||||
this.value.forEach((v, i) => {
|
||||
values.push(v.join("-"));
|
||||
// if (!i) {
|
||||
// values.push("~");
|
||||
// }
|
||||
});
|
||||
this.renderValues = values;
|
||||
} else {
|
||||
this.renderValues = [this.value.join("-")];
|
||||
}
|
||||
console.log( this.renderValues)
|
||||
this.where.dateLimit = parseTime(this.renderValues[0], '{y}-{m}-{d}')+','+parseTime(this.renderValues[1], '{y}-{m}-{d}')
|
||||
this.filter.dateLimit = this.where.dateLimit
|
||||
},
|
||||
prev(y, m, w) {
|
||||
console.log(y, m, w);
|
||||
},
|
||||
next(year, month, week) {
|
||||
console.log(year, month, week);
|
||||
},
|
||||
selectYear(year) {
|
||||
},
|
||||
setToday() {
|
||||
this.$refs.calendar.setToday();
|
||||
},
|
||||
dateInfo() {
|
||||
const info = this.$refs.calendar.dateInfo(2018, 8, 23);
|
||||
},
|
||||
renderer() {
|
||||
if (this.monthRange.length) {
|
||||
this.monthRange = ["2018-08", "2018-08"];
|
||||
}
|
||||
this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
|
||||
},
|
||||
select(val, val2) {
|
||||
if (this.isrange) {
|
||||
this.handelRenderValues([val, val2]);
|
||||
} else if (this.ismulti) {
|
||||
this.handelRenderValues(val);
|
||||
} else {
|
||||
this.handelRenderValues([val]);
|
||||
}
|
||||
this.list = [];
|
||||
this.filter.page = 1;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
this.time = "date";
|
||||
this.title = "";
|
||||
// this.getIndex();
|
||||
// this.getInfo();
|
||||
},
|
||||
dateTitle: function() {
|
||||
this.current = true;
|
||||
},
|
||||
close: function() {
|
||||
this.current = false;
|
||||
this.getIndex();
|
||||
this.getInfo();
|
||||
},
|
||||
getInfo: function() {
|
||||
var that = this;
|
||||
if (that.loading || that.loaded) return;
|
||||
that.loading = true;
|
||||
statisticsDataApi(that.filter).then(
|
||||
res => {
|
||||
that.loading = false;
|
||||
that.loaded = res.length < that.filter.limit;
|
||||
that.list.push.apply(that.list, res);
|
||||
that.filter.page = that.filter.page + 1;
|
||||
},
|
||||
error => {
|
||||
that.$dialog.message(error.msg);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.public-wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.2rem;}
|
||||
.public-wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
|
||||
.public-wrapper{margin:0.18rem auto 0 auto;width:6.9rem;background-color:#fff;border-radius:0.1rem;padding-top:0.25rem;}
|
||||
.public-wrapper .nav{padding:0 0.3rem;height:0.7rem;line-height:0.7rem;font-size:0.24rem;color:#999;}
|
||||
.public-wrapper .data{width:2.1rem;text-align:left;}
|
||||
.public-wrapper .browse{width:1.92rem;text-align:right;}
|
||||
.public-wrapper .turnover{width:2.27rem;text-align:right;}
|
||||
.public-wrapper .conter{padding:0 0.3rem;}
|
||||
.public-wrapper .conter .item{border-bottom:1px solid #f7f7f7;height:0.7rem;font-size:0.24rem;}
|
||||
.public-wrapper .conter .item .turnover{color:#d84242;}
|
||||
.statistical-page .navs{width:100%;height:0.96rem;background-color:#fff;overflow:hidden;line-height:0.96rem;position:fixed;top:0;left:0;z-index:9;}
|
||||
.statistical-page .navs .list{overflow-y:hidden;overflow-x:auto;white-space: nowrap;-webkit-overflow-scrolling: touch;
|
||||
width: 100%;}
|
||||
.statistical-page .navs .item{font-size:0.32rem;color:#282828;margin-left:0.6rem;display: inline-block;}
|
||||
.statistical-page .navs .item.on{color:#2291f8;}
|
||||
.statistical-page .navs .item .iconfont{font-size:0.25rem;margin-left:0.13rem;}
|
||||
.statistical-page .wrapper{width:7.4rem;background-color:#fff;border-radius:0.1rem;margin:0.19rem auto 0 auto;padding:0.5rem 0.6rem;}
|
||||
.statistical-page .wrapper .title{font-size:0.3rem;color:#999;text-align:center;}
|
||||
.statistical-page .wrapper .money{font-size:0.72rem;color:#fba02a;text-align:center;margin-top:0.1rem;}
|
||||
.statistical-page .wrapper .increase{font-size:0.28rem;color:#999;margin-top:0.2rem;}
|
||||
.statistical-page .wrapper .increase .red{color:#ff6969;}
|
||||
.statistical-page .wrapper .increase .green{color:#1abb1d;}
|
||||
.statistical-page .wrapper .increase .iconfont{font-size:0.23rem;margin-left:0.15rem;}
|
||||
.statistical-page .chart{width:6.9rem;height:4.8rem;background-color:#fff;border-radius:0.1rem;margin:0.23rem auto 0 auto;padding: 0.25rem 0.22rem 0 0.22rem;}
|
||||
.statistical-page .chart .company{font-size:0.26rem;color:#999;}
|
||||
.statistical-page .mc-body{padding-bottom:0;}
|
||||
.statistical-page .mc-body tr{background-color: #edf8fe;border-top: 1px solid #fff;width:100%;}
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 5.5rem;
|
||||
}
|
||||
.calendar-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 777;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||||
}
|
||||
.calendar-wrapper.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.statistical-page .wrapper .increase {
|
||||
font-size: 0.26rem;
|
||||
}
|
||||
.statistical-page .wrapper .increase .iconfont {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user