lichunlei
/
miniprogram


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!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="bgcf7">
    <div id="app" v-cloak>
      <van-sticky>
        <van-nav-bar class="camp_unactive_title f16" title="组建团队" @click-left="successbtn" v-if="toptitleisshow" left-arrow>
          <template #left> 
            <van-icon name="arrow-left" color="#fff" size="20"></van-icon>
          </template>
        </van-nav-bar>
      </van-sticky>
      <div class="camp_unactive_titlebox rel activetitle">
        <div class="abs establishpanel bgcfff">
          <div class="step rel">
            <van-steps :active="active" active-color="#333"> 
              <van-step>
                <template #active-icon>
                  <div class="activeicon"></div>
                </template>
                <template #finish-icon>
                  <div class="activeicon"></div>
                </template>
                <template #inactive-icon>
                  <div class="unactiveicon"></div>
                </template><span class="steptext l f12">组队须知</span>
              </van-step>
              <van-step>
                <template #active-icon>
                  <div class="activeicon"></div>
                </template>
                <template #inactive-icon>
                  <div class="unactiveicon"></div>
                </template>
                <template #finish-icon>
                  <div class="activeicon"></div>
                </template><span class="steptext f12">填写资料 </span>
              </van-step>
              <van-step> 
                <template #active-icon>
                  <div class="activeicon"></div>
                </template>
                <template #inactive-icon>
                  <div class="unactiveicon"></div>
                </template>
                <template #finish-icon>
                  <div class="activeicon"></div>
                </template><span class="steptext r f12">提交审核 </span>
              </van-step>
            </van-steps>
          </div>
          <div class="dottedcard df">
            <div class="leftroll bgcf7"></div>
            <div class="line flex1"></div>
            <div class="rightroll bgcf7"></div>
          </div>
          <div class="main" v-if="active === 0">
            <div class="title tc f14 c333">组队须知</div>
            <div class="content f12 c666 mt24">
              <p>(1）组队审核通过或组队成功后均不得因私人原因随意退出； </p>
              <p>(2）发布组队通知后可自己邀请好友参队也可由合创联盟用户自由加入；</p>
              <p>(3）队长需对全体成员负责，尊重团队成员的意见，保护团队成员的个人隐私和切身利益； </p>
              <p>(4）队长对已报名的队员有审核权限，最迟3个工作日给审核答复，对于未审核的队员，队员有取消报名资格； </p>
              <p>(5）对于审核通过的队员需及时联系，告知活动流程及详细地址； </p>
              <p>(6）所有发布的K战队活动，报名截止到活动前一天晚上20:00，请妥善进行组队； </p>
              <p>(7）同意并遵守特训营活动说明；</p>
            </div>
            <div class="df cm">
              <van-checkbox class="agreen mt52" v-model="ischecked">我已阅读并同意此活动条款</van-checkbox>
            </div>
            <div class="tc">
              <van-button class="w145 h40 mt40" type="primary" round color="#FF502A" :disabled="ischecked ? false : true" @click="next">下一步</van-button>
            </div>
          </div>
          <div class="main" v-if="active === 1">
            <van-field class="f14 c333 pb16 pt16" readonly clickable :value="area" name="area" label="活动地点" placeholder="请选择举办活动的城市" @click="showArea = true">
              <template #right-icon>
                <van-icon name="arrow" size=".32rem" color="#ccc"></van-icon>
              </template>
            </van-field>
            <van-field class="f14 c333 pb16 pt16" readonly name="date" label="活动时间">
              <template #input><span class="f14 cccc" @click="onShowDate(true)" :class="startDate !== ''? 'spcolor' : ''">{{startDate !== '' ? startDate : '开始时间'}}</span><span class="f14 c999 pl16 pr16">至</span><span class="f14 cccc" @click="onShowDate(false)" :class="endDate !== ''? 'spcolor' : ''">{{endDate !== '' ? endDate : '结束时间'}}</span></template>
            </van-field>
            <div class="pl16 c999 f10 pt4">活动时间需在7～10日内</div>
            <van-field class="f14 c333 pb16 pt16" readonly clickable :value="pnum" name="teamnum" label="团队人数" placeholder="请选择团队人数" @click="showNum = true">
              <template #right-icon>
                <van-icon name="arrow" size=".32rem" color="#ccc"></van-icon>
              </template>
            </van-field>
            <div class="pl16 c999 f10 pt4">团队人数需在10～100人</div>
            <van-field class="f14 c333 pb16 pt16" v-model="establishteaminfo.TeamName" label="团队名称" placeholder="请输入团队名称"></van-field>
            <van-field class="f14 c333 pb16 pt16" v-model="establishteaminfo.WatchWord" label="团队口号" placeholder="请输入口号"></van-field>
            <van-field class="f14 c333 pb16 pt16" v-model="establishteaminfo.Remark" label="备注说明" placeholder="请输入备注或说明"></van-field>
            <div class="tc rel mt47"><span class="previousstep c666 f14 abs" @click="previousstep">上一步</span>
              <van-button class="w145 h40 mt40" type="primary" round color="#FF502A" :disabled="formrules ? false : true" @click="next">提交审核</van-button>
            </div>
          </div>
          <div class="main rel cm" v-if="active === 2">
            <div class="successinfo tc"><img src="./static/images/success@3x.png" alt="">
              <div class="successtitle f16">申请提交成功</div>
              <div class="successtext f12 c999">将在3个工作日内给您审核，通过后不能撤回，请注意APP消息通知</div>
            </div>
            <div class="tc abs mt47 successbtn">
              <van-button class="w145 h40 mt40" type="primary" round color="#FF502A" :disabled="formrules ? false : true" @click="successbtn">知道了</van-button>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model="showArea" position="bottom" round style="padding-top:0;"> 
        <van-area :area-list="areaList" @confirm="onareaConfirm" @cancel="showArea = false" :columns-num="2"> </van-area>
      </van-popup>
      <van-popup v-model="showNum" position="bottom" round style="padding-top:0;"> 
        <van-picker show-toolbar :columns="columns" @confirm="onnumConfirm" @cancel="showNum = false" @change="peoplenumchange"></van-picker>
      </van-popup>
      <van-popup class="product_mymerchant_transaction" v-model="showDate" position="bottom" :style="{ height: '50%' }" v-cloak>
        <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @cancel="showDate = false" @confirm="onConfirmDate(isStartDate)"></van-datetime-picker>
      </van-popup>
    </div>
    <script src="./static/js/arealist.js"></script>
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script>
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            toptitleisshow:true,
            active:0,
            ischecked:false,
            establishteaminfo:{
              TeamName:'',
              Areas:'',
              EffectStartDate:'',
              EffectEndDate:'',
              MinUserNum:'',
              MaxUserNum:'',
              WatchWord:'',
              Remark:'',
            },
            //- 地区
            area:'',
            //- 人数
            pnum:'',
            showArea:false,
            showNum:false,
            areaList,
            //- 人数
            columns: [
              {values:[]},
              {values:[]},
              ],
            showDate: false,
            minDate: new Date(),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            //- 时间
            startDate: '',
            endDate: '',
      
          }
        },
        created() {
          this.setpeopelnum();
        },
        computed:{
          // 模仿表单验证
          formrules(){
            if(this.area !== '' && this.pnum !== '' && this.startDate !== ''&& this.endDate !== '' && this.slogan !== '' && this.remarks !== '' && this.teamname !== ''){
              return true;
            }  else {
              return false;
            };
          }
        },
        methods: {
          peoplenumchange(picker,num){
            const firstnum = Number(num[0].substr(0,num[0].length - 1));
            if(firstnum !== 10){
              this.columns[1].values = [];
              for(let peopelnum = firstnum+1;peopelnum <= 100;peopelnum++){
                this.columns[1].values.push(`${peopelnum}人`);
              }
            }
          },
          setpeopelnum(){
            for(let peopelnum = 10;peopelnum <= 100;peopelnum++){
              this.columns[0].values.push(`${peopelnum}人`);
              this.columns[1].values.push(`${peopelnum}人`);
            }
          },
          onShowDate(isStartDate){
            if(isStartDate){
              this.minDate = new Date();
              this.maxDate = new Date(2025, 10, 1)
            }else if(!isStartDate && this.startDate === ''){
              this.maxDate = new Date(2025, 10, 1);
            }
            this.isStartDate = isStartDate ? true : false;
            this.showDate = !this.showDate;
          },
          formatter(type, val) {
            if (type === 'year') {
              return `${val}年`;
            } else if (type === 'month') {
              return `${val}月`;
            } else if (type === 'day') {
              return `${val}日`;
            }
            return val;
          },
          onConfirmDate(isStartDate) {
            this.showDate = false;
            if(isStartDate){
              this.startDate = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1) + '-' + this.currentDate.getDate();
              this.establishteaminfo.EffectStartDate = formatDate(this.currentDate.getFullYear(),(this.currentDate.getMonth() + 1), this.currentDate.getDate());
              this.minDate = new Date(this.startDate);
              this.maxDate = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate()+10);
              this.endDate = '';
              //- this.establishteaminfo.MaxUserNum = '';
            }else{
              this.endDate = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1) + '-' + this.currentDate.getDate();
              this.establishteaminfo.EffectEndDate = formatDate(this.currentDate.getFullYear(),(this.currentDate.getMonth() + 1), this.currentDate.getDate());
              this.maxDate = new Date(this.endDate);
              this.minDate = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate()-10).getTime() > new Date().getTime() ? new Date(new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate()-10).getTime()) : new Date(new Date().getTime());
            }
          },
          async next(){
            if(this.active === 1){
              PublicLib.ShowLoading({Message:''});
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await postRequest('/api/v1/teamapply/confirmapply',JSON.stringify({UserId,...this.establishteaminfo}));
            console.log(res);
            if(res.status !== '1') return tips(res.info);
            PublicLib.HideLoading();
            }
            this.active++;
          },
          onareaConfirm(value){
            let str = '';
            let area = '';
            value.forEach(item=>{
              str += item.name
              area += `${item.name},`
            });
            area = area.substr(0,area.length - 1);
            this.establishteaminfo.Areas = area;
            this.area = str;
            this.showArea = false;
          },
          onnumConfirm(value){
            this.pnum = value[0] +'~'+value[1];
            this.establishteaminfo.MinUserNum = value[0].substr(0,value[0].length - 1);
            this.establishteaminfo.MaxUserNum = value[1].substr(0,value[1].length - 1);
            this.showNum = false;
          },
          previousstep(){
            this.active--;
          },
          successbtn(){
            PublicLib.GoBack({Level:1});
          }
        }
      });
    </script>
  </body>
</html>