admin-manage/src/views/home/index.vue

<!--
 * @Author: your name
 * @Date: 2021-07-08 12:10:55
 * @LastEditTime: 2024-11-12 11:11:26
 * @LastEditors: wenjie 1454560336@qq.com
 * @Description: In User Settings Edit
 * @FilePath: \admin-manage\src\views\home\index.vue
-->
<template>
  <div class="home-page">
    <!-- <div class="top-box">
      <el-row style="width: 100%;">
        <el-col :span="8" :offset="0">
          <div>
            <div class="text">待审核商品</div>
            <div class="num"> 23 </div>
          </div>
        </el-col>
        <el-col :span="8" :offset="0">
          <div>
            <div class="text">待审核商品</div>
            <div class="num"> 23 </div>
          </div>
        </el-col>
        <el-col :span="8" :offset="0">
          <div>
            <div class="text">待审核商品</div>
            <div class="num"> 23 </div>
          </div>
        </el-col>
      </el-row>
    </div> -->

     <el-select
          v-model="query.platformType"
          size="small"
          class="item-width-200 mb10"
          placeholder="请选择所属平台"
        >
          <el-option
            v-for="item in masterShopOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

    <div class="bottom">
      <div class="title">订单数据 <span>更新于{{ updateTime }}</span></div>
      <el-row>
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>支付订单数</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ today.orderCount }}</div>
            <div class="lastDay">{{ yesterday.orderCount }}</div>
          </div>
        </el-col>
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>支付金额（元）</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ today.paymentAmount }}</div>
            <div class="lastDay">{{ yesterday.paymentAmount }}</div>
          </div>

        </el-col>
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>退款金额</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ today.refundedAmount }}</div>
            <div class="lastDay">{{ yesterday.refundedAmount }} </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 40px;">
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>待核销订单</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ today.waitUse }}</div>
            <div class="lastDay">{{ yesterday.waitUse }}</div>
          </div>

        </el-col>
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>已核销订单</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ today.used }}</div>
            <div class="lastDay">{{ yesterday.used }} </div>
          </div>
        </el-col>
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>已经退款订单</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ today.refunded }}</div>
            <div class="lastDay">{{ yesterday.refunded }}</div>
          </div>
        </el-col>
      </el-row>

    </div>

    <div class="bottom" style="margin-top: 30px;">
      <div class="title">用户数据 <span>更新于{{ updateTime }}</span></div>
      <el-row>
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>新增注册</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ userData.dayRegister }} </div>
            <div class="lastDay">{{ userData.yesterdayRegister }} </div>
          </div>
        </el-col>
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>新增会员</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ userData.dayVip }} </div>
            <div class="lastDay">{{ userData.yesterdayVip }} </div>
          </div>

        </el-col>
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>当前注册用户总数</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <!-- <div class="today">{{ userData.totalRegister }}</div> -->
            <div class="today">{{ userData.totalRegisterByHyx }}</div>
            <div class="lastDay">{{ userData.yesterdayRegister }} </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 40px;">
        <el-col class="item-box" :span="8" :offset="0">
          <div class="item">
            <div>当前会员总数</div>
            <div>昨日</div>
          </div>
          <div class="item">
            <div class="today">{{ userData.totalVip }} </div>
            <div class="lastDay">{{ userData.yesterdayTotalVip }}</div>
          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>

import { orderCount } from '@/api/order';
import { userStatistics } from '@/api/invite';

export default {
  name: "home",
  components: {},
  data() {
    return {
      platformType:1,
      query:{
        platformType:1,
      },
      platformTypeObj:{
        1:'520100',
        2:'p-000',
        3:'5201000',
      },
      userData: {
        dayRegister: 0,
        dayVip: 0,
        totalRegister: 0,
        totalVip: 0,
        yesterdayRegister: 0,
        yesterdayTotalVip: 0,
        yesterdayVip: 0,
      },
      today: {
        orderCount: 0,
        waitUse: 0,
        used: 0,
        refunded: 0,
        paymentAmount: 0,
        refundedAmount: 0
      },
      yesterday: {
        orderCount: 0,
        waitUse: 0,
        used: 0,
        refunded: 0,
        paymentAmount: 0,
        refundedAmount: 0
      },
      updateTime: '',
    };
  },
  watch: {
    'query.platformType'(val) {
        this.init()
      }
  },
  computed: {

  },
  methods: {

    init(){
        this.updateTime = new Date().toLocaleString();
        const thisDayStartTime = new Date(new Date().toLocaleDateString()).getTime();
        const thisDayEndTime = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
        const yesterdayStartTime = thisDayStartTime - 24 * 60 * 60 * 1000;
        const yesterdayEndTime = thisDayEndTime - 24 * 60 * 60 * 1000;

        orderCount({
          startTime: thisDayStartTime,
          endTime: thisDayEndTime,
          code:this.platformTypeObj[this.query.platformType] 
        }).then(res => {
          if (res.state == 'Success') {
            this.today = res.content;
          }
        });
        orderCount({
          startTime: yesterdayStartTime,
          endTime: yesterdayEndTime,
          code:this.platformTypeObj[this.query.platformType] 
        }).then(res => {
          if (res.state == 'Success') {
            this.yesterday = res.content;
          }
        });
        userStatistics(this.query).then(res => {
          if (res.state == 'Success') {
            this.userData = res.content;
            // if(this.query.platformType==2){
            //   this.userData.totalRegister = this.userData.totalRegisterByHyx
            //   this.userData.totalRegister = this.userData.totalRegisterByHyx
            // }else if(this.query.platformType==3){
            //   this.userData.totalRegister = this.userData.totalRegisterByMall
            //   this.userData.totalRegister = this.userData.totalRegisterByMall
            // }
          }
        })
    }
  },
  created() { },
  mounted() {
    this.init();

  },
};
</script>

<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: calc(100vh - 50px);
  background: #f6f6f6;

  .tab-box {
    display: flex;
    align-items: center;
    position: relative;
    top: 20px;
    z-index: 2;

    .tab {
      padding: 8px 10px;
      margin: 0 15px;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.6);
      background: #F6F6F6;
    }

    .active {
      background: #E8E9FE;
      color: #2836FE;
    }
  }

  .top-box {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 20px 24px;
    margin-bottom: 20px;
    border-radius: 8px;

    .text {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .num {
      font-size: 25px;
    }
  }

  .bottom {
    background: #fff;
    border-radius: 8px;
    padding: 20px 0;

    .title {
      font-size: 16px;
      margin-left: 24px;
      margin-bottom: 20px;

      span {
        font-size: 14px;
        color: #999;
        margin-left: 10px;
      }
    }

    .item-box {
      padding: 0 20px;
      border-left: 1px solid #f0f0f0;

      &:first-child {
        border-left: none;
      }

      .item {
        display: flex;
        justify-content: space-between;

        &:first-child {
          margin-bottom: 15px;
        }

        .today {
          font-size: 20px;
        }

        .lastDay {
          color: #999;
        }
      }
    }



  }
}
</style>