学习tab笔记

<template>
  <div class="online-social">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <ul class="member-tap">
        <li
          :class="{ 'li-active': tabValue == item.value }"
          v-for="item in tabList"
          :key="item.value"
          @click="changeTab(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!-- 中间内容 -->
    <div class="middle-content">
      <!-- 论坛 -->
      <div v-show="tabValue === 'FORUM'">
        <ul class="tab">
          <li
            class="tab-item"
            :class="{ active: forumTypeValue == item.value }"
            v-for="item in forumTabList"
            :key="item.value"
            @click="changeForum(item)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="card">
          <el-menu
            :default-active="subTabIndex"
            class="menu place-right"
            mode="horizontal"
            @select="changeSubTab"
          >
            <el-menu-item index="1">浏览记录</el-menu-item>
            <el-menu-item index="2">我的发帖</el-menu-item>
            <el-menu-item index="3">我的回复</el-menu-item>
          </el-menu>
          <ul class="list">
            <span class="list-title">{{ subTabTitle }}</span>
            <li
              v-for="item in forumList"
              :key="item.userBrowseId"
              class="item-box"
            >
              <div v-if="subTabIndex == '1' || subTabIndex == '2'">
                <div class="left">
                  <span class="category-title">{{ item.forumCategory }}</span>
                  <span class="content-title">{{ item.forumTitle }}</span>
                  <span>
                    <span class="name">{{ item.userName }}</span>
                    <i
                      style="margin-left: 80px; color: #333"
                      class="el-icon-chat-line-round"
                    ></i>
                    <span style="margin-left: 5px; color: #333">{{
                      item.commentNum
                    }}</span>
                  </span>
                </div>
                <div class="right">
                  <span class="time">{{ item.createTime }}</span>
                </div>
              </div>
              <div v-else>
                <div class="left">
                  <span>用户名： {{ item.nickname }}</span>
                  <span>
                    <span class="content-title"
                      >回复我的主题： {{ item.forumTitle }}</span
                    >
                    <i
                      style="margin-left: 60px"
                      class="el-icon-arrow-right"
                    ></i>
                    <span style="margin-left: 10px" class="category-title">{{
                      item.forumCategory
                    }}</span>
                  </span>
                </div>
                <div class="right">
                  <span class="time">{{ item.createTime }}</span>
                  <span style="align-self: flex-end"
                    ><i
                      style="margin-right: 5px; color: #333"
                      class="el-icon-chat-line-round"
                    ></i
                    >回复</span
                  >
                </div>
              </div>
            </li>
          </ul>
          <el-pagination
            v-if="forumList.length != 0"
            background
            layout="total,sizes, prev, pager, next, jumper"
            :current-page="queryParams.pageNum"
            :page-size="queryParams.pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 资料中心 -->
      <div v-show="tabValue === 'DATA'" class="content-box">
        <span class="sub-title">下载中心</span>
        <el-divider></el-divider>
        <ul class="list">
          <li class="item-box" v-for="item in downLoadList" :key="item.dataId">
            <i class="el-icon-folder img"></i>
            <span class="column">
              <span>{{ item.dataTitle }}</span>
              <span>{{ item.dataDesc }}</span>
              <span>
                <span style="margin-right: 20px"
                  >下载次数： {{ item.downNum }}</span
                >
                <span>上传时间： {{ item.createTime }}</span>
              </span>
            </span>
          </li>
        </ul>
        <el-pagination
          v-if="downLoadList.length != 0"
          background
          layout="total,sizes, prev, pager, next, jumper"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :page-sizes="pageSizes"
          :total="total"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
      <!-- 小视频 -->
      <div v-show="tabValue === 'VIDEO'" class="content-box">
        <span class="sub-title">我的抖音号</span>
        <el-divider></el-divider>
        <div class="user-info">
          <el-avatar :size="50"></el-avatar>
          <span class="column">
            <span>用户名</span>
            <span v-if="!userVideo.bindState" class="text-id">未绑定</span>
            <span v-else class="text-id"
              >抖音号：{{ userVideo.userDY.douyinNum }}</span
            >
          </span>
          <el-button v-if="!userVideo.bindState" style="align-self: flex-end"
            >添加绑定</el-button
          >
          <el-button v-else style="align-self: flex-end">授权视频</el-button>
        </div>
        <el-divider></el-divider>
        <span
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          "
        >
          <span class="sub-title">我的小视频</span>
          <el-select
            v-model="videoStatus"
            placeholder="请选择"
            @change="getData(videoStatus)"
            style="margin-right: 10px"
          >
            <el-option
              v-for="item in videoStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <el-divider></el-divider>
        <ul class="list bent-array">
          <li v-for="item in videoList" :key="item.videoId" class="video-card">
            <span class="video-tag">{{
              videoStatusList[
                videoStatusList.findIndex((n) => n.value == item.verifyStatus)
              ].label
            }}</span>
            <div class="video-wrap">
              <!-- <picture class="video-cover">
                <img :src="item.videoCoverUrl">
              </picture> -->
              <video
                :src="item.videoUrl"
                preload="auto"
                style="background-color: #000"
                controls
                :poster="item.videoCoverUrl"
              ></video>
            </div>
            <span class="video-title">{{ item.videoTitle }}</span>
          </li>
        </ul>
        <el-pagination
          v-if="videoList.length != 0"
          background
          layout="total,sizes, prev, pager, next, jumper"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :page-sizes="pageSizes"
          :total="total"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getForumBrowse,
  getForumPost,
  getForumReply,
  getDownloadHistory,
  getVideoList,
} from "@/api/onlineSocial.js";
export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      pageSizes: [10, 50, 100],
      total: 10,
      tabValue: "FORUM",
      tabList: [
        {
          name: "论坛",
          value: "FORUM",
        },
        {
          name: "资料中心",
          value: "DATA",
        },
        {
          name: "小视频",
          value: "VIDEO",
        },
      ],
      forumTypeValue: "TERRITORY",
      forumTabList: [
        {
          name: "地域论坛",
          value: "TERRITORY",
        },
        {
          name: "专业论坛",
          value: "PROFESSIONAL",
        },
      ],
      subTabIndex: "1",
      subTabTitle: "",
      subTabTitleList: ["浏览记录", "我的发帖", "我的回复"],
      userVideo: {
        bindState: false,
        userDY: {
          douyinHeadImage: "",
          douyinName: "",
          douyinNum: "",
        },
      },
      videoStatus: "ALL",
      videoStatusList: [
        {
          value: "ALL",
          label: "全部",
        },
        {
          value: "NOTAPPLY",
          label: "未申请",
        },
        {
          value: "VERIFYING",
          label: "审核中",
        },
        {
          value: "FREFUSE",
          label: "已拒绝",
        },
        {
          value: "PASS",
          label: "已通过",
        },
      ],
      videoList: [],
      forumList: [],
      replayList: [],
      downLoadList: [],
    };
  },
  created() {
    this.tabValue = "FORUM";
    this.forumTypeValue = "TERRITORY";
    this.subTabIndex = "1";
    this.subTabTitle = this.subTabTitleList[this.subTabIndex - 1];
  },
  methods: {
    // 切换tab
    changeTab(item) {
      this.tabValue = item.value;
      this.queryParams.pageNo = 1;
      this.getData();
    },
    // 切换论坛
    changeForum(item) {
      this.forumTypeValue = item.value;
      this.getData();
    },
    // 切换副tab
    changeSubTab(index) {
      this.subTabIndex = index;
      this.subTabTitle = this.subTabTitleList[this.subTabIndex - 1];
      this.getData();
    },
    // 获取数据
    getData(state = null) {
      if (this.tapValue === "FORUM") {
        // 论坛
        let query = {
          pageNo: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
          forumType: this.forumTypeValue,
        };
        if (this.subTabIndex === "1") {
          // 浏览记录
          getForumBrowse(query).then((res) => {
            this.total = this.totalNum;
            this.forumList = res.resultData.forumBrowseList;
          });
        } else if (this.subTabIndex === "2") {
          //我的发帖
          getForumPost(query).then((res) => {
            this.total = this.totalNum;
            this.forumList = res.resultData.forumList;
          });
        } else {
          //我的回复
          getForumReply(query).then((res) => {
            this.total = this.totalNum;
            this.forumList = res.resultData.replyList;
          });
        }
      } else if (this.tapValue === "DATA") {
        // 资料中心
        let query = {
          pageNo: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
        };
        getDownloadHistory(query).then((res) => {
          this.total = this.totalNum;
          this.downLoadList = res.resultData.dataList;
        });
      } else {
        // 小视频
        let query = {
          pageNo: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
        };
        if (state) {
          query.verifyStatus = state;
        }
        getVideoList(query).then((res) => {
          this.userVideo.bindState = res.resultData.userVideo.bindState;
          if (this.userVideo.bindState) {
            this.userVideo.userDY = res.resultData.userVideo.userDY;
            this.videoList = res.resultData.userVideo.videoList;
          }
        });
      }
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize;
    },
    handlePageChange(currentPage) {
      this.queryParams.pageNo = currentPage;
    },
  },
};
</script>

<style lang="scss" scoped>
$blue: #2d8bef;
.online-social {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .column {
    display: flex;
    flex-direction: column;
  }

  .menu {
    width: 100%;
    .el-menu-item {
      padding: 0;
      margin: 0 20px;
      height: 38px;
      line-height: 38px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .is-active {
      color: $blue;
      border-bottom: 2px solid $blue;
    }
  }
  //   导航栏
  .top-nav {
    position: relative;

    .member-tap {
      width: 100%;
      height: 48px;
      display: flex;
      background-color: #f4f5f8;
      border-bottom: 2px solid $blue;
      margin-top: 0;
      padding-left: 0;
      li {
        min-width: 120px;
        height: 100%;
        text-align: center;
        line-height: 48px;
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        cursor: pointer;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        list-style: none;
      }
      .li-active {
        background-color: #fff;
        color: $blue;
      }
    }
  }
  .middle-content {
    height: 100%;
    // 论坛
    .tab {
      display: flex;
      margin: 0;
      padding-left: 20px;
      .tab-item {
        width: 120px;
        height: 40px;
        border: 1px solid #e9e9e9;
        border-bottom: none;
        text-align: center;
        line-height: 40px;
        list-style: none;
        color: #333;
        cursor: pointer;

        &:first-child {
          border-radius: 10px 0 0 0;
          border-right: none;
        }

        &:last-child {
          border-radius: 0 10px 0 0;
        }
      }
      .active {
        background-color: $blue;
        color: #fff;
      }
    }
    & > div {
      height: 100%;
      .card {
        min-height: calc(100% - 60px);
        margin: 0 20px 20px;
        border: 1px solid #e9e9e9;
        display: flex;
        flex-direction: column;
        .place-right {
          display: flex;
          justify-content: flex-end;
        }

        .list {
          margin-top: 0;
          padding: 20px;
          .list-title {
            padding: 2px 8px;
            border-left: 3px solid $blue;
          }
          .item-box {
            height: 100px;
            margin-top: 20px;
            padding: 10px 25px;
            background-color: #f1f1f1;
            list-style: none;

            & > div {
              display: flex;
              justify-content: space-between;
              height: 100%;
            }

            span {
              color: #9c9c9c;
            }

            .left,
            .right {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            }
            .left {
              .category-title {
                font-weight: 700;
                font-size: 18px;
                color: #999999;
              }
              .content-title {
                font-size: 14px;
              }
            }
          }
        }
        .el-pagination {
          align-self: flex-end;
          margin: 0 10px 20px 0;
        }
      }
    }
    // 资料中心
    .content-box {
      min-height: calc(100% - 20px);
      margin: 0px 20px;
      border: 1px solid #e9e9e9;
      display: flex;
      flex-direction: column;

      .sub-title {
        color: #999999;
        margin-left: 10px;
        margin-top: 10px;
      }
      .el-divider {
        margin: 10px 0 0;
      }

      .list {
        padding: 0px 20px 20px;
        height: 100%;
        .item-box {
          height: 120px;
          margin-top: 20px;
          padding: 10px 25px;
          background-color: #f1f1f1;
          display: flex;
          align-content: center;
          list-style: none;

          .img {
            width: 90px;
            padding: 15px 0;
            font-size: 70px;
            border-right: 1px solid #999999;
          }
          .column {
            justify-content: space-between;
            padding: 10px 20px;
          }
        }

        .video-card {
          display: flex;
          flex-direction: column;
          margin-right: 30px;
          margin-top: 20px;
          position: relative;

          .video-wrap {
            width: 200px;
            height: 120px;

            video {
              width: 100%;
              height: 120px;
            }
          }

          .video-title {
            margin: 10px;
            color: #333333;
          }
          .video-tag {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 99;
            background-color: #fff;
            display: block;
            width: 55px;
            height: 25px;
            border-radius: 4px;
            color: #333333;
            font-size: 15px;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
          }
        }
      }

      // 横向排列
      .bent-array {
        display: flex;
        flex-wrap: wrap;
      }

      // 小视频
      .user-info {
        display: flex;
        padding: 10px 20px;
        .column {
          justify-content: space-between;
          margin: 0 100px 0 20px;

          .text-id {
            font-size: 14px;
            color: $blue;
          }
        }
      }
    }

    .el-pagination {
      align-self: flex-end;
      margin: 0 10px 20px 0;
    }
  }
}
</style>

优化代码getdata

<template>
  <div class="table">
    <div class="container">
      <div class="pearl" v-if="showFirst">百万贝壳：0</div>
      <div class="header" v-if="showSecond">
        <div class="top-navs" v-if="showOrder">
          <ul class="member-tap-formua" ref="memberTapFormuaOrder">
            <li
              :class="{ 'li-active': tabValueOrder == item.value }"
              v-for="item in tabListOrder"
              :key="item.value"
              @click="changeTab(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>

        <div class="top-navs" v-if="showContact">
          <ul class="member-tap-formua" ref="memberTapFormuaContact">
            <li
              :class="{ 'li-active': tabValueContact == item.value }"
              v-for="item in tabListContact"
              :key="item.value"
              @click="changeTab(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="top-navs" v-if="showDetail">
          <ul class="member-tap-formua" ref="memberTapFormuaDetail">
            <li
              :class="{ 'li-active': tabValueDetail == item.value }"
              v-for="item in tabListDetail"
              :key="item.value"
              @click="changeTab(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <div class="second">
        <div class="left">
          时间区间
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div class="right" v-if="!showThird">
          <div class="top-nav-sub">
            <ul class="member-tap-formua" ref="memberTapFormua">
              <li
                :class="{ 'li-active': timeType == item.value }"
                v-for="item in timeTypeList"
                :key="item.value"
                @click="changeSubTab(item)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="containerMain">
        <!-- 中间内容 -->
        <div class="middle-content">
          <div v-show="this.indexPane == '0'">
            <el-table
              :data="orderLists"
              border
              style="width: 95%"
              v-loading="loading"
            >
              <el-table-column
                align="center"
                prop="createTime"
                label="创建时间"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="orderNum"
                label="订单编号"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="orderTitle"
                label="名称"
                width="180"
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="orderType"
                label="类型"
                width="190"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="payType"
                label="支付类型"
                width="190"
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="actuallyPaid"
                label="金额(元)"
                width="180"
              >
              </el-table-column>

              <el-table-column align="center" prop="coin" label="百万贝壳">
              </el-table-column>
              <el-table-column
                align="center"
                prop="invoiceStatus"
                label="订单状态"
              >
              </el-table-column>
              <el-table-column align="center" label="操作"> </el-table-column>
            </el-table>
          </div>
          <div v-show="this.indexPane == '1'">
            <el-table
              :data="consumeLists"
              border
              style="width: 95%"
              v-loading="loading"
            >
              <el-table-column
                align="center"
                prop="createTime"
                label="时间"
                width="320"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="consumeType"
                label="类型"
                width="330"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="consumeDetails"
                label="交易说明"
                width="340"
              >
              </el-table-column>
              <el-table-column align="center" prop="wallet" label="百万贝壳">
                <template slot-scope="{ row }">{{ row.wallet }}</template>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="this.indexPane == '2'">
            <el-table
              :data="invoicLists"
              border
              style="width: 95%"
              v-loading="loading"
            >
              <el-table-column
                align="center"
                prop="invoiceNo"
                label="订单编号"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="createTime"
                label="申请时间"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="totalAmount"
                label="开票金额"
                width="180"
              >
              </el-table-column>
              <el-table-column align="center" prop="status" label="发票状态">
              </el-table-column>
            </el-table>
          </div>
          <div v-show="this.indexPane == '3'">
            <el-table
              :data="IncomeLists"
              border
              style="width: 95%"
              v-loading="loading"
            >
              <el-table-column
                align="center"
                prop="createTime"
                label="创建时间"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="orderNum"
                label="订单编号"
                width="180"
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="consultationType"
                label="咨询类型"
                width="180"
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="payType"
                label="支付类型"
                width="190"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="orderStatus"
                label="付款人"
                width="190"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="actuallyPaid"
                label="金额(元)"
                width="180"
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="refundAmount"
                label="退款金额"
              >
              </el-table-column>
            </el-table>
          </div>
          <div v-show="this.indexPane == '4'">
            <el-table
              :data="settlementLists"
              border
              style="width: 95%"
              v-loading="loading"
            >
              <el-table-column
                align="center"
                prop="createTime"
                label="结算时间"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="orderNum"
                label="订单笔数"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="companyIncome"
                label="金额(元)"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="statisticsStatus"
                label="状态"
              >
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            background
            layout="total,sizes, prev, pager, next, jumper"
            :current-page="queryParams.pageNo"
            :page-size="queryParams.pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import {
  getOrder,
  getWallet,
  getInvoice,
  getOrderIncome,
  getSettlementMonth,
  getSettlementHistory,
} from "@/api/personal/order.js";

export default {
  props: [
    "state",
    "showFirst",
    "showSecond",
    "showOrder",
    "showContact",
    "showDetail",
    "showIncome",
    "indexPane",
    "activeName",
    "showThird"
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      tabValueOrder: "",
      tabListOrder: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "云平台",
          value: "CLOUD",
        },
        {
          name: "咨询",
          value: "CONSULATION",
        },
        {
          name: "资料",
          value: "DATA",
        },
        {
          name: "网校",
          value: "COURSE",
        },
      ],
      tabValueContact: "",
      tabListContact: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "支出",
          value: "OUT",
        },
        {
          name: "收入",
          value: "IN",
        },
      ],
      tabValueDetail: "",
      tabListDetail: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "视频语音咨询",
          value: "VIDEO",
        },
        {
          name: "云平台",
          value: "CLOUD",
        },

        {
          name: "资料下载",
          value: "DATA",
        },
        {
          name: "咨询",
          value: "CONSULATION",
        },
      ],
      timeType: "TODAY",
      timeTypeList: [
        {
          name: "今天",
          value: "TODAY",
        },
        {
          name: "近一个月",
          value: "MONTH",
        },
        {
          name: "近三个月",
          value: "MONTHS",
        },
      ],
      value1: "",
      activeIndex: "1",
      activeNames: "second",
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 20,
      },
      pageSizes: [5, 10, 25],
      orderLists: [],
      IncomeLists: [],
      invoicLists: [],
      settlementLists: [],
      consumeLists: [
        {
          wallet: "",
        },
      ],
      wallet: "",
    };
  },
  created() {
    this.timeType = "TODAY";
    this.getData();
    this.tabValueOrder = "";
  },
  mounted() {
    // this.getData();
    console.log(this.indexPane, "index");
  },
  watch: {},
  methods: {
    // 切换tab
    changeTab(item) {
      if (this.indexPane === "0") this.tabValueOrder = item.value;
      else if (this.indexPane === "1") this.tabValueContact = item.value;
      else if (this.indexPane === "3") this.tabValueDetail = item.value;
      this.queryParams.pageNo = 1;
      this.getData();
    },

    // 切换副tab
    changeSubTab(item) {
      this.timeType = item.value;
      this.queryParams.pageNo = 1;
      this.getData();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handlequery() {},
    // 订单明细时间参数
    handleTime(query) {
      getOrder(query).then((res) => {
        this.total = res.totalNum;
        this.orderLists = res.resultData.orderList;
        this.loading = false;
      });
    },
    // 订单明细时间参数
    handleOrderDetailTime(query) {
      getInvoice(query).then((res) => {
        this.total = this.totalNum;
        this.invoicLists = res.resultData.invoicList;
        this.loading = false;
      });
    },
    // 我的百万贝壳时间参数
    handleContactTime(query) {
      getWallet(query).then((res) => {
        this.total = this.totalNum;
        this.consumeLists = res.resultData.consumeList;
        this.consumeLists.forEach((item) => {
          item.wallet = res.resultData.wallet;
        });
        this.loading = false;
      });
    },
    // 收入管理时间参数
    handleDetailTime(query) {
      getOrderIncome(query).then((res) => {
        this.total = this.totalNum;
        this.IncomeLists = res.resultData.orderList;
        this.loading = false;
      });
    },
    getData() {
      console.log(this.timeType, "timee");
      if (this.indexPane === "0") {
        // 订单明细
        this.loading = true;
        let query = {
          pageNo: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
          type: this.tabValueOrder,
          timeType: this.timeType,
          startTime: "",
          endTime: "",
        };
        if (this.tabValueOrder === "") {
          // 全部
          if (this.timeType === "TODAY") {
            this.handleTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleTime(query);
          }
        } else if (this.tabValueOrder === "CLOUD") {
          // 云平台

          if (this.timeType === "TODAY") {
            this.handleTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleTime(query);
          }
        } else if (this.tabValueOrder === "CONSULATION") {
          // 咨询

          if (this.timeType === "TODAY") {
            this.handleTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleTime(query);
          }
        } else if (this.tabValueOrder === "DATA") {
          // 资料

          if (this.timeType === "TODAY") {
            this.handleTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleTime(query);
          }
        } else if (this.tabValueOrder === "COURSE") {
          // 网校

          if (this.timeType === "TODAY") {
            this.handleTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleTime(query);
          }
        }
      } else if (this.indexPane === "1") {
        // 我的百万贝壳
        this.loading = true;
        let query = {
          pageNo: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
          type: this.tabValueContact,
          timeType: this.timeType,
          startTime: "",
          endTime: "",
        };

        if (this.tabValueContact === "IN") {
          // 支出
          if (this.timeType === "TODAY") {
            this.handleContactTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleContactTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleContactTime(query);
          }
        } else if (this.tabValueContact === "OUT") {
          // 收入
          if (this.timeType === "TODAY") {
            this.handleContactTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleContactTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleContactTime(query);
          }
        } else if (this.tabValueContact === "") {
          // 全部
          if (this.timeType === "TODAY") {
            this.handleContactTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleContactTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleContactTime(query);
          }
        }
      } else if (this.indexPane === "2") {
        // 订单明细
        this.loading = true;
        let query = {
          pageNo: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
          timeType: this.timeType,
          startTime: "",
          endTime: "",
        };
        if (this.timeType === "TODAY") {
          this.handleOrderDetailTime(query);
        } else if (this.timeType === "MONTH") {
          this.handleOrderDetailTime(query);
        } else if (this.timeType === "MONTHS") {
          this.handleOrderDetailTime(query);
        }
      } else if (this.indexPane === "3") {
        // 收入管理
        this.loading = true;

        let query = {
          pageNo: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
          consultationType: this.tabValueDetail,
          timeType: this.timeType,
          startTime: "",
          endTime: "",
        };

        if (this.tabValueDetail === "") {
          // 全部
          if (this.timeType === "TODAY") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleDetailTime(query);
          }
        } else if (this.tabValueDetail === "VIDEO") {
          // 视频语音咨询
          if (this.timeType === "TODAY") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleDetailTime(query);
          }
        } else if (this.tabValueDetail === "DATA") {
          // 资料下载
          if (this.timeType === "TODAY") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleDetailTime(query);
          }
        } else if (this.tabValueDetail === "CONSULATION") {
          // 咨询
          if (this.timeType === "TODAY") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleDetailTime(query);
          }
        } else if (this.tabValueDetail === "CLOUD") {
          // 云平台
          if (this.timeType === "TODAY") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTH") {
            this.handleDetailTime(query);
          } else if (this.timeType === "MONTHS") {
            this.handleDetailTime(query);
          }
        }
      } else if (this.indexPane === "4") {
        // 收入管理
        this.loading = true;
        let query = {
          pageNo: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize,
          startTime: "",
          endTime: "",
        };
        getSettlementHistory(query).then((res) => {
          this.total = res.resultData.totalNum;
          this.settlementLists = res.resultData.settlementList;
        });
      }
    },
    handleEdit(row) {
      console.log(row, "rrrrrrrrrrr");
      this.$router.push({ path: "/editBlog", query: { aid: row.id } });
    },
    handleDelete() {},
    handleResotre() {},
    formatDate(dateString) {
      let dateObject = new Date(dateString);
      return dateObject.toISOString().slice(0, 16).replace("T", " ");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  // create(){
  // },
};
</script>
  
<style lang="scss"   scoped>
.table {
  position: relative;
}

.container {
  border: 1px solid rgb(0, 0, 0, 0.3);
  height: 1200px;
  .pearl {
    border-bottom: 1px solid rgb(0, 0, 0, 0.3);
    color: #1890ff;
    height: 48px;
    line-height: 48px;
    padding: 5px;
    font-size: 20px;
  }
  .header {
    color: #333;
    height: 48px;
    line-height: 48px;
    margin-left: 5px;

    .top-navs {
      position: relative;

      .member-tap-formua {
        border-bottom: 1px solid rgb(0, 0, 0, 0.3);
        margin-left: -5px;
        width: 100%;
        height: 48px;
        display: flex;
        background-color: #fff;
        padding-left: 0;
        margin-top: 5px;
        li {
          min-width: 120px;
          height: 100%;
          text-align: center;
          line-height: 48px;
          font-size: 14px;
          // font-weight: 600;
          color: #333333;
          cursor: pointer;
          box-sizing: border-box;
          padding-left: 10px;
          padding-right: 10px;
          list-style: none;
        }
        .li-active {
          background-color: #fff;
          color: #1890ff;
        }
      }
    }
  }
  .second {
    // border-top: 1px solid rgb(0, 0, 0, 0.3);
    border-bottom: 1px solid rgb(0, 0, 0, 0.3);
    color: #333;
    height: 60px;
    line-height: 60px;
    display: flex;
    .left {
      flex: 1;
      margin-left: 5px;
    }
    .right {
      .top-nav-sub {
        position: relative;
        padding: 6px;
        .member-tap-formua {
          width: 100%;
          height: 48px;
          display: flex;
          background-color: #fff;
          padding-left: 0;
          margin-top: 5px;
          li {
            min-width: 120px;
            height: 100%;
            text-align: center;
            line-height: 48px;
            font-size: 14px;
            // font-weight: 600;
            color: #333333;
            cursor: pointer;
            box-sizing: border-box;
            padding-left: 10px;
            padding-right: 10px;
            list-style: none;
          }
          .li-active {
            background-color: #fff;
            color: #1890ff;
            border-bottom: 2px solid;
          }
        }
      }
    }
    .secondPaner {
      background: #fff !important;
      .secondTabPaner {
        padding: 0px;
      }
    }
  }
  .containerMain {
    margin: 35px;
    background-color: #fff;
    color: #333;
    // display: flex;
    // text-align: center;
    .midlelist {
      margin-top: 0;
      padding: 20px;
      .list-title {
        padding: 2px 8px;
        border-left: 3px solid #1890ff;
      }
      .items-box {
        height: 100px;
        margin-top: 20px;
        padding: 10px 25px;
        background-color: #f1f1f1;
        list-style: none;

        & > div {
          display: flex;
          justify-content: space-between;
          height: 100%;
        }

        span {
          color: #9c9c9c;
        }

        .left,
        .right {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .left {
          .category-title {
            font-weight: 700;
            font-size: 18px;
            color: #999999;
          }
          .content-title {
            font-size: 14px;
          }
        }
      }
    }
    .pagination {
      float: right;
      align-self: flex-end;
      margin: 10px 60px 20px 20px;
    }
  }
}
::v-deep .el-tabs__nav {
  display: inline-block;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  height: 60px;
  background: #fff;
  margin-right: 5px;
  padding-left: 5px;
  margin-top: -1px;
  border-bottom: 1px solid rgb(0, 0, 0, 0.3);
}
</style>