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

270 lines
7.1 KiB
Vue

<template>
<pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle" :leftIcon="''">
<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 || 0}笔)` }}
</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-80">
<view class="title ss-m-b-30">今日数据</view>
<view class="items">
<view class="item" v-for="(item, index) in state.now" :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 ? item.last : 0 }} </view> -->
</view>
</view>
</view>
<view class="more ss-m-t-40">
<view class="title ss-m-b-30">昨日数据</view>
<view class="items">
<view class="item" v-for="(item, index) in state.yesterday" :key="item.name">
<view class="label">{{ item.name }}</view>
<view class="value">{{ index !== 0 ? item.value : fen2yuan(item.value) }}</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,
},
now: [
{
name: '销售金额',
key: 'Amount',
value: 0,
},
{
name: '订单数',
key: 'orderCount',
value: 0,
},
{
name: '待核销',
key: 'verificationOrderCount',
value: 0,
},
{
name: '待配送',
key: 'deliveryOrderCount',
value: 0,
},
],
yesterday: [
{
name: '销售金额',
key: 'Amount',
value: 0,
},
{
name: '订单数',
key: 'orderCount',
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.now[0].value = res.data.todayPaymentAmount ?? 0
state.value.yesterday[0].value = res.data.yesterdaySalesAmount ?? 0
state.value.now[1].value = res.data.orderCount
state.value.yesterday[1].value = res.data.yesterdayOrderCount
state.value.now[2].value = res.data.verificationOrderCount
state.value.now[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-around;
height: 120rpx;
.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>