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>
|