147 lines
3.5 KiB
Vue
147 lines
3.5 KiB
Vue
<template>
|
|
<view class="body">
|
|
<view class="wrapper product-detail">
|
|
|
|
<view class="head">
|
|
<view class="month">
|
|
<view @click="selectMonth" style="display: flex;align-items: center; font-size:46rpx;">
|
|
<text class="text">{{currentYear}}</text> 年 <text class="text">{{currentMonth}}</text> 月 <u-icon
|
|
style="padding: 10rpx;" :name="iconName" size="20" color="#555555"></u-icon>
|
|
</view>
|
|
<u-datetime-picker @confirm="timeConfirm" @cancel="timeCancel" :show="show" v-model="defaultDate"
|
|
mode="year-month"></u-datetime-picker>
|
|
</view>
|
|
<view class="data">
|
|
<view class="container">
|
|
<view class="total">
|
|
<text>￥{{report.sum}}元</text>
|
|
</view>
|
|
<view class="ordernum">
|
|
<text class="text " style="padding-top:0">共{{report.count}}笔订单</text>
|
|
<view>
|
|
<text class="text">{{currentYear}}年</text> <text class="text">{{currentMonth}}月</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view class="card">
|
|
<view class="top">
|
|
<view class="icon" style="width: 60rpx; display: flex;flex-direction: row;">
|
|
<view
|
|
style="height: 25rpx; width: 25rpx; background-color: #ed6d00; border-radius: 13rpx; margin-right: -8rpx; z-index: 10;">
|
|
</view>
|
|
<view style="height: 25rpx; width: 25rpx; background-color: #ed6d00; border-radius: 13rpx;">
|
|
</view>
|
|
</view>
|
|
<view class="order-no">
|
|
收入走势
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="line" :opts="lineConfig" :chartData="chartData" />
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="bottom">
|
|
<u-button :disabled="false" class="button" @click="go2order">账 单</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let that = {}
|
|
export default {
|
|
data() {
|
|
var date = new Date;
|
|
return {
|
|
currentYear: date.getFullYear(),
|
|
currentMonth: date.getMonth() + 1,
|
|
lastDay: 0,
|
|
iconName: 'arrow-down-fill',
|
|
lineConfig: {
|
|
dataLabel: false,
|
|
yAxis: {
|
|
disabled: false,
|
|
disableGrid: true
|
|
},
|
|
"xAxis": {
|
|
"rotateLabel": true,
|
|
disabled: true,
|
|
}
|
|
},
|
|
show: false,
|
|
chartData: {
|
|
categories: [],
|
|
series: [{
|
|
data: [],
|
|
name: "收款金额"
|
|
}, {
|
|
data: [],
|
|
name: "订单数量"
|
|
}]
|
|
},
|
|
report: {
|
|
count: 0,
|
|
sum: 0
|
|
},
|
|
};
|
|
},
|
|
onLoad() {
|
|
that = this
|
|
//获取当月最后一天
|
|
that.lastDay = new Date(that.currentYear, that.currentMonth, 0).getDate()
|
|
that.defaultDate = that.currentYear + '-' + that.currentMonth
|
|
// that.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.getList()
|
|
},
|
|
getList() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
},
|
|
timeConfirm(time) {
|
|
const date = new Date(time.value);
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth() + 1; // 月份是从0开始的
|
|
that.currentYear = year
|
|
that.currentMonth = month
|
|
this.iconName = 'arrow-down-fill';
|
|
this.show = false
|
|
that.defaultDate = that.currentYear + '-' + that.currentMonth
|
|
// that.getList()
|
|
},
|
|
timeCancel() {
|
|
this.iconName = 'arrow-down-fill';
|
|
},
|
|
selectMonth() {
|
|
this.show = true;
|
|
this.iconName = 'arrow-up-fill';
|
|
},
|
|
go2order() {
|
|
uni.navigateTo({
|
|
url: '/pages/fiance/ledger/ledger'
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./report.scss";
|
|
</style> |