小程序tab切换和content内容

  
    
      
      
        
          {{ item.text }}（{{item.count ? item.count : 0}}）
        
      
      
      
        
        
        
      
      
      
        
          
            
              
                
                  
                    {{ item1.name }}
                    创建时间: {{ item1.createTime }}
                  
                  未激活
                  已激活
                
                
                  NO.{{ item1.sysSn }}
                  有效期: {{ item1.endTime }}
                
              

              
              
              
              
            
          
        
      
    
  



import noRecords from '../../../common/components/noRecords/noRecords.vue';//暂无记录

export default {
  components: {
    noRecords
  },
  data() {
    return {
      navList: [
        {state: 0, text: '已激活',},
        {state: 1, text: '未激活',}
      ], //nav
      tabCurrentIndex: 0,//标签当前指数
      loading: false,
      loadMore: 'loading',
      svHeight: 0,
      dataList: [],
      total: 0,
      searchContent: '',
      pageNumber: 1,
    };
  },
  computed: {
    //获取图片
    getImage() {
      let images = {
        filePath: this.$commonImage.filePath,
        noOrder: this.$commonImage.noOrder,
        searchImg: this.$commonImage.searchImg,
      }
      return images;
    },
    //获得商品列表长度
    getGoodsListLength() {
      console.log(this.dataList);
      return this.dataList.length !== 0;
    },
  },
  onShow() {
    this.loadData();//加载数据
    this.updateNavCount(); // 更新导航数量
  },
  onReady() {
    let that = this;

    // #ifdef H5 || APP-PLUS || MP-ALIPAY
    uni.getSystemInfo({
      success: function (res) {
        const query = uni.createSelectorQuery().in(that)
        query.select(".list")
            .boundingClientRect(data => {
              that.svHeight = (res.windowHeight - data.top);
            })
            .exec();
      }
    });
    // #endif

    // h5 app mp-alipay不支持微信的方法
    // #ifndef H5 || APP-PLUS || MP-ALIPAY
    // 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
    //let that = this;
    uni.getSystemInfo({
      success: function (res) {
        uni.createSelectorQuery().select(".list")
            .boundingClientRect(function (data) {
              that.svHeight = (res.windowHeight - data.top);
            }).exec();
      }
    })
    // #endif
  },
  onPullDownRefresh() {
    this.refreshData();
  },
  methods: {
    //加载数据
    loadData() {
      if (this.loading) return;
      uni.showNavigationBarLoading();
      this.loading = true;
      let activateState = this.tabCurrentIndex === 0 ? 1 : 0;//激活状态0未激活 1已激活
      if (this.loadMore !== 'more') {
        this.pageNumber = 1;
        this.dataList = [];
      }

      let data = {
        activateState: activateState,
        pageNumber: this.pageNumber,//当前页码，默认为1
        pageSize: 10,//每页加载数量，默认为10
        sysSn: this.searchContent,//搜索关键字
      };

      this.$Request.get(this.$api.activity.travelCard, data).then((res) => {
  服务器托管网      if (res.data.code === 1) {
          this.dataList = this.dataList.concat(res.data.data.rows);
          this.total = res.data.data.total;
          this.loading = false;
          if (this.total  {
        this.loading = false;
        console.log('err: ', err);
        uni.hideNavigationBarLoading(); // Hide loading animation
      })
    },
    loadNextPage() {
      if (this.loadMore === 'more') {
        this.pageNumber++;
        this.loadData();
      }
    },
    refreshData() {
      if (this.loading) return;
      this.pageNumber = 1;
      this.loadData();
    },
    updateNavCount() {
      this.$Request.get(this.$api.activity.membershipCardsQuantity).then((res) => {
        if (res.data.code ===1) {
          console.log("-------",res.data);
          let activateCount = res.data.data.activationNum;
          let inactivateCount = res.data.data.notActivationNum;
          console.log(this.navList);
          //更新导航显示的数据
          this.navList[0].count = activateCount;
          this.navList[1].count = inactivateCount;
        }

      }).catch((err) => {
        console.log("err: ", err);
      })
    },
    //选项卡点击
    tabClick: function (index) {
      this.tabCurrentIndex = index;
      this.pageNumber = 1;
      this.dataList = [];
      this.loadData();
    },
    //改变标签
    changeTab(e) {
      this.tabCurrentIndex = e.target.current;
      this.pageNumber = 1;
      this.dataList = [];
      this.loadData();
    },
    //搜索推荐人
    search() {
      this.dataList = [];
      this.total = 0;
      if (this.searchContent.trim() === '') {
        //如果搜索内容为空,则重新加载全部数据
        this.loadData();
      } else {
        //执行搜索操作
        this.loading = true;
        let activateState = this.tabCurrentIndex === 0 ? 0 : 1;
        let searchData = {
          activateState: activateState,
          pageNumber: 1,
          pageSize: 10,
          sysSn: this.searchContent,
        };

        this.$Request.get(this.$api.activity.travelCard, searchData)
            .then((res) => {
              if (res.data.code === 1) {
                this.dataList = res.data.data.rows;
                this.total = res.data.data.total;
                this.loading = false;
                if (this.total >= this.dataList.length) {
                  this.loadMore = 'noMore';
                  uni.showToast({title: "无数据", icon: 'none'});
                } else {
                  this.loadMore = 'more';
                }
              }
            }).catch((err) => {
          this.loading = false;
          console.log("err: ", err);
        })
      }
    },
    //清空搜索信息
    clearInp() {
      this.searchContent = '';
    },
  },
}



@import '../../.服务器托管网./common/css/mixins/index.scss';
@import '../../../common/css/iconfont.css';

.membershipCard {
  margin: $uni-margin-base 0 0;
  border-radius: $uni-border-radius-lg;

  &-box {
    margin: 0 $uni-margin-base;
    padding: $uni-padding-xs $uni-padding-base;
    background: $uni-bg-color-gray3;
    @include font($uni-font-size-base, $uni-bg-color-gray);
    line-height: 22rpx*$hd;
    overflow: hidden;

    .membershipCard-box-search {
      float: left;
      width: 10%;
    }

    .membershipCard-box-input {
      float: left;
      width: 80%;
    }

    .membershipCard-box-cancel {
      float: right;
      width: 10%;
      text-align: $uni-text-align-right;
    }
  }
}

.search {
  position: relative;
  flex: 1;
  margin: $uni-margin-base;
  height: rpx(30)*$hd;
  line-height: rpx(30)*$hd;
  border-radius: rpx(17)*$hd rpx(17)*$hd;
  background-color: #efefef;
  text-indent: rpx(10)*$hd;
  @include font($uni-font-size-base, $uni-color-base);

  &-icon {
    margin-right: $uni-margin-sm-base;
    @include font($uni-font-size-base !important, $uni-color-main !important);
  }

  &-img {
    margin-right: $uni-margin-sm-base;
    @include width-height(rpx(20), rpx(20));
    vertical-align: middle;
  }

  &-inp {
    display: inline-block;
    width: 75%;
    height: 100%;
    padding: 0 0 0 $uni-padding-sm;
    vertical-align: middle;
  }

  &-clear {
    @include absolute-right-top(rpx(0), rpx(5));
    z-index: 10;
    width: 35rpx*$hd;
    @include font($uni-font-size-base, $uni-bg-color-black1);
  }
}

.navbar {
  display: flex;
  justify-content: space-around;
  line-height: $uni-line-height-xl;
  padding: $uni-padding-sm $uni-padding-sm;
  box-shadow: 0 rpx(2) rpx(10) rgba(0, 0, 0, .06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: $uni-font-size-base-xl;
    color: $uni-color-black2;

    &-icon {
      @include display-flex;
      @include flex-direction(column);
      @include justify-content(space-around);
      line-height: $uni-line-height-smm;

      .iconfont {
        font-size: $uni-font-size-smm;
      }

      .grey {
        color: $uni-color-black4 !important;
      }
    }

    &-icon.iconfontsize {
      .iconfont {
        font-size: $uni-font-size-lg;
        line-height: $uni-line-height-xl;
      }
    }

    &.current {
      color: $uni-color-main;
    }

  }
}

.list {
  @include set-border-top();
}

.list-scroll-content {
  height: 100%;
}

.li {
  margin: $uni-margin-base $uni-margin-base 0;
  padding: $uni-padding-lg $uni-padding-lg $uni-padding-base;
  background: url('https://cdn.wwswl.yiyou369.com/miniapp/images/mine/membershipCardBg.png') no-repeat;
  background-size: 100% 100%;

  .top {
    @include display-flex;
    @include justify-content(space-between);

    .left {
      flex: 1;
      max-width: 65%;

      .name {
        padding-bottom: $uni-padding-xs;
        @include set-border-bottom();
        @include font($uni-font-size-lg, $uni-color-white, bold);
      }

      .createTime {
        margin-top: $uni-margin-sm-base;
        @include font($uni-font-size-sm, $uni-color-gray3);
      }
    }

    .txt {
      margin: 0 $uni-margin-base;
      @include font($uni-font-size-lg, #e8b86e, bold);
    }

    .btn {
      flex: none;
      margin: 0 $uni-margin-xs;
      padding: 0 $uni-padding-sm-base;
      @include height-lineHeight(rpx(20), rpx(18));
      @include set-border($uni-border-base, #e8b86e, solid);
      @include font($uni-font-size-sm, #e8b86e, bold);
      border-radius: $uni-border-radius-xxl;
      background: none;
    }
  }

  .bottom {
    margin-top: 25rpx*$hd;

    .sysSn {
      @include font($uni-font-size-sm, #e8b86e, bold);
    }

    .exp {
      margin-top: $uni-margin-sm-base;
      @include font($uni-font-size-sm, $uni-color-gray3);
    }
  }
}

.border-bottom {
  background-color: $uni-border-color-main;
  position: absolute;
  top: rpx(74);
  left: 0;
}


.swiper-box {
  height: calc(100vh - 40px);
}

/*.swiper-box {
  height: calc(100vh - 80px);
}*/

.box {
  //max-height: 395rpx*$hd;
  height: 525rpx*$hd;
  overflow: hidden scroll;
  border-radius: $uni-border-radius-l;
}

@media screen and (max-width: 320px) {
  .swiper-box {
    height: calc(49vh - 40px);
  }
  .box {
    max-height: 370rpx*$hd;
    height: 370rpx*$hd;
  }
}

.list-scroll-content {
  height: 100%;
  background: $uni-bg-color-white !important;
  border-radius: 0 0 $uni-border-radius-lg $uni-border-radius-lg;
}

/deep/ .navbar {
  padding: 0 !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.06) !important;
}

/deep/ .nav-item {
  padding: 0 0 $uni-margin-base;
  flex: 1 !important;
  background: $uni-bg-color-gray;
  @include font($uni-font-size-base, $uni-color-gray);
  text-align: $uni-text-align-center;
  background: none;
}

/deep/ .active {
  background: none;
  color: #1684fc !important;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, $uni-bg-color-main, $uni-bg-color-main-base1);
  }
}