trainingCamp.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>首页-特训营-创业帮</title>
  6. <meta name="keywords" content="首页-特训营-创业帮">
  7. <meta name="description" content="首页-特训营-创业帮">
  8. <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta content="telephone=no" name="format-detection">
  12. <meta content="email=no" name="format-detection">
  13. <meta name="apple-mobile-web-app-title" content="首页-特训营-创业帮">
  14. <meta http-equiv="Cache-Control" content="no-siteapp">
  15. <link rel="stylesheet" href="./static/css/main.css">
  16. </head>
  17. <body class="train h100p pb0 ovh">
  18. <div class="iphonetitle"></div>
  19. <div id="app" v-cloak>
  20. <van-sticky>
  21. <van-nav-bar class="camp_title f16" title="特训营" @click-left="goback" v-if="toptitleisshow" right-text="营训规则" @click-right="rules" left-arrow v-cloak>
  22. <template #left>
  23. <van-icon name="arrow-left" color="#fff" size="20"></van-icon>
  24. </template>
  25. </van-nav-bar>
  26. </van-sticky>
  27. <div class="screenroll strong_colorroll">
  28. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="teamInfo.length === 0 ? 'isnodata':''">
  29. <div class="camp_title rel">
  30. <div class="panel bgcfff abs ovh">
  31. <van-grid :column-num="3">
  32. <van-grid-item v-for="value in cellList" :key="value" :icon="value.imgsrc" :text="value.title" @click="gootherpage(value.title)"> </van-grid-item>
  33. </van-grid>
  34. </div>
  35. </div>
  36. <div class="camp_camplist">
  37. <div class="campinfo bgcfff df pl16 pr16" v-for="item in usertaskList" :key="item">
  38. <div class="text c333 f16 b">{{item.TeamName}}</div>
  39. <div class="btn">
  40. <button class="cfff" v-if="item.Status === 5">已结束</button>
  41. <button class="cfff" v-if="item.Status === 3">组队失败</button>
  42. <button class="cfff" v-if="item.Status === 2">未通过</button>
  43. <button class="cfff" v-if="item.Status === 4" @click="active(item.Id)">进行中</button>
  44. <button class="cfff" v-if="item.Status === 1" @click="unactive(item.Id)">未开始</button>
  45. <button class="cfff" v-if="item.Status === 0" @click="examine(item.Id)">审核中</button>
  46. <van-icon name="arrow"></van-icon>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="camp_campexhibition df pl16 pr16 bgcfff">
  51. <div class="text c333 f16 b">团队展示</div>
  52. <ul>
  53. <li class="c999 df" v-if="notice.length !== 0"><span class="roll dib"></span>
  54. <van-swipe :autoplay="5000" style="height:.533333rem" vertical :show-indicators="false">
  55. <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>
  56. </van-swipe>
  57. </li>
  58. </ul>
  59. </div>
  60. <van-empty class="custom-image" image="./static/images/empty-img.png" description="暂无数据" v-if="isnodata"></van-empty>
  61. <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
  62. <div class="camp_enrollinfopanel rel" v-for="item in teamInfo" :key="item" ref="topcard">
  63. <div class="label abs" :class="teamstatus(item.Status)"></div>
  64. <div class="titlepanel df">
  65. <div class="text c333 f16 b">{{item.TeamName}}
  66. <div class="slogan f12 c999 n">{{item.WatchWord}}</div>
  67. </div>
  68. <button class="conduct" v-if="item.Status === 1"><img src="./static/images/index-camp-conduct.png" alt=""><span>进行中</span></button>
  69. <div class="tr" v-if="item.Status !== 1 &amp;&amp; item.Status !== 4">
  70. <button class="sign"> <img src="./static/images/index-camp-sign.png" alt=""><span>报名中</span></button>
  71. <div class="begin f12">离开始还剩:{{item.SurplusDays}}天</div>
  72. </div>
  73. <button class="end" v-if="item.Status === 4"> <img src="./static/images/index-camp-end.png" alt=""><span>已结束</span></button>
  74. </div>
  75. <div class="mainpanel f12 c666 rel">
  76. <div class="info">队长:{{item.RealName}} {{item.MakerCode}}</div>
  77. <div class="info">人数:{{item.MinUserNum}}~{{item.MaxUserNum}}人</div>
  78. <div class="info">时间:{{item.EnterStartDate}}~{{item.EnterEndDate}}</div>
  79. <div class="info">地点:{{item.Areas}}</div>
  80. <div v-if="item.Status === 0">
  81. <button class="f14 cfff" @click="signup(item)">我要报名</button>
  82. </div>
  83. <div v-if="item.Status === 3">
  84. <button class="f14 cfff join">已申请</button>
  85. </div>
  86. <div v-if="item.Status === 2">
  87. <button class="f14 cfff join">无报名资格</button>
  88. </div>
  89. <div v-if="item.Status === 5">
  90. <button class="f14 cfff join">已满员</button>
  91. </div>
  92. </div>
  93. </div>
  94. </van-list>
  95. </van-pull-refresh>
  96. </div>
  97. </div>
  98. <script src="./static/js/klm-vv.min.js"></script>
  99. <script src="./static/js/appfunc.min.js"></script>
  100. <script src="./static/js/klm-axios-config.js"></script>
  101. <script src="./static/js/publicfn.js"></script>
  102. <script>
  103. function OnStart(){
  104. PublicLib.SetStatusBarStyle({type:'light', isShow:1});
  105. };
  106. PublicLib.SetStatusBarStyle({type:'light', isShow:1});
  107. // 在 #app 标签下渲染一个按钮组件
  108. let app = new Vue({
  109. el: '#app',
  110. data() {
  111. return {
  112. isnodata:false,
  113. toptitleisshow:true,
  114. //- 滚动加载
  115. loading: false,
  116. finished: false,
  117. //- 刷新
  118. refreshing: false,
  119. cellList:[
  120. {imgsrc:'./static/images/camp-logo2.png',title:'组建团队'},
  121. {imgsrc:'./static/images/camp-logo1.png',title:'排行榜'},
  122. {imgsrc:'./static/images/camp-logo3.png',title:'参团记录'}
  123. ],
  124. //- 参与展示数据
  125. usertaskList:[
  126. ],
  127. //- 团队数据
  128. teamInfo:[
  129. ],
  130. //- 备用数据
  131. Data:[
  132. ],
  133. pageinfo:{
  134. PageSize:10,
  135. PageNum:1
  136. },
  137. notice:[
  138. ]
  139. }
  140. },
  141. created() {
  142. this.gettraincamplist();
  143. this.getcreatecamplist();
  144. this.getmsglist();
  145. },
  146. methods: {
  147. gootherpage(pagename){
  148. switch(pagename) {
  149. case '参团记录':
  150. PublicLib.Goto({Url:'trainingCamp-record'});
  151. break;
  152. case '排行榜':
  153. PublicLib.Goto({Url:'trainingCamp-ranking'});
  154. break;
  155. case '组建团队':
  156. PublicLib.Goto({Url:'trainingCamp-establishteam'});
  157. break;
  158. };
  159. },
  160. unactive(id){
  161. PublicLib.putCookieInfo('trainingCampteamId', id);
  162. PublicLib.Goto({Url:'trainingCamp-unactive'});
  163. },
  164. examine(id){
  165. PublicLib.putCookieInfo('trainingCampteamId', id);
  166. PublicLib.Goto({Url:'trainingCamp-examine'});
  167. },
  168. active(id){
  169. PublicLib.putCookieInfo('trainingCampteamId', id);
  170. PublicLib.Goto({Url:'trainingCamp-active'});
  171. },
  172. teamstatus(state){
  173. switch (state){
  174. case 4:
  175. return 'endlabel';
  176. case 0:
  177. return 'signlaber';
  178. case 2:
  179. return 'signlaber';
  180. case 3:
  181. return 'signlaber';
  182. case 5:
  183. return 'signlaber';
  184. case 1:
  185. return 'conductlabel';
  186. };
  187. },
  188. //- 点击报名
  189. signup(iteminfo){
  190. PublicLib.putCookieInfo('signupiteminfo', JSON.stringify(iteminfo));
  191. PublicLib.Goto({Url:'trainingCamp-signup'});
  192. },
  193. //- 点击规则
  194. rules(){
  195. PublicLib.Goto({Url:'trainingCamp-rules'});
  196. },
  197. onLoad() {
  198. if (this.refreshing) {
  199. this.teamInfo = [];
  200. this.usertaskList = [];
  201. this.refreshing = false;
  202. this.pageinfo.PageNum = 0;
  203. };
  204. this.pageinfo.PageNum++;
  205. this.gettraincamplist();
  206. this.getcreatecamplist();
  207. },
  208. onRefresh() {
  209. // 清空列表数据
  210. this.finished = false;
  211. // 重新加载数据
  212. // 将 loading 设置为 true,表示处于加载状态
  213. this.loading = true;
  214. this.onLoad();
  215. },
  216. //- 获取团队信息
  217. async gettraincamplist(){
  218. PublicLib.ShowLoading({Message:''});
  219. const UserId = PublicLib.getCookieInfo('userId');
  220. const res = await getRequest('api/v1/teamapply/list',JSON.stringify({UserId,...this.pageinfo}));
  221. if(res.status === '1') {
  222. PublicLib.HideLoading();
  223. if(res.data.length < this.pageinfo.PageSize) {
  224. this.finished = true;
  225. };
  226. this.teamInfo.push(...res.data);
  227. this.loading = false;
  228. if(this.teamInfo.length === 0) {this.isnodata = true}else{this.isnodata = false};
  229. };
  230. },
  231. //- 获取创建团队信息
  232. async getcreatecamplist(){
  233. const UserId = PublicLib.getCookieInfo('userId');
  234. const res = await getRequest('api/v1/teamapply/myteams',JSON.stringify({UserId,PageNum:1,PageSize:20}));
  235. if(res.status === '1') {
  236. this.usertaskList.push(...res.data);
  237. this.loading = false;
  238. };
  239. },
  240. //- 获取公告信息
  241. async getmsglist(){
  242. const UserId = PublicLib.getCookieInfo('userId');
  243. const res = await getRequest('api/v1/msgplacard/teammsglist',JSON.stringify({PageNum:1,PageSize:20}));
  244. if(res.status === '1') {
  245. this.notice.push(...res.data);
  246. };
  247. },
  248. goback(){
  249. PublicLib.GoBack({Level:1});
  250. }
  251. },
  252. });
  253. </script>
  254. </body>
  255. </html>