pad_spa/src/pages/revenueManage/index.vue

<template>
  <div class="mine">
    <!-- 头部今日数据 -->
    <div class="topBox">
      <div class="title">
        <h2>今日数据</h2>
        <div class="date">{{dataTotal.date}}</div>
      </div>
      <div class="redact">
        <div class="amountData">
          <el-card>
            <div class="titleBox">
              <div class="title">销售金额:</div>
              <div class="money">￥{{dataTotal.total_price}}</div>
            </div>
          </el-card>
          <el-card>
            <div class="titleBox">
              <div class="title">消耗金额:</div>
              <div class="money">￥{{dataTotal.card_expend_price}}</div>
            </div>
          </el-card>
          <el-card>
            <div class="titleBox">
              <div class="title">实收金额:</div>
              <div class="money">￥{{dataTotal.payer_price}}</div>
            </div>
          </el-card>
        </div>
        <!-- 创建订单 -->
        <div class="createOrder" @click="createOrder">创建订单</div>
      </div>
    </div>
    <!-- 订单列表 -->
    <div class="orderList">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        height="500"
        style="width: 100%; border-radius: 8px"
        @row-click="goOrderDetail"
      >
        <el-table-column prop="create_at"  label="订单时间"></el-table-column>
        <el-table-column prop="nickname"  label="用户姓名"></el-table-column>
        <el-table-column prop="order_type"  label="订单类型">
          <template slot-scope="scope">
            <div>{{scope.row.order_type==1?'服务项目':'销售类型'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="payer_price"  label="实收金额"></el-table-column>
        <el-table-column prop="pay_way"  label="支付方式"></el-table-column>
        <el-table-column prop="suser_names"  label="美容师"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="checkBtn" @click.stop="checkOrder(scope.row.id)">查看</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagin">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../server/home";
export default {
  data() {
    return {
      tableData: [], //订单列表数据
      dataTotal: "", //管理订单统计
      total: 0, //列表总条数
      currentPage: 1 //页数
    };
  },
  methods: {
    //创建订单
    createOrder() {
      this.$router.push("/revenueManage/createOrder");
    },
    // 进入订单详情
    checkOrder(e) {
      this.$router.push(`/revenueManage/details?id=${e}`);
    },
    // 进入订单详情
    goOrderDetail(e) {
      let id = e.id;
      this.$router.push(`/revenueManage/details?id=${id}`);
    },
    // 获取订单列表
    getOrderList() {
      api
        .tradeList({
          page: this.currentPage,
          limit: 10
        })
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        });
    },
    // 获取营收管理订单统计
    getDataTotal() {
      api.tradeDataTotal().then(res => {
        if (res.code == 200) {
          this.dataTotal = res.data;
        }
      });
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.getOrderList()
    }
  },
  created() {
    // 获取订单列表
    this.getOrderList();
    // 获取营收管理订单统计
    this.getDataTotal();
  }
};
</script>

<style scoped lang='less'>
.mine {
  // 头部今日数据
  .topBox {
    width: 857px;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    padding: 14px;
    box-sizing: border-box;
    .title {
      display: flex;
      align-items: center;
      h2 {
        margin-right: 20px;
      }
      .date {
        font-weight: 700;
      }
    }
    .redact {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .amountData {
        margin-top: 6px;
        display: flex;
        /deep/ .el-card {
          margin-right: 16px;
        }
        .titleBox {
          display: flex;
          margin-right: 20px;
          .title {
            font-weight: 700;
            margin-right: 5px;
          }
        }
      }
      .createOrder {
        width: 90px;
        height: 30px;
        border-radius: 4px;
        background-color: #fa7d22;
        color: #fff;
        text-align: center;
        line-height: 30px;
      }
    }
  }
  // 订单列表
  .orderList {
    margin-top: 18px;
    padding: 0 12px;
    width: 857px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
    border-radius: 8px;
    .checkBtn {
      width: 50px;
      height: 25px;
      background: #fa7d22;
      border-radius: 2px;
      line-height: 25px;
      text-align: center;
      color: #fff;
    }
    .pagin {
      padding: 20px 0;
      .el-pagination {
        text-align: center;
      }
    }
    /deep/ .el-table tbody tr:hover > td {
      background-color: transparent !important;
    }
    /deep/ .el-table th > .cell {
      font-size: 14px !important;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
    /deep/ .el-table td,
    .el-table th.is-leaf {
      border-bottom: none;
    }
  }
}
</style>