elizebeth/src/xt_pages/DepositManagement/RechargeDetailsSummary.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div style="width: 100%">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="充值明细" name="first">
            <RechangeDetails></RechangeDetails>
          </el-tab-pane>
          <el-tab-pane label="充值汇总" name="second">
            <RechargeSummary></RechargeSummary>
          </el-tab-pane>
        </el-tabs>
        <div
          style="position: absolute; top: 80px; right: 40px"
          v-if="activeName == 'first'"
        >
          <el-button size="small" type="primary" @click="Add()">
            新增
          </el-button>
        </div>
      </div>
      <el-dialog
        title="新增押金"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="close"
      >
        <!-- <span>这是一段信息</span> -->
        <RechangeAd></RechangeAd>
        <span slot="footer" class="dialog-footer">
          <el-button @click="pass">审核通过</el-button>
          <el-button type="primary" @click="Submit">提 交</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import RechangeDetails from "./Template/RechargeDetails.vue";
import RechargeSummary from "./Template/RechargeSummary.vue";
import RechangeAd from "./Template/add_page.vue";
export default {
  components: {
    BreadCrumb,
    RechangeDetails,
    RechargeSummary,
    RechangeAd,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "充值详情" },
      ],
      activeName: "first",
      tableData: [{}, {}],
      total: 0,
      page: 1,
      limit: 10,
      keywords: "",
      dialogVisible: false,
      close: false,
    };
  },

  methods: {
    // 初始化数据
    init() {},

    // 查询操作
    search() {},
    // 切换明细
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 页表操作
    handleSizeChange(val) {
      this.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },

    // 流水详情
    toDetails() {
      this.$router.push({ path: "/DepositManagement/DepositDetails" });
    },

    // 新增
    Add() {
      this.dialogVisible = true;
    },

    // 审核通过
    pass() {},

    // 提交
    Submit() {},
  },
};
</script>
<style>
</style>