203 lines
6.7 KiB
Vue
203 lines
6.7 KiB
Vue
<template>
|
||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{use: false}">
|
||
<view class="index">
|
||
<view class="index-wrap">
|
||
<!-- Header -->
|
||
<view class="index-header flex row-between">
|
||
<view class="md" style="font-weight: 400;">Hi，{{pagesData.shop_name||'-'}}</view>
|
||
<view class="xs">{{time}}</view>
|
||
</view>
|
||
|
||
<!-- Section -->
|
||
<view style="height: 130vh;"></view>
|
||
<view class="index-section">
|
||
<!-- Section today Data -->
|
||
<view class="today-data flex">
|
||
<block v-for="(item, index) in todayObj" :key="index">
|
||
<view class="item-data">
|
||
<view>{{item.name}}</view>
|
||
<view>{{item.val}}</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- Section turnover echarts Data -->
|
||
<view class="e-data m-t-30">
|
||
<view class="e-title">营业额趋势图</view>
|
||
|
||
<view class="e-content m-t-20">
|
||
<charts ids="canvasColumn" width="100%" height="544rpx" :chartData="turnoverData"></charts>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Section visit echarts Data -->
|
||
<view class="e-data m-t-30 m-b-50">
|
||
<view class="e-title">进店人数趋势图</view>
|
||
|
||
<view class="e-content m-t-20">
|
||
<charts ids="canvasColumn2" width="100%" height="544rpx" :chartData="visitData"></charts>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</template>
|
||
<script>
|
||
import {
|
||
apiIndex
|
||
} from '@/api/store'
|
||
|
||
import {
|
||
apiVisit
|
||
} from '@/api/app'
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
|
||
export default {
|
||
mixins: [MescrollMixin,],
|
||
data() {
|
||
return {
|
||
pagesData: [],
|
||
loading: true,
|
||
|
||
time: '',
|
||
|
||
todayObj: [{
|
||
name: '今日营业额',
|
||
val: '0.00'
|
||
},
|
||
{
|
||
name: '今日成交订单',
|
||
val: '0'
|
||
},
|
||
{
|
||
name: '今日进店人数',
|
||
val: '0'
|
||
},
|
||
],
|
||
|
||
turnoverData: {},
|
||
|
||
visitData: {},
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
async downCallback() {
|
||
await this.getPageInfo()
|
||
this.mescroll.endSuccess(0, false)
|
||
},
|
||
|
||
async getPageInfo() {
|
||
const res = await apiIndex()
|
||
this.todayObj[0].val = res.order_amount
|
||
this.todayObj[1].val = res.order_num
|
||
this.todayObj[2].val = res.shop_user
|
||
const turnover = {
|
||
categories: res.dates,
|
||
series: [{
|
||
"name": "营业额",
|
||
data: res.echarts_order_amount
|
||
}]
|
||
}
|
||
const visit = {
|
||
categories: res.dates,
|
||
series: [{
|
||
"name": "进店人数",
|
||
data: res.echarts_user_visit
|
||
}]
|
||
}
|
||
this.turnoverData = turnover
|
||
this.visitData = visit
|
||
this.pagesData = res;
|
||
},
|
||
|
||
showTime() {
|
||
var d = new Date();
|
||
var year = d.getFullYear();
|
||
var month = d.getMonth() + 1; //0~11
|
||
var date = d.getDate();
|
||
|
||
var hour = Number(d.getHours()) <=9 ? '0'+Number(d.getHours()):Number(d.getHours());
|
||
var min = Number(d.getMinutes()) <=9 ? '0'+Number(d.getMinutes()):Number(d.getMinutes());
|
||
var sec = Number(d.getSeconds()) <=9 ? '0'+ Number(d.getSeconds()):Number(d.getSeconds());
|
||
|
||
var str = year + '-' + month + '-' + date + " " + hour + ":" + min + ":" + sec;
|
||
this.time = str
|
||
}
|
||
},
|
||
onLoad() {
|
||
setInterval(this.showTime, 1000)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.index {
|
||
overflow: hidden;
|
||
|
||
&-wrap {
|
||
|
||
// 头部
|
||
.index-header {
|
||
color: $-color-white;
|
||
padding: 30rpx 24rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100rpx;
|
||
background-color: #40AFFA;
|
||
padding-bottom: 200rpx;
|
||
}
|
||
|
||
.index-section {
|
||
padding: 0 24rpx;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 100rpx;
|
||
|
||
// 今日数据卡片
|
||
.today-data {
|
||
padding: 60rpx 30rpx 40rpx 30rpx;
|
||
border-radius: 14rpx;
|
||
background-color: $-color-white;
|
||
|
||
.item-data {
|
||
width: 220rpx;
|
||
|
||
view:first-child {
|
||
color: $-color-muted;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
view:last-child {
|
||
color: $-color-normal;
|
||
font-size: 44rpx;
|
||
font-weight: 500;
|
||
margin-top: 6rpx;
|
||
height: 50px;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.item-data:first-child {
|
||
width: 260rpx !important;
|
||
}
|
||
}
|
||
|
||
// 数据图
|
||
.e-data {
|
||
.e-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.e-content {
|
||
padding: 20rpx 0;
|
||
border-radius: 14rpx;
|
||
background-color: $-color-white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|