389 lines
9.7 KiB
Vue
389 lines
9.7 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :title="storeobj.storeName" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
||
title-size='36' height='36' id="navbar">
|
||
</u-navbar>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uo5KnRUd2Lbmx6kqLD8y" class="bj" mode=""></image>
|
||
<view class="top">
|
||
<view class="lt">
|
||
<view class="jinri">
|
||
今日营业额（元）
|
||
</view>
|
||
<view class="money">
|
||
{{storeobj.todayIncome == null ? '--' : storeobj.todayIncome}}元
|
||
</view>
|
||
<view class="jinri">
|
||
总收入：{{storeobj.totalIncome == null ? '--' : storeobj.totalIncome}}元
|
||
</view>
|
||
</view>
|
||
<view class="rt">
|
||
<view class="jinri">
|
||
今日订单（笔）
|
||
</view>
|
||
<view class="money">
|
||
{{storeobj.todayOrderCount == null ? '--' : storeobj.todayOrderCount}}笔
|
||
</view>
|
||
<view class="jinri">
|
||
总订单：{{storeobj.totalOrder == null ? '--' : storeobj.totalOrder}}笔
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tongji">
|
||
<view class="list">
|
||
<view class="li">
|
||
<view class="shu">
|
||
{{storeobj.deviceCount == null ? '--' : storeobj.deviceCount}}
|
||
</view>
|
||
<view class="wen">
|
||
设备总数
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="shu">
|
||
{{storeobj.freeDeviceCount == null ? '--' : storeobj.freeDeviceCount}}
|
||
</view>
|
||
<view class="wen">
|
||
空闲设备
|
||
</view>
|
||
</view>
|
||
<view class="li" style="border: none;">
|
||
<view class="shu">
|
||
{{storeobj.usingDeviceCount == null ? '--' : storeobj.usingDeviceCount}}
|
||
</view>
|
||
<view class="wen">
|
||
使用中
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pricequan">
|
||
<view class="tab">
|
||
<view :class="activeindex == index ? 'active' : ''" v-for="(item,index) in arr" :key="index" @click.stop="btnact(index)">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
<view class="tit">
|
||
收支概览
|
||
</view>
|
||
<view class="xianshi">
|
||
<view class="one">
|
||
<view class="two">
|
||
营收
|
||
</view>
|
||
<view class="thr">
|
||
<text>￥</text> {{storeobj.payMoney == null ? '--' : storeobj.payMoney}}
|
||
</view>
|
||
</view>
|
||
<view class="one">
|
||
<view class="two">
|
||
退款
|
||
</view>
|
||
<view class="thr">
|
||
<text>￥</text> {{storeobj.refundMoney == null ? '--' : storeobj.refundMoney}}
|
||
</view>
|
||
</view>
|
||
<view class="one">
|
||
<view class="two">
|
||
实际营收
|
||
</view>
|
||
<view class="thr">
|
||
<text>￥</text> {{storeobj.realAmount == null ? '--' : storeobj.realAmount}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="icons">
|
||
<image @click.stop="btnpage(1)" src="https://api.ccttiot.com/smartmeter/img/static/ut6vvvispEWtKhCR9XYB" mode=""></image> <!-- 设备管理 -->
|
||
<image @click.stop="btnpage(2)" src="https://api.ccttiot.com/smartmeter/img/static/uv6sqvVGDswiq90j7pMP" mode=""></image> <!-- 订单管理 -->
|
||
<image @click.stop="btnpage(3)" src="https://api.ccttiot.com/smartmeter/img/static/u0d1g9wvKTqZMeTNljln" mode=""></image> <!-- 店铺配置 -->
|
||
<image @click.stop="btnpage(4)" src="https://api.ccttiot.com/smartmeter/img/static/uOjdAFMpXa7IgycvqW0z" mode=""></image> <!-- 订单统计 -->
|
||
</view>
|
||
|
||
<view class="del" @click="btndel">
|
||
删除
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "",
|
||
},
|
||
arr:['今天','昨天','近七天','本月','上月','全部'],
|
||
activeindex:0,
|
||
storeId:'',
|
||
storeobj:{},
|
||
endDate:'',
|
||
startDate:''
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
const now = new Date();
|
||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||
this.startDate = this.formatDate(today);
|
||
this.endDate = this.formatDate(today);
|
||
this.storeId = option.storeId
|
||
this.getxq()
|
||
},
|
||
methods: {
|
||
// 删除店铺
|
||
btndel(){
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您确定要删除此店铺吗？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
that.$u.delete(`/bst/store/${that.storeId}`).then(res =>{
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
setTimeout(()=>{
|
||
uni.navigateBack()
|
||
},1500)
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 请求店铺详情
|
||
getxq(){
|
||
this.$u.get(`/bst/store/${this.storeId}?startDate${this.startDate}&endDate${this.endDate}`).then(res =>{
|
||
if(res.code == 200){
|
||
this.storeobj = res.data
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击进行页面跳转
|
||
btnpage(num){
|
||
if(num == 1){ //设备管理
|
||
uni.navigateTo({
|
||
url:'/page_shanghu/device/index?storeId=' + this.storeId + '&tit=' + this.storeobj.storeName
|
||
})
|
||
}else if(num == 2){ //订单管理
|
||
|
||
}else if(num == 3){ //店铺配置
|
||
|
||
}else if(num == 4){ //订单统计
|
||
|
||
}
|
||
},
|
||
// 点击切换高亮
|
||
btnact(index) {
|
||
this.activeindex = index;
|
||
const now = new Date();
|
||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||
|
||
if (index === 0) { // 今天
|
||
this.startDate = this.formatDate(today);
|
||
this.endDate = this.formatDate(today);
|
||
this.getxq()
|
||
} else if (index === 1) { // 昨天
|
||
const yesterday = new Date(today);
|
||
yesterday.setDate(yesterday.getDate() - 1);
|
||
this.startDate = this.formatDate(yesterday);
|
||
this.endDate = this.formatDate(yesterday);
|
||
this.getxq()
|
||
} else if (index === 2) { // 近七天
|
||
const sevenDaysAgo = new Date(today);
|
||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 6);
|
||
this.startDate = this.formatDate(sevenDaysAgo);
|
||
this.endDate = this.formatDate(today);
|
||
this.getxq()
|
||
} else if (index === 3) { // 本月
|
||
const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
|
||
this.startDate = this.formatDate(firstDayOfMonth);
|
||
this.endDate = this.formatDate(today);
|
||
this.getxq()
|
||
} else if (index === 4) { // 上月
|
||
const firstDayOfLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||
const lastDayOfLastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
|
||
this.startDate = this.formatDate(firstDayOfLastMonth);
|
||
this.endDate = this.formatDate(lastDayOfLastMonth);
|
||
this.getxq()
|
||
} else if (index === 5) { // 全部
|
||
this.startDate = ''; // 或者设置为你的最早可能日期
|
||
this.endDate = ''; // 或者设置为你的最晚可能日期
|
||
this.getxq()
|
||
}
|
||
},
|
||
|
||
// 辅助方法：格式化日期为 YYYY-MM-DD
|
||
formatDate(date) {
|
||
if (!date) return '';
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.active{
|
||
color: #FF8998 !important;
|
||
}
|
||
.del{
|
||
width: 680rpx;
|
||
height: 90rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
background-color: #FF8998;
|
||
color: #fff;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 80rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
.icons{
|
||
width: 680rpx;
|
||
height: 172rpx;
|
||
background: #0B0B0B;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
padding: 36rpx 56rpx;
|
||
box-sizing: border-box;
|
||
image{
|
||
width: 96rpx;
|
||
height: 98rpx;
|
||
}
|
||
}
|
||
.pricequan{
|
||
width: 680rpx;
|
||
height: 296rpx;
|
||
background: #0B0B0B;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
.xianshi{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 28rpx;
|
||
padding: 0 74rpx;
|
||
box-sizing: border-box;
|
||
.one{
|
||
text-align: center;
|
||
.two{
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
}
|
||
.thr{
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 6rpx;
|
||
text{
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tit{
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.tab{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 34rpx 30rpx;
|
||
box-sizing: border-box;
|
||
view{
|
||
color: #808080;
|
||
}
|
||
}
|
||
}
|
||
.tongji{
|
||
width: 680rpx;
|
||
height: 172rpx;
|
||
background: #0B0B0B;
|
||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72,137,59,0.1);
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding: 46rpx 0;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 36rpx;
|
||
.list{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.li{
|
||
width: 33.3%;
|
||
text-align: center;
|
||
border-right: 1px solid #C7C7C7;
|
||
.shu{
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.wen{
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 70rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 36rpx;
|
||
.rt,
|
||
.lt{
|
||
.jinri{
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.money{
|
||
font-weight: 600;
|
||
font-size: 44rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
.bj{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
page {
|
||
background: #fff;
|
||
}
|
||
|
||
</style> |