377 lines
9.1 KiB
Vue
377 lines
9.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="container">
|
|
<headers :titles="titles"><u-icon name="arrow-left" color="#fff" size="22"></u-icon></headers>
|
|
|
|
<view class="top-time">
|
|
<view style="margin-right: 10px;">选择时间</view>
|
|
<view class="lan-time">
|
|
<span @click="clickStartTime">{{startTime}}</span>
|
|
<span>-</span>
|
|
<span @click="clickEndTime">{{endTime}}</span>
|
|
</view>
|
|
</view>
|
|
|
|
<u-datetime-picker :show="showStartTime" v-model="startTimeValue" mode="datetime" @confirm="clickStart"
|
|
@close="showStartTime = false" @cancel="showStartTime = false"></u-datetime-picker>
|
|
|
|
<u-datetime-picker :show="showEndTime" v-model="endTimeValue" mode="datetime" @confirm="clickEnd"
|
|
@close="showEndTime = false" @cancel="showEndTime = false"></u-datetime-picker>
|
|
|
|
<view class="hm-box">
|
|
<view class="hm-top">营业收入</view>
|
|
<view class="lan-title">￥{{dataForm.sumBalance?dataForm.sumBalance:0}}</view>
|
|
<view class="b-bs">
|
|
<view class="">
|
|
<view class="hui-">营业额/笔数</view>
|
|
<view class="lan-">￥{{dataForm.sumBalance?dataForm.sumBalance:0}}/{{dataForm.countBalance}}
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="hui-">会员充值/笔数</view>
|
|
<view class="lan-">
|
|
￥{{ (Number) (dataForm.userBalance)+(Number)(dataForm.oilBalance) }}/{{(Number)(dataForm.userBalanceCount)+(Number)(dataForm.oilBalanceCount)}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="b-bs">
|
|
<view class="">
|
|
<view class="hui-">退款金额/笔数</view>
|
|
<view class="lan-">￥{{dataForm.refBalance || 0}}/{{dataForm.refBalanceCount}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="hm-box">
|
|
<view class="hm-top">支付方式统计</view>
|
|
<view class="d-s" style="margin-bottom: 10px;">
|
|
<view class="icon-img">
|
|
<image src="../../static/imgs/wx.png" mode=""></image>
|
|
</view>
|
|
<view class="">微信支付</view>
|
|
</view>
|
|
<view class="h-b-box">
|
|
<view class="">
|
|
<view class="hui-">营业额/笔数</view>
|
|
<view class="lan-">￥{{dataForm.wechat || 0}}/{{dataForm.wechatcount}}</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="hui-">会员充值/笔数</view>
|
|
<view class="lan-">￥{{dataForm.userBalanceByWechat|| 0 }}/{{dataForm.userBalanceCountByWechat}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="d-s" style="margin-bottom: 10px;">
|
|
<view class="icon-img">
|
|
<image src="../../static/imgs/zfb.png" mode=""></image>
|
|
</view>
|
|
<view class="">支付宝支付</view>
|
|
</view>
|
|
<view class="h-b-box">
|
|
<view class="">
|
|
<view class="hui-">营业额/笔数</view>
|
|
<view class="lan-">￥{{dataForm.alipay || 0}}/{{dataForm.alipaycount}}</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="hui-">会员充值/笔数</view>
|
|
<view class="lan-">￥{{dataForm.userBalanceByAli || 0}}/{{dataForm.userBalanceCountByali}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="d-s" style="margin-bottom: 10px;">
|
|
<view class="icon-img">
|
|
<image src="../../static/imgs/yl.png" mode=""></image>
|
|
</view>
|
|
<view class="">银联支付</view>
|
|
</view>
|
|
<view class="h-b-box">
|
|
<view class="">
|
|
<view class="hui-">营业额/笔数</view>
|
|
<view class="lan-">￥0.00/0</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="hui-">会员充值/笔数</view>
|
|
<view class="lan-">￥0.00/0</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "../../utils/request";
|
|
|
|
import headers from '../../components/header/headers.vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
titles: "经营数据",
|
|
startTime: "",
|
|
endTime: "",
|
|
startTimeValue: "",
|
|
endTimeValue: "",
|
|
showStartTime: false,
|
|
showEndTime: false,
|
|
dataForm: {
|
|
sumBalance: '0',
|
|
countBalance: '0',
|
|
userBalance: '0',
|
|
userBalanceCount: '0',
|
|
refBalance: '0',
|
|
refBalanceCount: '0',
|
|
wechat: '0',
|
|
wechatcount: '0',
|
|
userBalanceByWechat: '0',
|
|
userBalanceCountByWechat: '0',
|
|
alipay: '0',
|
|
alipaycount: '0',
|
|
userBalanceByAli: '0',
|
|
userBalanceCountByali: '0',
|
|
oilBalance: '0',
|
|
oilBalanceCount: '0',
|
|
},
|
|
form: {
|
|
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
// this.actList = ["1", "1", "1", "1", "1", ]
|
|
// this.status = "nomore" 底部刷新结束
|
|
let start = new Date();
|
|
start.setHours(0)
|
|
start.setMinutes(0)
|
|
start.setSeconds(0)
|
|
start.setMilliseconds(0)
|
|
// formatDateToYYMMDDHHMM(start);
|
|
// formatDateToYYMMDDHHMM(new Date());
|
|
this.startTime = this.formatDateToYYMMDDHHMM(start);
|
|
this.endTime = this.formatDateToYYMMDDHHMM(new Date());
|
|
// this.startTime = start
|
|
// this.endTime = new Date()
|
|
this.getIndexData()
|
|
},
|
|
onPullDownRefresh() {
|
|
console.log("刷新");
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom() {
|
|
// this.show = true
|
|
setTimeout(() => {
|
|
console.log("加载执行");
|
|
}, 2000)
|
|
},
|
|
components: {
|
|
headers
|
|
},
|
|
methods: {
|
|
goback() {
|
|
uni.navigateBack()
|
|
},
|
|
clickStartTime(e) {
|
|
this.showStartTime = true
|
|
console.log(123, e)
|
|
// const date = new Date(timestamp);
|
|
|
|
},
|
|
clickEndTime(e) {
|
|
this.showEndTime = true
|
|
|
|
},
|
|
clickStart(e) {
|
|
console.log('123123', e)
|
|
this.showStartTime = false
|
|
this.startTime = this.formatDateToYYMMDDHHMM(new Date(e.value));
|
|
this.getIndexData()
|
|
},
|
|
clickEnd(e) {
|
|
this.showEndTime = false
|
|
this.endTime = this.formatDateToYYMMDDHHMM(new Date(e.value));
|
|
this.getIndexData()
|
|
},
|
|
// 获取销售数据
|
|
getIndexData() {
|
|
|
|
if (this.startTime && this.endTime) {
|
|
this.form.params = {
|
|
beginTime: this.startTime,
|
|
endTime: this.endTime
|
|
}
|
|
}
|
|
request({
|
|
url: 'business/allOrderInfo/getOperatingDataPos',
|
|
method: 'get',
|
|
params: this.form
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.dataForm = res.data
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data,
|
|
icon: "none"
|
|
})
|
|
}
|
|
})
|
|
},
|
|
formatTimestamp(timestamp) {
|
|
// const date = new Date(Number(timestamp));
|
|
// const year = date.getFullYear();
|
|
// const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
// const day = String(date.getDate()).padStart(2, '0');
|
|
// const hours = String(date.getHours()).padStart(2, '0');
|
|
// const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
// const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
|
// return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
},
|
|
formatDateToYYMMDDHHMM(date) {
|
|
const year = String(date.getFullYear()); // 获取两位数的年份
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，并确保是两位数
|
|
const day = String(date.getDate()).padStart(2, '0'); // 获取日期，并确保是两位数
|
|
const hours = String(date.getHours()).padStart(2, '0'); // 获取小时，并确保是两位数
|
|
const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟，并确保是两位数
|
|
|
|
// return `${year}/${month}/${day} ${hours}:${minutes}`;
|
|
return `${year}/${month}/${day}`;
|
|
}
|
|
|
|
},
|
|
watch: {
|
|
// startTime(newVal) {
|
|
// this.startTime = this.formatTimestamp(newVal);
|
|
// },
|
|
// endTime(newVal) {
|
|
// this.endTime = this.formatTimestamp(newVal);
|
|
// }
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background: #f8f8f8;
|
|
// background: linear-gradient(180deg, #B2D2FC 0%, #B2D2FC 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
|
|
height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
background: #f8f8f8;
|
|
box-sizing: border-box;
|
|
padding-top: 88px;
|
|
}
|
|
|
|
.img-box {
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.d-s {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-time {
|
|
width: 95%;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 10px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin: 15px auto;
|
|
|
|
}
|
|
|
|
.lan-time {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #0864E9;
|
|
}
|
|
|
|
.wrap-box {
|
|
width: 95%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 15px auto;
|
|
}
|
|
|
|
.b-bai {
|
|
width: 60px;
|
|
height: 80px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 0px 4px 0px rgba(67, 104, 212, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.hm-box {
|
|
width: 95%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
background: #FFFFFF;
|
|
margin: 15px auto;
|
|
}
|
|
|
|
.hm-top {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #F0F0F0;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #0864E9;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.lan-title {
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
color: #0864E9;
|
|
}
|
|
|
|
.b-bs {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.hui- {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.lan- {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #0864E9;
|
|
}
|
|
|
|
.h-b-box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.icon-img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 5px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |