mall-app-t/pages/index/index.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">
          {{ `今日收款金额` }}
        </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.todaySales || 0) }}</view>
          </view>
          <!-- <button class="right-btn ss-reset-button">查看详情</button> -->
        </view>
        <view class="des ss-m-t-20">
          总订单数 {{ state.statistic.total }} 笔 | 已完成订单 {{ state.statistic.countCompleted }} 笔 | 总付款额
          {{ fen2yuan(state.statistic.totalPayPrice) }} 元
        </view>
        <view class="des ss-m-t-20">
          取消订单 {{ state.statistic.countCanceled }} 笔 | 退款金额 {{ fen2yuan(state.statistic.totalRefundPrice) }} 元
        </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.name?.includes('金额') ? fen2yuan(item.value) : 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" style="margin-bottom: 40rpx">
        <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: {
    todaySales: 0,
    countCompleted: 0, // 总完成订单笔数
    total: 0, // 总订单
    totalPayPrice: 0, // 总付款额
    countCanceled: 0, // 总取消订单
    totalRefundPrice: 0, // 总退款金额
  },
  now: [
    {
      name: '销售金额',
      key: 'todaySales',
      value: 0,
    },
    {
      name: '订单数',
      key: 'todayOrders',
      value: 0,
    },
    {
      name: '待支付订单',
      key: 'countPayTodo',
      value: 0,
    },
    {
      name: '待核销',
      key: 'countTodoUnverified',
      value: 0,
    },
    {
      name: '待配送',
      key: 'countTodoWaitingDelivery',
      value: 0,
    },
    {
      name: '退款笔数',
      key: 'todayRefunds',
      value: 0,
    },
  ],
  yesterday: [
    {
      name: '销售金额',
      key: 'yesterdaySales',
      value: 0,
    },
    {
      name: '订单数',
      key: 'yesterdayOrders',
      value: 0,
    },
    {
      name: '退款金额',
      key: 'yesterdayRefunds',
      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]
  }

  for (let obj of state.value.now) {
    obj.value = res.data[obj.key] ?? 0
  }

  for (let obj of state.value.yesterday) {
    obj.value = res.data[obj.key] ?? 0
  }
}

/**
 * @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>