lichunlei
/
miniprogram


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页-特训营-爽客邦</title>
    <meta name="keywords" content="首页-特训营-爽客邦">
    <meta name="description" content="首页-特训营-爽客邦">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="apple-mobile-web-app-title" content="首页-特训营-爽客邦">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="./static/css/main.css">
  </head>
  <body class="train">
    <div id="app" v-cloak>
      <van-sticky>
        <van-nav-bar class="camp_title f16" title="特训营" @click-left="goback" v-if="toptitleisshow" right-text="营训规则" @click-right="rules" left-arrow v-cloak>
          <template #left> 
            <van-icon name="arrow-left" color="#fff"></van-icon>
          </template>
        </van-nav-bar>
      </van-sticky>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="teamInfo.length === 0 ? 'isnodata':''"> 
        <div class="camp_title rel">
          <div class="panel bgcfff abs ovh">
            <van-grid :column-num="3">
              <van-grid-item v-for="value in cellList" :key="value" :icon="value.imgsrc" :text="value.title" @click="gootherpage(value.title)"> </van-grid-item>
            </van-grid>
          </div>
        </div>
        <div class="camp_camplist">
          <div class="campinfo bgcfff df pl16 pr16" v-for="item in usertaskList" :key="item">
            <div class="text c333 f16 b">{{item.TeamName}}</div>
            <div class="btn">
              <button class="cfff" v-if="item.Status === 5">已结束</button>
              <button class="cfff" v-if="item.Status === 3">组队失败</button>
              <button class="cfff" v-if="item.Status === 2">未通过</button>
              <button class="cfff" v-if="item.Status === 4" @click="active(item.Id)">进行中</button>
              <button class="cfff" v-if="item.Status === 1" @click="unactive(item.Id)">未开始</button>
              <button class="cfff" v-if="item.Status === 0" @click="examine(item.Id)">审核中</button>
              <van-icon name="arrow"></van-icon>
            </div>
          </div>
        </div>
        <van-sticky offset-top="44px">
          <div class="camp_campexhibition df pl16 pr16 bgcfff">
            <div class="text c333 f16 b">团队展示</div>
            <ul> 
              <li class="c999 df" v-if="notice.length !== 0"><span class="roll dib"></span>
                <van-swipe :autoplay="5000" style="height:.533333rem" vertical :show-indicators="false">
                  <van-swipe-item class="cm" v-for="item,index in notice" :key="index"><span class="c999 toutiao-txt c333 line1">{{item}}</span></van-swipe-item>
                </van-swipe>
              </li>
            </ul>
          </div>
        </van-sticky>
        <van-empty class="custom-image" image="./static/images/empty-img.png" description="暂无数据" v-if="isnodata"></van-empty>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
          <div class="camp_enrollinfopanel rel" v-for="item in teamInfo" :key="item" ref="topcard">
            <div class="label abs" :class="teamstatus(item.Status)"></div>
            <div class="titlepanel df">
              <div class="text c333 f16 b">{{item.TeamName}}
                <div class="slogan f12 c999 n">{{item.WatchWord}}</div>
              </div>
              <button class="conduct" v-if="item.Status === 1"><img src="./static/images/index-camp-conduct.png" alt=""><span>进行中</span></button>
              <div class="tr" v-if="item.Status !== 1 &amp;&amp; item.Status !== 4">
                <button class="sign"> <img src="./static/images/index-camp-sign.png" alt=""><span>报名中</span></button>
                <div class="begin f12">离开始还剩：{{item.SurplusDays}}天</div>
              </div>
              <button class="end" v-if="item.Status === 4"> <img src="./static/images/index-camp-end.png" alt=""><span>已结束</span></button>
            </div>
            <div class="mainpanel f12 c666 rel">
              <div class="info">队长：{{item.RealName}} {{item.MakerCode}}</div>
              <div class="info">人数：{{item.MinUserNum}}~{{item.MaxUserNum}}人</div>
              <div class="info">时间：{{item.EnterStartDate}}~{{item.EnterEndDate}}</div>
              <div class="info">地点：{{item.Areas}}</div>
              <div v-if="item.Status === 0">
                <button class="f14 cfff" @click="signup(item)">我要报名</button>
              </div>
              <div v-if="item.Status === 3">
                <button class="f14 cfff join">已申请</button>
              </div>
              <div v-if="item.Status === 2">
                <button class="f14 cfff join">无报名资格</button>
              </div>
              <div v-if="item.Status === 5">
                <button class="f14 cfff join">已满员</button>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script>
      function OnStart(){
        app.gettraincamplist();
      };
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            isnodata:false,
            toptitleisshow:true,
            //- 滚动加载
            loading: false,
            finished: false,
            //- 刷新
            refreshing: false,
            cellList:[
              {imgsrc:'./static/images/camp-logo2.png',title:'组建团队'},
              {imgsrc:'./static/images/camp-logo1.png',title:'排行榜'},
              {imgsrc:'./static/images/camp-logo3.png',title:'参团记录'}
            ],
            //- 参与展示数据
            usertaskList:[
            ],
            //- 团队数据
            teamInfo:[
            ],
            //- 备用数据
            Data:[
            ],
            pageinfo:{
              PageSize:10,
              PageNum:1
            },
            notice:[
            ]
          }
        },
        created() {
          this.gettraincamplist();
          this.getcreatecamplist();
          this.getmsglist();
        },
        methods: {
          gootherpage(pagename){
            switch(pagename) {
              case '参团记录':
                PublicLib.Goto({Url:'trainingCamp-record'});
              break;
              case '排行榜':
                PublicLib.Goto({Url:'trainingCamp-ranking'});
              break;
              case '组建团队':
                PublicLib.Goto({Url:'trainingCamp-establishteam'});
              break;
            }
          },
          unactive(id){
            PublicLib.putCookieInfo('trainingCampteamId', id);
            PublicLib.Goto({Url:'trainingCamp-unactive'});
          },
          examine(id){
            PublicLib.putCookieInfo('trainingCampteamId', id);
            PublicLib.Goto({Url:'trainingCamp-examine'});
          },
          active(id){
            PublicLib.putCookieInfo('trainingCampteamId', id);
            PublicLib.Goto({Url:'trainingCamp-active'});
          },
          teamstatus(state){
            switch (state){
              case 4:
              return 'endlabel';
              case 0:
              return 'signlaber';
              case 2:
              return 'signlaber';
              case 3:
              return 'signlaber';
              case 5:
              return 'signlaber';
              case 1:
              return 'conductlabel';
            };
          },
          //- 点击报名
          signup(iteminfo){
            PublicLib.putCookieInfo('signupiteminfo', JSON.stringify(iteminfo));
            PublicLib.Goto({Url:'trainingCamp-signup'});
          },
          //- 点击规则
          rules(){
            PublicLib.Goto({Url:'trainingCamp-rules'});
          },
          onLoad() {
              if (this.refreshing) {
                this.teamInfo = [];
                this.usertaskList = [];
                this.refreshing = false;
                this.pageinfo.PageNum = 0;
              };
              this.pageinfo.PageNum++;
              this.gettraincamplist();
              this.getcreatecamplist();
          },
          onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
          },
          //- 获取团队信息
          async gettraincamplist(){
            PublicLib.ShowLoading({Message:''});
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('/api/v1/teamapply/list',JSON.stringify({UserId,...this.pageinfo}));
            if(res.status === '1') {
              PublicLib.HideLoading();
              if(res.data.length < this.pageinfo.PageSize) {
                this.finished = true;
              };
              this.teamInfo.push(...res.data);
              this.loading = false;
              if(this.teamInfo.length === 0) {this.isnodata = true}else{this.isnodata = false};
            }
          },
          //- 获取创建团队信息
          async getcreatecamplist(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('/api/v1/teamapply/myteams',JSON.stringify({UserId,PageNum:1,PageSize:20}));
            if(res.status === '1') {
              this.usertaskList.push(...res.data);
              this.loading = false;
            };
          },
          //- 获取公告信息
          async getmsglist(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('/api/v1/msgplacard/teammsglist',JSON.stringify({PageNum:1,PageSize:20}));
            if(res.status === '1') {
              this.notice.push(...res.data);
            };
          },
          goback(){
            PublicLib.GoBack({Level:1});
          }
      
        },
      });
    </script>
  </body>
</html>