cashier-mer/src/views/order/indexCount.vue

<script setup>
import { ref } from "vue";
import {
  orderListApi,
  orderStatusApi,
  orderLadingApi,
  cartListApi,
  statisticsApi,
  orderPriceApi,
} from "@/api/store.js";
import { useUserStore } from "@/store/user.js";
import pay from "@/components/pay.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const userStore = useUserStore();
const orderList = ref([]);
const router = useRouter();

const tabPosition = ref(1); // 1-全部, 2-未收银
const payRef = ref(null);

const where = ref({
  page: 1,
  limit: 15,
  staff_id: userStore.userInfo.service.service_id,
});

const loading = ref(false);
const total = ref(0);

const getOrderList = () => {
  orderPriceApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
    orderList.value = res.data;
    // total.value = res.data.count;
  });
};

getOrderList();

const formData = ref({});
const getStatistics = () => {
  loading.value = true;
  statisticsApi(userStore.userInfo.service.mer_id, {
    staff_id: userStore.userInfo.service.service_id,
  }).then((res) => {
    formData.value = res.data.data;
    loading.value = false;
  });
};
getStatistics();

const prevClick = (e) => {
  where.value.page = e;
  getOrderList();
};

const nextClick = (e) => {
  where.value.page = e;
  getOrderList();
};

const currentChange = (e) => {
  where.value.page = e;
  getOrderList();
};
</script>

<template>
  <div v-loading="loading" element-loading-text="加载中" class="my-order">
    <div class="from" v-if="formData.today">
      <div class="form-card green">
        <div>{{ formData.today.payPrice }}</div>
        <div class="tips">今日线上收银金额</div>
      </div>
      <div class="form-card green">
        <div>{{ formData.yesterday.payPrice }}</div>
        <div class="tips">昨日线上收银金额</div>
      </div>
      <div class="form-card green">
        <div>{{ formData.month.payPrice }}</div>
        <div class="tips">本月线上收银金额</div>
      </div>
      <div class="form-card">
        <div>{{ (formData.today.cashPayment + formData.today.payPrice).toFixed(2) }}</div>
        <div class="tips">今日收银 线上+现金 总金额</div>
      </div>
      <div class="form-card">
        <div>{{ (formData.month.cashPayment + formData.month.payPrice).toFixed(2) }}</div>
        <div class="tips">本月收银 线上+现金 总金额</div>
      </div>
      <div class="form-card red">
        <div>{{ formData.today.cashPayment }}</div>
        <div class="tips">今日现金收银金额</div>
      </div>
      <div class="form-card red">
        <div>{{ formData.yesterday.cashPayment }}</div>
        <div class="tips">昨日现金收银金额</div>
      </div>
      <div class="form-card red">
        <div>{{ formData.month.cashPayment }}</div>
        <div class="tips">本月现金收银金额</div>
      </div>
      <div class="form-card">
        <div>
          {{ (formData.yesterday.cashPayment + formData.yesterday.payPrice).toFixed(2) }}
        </div>
        <div class="tips">昨日收银 线上+现金 总金额</div>
      </div>
      <!-- <div class="form-card">
            <div>{{formData.today.orderNum}}</div>
            <div class="tips">今日订单数</div>
        </div>
        <div class="form-card">
            <div>{{formData.yesterday.orderNum}}</div>
            <div class="tips">昨日订单数</div>
        </div>
        <div class="form-card">
            <div>{{formData.month.orderNum}}</div>
            <div class="tips">本月订单数</div>
        </div> -->
    </div>
    <div class="table">
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="day" label="日期" width="260" />
        <el-table-column prop="total" label="订单数量" />
        <el-table-column prop="cash_payment" label="现金收银金额" />
        <el-table-column prop="pay_price" label="线上收银金额" />
        <el-table-column label="总金额">
          <template #default="scope">
            {{ (((+scope.row.pay_price || 0) + (+scope.row.cash_payment || 0))).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-order {
  /* background-color: #fff; */
  /* border-radius: 1.2rem; */
  box-sizing: border-box;
  /* padding: 1rem; */
  /* overflow-y: scroll; */
  .from {
    width: 100%;
    padding-bottom: 1.25rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 六列 */
    gap: 1.25rem; /* 列间距 */

    .form-card {
      border-radius: 0.8rem;
      height: 5rem;
      background-color: #fff;
      font-size: 1.3rem;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .tips {
        font-size: 0.9rem;
        color: #999;
        font-weight: 400;
      }
    }
    .red {
      color: #ff4a00;
    }
    .green {
      color: #01c86f;
    }
  }
  .table {
    background-color: #fff;
    border-radius: 1.2rem;
    box-sizing: border-box;
    padding: 1rem;
    overflow-y: scroll;
  }
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  width: 0.315rem; /* 设置滚动条的宽度 */
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置轨道的背景色 */
  margin: 1.25rem 0;
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滑块的背景色 */
  border-radius: 0.315rem; /* 设置滑块的圆角 */
}

/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
</style>