mall-app-t/pages/index/index.vue

<template>
    <pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
        <view class="dashboard-module ss-p-x-30">
            <view class="merchant-info flex align-center justify-between">
                <view class="flex align-center ss-gap-10">
                    <image class="logo" :src="merchantInfo?.logo" mode="aspectFill"></image>

                    <view class="detail flex flex-column justify-center gap-10">
                        <view class="name ss-font-26">{{ merchantInfo.name }}</view>
                        <view class="description ss-font-26">{{ merchantInfo?.contactPhone }}</view>
                    </view>
                </view>
                <view @tap="checkVerifi">
                    <text style="color: #fff; font-size: 32px" class="cicon-scan"></text>
                </view>
            </view>

            <view class="statistic ss-m-t-24">
                <view class="title ss-font-24 ss-m-b-20">
                    {{ `今日收款金额（成功收款${state.statistic.todayPaymentCount}笔）` }}
                </view>
                <view class="income flex justify-between align-center">
                    <view class="left flex align-center">
                        <view class="unit self-start">￥</view>
                        <view class="sincome ss-font-60">{{ fen2yuan(state.statistic.todayPaymentAmount || 0) }}</view>
                    </view>
                    <!-- <button class="right-btn ss-reset-button">查看详情</button> -->
                </view>
                <view class="des ss-m-t-20">
                    总销售额 {{ fen2yuan(state.statistic.totalSalesAmount) }} 元 | 成功退款
                    {{ state.statistic.refundCount }} 笔 | 退款金额 {{ fen2yuan(state.statistic.refundAmount) }} 元
                </view>
            </view>

            <view class="more ss-m-t-70">
                <view class="title ss-m-b-30">基础数据</view>
                <view class="items">
                    <view class="item" v-for="(item, index) in state.more" :key="item.name">
                        <view class="label">{{ item.name }}</view>
                        <view class="value">{{ index !== 0 ? item.value : fen2yuan(item.value) }}</view>
                        <view class="last"> 昨日 {{ index === 0 ? fen2yuan(item.last) : item.last }} </view>
                    </view>
                </view>
            </view>
        </view>
    </pb-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import peach from '@/peach'
import $store from '@/peach/store'
import { fen2yuan } from '@/peach/hooks/useGoods'
import UserUtil from '@/peach/api/member/user'
import OrderUtil from '@/peach/api/trade/order'
import bg from '@/static/bg-page.png'

const bgStyle = {
    backgroundImage: bg,
    imageType: 'local',
    backgroundColor: '#fff',
    description: '',
}

const state = ref({
    statistic: {
        todayPaymentCount: 0,
        todayPaymentAmount: 0,
        totalSalesAmount: 0,
        refundCount: 0,
        refundAmount: 0,
    },
    more: [
        {
            name: '销售金额',
            key: 'Amount',
            value: 0,
            last: 0,
        },
        {
            name: '订单数',
            key: 'orderCount',
            value: 0,
            last: 0,
        },
        {
            name: '待核销',
            key: 'verificationOrderCount',
            value: 0,
        },
        {
            name: '待配送',
            key: 'deliveryOrderCount',
            value: 0,
        },
    ],
})

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
}

/**
 * @author Ankkaya
 * @description 核销
 * @param {Type}  -
 * @returns {Type}
 */
function checkVerifi() {
    // 扫描二维码
    uni.scanCode({
        success: (res) => {
            uni.showModal({
                title: '提示',
                content: '是否核销该订单',
                success: function (sres) {
                    if (sres.confirm) {
                        OrderUtil.orderVerification({
                            verifyCode: res.result,
                        }).then((res) => {
                            uni.showToast({
                                title: '订单核销成功',
                                icon: 'success',
                            })
                            setTimeout(() => {
                                peach.$router.go('/pages/order/detail', {
                                    id: res.data,
                                })
                            }, 500)
                        })
                    }
                },
            })
        },
        fail: (err) => {
            console.log(err)
        },
    })
}

onShow(() => {
    getStatistic()
})
</script>

<style lang="scss" scoped>
.dashboard-module {
    .merchant-info {
        .logo {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
        }
        .detail {
            .name {
                color: #fff;
            }
            .description {
                color: #fff;
                opacity: 0.4;
            }
        }
    }

    .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;
            }
        }

        .des {
            color: var(--ui-TC-2);
            font-size: 24rpx;
        }
    }

    .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);
                }
            }
        }
    }
}
</style>