前端工作总结241-uni-状态不同选择

<template>
  <view class="">
    <u-subsection :list="list" :current="current" mode="button" :animation="true" bg-color="white" button-color="white"
     @change="cheange"></u-subsection>
    <view class="wrap">
      <view v-if="current == 0" class="">
        <navigator v-for="(item,index) in tableData" url="../party_building_detail/party_building_detail">
          <view class="system">
            <view class="t-title">
              {{item.title}}
            </view>
            <view class="u-flex  ">
              <u-icon name="clock-fill" color="#999999" size="28"></u-icon>
              <view class="t-time">
                {{item.startDate}}
              </view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
        list: [{
            name: '法律法规'
          },
          {
            name: '政策文件'
          },
          {
            name: '管理宝典'
          },
          {
            name: '最新资讯'
          }
        ],
        current: 0
      }
    },
    /* 第一步定义onload方法 */
    onLoad() {
      /* 调用市场信息的接口 分别 vuex获取 其他三项 */
      this.$u.api.getpartyList({
        marketId: this.vuex_user.market_id,
        pageNo: 1,
        pageSize: 20,
        type:"法律法规"
      }).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records
          console.log(1)
          console.log(res)
        }
      })
    },
    methods: {
      cheange(index) {
        console.log(index)
        this.current = index
        console.log(this.list[index].name)
        this.$u.api.getpartyList({
          marketId: this.vuex_user.market_id,
          pageNo: 1,
          pageSize: 20,
          type:this.list[index].name
        }).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.records
            console.log(1)
            console.log(res)
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .wrap {
    padding: 30rpx;
    .system {
      font-family: PingFangSC;
      font-weight: 400;
      opacity: 1;
      padding: 30rpx 0;
      .t-title {
        font-size: 30rpx;
        line-height: 40rpx;
        color: #333333;
        margin-bottom: 30rpx;
      }
      .t-time {
        font-size: 24rpx;
        line-height: 40rpx;
        color: #999999;
        margin-left: 12rpx;
      }
    }
    .sub-btn {
      width: 684rpx;
      height: 96rpx;
      background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);
      opacity: 1;
      border-radius: 66rpx;
      border: 0rpx;
      font-size: 36rpx;
      font-family: PingFangSC;
      font-weight: 400;
      line-height: 40rpx;
      color: #FFFFFF;
      position: fixed;
      bottom: 18rpx;
    }
  }
</style>