lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
							<!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">
    <style>
      @keyframes rotate361 {from {  transform: translate(-25%,-5%) rotate(0deg);}to {  transform: translate(-25%,-5%) rotate(360deg);}}
      @keyframes scale1-pos{ 0% { transform: translateX(-50%) scale(1);} 50%{transform: translateX(-50%) scale(1.05);} 100% { transform: translateX(-50%) scale(1);}}
      @keyframes scale1-gold1{ 0% { transform: translate(0%,0%) scale(1);} 50%{transform: translate(30%,30%) scale(.7);} 100% { transform: translate(0%,0%) scale(1);}}
      @keyframes scale1-gold2{ 0% { transform: translate(0%,0%) scale(1);} 50%{transform: translate(-30%,30%) scale(.8);} 100% { transform: translate(0%,0%) scale(1);}}
      @keyframes scale1-gold3{ 0% { transform: translate(0%,0%) scale(1) rotate(0deg);} 25%{transform:rotate(10deg);} 50%{transform: translate(-30%,-30%) scale(.8) rotate(0deg);} 25%{transform:rotate(-10deg);} 100% { transform: translate(0%,0%) scale(1) rotate(0deg);}}
      @keyframes roatehand1{ 0% { transform: rotate(0deg);} 50%{ transform: rotate(-10deg);} 100% {  transform: rotate(0deg);}}
      @keyframes roatehand2{ 0% { transform: rotate(0deg);} 50%{ transform: rotate(-10deg);} 100% {  transform: rotate(0deg);}}
      @keyframes bankcard{ 0% { transform: translate(0%,0%) ;} 50%{ transform: translate(20%,-10%) scale(.95);} 100% {  transform: translate(0%,0%);}}
      @keyframes rotatepos{ 0% { transform: translate(50%,-50%) rotate(0deg) ;} 25%{transform: translate(50%,-50%) rotate(5deg);} 50%{ transform: translate(50%,-50%) rotate(0deg);} 75%{transform: translate(50%,-50%) rotate(-5deg);} 100% {  transform: translate(50%,-50%) rotate(0deg);}}
      .recommend .iphonetitle{background-color: #eb4920 !important;background-image: none !important;}
      .recommend .title{background-color: #eb4920 !important;}
      .recommend .van-tabs__line{height:100% !important;bottom:0;width:33.33% !important;border-radius:999px !important;border:.0533rem solid #FFB638;box-sizing:border-box;background-image:linear-gradient(to top, #E24825 0%, #E88756 100%) !important;}
      .van-tabs__nav{padding:0 !important; background-color: #FFF0D3;border-radius:999px !important;}
      .van-tab__text{z-index:10; color:#F67C45;font-weight:700;font-size:.3733rem;}
      .van-tab--active .van-tab__text{color:#fff;}
      .recommend {background-image:linear-gradient(to bottom, #E7461B 20%,#EC6224 50%) !important;min-height:100vh;}
      .main,.signup{width:92%;background-color:#FFF9ED;margin:0 auto;padding:.6933rem .4267rem .35rem;box-sizing:border-box;border-radius:.16rem;margin-bottom:.2667rem;}
      .complete{color:#F67C45;}
      .uncomplete{color:#F67C45;opacity:.4;}
      .uncompletetask{color:#B7B7B7;}
      .option{margin-top:-2.4rem;z-index:999;}
      .signup{padding:.2667rem;z-index:999;}
      .signup img{width:1.7067rem;}
      .top-bar{width:100vw;height:1.3333rem;z-index:9999;}
      .top-bar img{width:.7467rem;margin-left:.48rem;}
      .van-sticky--fixed .top-bar{background-color:#eb4920;}
      .signup .center .top{font-size:.64rem; color:#EA5D37;font-weight:700;font-style:italic}
      .signup .center .label{border-radius:.08rem;width:85%;height:.48rem; font-size:.2667rem; color:#EF8700; background-color:#FFE8A2; border:1px solid #EFAA00;margin:0 auto;margin-top:.24rem;justify-content:center;}
      .signup .right{width:1.4933rem;height:1.4933rem; background-image:linear-gradient(to top, #E24825 0%,#E88756 100%);border-radius:999px;justify-content:center;border:2px solid #E74924;}
      .signup .right2{width:1.4933rem;height:1.4933rem; background-image:linear-gradient(to top, #999999 0%,#b2b2b2 100%);border-radius:999px;justify-content:center;border:2px solid #c0c0c0;}
      .signup .right .font{color:#FFF3E8;line-height:1;}
      .tsop .productimg{width:.8533rem;margin-top:.4533rem;}
      .tsop .tips{font-size:.24rem;margin-top:.5867rem;}
      .csop .item{padding:.4267rem;margin-bottom:.2133rem;border-radius:.16rem;}
      .csop {padding-top:.3467rem;}
      .csop .photo img{width:.64rem;}
      .csop .photo{margin-bottom:.3467rem;}
      .csop .photo .name{margin-left:.16rem;}
      .csop .item .font{color:#FFB390;}
      .csop .item .num{color:#F67C45;}
      .csop .photo .code{margin-left:.24rem;}
      .csop .progress .top {z-index:1;}
      .csop .progress .top .block{width:1.7067rem; height:.7467rem;background-color:#FFF0D3;border-radius:999px;justify-content:center;}
      .csop .progress .top .block .productimg{height:.3733rem;margin-right:.1333rem;}
      .csop .progress .top .abs{background-color:#FFF0D3;height:.1333rem;width:100%;top:50%;transform:translateY(-50%);}
      .csop .progress .center{margin-top:.4267rem;background-color:#F98027;height:.2667rem;border-radius:999px;padding:0 1px;}
      .csop .progress .center .progressbar{background-image:linear-gradient(to top, #FFC320 0%,#FFFFFF 100%);height:.2133rem;border-radius:999px;}
      .csop .progress .center .progressbar img{width:.7733rem;top:50%;right:0;animation:rotatepos .5s linear infinite;}
      .csop .progress .bottom{margin-top:.5333rem;}
      .top-image{z-index:-1;}
      .top-image .recommend-man-right{width:2.9067rem;right:.7467rem;bottom:.5333rem ;}
      .top-image .recommend-woman-left{width:3.5467rem ;left:.56rem;bottom:1.3067rem;}
      .top-image .recommend-bottom{width:100% ;left:0;bottom:.9867rem;}
      .top-image .recommend-pos{width:3.2267rem;left:50%;bottom:2.4267rem;transform:translateX(-50%);animation:scale1-pos 2s 2s linear infinite;}
      .top-image .recommend-card{width:1.8933rem;left:0;bottom:3.7333rem;animation:bankcard 5s linear infinite;}
      .top-image .recomment-gold1{width:1.8667rem;left:-9%;bottom:6.7733rem;animation:scale1-gold1 5s linear infinite;}
      .top-image .recomment-gold2{width:.8rem;right:0;bottom:6.48rem;animation:scale1-gold2 5s linear infinite;}
      .top-image .recomment-gold3{width:1.4933rem;right:.72rem;bottom:2.4rem;transform-origin:left bottom;animation:scale1-gold3 5s linear infinite;}
      .top-image .recomment-cloud-right{width:2.56rem;right:0;bottom:2.9867rem;}
      .top-image .recomment-cloud-left{width:2.6933rem;left:0;bottom:2.9867rem;}
      .top-image .recommend-hand-left{width:1.4133rem;right:.4rem;top:1.7333rem;transform-origin:right top;animation:roatehand1 5s linear infinite;}
      .top-image .recommend-hand-right{width:2.1333rem;right:.4533rem;top:2.1867rem;animation:roatehand2 3s linear infinite;}
      .imgrotate{width:200%;animation:rotate361 10s linear infinite;}
      .headphoto{border-radius:50%;}
    </style>
  </head>
  <body class="pb0 ovh recommend">
    <div class="iphonetitle"></div>
    <div class="ovh-x panel" id="app" v-cloak ref="wrapper1">
      <van-sticky :offset-top="topheight" v-cloak>
        <div class="top-bar abs df aic">
          <div @click="backbtn"><img src="./static/images/active/recommend/recommend-back.png" alt=""></div>
        </div>
      </van-sticky>
      <div class="top-image rel df"><img src="./static/images/active/recommend/recommend-bg-image.png" alt="" style="width:100%;"><img class="imgrotate abs" src="./static/images/light.png" alt=""><img class="recommend-pos abs" src="./static/images/active/recommend/recommend-pos.png"><img class="recommend-bottom abs" src="./static/images/active/recommend/recommend-bottom.png"><img class="recomment-cloud-right abs" src="./static/images/active/recommend/recomment-cloud-right.png"><img class="recomment-gold2 abs" src="./static/images/active/recommend/recomment-gold2.png">
        <div class="recommend-man-right abs"><img src="./static/images/active/recommend/recommend-man-right.png" style="width:100%;">
          <div class="recommend-hand-right abs"><img src="./static/images/active/recommend/recommend-hand-right.png" style="width:100%;"></div>
        </div><img class="recomment-cloud-left abs" src="./static/images/active/recommend/recomment-cloud-left.png">
        <div class="recommend-woman-left abs"><img src="./static/images/active/recommend/recommend-woman-left.png" style="width:100%;">
          <div class="abs recommend-hand-left"><img src="./static/images/active/recommend/recommend-hand-left.png" style="width:100%;"></div>
        </div><img class="recommend-card abs" src="./static/images/active/recommend/recommend-card.png"><img class="recomment-gold1 abs" src="./static/images/active/recommend/recomment-gold1.png"><img class="recomment-gold3 abs" src="./static/images/active/recommend/recomment-gold3.png">
      </div>
      <div class="option">
        <div class="signup df jcsb"><img src="./static/images/active/recommend/recommend-purse.png">
          <div class="center tc">
            <div class="top">等你来挑战！</div>
            <div class="f10 label df aic">报名时间:每月1-7日</div>
          </div>
          <div class="right df aic" @click="joinactive" v-if="joinstatus === 0 &amp;&amp; loaded &amp;&amp; !isend">
            <div class="font f14">
              <div>立即</div>
              <div>参与</div>
            </div>
          </div>
          <div class="right2 df aic" v-if="joinstatus !== 0 &amp;&amp; loaded &amp;&amp; !isend">
            <div class="font f14 cfff">
              <div>已报名</div>
            </div>
          </div>
          <div class="right2 df aic" v-if="loaded &amp;&amp; isend">
            <div class="font f14 cfff tc">
              <div>报名</div>
              <div>已结束</div>
            </div>
          </div>
          <div class="right2 df aic" v-if="!loaded">
            <div class="font f14 cfff">
              <div>加载中</div>
            </div>
          </div>
        </div>
        <div class="main">
          <van-tabs v-model="active" swipeable animated line-width="50" color="#FFD500" @change="checktab" line-height="2" :ellipsis="false">
            <van-tab title="活动介绍">
              <div class="f14" v-html="articleinfo.Contents" style="line-height:1.4;"></div>
            </van-tab>
            <van-tab title="任务进度">
              <div class="tc c333 mt16" style="padding-bottom:8px;color:#FFB390;font-size:16px;" v-if="joinstatus === 0">暂未报名</div>
              <div class="tsop" style="padding-bottom:8px;" v-else>
                <div class="df jcsb">
                  <div class="f10" v-for="item,index in 6"><img class="productimg" :src="index&lt;finishnum? './static/images/active/recommend/recommend-tast-pos.png':'./static/images/active/recommend/recommend-tast-pos1.png'">
                    <div :class="index&lt;finishnum? 'complete':'uncompletetask'">{{index < finishnum ? '已完成' : '未完成'}}</div>
                  </div>
                </div>
                <div class="complete tips">*当月直推新创客或激活未开机创客（含商户型创客）且该创客当月完成创客进度页任务计1次成功推荐，当月成功推荐达到6次即完成任务。</div>
              </div>
            </van-tab>
            <van-tab title="创客进度">
              <div class="tc c333 mt16" style="padding-bottom:8px;color:#FFB390;font-size:16px;" v-if="joinstatus === 0">暂未报名</div>
              <div class="csop" v-else>
                <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
                  <van-empty class="custom-image" image="./static/images/empty-img.png" description="暂无数据" v-if="isnodata"></van-empty>
                  <div class="item bgcfff" v-for="item,index in creatorlist">
                    <div class="photo df jcsb aic">
                      <div class="df aic"><img class="headphoto" :src="item.HeadPhoto">
                        <div class="c333 name b f16" style="margin-left:6px;">{{item.Name}}</div>
                        <div class="c333 code f12" style="margin-left:9px;">{{item.MakerCode}}</div>
                      </div>
                      <div> <span class="font">当前激活数：</span><span class="num">{{item.PosCount}}</span><span class="font">台</span></div>
                    </div>
                    <div class="progress" style="width:100%;">
                      <div class="top rel">
                        <div class="abs" style="z-index:-1;"></div>
                        <div class="df jcsb">
                          <div class="block" v-for="i,ind in 3">
                            <div class="block df aic" :class="item.PosCount &gt;= ind+1? 'complete':'uncomplete'"><img class="productimg" src="./static/images/active/recommend/recommend-progress-pos1.png">
                              <div class="f10">{{item.PosCount >= ind+1? '已激活' : '待激活'}}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="center df aic">
                        <div class="progressbar rel" :style="'width:' + item.progressbar + '%;'"><img class="abs" src="./static/images/active/recommend/recommend-progress-pos.png"></div>
                      </div>
                      <div class="bottom c333 tc f14"><span class="num b" v-if="item.PosAmount &gt;= item.PosCount * 30000 &amp;&amp; item.PosCount &gt;= 3">已达标</span>
                        <div v-else><span class="font">当月交易额：</span><span class="num b">￥{{abs(tofixed2(item.PosAmount))}}/{{abs(tofixed2(item.PosCount === 0 ? 30000.00 : item.PosCount * 30000))}}</span></div>
                      </div>
                    </div>
                  </div>
                </van-list>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div> 
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/appfunc.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script src="./static/js/publicfn.js"></script>
    <script src="./static/js/libpag.js"></script>
    <script>
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            isnodata:false,
            active:0,
            topheight:0,
            joinstatus:0,
            creatorlist:[
            ],
            loading: true,
            finished: false,
            refreshing: false,
            articleinfo:'',
            finishnum:0,
            pageinfo:{
              PageSize:10,
              PageNum:1,
            },
            loaded:false,
            isend:true,
          }
        },
        created() {
          if(new Date().getDate() < 8){
            this.isend = false;
          };
          this.topheightfn();
          this.getmakercode();
          this.isjoin();
        },
        mounted(){
          this.$refs.wrapper1.style.height = `${document.documentElement.clientHeight - this.topheight}px`;
        },
        beforeUpdate() {
        },
        computed:{
        },
        watch:{
        },
        methods: {  
          onLoad() {
              if (this.refreshing) {
                this.refreshing = false;
              }
              this.pageinfo.PageNum++;
              this.getcreatordata();
          },
          joinactive(){
            PublicLib.putCookieInfo('malldetailId', 29);
            PublicLib.Goto({Url:'mall-detail'});
          },      
          async getmakercode(){
            const res = await getRequest('api/v1/pageinfo/detail?t='+Math.random(6),JSON.stringify({Id:12}));
            if(res.status !== '1') return tips('获取创客守则失败，请重试！');
            this.articleinfo = res.data;
          },
          //- 高度适配函数
          topheightfn(){			
            const type = browsertype.versions.ios ? 'ios' : 'android';
            if(type === 'ios'){
              if(isFringe()){
                this.topheight = 48;
              }else{
                this.topheight = 20;
              };
            }else{
              this.topheight = PublicLib.getStatusBarHeight();
            };	
          },
          createornum(arr){
            let num = 0;
            arr.forEach(item=>{
              if(item.progressbar >=100){
                num++;
              };
            });
            //- console.log(num);
            this.finishnum =  num;
          },
          progressfn(count,amount){
            if(count === 0){
              return 0;
            };
            if(count === 1){
              if(amount >= 30000){
                return 33.33;
              }else{
                return (amount / (count*30000) / 3) * 100;
              };
            }else if(count === 2){
              if(amount >= 2000){
                return 66.66;
              }else{
                return (amount / (count*30000) / 2) * 100;
              };
            }else if(count >= 3){
              return (amount / (count*30000)) * 100;
            };
          },
          onConformateDate(){
            return fillzero(formatDate(new Date().getFullYear(),new Date().getMonth() + 1));
          },
          //- 获取创客交易数据
          async getcreatordata(type= 'onload'){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/recommendtradesummary/list?t='+Math.random(6),JSON.stringify({UserId,TradeMonth:this.onConformateDate(),...this.pageinfo}));
            if(res.status !== '1'){
              return tips(res.info);
            };
            if(res.data.length < this.pageinfo.PageSize){
              this.finished = true;
            };
            if(type==='onload'){
              this.creatorlist.push(...res.data);
            };
            this.loading = false;
            await this.creatorlist.forEach(item=>{
              item.progressbar = this.progressfn(item.PosCount,item.PosAmount);
            });
            this.createornum(this.creatorlist);
          },
          //- 获取创客参与状态
          async isjoin(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/orders/checkjoinstatus?t='+Math.random(6),JSON.stringify({UserId}));
            if(res.status !== '1'){
              return tips(res.info);
            };
            this.loaded = true;
            this.joinstatus = res.data.Status;
            if(res.data.Status !== 0){
              this.getcreatordata();
            }
          },
          checktab(){
          },
          backbtn(){
            PublicLib.GoBack({Level:1});
          },
      
        },
      });
    </script>
  </body>
</html>