luojigou_exhibition/src/pages/apply/list.vue

<template>
  <view class='apply-list'>
    <view class="apply-record">
      <mescroll-uni ref="mescrollUni" @init="mescrollInit"  @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" top="40" height="100%" :fixed="false">
        <view class="list-item" v-for="(item, index) in signlist" :key="index">
          <view class="cover-box"></view>
          <view class="item-time">
            {{ item.createTime | dateFormat('YYYY年MM月DD日') }}
          </view>
          <view class="item-content">
            <view class="top flex">
              <view class="item-left">
                <image v-if="item.competitionChild && item.competitionChild.coverImg" class="bg-white" :src="item.competitionChild.coverImg.thumbnailUrl" mode="aspectFill" />
              </view>
              <view class="item-right">
                <view class="title">{{item.competitionChild.name}}</view>
                <view class="school text-cut" v-if="item.school && item.school.schoolName" >{{item.school.schoolName}}</view>
                <view class="school text-cut" v-else>{{item.schoolName }}</view>
              </view>
            </view>
            <view class="bottom flex justify-between align-center">
              <view class="bottom-left">
                <view class="name">
                  <text class="label">参赛选手：</text>
                  <text class="txt">{{item.baby.babyName}}</text>
                </view>
                <view class="level">
                  <text class="label">组别：</text>
                  <text class="txt">{{item.classLevel | filterLevel}}</text>
                </view>
              </view>
              <button class="cu-btn round detail active" @tap.stop="handleDetail(item.competitionChildId, item.type)">查看详情</button>
            </view>
            <view v-if="item.competitionChild" :class="['status', 'status' + item.competitionChild.state]">{{ item.competitionChild.state | filterStatus  }}</view>
            <!-- {{ item.competitionChild.name }} -->
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script>
import { signUpList } from '@/api/apply';
import MescrollUni from '@/components/mescroll-uni/mescroll-uni';

export default {
  data() {
    return {
      signlist: [],
      downOption: { 
			},
			upOption:{
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
          tip: '暂无动态',
          icon: 'http://vote-teacher-video.luojigou.vip/Fpkyt0Hw7r57A37JRjEuEZ3947HI',
          top: '0rpx'
        }
			},
      page: {
				num: 1,
				size: 10
			},
    }
  },

  filters: {
    filterStatus(val) {
      switch (val) {  //0 未开始 1进行中 2已结束
        case 0:
          return '待开始'
        case 1:
          return '正在进行'
        case 2:
          return '已结束'
        default:
          return '已取消'
      }
    },
    filterLevel(val) {
      switch (val){
        case -1:
          return '托班'
        case 0:
          return '小班'
        case 1:
          return '中班'
        case 2:
          return '大班'
        default:
          return '待定'
      }
    }
  },

  onLoad() {
    // this.initData()
  },

  onShow() {},
  components: {
    MescrollUni
  },
  methods: {
    initData() {
      this.$http
        .get(signUpList, {
          isPage: 1,
          page: this.page.num,
          pageSize: this.page.size
        })
        .then(res => {
          // const rows = res.data.entityList || [];
          // if(rows.length>0) {
          //   this.signlist = rows;
          // }
          const { entityList, total, currentPage, pageSize } = res.data;
          let curPageLen = entityList.length;
          let totalPage = pageSize;
          let totalSize = total;

          // 接口返回的是否有下一页 (true/false)
          let hasNext = true; 

          if(this.page.num == 1) this.signlist = [];
          this.signlist = this.signlist.concat(entityList);
          this.$refs.mescrollUni.mescroll.endByPage(curPageLen, totalPage);
          
        })
        .catch(() => {
          console.log('catch'); 
        })
    },
    handleDetail(id, type) { // type 0 线上 1线下
      this.$mRouter.push({
        route: `/pages/apply/detail?id=${id}&type=${type}`
      })
    },
    // 上拉加载的回调
    upCallback(mescroll) {
      this.page.num = mescroll.num;
      this.page.size = mescroll.size;
      this.initData();
    },
    // 下拉刷新的回调
    downCallback(mescroll) {
      this.$refs.mescrollUni.mescroll.resetUpScroll()
    },
    mescrollInit(mescroll) {
      // console.log('mescrollInit', mescroll);
    }
  }

}
</script>

<style lang="scss" scope>
.apply-list {
  background: #FFFFFF;
  .list-item {
    position: relative;
    margin-left: 42upx;
    padding-left: 26upx;
    padding-bottom: 72upx;
    border-left: 4upx dashed #EBEBEB;
    .item-time {
      font-size: 24upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 28upx;
    }
    .item-content {
      position: relative;
      margin-top: 32upx;
      width: 658upx;
      padding: 44upx 26upx 58upx;
      background: #FFFFFF;
      box-shadow: 0px 4upx 22upx 0px rgba(190, 224, 190, 0.3);
      border-radius: 40upx;
      .top {
        border-bottom: 2upx solid rgba(153, 153, 153, 0.1);
        padding-bottom: 34upx;
      }
      .bottom {
        padding: 34upx 0 0 18upx;
        .bottom-left {
          .label {
            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 24upx;
            color: #999999;
          }
          .txt {
            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 28upx;
            color: #333333;
          }
        }
      }
      .item-left {
        font-size: 0;
        margin-right: 26upx;
        image {
          width: 212upx;
          height: 160upx;
          border-radius: 40upx;
        }
      }
      .item-right {
        max-width: 374upx;
        padding: 10upx 0 34upx;
        .title {
          font-size: 24upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 36upx;
        }
        .school {
          margin-top: 18upx;
          font-size: 32upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 44upx;
        }
      }
      .detail {
        font-size: 28upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 28upx;
        height: 56upx;
        width: 180upx;
        &.active {
          background: #23D321;
          box-shadow: 0px 4upx 12upx 0px rgba(35, 211, 33, 0.43);
          border-radius: 200upx;
        }
      }
      .status {
        position: absolute;
        right: 0;
        top: 0;
        // width: 86upx;
        display: inline-block;
        padding: 0 12upx;
        height: 48upx;
        line-height: 48upx;
        border-radius: 0 40upx 0 40upx;
        font-size: 22upx;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        text-align: center;
      }
      .status0 {
        background: linear-gradient(169deg, #FFC761 0%, #FF9632 100%);
      }
      .status1 {
        background: linear-gradient(172deg, #37F135 0%, #23D321 100%);
      }
      .status2 {
        background: #F2F2F2;
        color: #999999;
      }
    }
    .cover-box {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(-14upx);
      width: 24upx;
      height: 24upx;
      background: #FFFFFF;
      box-shadow: 0px 4upx 20upx 0px #CDFCCD;
      border: 6upx solid #23D321;
      border-radius: 50%;
    }
  }
}
</style>