JHVip/src/views/Directly/DirectlySale/DirectlySale.vue

<template>
  <!-- 直属查询页 -->
  <div class="directly_sale">
    <!-- 筛选 todo: 这里 搜索框内容以及选择分类需要传递过来 -->
    <DirectlySaleHead :promoProfit="promoProfit" @onSearch="onSearch" />

    <!-- 直属查询表格 -->
    <DirectlySaleTable
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      :totalPage="totalPage"
      :tableData="tableList"
    />

    <!-- 分页 -->
    <!-- <el-pagination
      v-if="tableList && tableList.length > 1"
      class="directly_page"
      layout="prev, pager, next, jumper"
      :total="totalPage * 10"
      :current-page="1"
      @current-change="pageChange"
    >
    </el-pagination> -->
  </div>
</template>

<script>
import DirectlySaleHead from "@/views/Directly/DirectlySale/DirectlySaleHead/DirectlySaleHead";
import DirectlySaleTable from "@/views/Directly/DirectlySale/DirectlySaleTable/DirectlySaleTable";
export default {
  name: "DirectlySale",
  components: {
    DirectlySaleHead,
    DirectlySaleTable,
  },
  inject: ["checkCode"],
  data() {
    return {
      // 网络请求拿到的表格的数据
      tableList: [],
      pageSize: 15, // 一页大小
      pageIndex: 1, // 当前页
      totalPage: 1, // 总页数
      promoProfit: "", // 推广员总流水
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 推广员明细列表
    this.pageChange(1);
    // 推广员总流水
    this.onPromoProfit();
  },
  methods: {
    // 分页页码改变
    pageChange(currentPage) {
      const { pageSize } = this;
      this.onPromoUserList(currentPage, pageSize);
    },

    // 搜索
    onSearch(searchValue, currentInputValue) {
      console.log(
        searchValue,
        "searchValue",
        currentInputValue,
        "currentInputValue"
      );
    },

    // 销售总流水
    onPromoProfit() {
      this.$api.promoProfit().then((res) => {
        this.checkCode(res);
        const { code, data } = res.data;
        if (code) {
          return;
        }
        this.promoProfit = data;
      });
    },

    // 销售流水列表
    onPromoUserList(pageIndex, pageSize) {
      this.pageIndex = pageIndex;
      this.$api.promoUserList({ pageIndex, pageSize }).then((res) => {
        this.checkCode(res);
        const { code, data } = res.data;
        if (code) {
          return;
        }
        // 成功
        console.log(data, "data===");
        this.tableList = data;
        this.totalPage = Math.ceil(data.count / this.pageSize);
      });
    },
  },
};
</script>

<style lang='less' scoped>
.directly_sale {
  width: 98%;
  min-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;

  .directly_page {
    margin-top: 20px;
  }
}
</style>