中品云站
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

188 lines
4.5 KiB

// 昨日经营分析
<template>
<view class="page-content my-bg">
<cu-custom bgColor="bg-main-oil" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">月报</block>
</cu-custom>
<view class="card-container">
<view class="cu-capsule-container">
<view class="cu-capsule round bg-white solid line-gray" @tap="showModal">
<view class='cu-tag bg-white'>
{{selDate}}
</view>
<view class="cu-tag bg-white">
<text class='cuIcon-usefullfill rr90 padding-left-xs'></text>
</view>
</view>
</view>
<analysis-card @showModal="showModal" :basicData="basicData" />
<view class="margin bg-white radius">
<view class="margin" style="position: relative;z-index: 1;">
<area-month :chartData="detailData" />
</view>
</view>
<view class="cu-modal bottom-modal" style="z-index: 999999;" :class="dialogModal">
<view class="cu-dialog">
<view class="cu-bar bg-white ">
<view class="action text-blue" @tap="hideModal">取消</view>
<view class="content">选择日期</view>
<view class="action text-green" @tap="onConfirm">确定</view>
</view>
<picker-view :value="value" style="min-height: 250upx;width: 100%;" @change="bindChange">
<picker-view-column>
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</view>
</template>
<script>
import areaMonth from '../../area-month.vue'
import analysisCard from '../../analysis-card.vue'
import cloudSiteApi from '@/api/cloud-site.js'
import oliSiteApi from '@/api/oli-site.js'
export default {
components: {
areaMonth,
analysisCard
},
data: function() {
const date = new Date()
const years = []
const year = date.getFullYear()
const months = []
const month = date.getMonth() + 1
const days = []
const day = date.getDate() - 1
for (let i = 2020; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
return {
title: 'picker-view',
years: years,
year: year,
months: months,
dialogModal: '',
month: month,
days: days,
day: day,
// value: [9999, month - 1, day - 1],
value: [year, month - 1, day - 1],
selDate: year + '-' + month,
detailData: [],
basicData: {
totalAccount: 0,
totalAmout: 0,
totalCount: 0
}
}
},
onPullDownRefresh() {
this.onConfirm()
// this.getUserInfo()
// uni.stopPullDownRefresh();
},
onShow() {
this.formatDate()
this.getMonthly()
var date = '2019-9-5';
date = date.substring(0, 19);
date = date.replace(/-/g, '/');
var timestamp = new Date(date).getTime();
console.log(timestamp)
},
methods: {
getMonthly() {
let obj ={
month :this.selDate ,
channelId:uni.getStorageSync('channelId')
}
oliSiteApi.getOrderInfoByMonth(obj).then(res => {
console.log(res)
uni.stopPullDownRefresh()
if (res.code === 20000) {
this.basicData = res.data.info
// this.basicData = res.data.basicData
// res.data.detailData.forEach(item => {
// var date = item[0]
// date = date.substring(0, 19);
// date = date.replace(/-/g, '/');
// item[0] = new Date(date).getTime();
// })
this.detailData = res.data.piecewise.totalMoneyList.map(Number)
// this.detailData = res.data.detailData
}
})
},
onConfirm() {
this.hideModal()
this.formatDate()
this.getMonthly()
},
formatDate() {
var m = ''
var d = ''
if (this.month < 10) {
m = '0' + this.month
} else {
m = this.month
}
this.selDate = this.year + '-' + m
console.log(this.selDate)
},
showModal(e) {
this.dialogModal = 'show'
},
hideModal(e) {
this.dialogModal = null
},
bindChange: function(e) {
const val = e.detail.value
this.year = this.years[val[0]]
this.month = this.months[val[1]]
this.day = this.days[val[2]]
console.log('年鱼儿', this.year, this.month, this.day)
}
}
}
</script>
<style scoped>
.card-container {
position: relative;
}
.card-container .cu-capsule {
margin: auto;
margin-bottom: -40px;
}
.cu-capsule-container {
min-width: 100%;
text-align: center;
}
.rr90 {
rotate: 180deg;
}
</style>