lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!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">
    <link rel="stylesheet" href="./static/css/double.css">
    <style>
      .screenroll::-webkit-scrollbar { display: none;}
      .screenroll{height:100vh !important;}
      .bg2{background-image:linear-gradient(to bottom,#b51e1c,#bb3325) !important;}
      .loadingfalseheight{height:1.33333rem}
    </style>
  </head>
  <body class="pb0 ovh pt0">
    <div class="rel double" id="app" v-cloak>
      <van-sticky>
        <van-nav-bar class="camp_title user_title_normal" title="详情" @click-left="backbtn" left-arrow v-if="toptitleisshow">
          <template #left> 
            <van-icon name="arrow-left" color="#000" size="20"></van-icon>
          </template>
        </van-nav-bar>
      </van-sticky>
      <div>
        <div class="screenroll rel">
          <div class="bg1 rel"><img class="BG1 rel" src="./static/images/active/double/bg1.png" alt="背景图1" style="z-index:1;">
            <canvas class="canvas abs pagcanvas" id="pag" style="z-index:999;bottom:0;"></canvas>
          </div><img class="rmb888 abs" src="./static/images/active/double/888.png" alt="888.88" style="z-index:2;">
          <div class="bg2 rel">
            <div class="loadingfalseheight" v-if="!isloading"></div>
            <div v-else>
              <div v-if="!!initInfo.IsBuy"> 
                <van-progress :percentage="percentage" track-color="#ED785A" stroke-width=".24rem" color="linear-gradient(to right,#FBDF47, #FFA666)" :show-pivot="false" style="width:85vw;margin:0 auto"></van-progress>
                <div class="f12 cfff article tc"><span>达标进度：</span><span class="b f20">{{dabiao}}</span><span>万元 / </span><span class="b f20">{{mubiao}}</span><span>万元 </span></div><img class="bonus abs" src="./static/images/active/double/bonus.png" alt="红包" ref="bonus">
                <button class="btn">已报名</button>
              </div>
              <button class="registBtn" v-if="!initInfo.IsBuy &amp;&amp; canJoin" @click="regist">报名参与</button>
              <button class="btn" v-if="!initInfo.IsBuy &amp;&amp; !canJoin">本月报名已结束</button>
            </div>
          </div>
          <div class="bg3"><img class="BG3" src="./static/images/active/double/BG3.png" alt="背景3"></div>
        </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>
      //- PublicLib.SetStatusBarStyle({type:'light', isShow:1});
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            toptitleisshow:false,
            percentage:0,
            canJoin:true,
            initInfo:{
              TotalTrade:1000,
              SelfTrade:10,
              IsBuy:false,
            },
            isloading:false,
            //- articleinfo:{
            //-   Title: '',
            //-   Contents:''
            //- },
            //- isId:true,
            //- imgsrc:[],
            //- type:'',
          };
        },
        watch:{
          percentage:function(value){
            console.log(value)
            if(value > 100){
              value = 100
            }
            this.$nextTick(()=>{
              this.$refs.bonus.style.left = `${value * .85 + 5}%`
            })
          },
          ['initInfo.SelfTrade']:function(){
            let res = this.initInfo.SelfTrade / this.initInfo.TotalTrade * 100
            if(res > 100){
              res = 100
            }
            this.percentage = res
          },
          deep:true,
          immediate: true
        },
        computed:{
          dabiao:function(){
            return  (this.initInfo.SelfTrade/10000).toFixed(2)
          },
          mubiao:function(){
            return  (this.initInfo.TotalTrade/10000).toFixed(2)
          }
        },
        created() {
          //- setInterval(()=>{this.initInfo.SelfTrade+=100},1000)
          this.pageffect('./static/pag/active-double-particle.pag')
          this.getprecent()
          this.judgeTime()
        },
        methods: {
          //- 获取数据
          pageffect(url = '') {
            const that = this;
            window.libpag.PAGInit().then(async (PAG) => {
              axios({url,responseType: "blob"}).then(async (response) =>{return response.request.response}).then(async (blob) => {
                let file =  new window.File([blob], url.replace(/(.*\/)*([^.]+)/i, '$2'));
                const pagFile = await PAG.PAGFile.load(file);
                document.getElementById('pag').width = document.documentElement.clientWidth;
                document.getElementById('pag').height = document.documentElement.clientWidth;
                const pagView = await PAG.PAGView.init(pagFile, '#pag',{ useCanvas2D: false,useScale: true,firstFrame:true });
                pagView.setRepeatCount(0);
                await pagView.play();
                this.pagView = pagView;
              });
            });     
          },
          //- judgeOK(res){
          //-   function isOK (obj) {return Boolean( obj.this >= 2000000 && obj.last * 2 > obj.this)}
          //-   if( isOK(res) ){
          //-     obj.children.forEach((item,index)=>{
          //-       if(isOK(item)){
          //-         obj.this - item.this
          //-       }else{
          //-         this.judgeOK(item)
          //-       }
          //-     })
          //-   }else{
          //-     return 
          //-   }
          //- },
          judgeTime(){
            let time = new Date().getDate()
            if(time < 16){
              this.canJoin = true
            }else{
              this.canJoin = false
            }
          },
          async getprecent(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/ActivityProgressBar/List?t='+Math.random(6),JSON.stringify({UserId}));
            if(res.status !== '1') return tips('获取数据失败');
            this.initInfo = res.data;
            if(this.initInfo.TotalTrade < 2000000){
              this.initInfo.TotalTrade = 2000000
            };
            this.isloading = true;
          },
          regist(){
            PublicLib.putCookieInfo('malldetailId', 15);
            PublicLib.Goto({Url:'mall-detail'});
          },
          backbtn(){
            PublicLib.GoBack({Level:1});
          },
          clickimg(index = 0){
            if(typeof(index) == 'number'){
              PublicLib.PhotoBrowser(1,['./static/images/active/double/BG3.png']);
            };
          },
        }
      });
    </script>
  </body>
</html>