2024-05-22 15:42:13 +08:00
|
|
|
<template>
|
2024-05-24 17:24:44 +08:00
|
|
|
<pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
|
|
|
|
<view :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
|
|
|
|
<view class="dashboard-module ss-p-x-30">
|
|
|
|
<view class="merchant-info flex align-center">
|
2024-05-29 17:07:37 +08:00
|
|
|
<image class="logo" :src="merchantInfo.logo" mode="aspectFill"></image>
|
2024-05-23 23:42:33 +08:00
|
|
|
|
2024-05-24 17:24:44 +08:00
|
|
|
<view class="detail flex flex-column justify-center gap-10">
|
2024-05-29 17:07:37 +08:00
|
|
|
<view class="name ss-font-26">{{ merchantInfo.name }}</view>
|
|
|
|
<view class="description ss-font-26">{{ merchantInfo?.contactPhone }}</view>
|
2024-05-24 17:24:44 +08:00
|
|
|
</view>
|
|
|
|
</view>
|
2024-05-23 23:42:33 +08:00
|
|
|
|
2024-05-24 17:24:44 +08:00
|
|
|
<view class="statistic ss-m-t-24">
|
|
|
|
<view class="title ss-font-24 ss-m-b-20">
|
2024-05-29 17:07:37 +08:00
|
|
|
{{ `今日收款金额(成功收款${state.statistic.todayPaymentCount}笔)` }}
|
2024-05-24 17:24:44 +08:00
|
|
|
</view>
|
|
|
|
<view class="income flex justify-between align-center">
|
|
|
|
<view class="left flex align-center">
|
|
|
|
<view class="unit self-start">¥</view>
|
2024-05-29 17:07:37 +08:00
|
|
|
<view class="sincome ss-font-60">{{ state.statistic.todayPaymentAmount || 0 }}</view>
|
2024-05-24 17:24:44 +08:00
|
|
|
</view>
|
|
|
|
<button class="right-btn ss-reset-button">查看详情</button>
|
|
|
|
</view>
|
2024-05-29 17:07:37 +08:00
|
|
|
<view class="des ss-m-t-20">
|
|
|
|
总销售额{{ state.statistic.totalSalesAmount }}元 | 成功退款{{ state.statistic.refundCount }}笔 |
|
|
|
|
退款金额{{ state.statistic.refundAmount }}元
|
|
|
|
</view>
|
2024-05-24 17:24:44 +08:00
|
|
|
</view>
|
2024-05-23 23:42:33 +08:00
|
|
|
|
2024-05-24 17:24:44 +08:00
|
|
|
<view class="more ss-m-t-70">
|
|
|
|
<view class="title ss-m-b-30">基础数据</view>
|
|
|
|
<view class="items">
|
2024-05-29 17:07:37 +08:00
|
|
|
<view class="item" v-for="item in state.more" :key="item.name">
|
2024-05-24 17:24:44 +08:00
|
|
|
<view class="label">{{ item.name }}</view>
|
|
|
|
<view class="value">{{ item.value }}</view>
|
2024-05-29 17:07:37 +08:00
|
|
|
<view class="last"> 昨日 {{ item.last }} </view>
|
2024-05-24 17:24:44 +08:00
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
2024-05-23 18:04:40 +08:00
|
|
|
</view>
|
2024-05-24 17:24:44 +08:00
|
|
|
</pb-layout>
|
2024-05-22 15:42:13 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
2024-05-29 17:07:37 +08:00
|
|
|
import { ref, computed } from 'vue'
|
|
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
2024-05-23 23:42:33 +08:00
|
|
|
import peach from '@/peach'
|
2024-05-29 17:07:37 +08:00
|
|
|
import $store from '@/peach/store'
|
|
|
|
import UserUtil from '@/peach/api/member/user'
|
2024-05-24 17:24:44 +08:00
|
|
|
import bg from '@/static/bg-page.png'
|
2024-05-23 18:04:40 +08:00
|
|
|
|
2024-05-22 15:42:13 +08:00
|
|
|
const bgStyle = {
|
2024-05-24 17:24:44 +08:00
|
|
|
backgroundImage: bg,
|
|
|
|
imageType: 'local',
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
description: '',
|
2024-05-22 15:42:13 +08:00
|
|
|
}
|
2024-05-23 18:04:40 +08:00
|
|
|
|
|
|
|
const state = ref({
|
2024-05-24 17:24:44 +08:00
|
|
|
statistic: {
|
2024-05-29 17:07:37 +08:00
|
|
|
todayPaymentCount: 0,
|
|
|
|
todayPaymentAmount: 0,
|
|
|
|
totalSalesAmount: 0,
|
|
|
|
refundCount: 0,
|
|
|
|
refundAmount: 0,
|
2024-05-24 17:24:44 +08:00
|
|
|
},
|
|
|
|
more: [
|
|
|
|
{
|
2024-05-29 17:07:37 +08:00
|
|
|
name: '销售金额',
|
|
|
|
key: 'Amount',
|
|
|
|
value: 0,
|
|
|
|
last: 0,
|
2024-05-24 17:24:44 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '订单数',
|
2024-05-29 17:07:37 +08:00
|
|
|
key: 'orderCount',
|
|
|
|
value: 0,
|
|
|
|
last: 0,
|
2024-05-24 17:24:44 +08:00
|
|
|
},
|
|
|
|
{
|
2024-05-29 17:07:37 +08:00
|
|
|
name: '待核销',
|
|
|
|
key: 'verificationOrderCount',
|
|
|
|
value: 0,
|
2024-05-24 17:24:44 +08:00
|
|
|
},
|
|
|
|
{
|
2024-05-29 17:07:37 +08:00
|
|
|
name: '待配送',
|
|
|
|
key: 'deliveryOrderCount',
|
|
|
|
value: 0,
|
2024-05-24 17:24:44 +08:00
|
|
|
},
|
|
|
|
],
|
2024-05-23 18:04:40 +08:00
|
|
|
})
|
2024-05-29 17:07:37 +08:00
|
|
|
|
|
|
|
const userStore = $store('user')
|
|
|
|
|
|
|
|
const merchantInfo = computed(() => {
|
|
|
|
return userStore.userInfo?.particulars
|
|
|
|
})
|
|
|
|
|
|
|
|
async function getStatistic() {
|
|
|
|
let res = await UserUtil.getHomeStatistics()
|
|
|
|
for (let key of Object.keys(state.value.statistic)) {
|
|
|
|
state.value.statistic[key] = res.data[key]
|
|
|
|
}
|
|
|
|
|
|
|
|
state.value.more[0].value = res.data.todayPaymentAmount ?? 0
|
|
|
|
state.value.more[0].last = res.data.yesterdaySalesAmount ?? 0
|
|
|
|
state.value.more[1].value = res.data.orderCount
|
|
|
|
state.value.more[1].last = res.data.yesterdayOrderCount
|
|
|
|
state.value.more[2].value = res.data.verificationOrderCount
|
|
|
|
state.value.more[3].value = res.data.deliveryOrderCount
|
|
|
|
}
|
|
|
|
|
|
|
|
onShow(() => {
|
|
|
|
getStatistic()
|
|
|
|
})
|
2024-05-22 15:42:13 +08:00
|
|
|
</script>
|
2024-05-23 23:42:33 +08:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.dashboard-module {
|
2024-05-24 17:24:44 +08:00
|
|
|
.merchant-info {
|
|
|
|
.logo {
|
|
|
|
width: 80rpx;
|
|
|
|
height: 80rpx;
|
|
|
|
margin-right: 20rpx;
|
|
|
|
}
|
|
|
|
.detail {
|
|
|
|
.name {
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.description {
|
|
|
|
color: #fff;
|
|
|
|
opacity: 0.4;
|
|
|
|
}
|
|
|
|
}
|
2024-05-23 23:42:33 +08:00
|
|
|
}
|
|
|
|
|
2024-05-24 17:24:44 +08:00
|
|
|
.statistic {
|
|
|
|
height: 200rpx;
|
|
|
|
background-color: #fffefe;
|
|
|
|
opacity: 0.9;
|
|
|
|
border-radius: 26rpx;
|
|
|
|
padding: 31rpx 40rpx;
|
|
|
|
.title {
|
|
|
|
font-weight: 500;
|
|
|
|
color: var(--ui-TC);
|
|
|
|
}
|
|
|
|
.income {
|
|
|
|
.left {
|
|
|
|
font-weight: 600;
|
|
|
|
flex: 1;
|
|
|
|
color: var(--ui-BG-Main);
|
|
|
|
.unit {
|
|
|
|
position: relative;
|
|
|
|
top: 4px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.right-btn {
|
|
|
|
width: 161rpx;
|
|
|
|
height: 63rpx;
|
|
|
|
background-color: var(--ui-BG-Main);
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
2024-05-29 17:07:37 +08:00
|
|
|
|
|
|
|
.des {
|
|
|
|
color: var(--ui-TC-2);
|
|
|
|
font-size: 24rpx;
|
|
|
|
}
|
2024-05-24 17:24:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.more {
|
|
|
|
.title {
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
.items {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
gap: 30rpx 30rpx;
|
|
|
|
.item {
|
|
|
|
background: linear-gradient(90deg, #ffebeb 0%, #ffffff 100%);
|
|
|
|
border-radius: 18rpx;
|
|
|
|
padding: 19rpx 32rpx;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-between;
|
|
|
|
height: 170rpx;
|
|
|
|
.name {
|
|
|
|
font-weight: 600;
|
|
|
|
color: var(--ui-TC);
|
|
|
|
}
|
|
|
|
.value {
|
|
|
|
font-weight: 600;
|
|
|
|
font-size: 31rpx;
|
|
|
|
color: var(--ui-TC);
|
|
|
|
}
|
|
|
|
.last {
|
|
|
|
font-weight: 400;
|
|
|
|
color: var(--ui-TC-2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2024-05-23 23:42:33 +08:00
|
|
|
}
|
|
|
|
</style>
|