lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
							<!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="telephßone=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>#qrcode img{width:100%; }</style>
  </head>
  <body class="pb0 pt0" id="user_my_rank" style="padding-top:0;">
    <div id="rank" v-cloak>
      <van-nav-bar class="user_my_rank_title" title="我的职级" right-text="职级说明" v-if="toptitleisshow" @click-left="gomine" @click-right="goexplan" left-arrow>
        <template #left> 
          <van-icon class="user_rank_back" name="arrow-left"> </van-icon>
        </template>
      </van-nav-bar>
      <div class="user_my_rank_topcard ovh">
        <div class="cardlabel ovh"><img src="./static/images/user-rank-back@2x.png" alt=""></div>
        <div class="container ovh">
          <div class="trophy"><span>K{{grade}}职级</span><img src="./static/images/main-rank-alltrophy@3x.png" alt=""></div>
          <div class="text">{{rankinfo}}</div>
          <div class="speed progress rel">
            <div class="grade">K{{grade}}</div>
            <van-progress color="linear-gradient(to right, #F5CD13, #FF9500)" :percentage="speedlength" :pivot-text="tradeamt"></van-progress>
            <div class="grade">K{{grade >= 9? grade:grade + 1}}</div>
          </div>
          <div class="textbottom cfff">本月当前交易{{tradeamt}}，离升级还差{{exceedval}}的交易</div>
        </div>
      </div>
      <div class="user_my_rank_rights">
        <div class="rightstop"><img src="./static/images/product-icon2@3x.png" alt=""><span>我的权益</span></div>
        <van-grid class="rightgrid" :column-num="3">
          <van-grid-item icon="./static/images/user-rank-birthday@2x.png" text="生日礼遇" @click="group"></van-grid-item>
          <van-grid-item icon="./static/images/user-rank-onlybadge@2x.png" text="专属徽章" @click="visible"></van-grid-item>
        </van-grid>
      </div>
      <div class="user_my_rank_rights">
        <div class="rightstop"><img src="./static/images/product-icon2@3x.png" alt=""><span>升级攻略</span><span class="rightsright">完成以下任务，可快速提升交易</span></div>
      </div>
      <div class="user_my_rank_cell">
        <div class="box" v-for="item,index in cellList" :key="index"> <img :src="item.imgsrc" alt="">
          <div class="boxcenter">
            <div class="top">{{item.title}}</div>
            <div class="bottom"><span>{{item.main}}</span></div>
          </div>
          <div class="invite" @click="groupbtn(item.Url)">{{item.option}}</div>
        </div>
      </div>
      <div class="birthdaydialog" v-if="birthdayisshow">
        <div class="birthdaycard ovh">
          <div class="top"> <img src="./static/images/mine-rank-birthday.png" alt=""></div>
          <div class="bottom ovh"> 
            <div class="title">生日祝福</div>
            <div class="main">每年生日为你送上温暖祝福</div>
            <button @click="surebtn">知道了</button>
          </div>
        </div>
      </div>
      <div class="morebirthdaydialog" v-if="morebirthdayisshow">
        <div class="birthdaycard ovh">
          <div class="bottom ovh"> <img src="./static/images/birthday-logo.png" alt="">
            <div class="title">生日快乐</div>
            <div class="main">创业帮为您送上温暖祝福</div>
            <button @click="learnblessing">查看祝福</button>
          </div>
        </div>
      </div>
      <div class="user_rank_badge_allback" v-cloak v-if="badgeisshow">
        <div class="user_rank_badge_card ovh" ref="savecard">
          <div class="savecard">
            <div class="user_rank_badge_top"><span class="rightlogo"> <img src="./static/images/logo--@3x.png" alt=""></span><span class="closebtn" @click="closebadge" v-if="issaveimg"><img src="./static/images/close-wite@3x.png" alt=""></span></div>
            <div class="user_rank_badge_badgecontainer">
              <div class="trophy"><span>K{{grade}}职级</span><img src="./static/images/main-rank-alltrophy@3x.png" alt=""></div>
              <div class="text">您当前职级为K{{grade}}</div>
            </div>
            <div class="user_rank_badge_qrcode" id="qrcode"><img :src="rankcode" alt="" style="width:100%;"></div>
            <div class="user_rank_badge_namecode">{{username}}的推荐码：{{number}}</div>
          </div>
          <div class="user_rank_badge_bottombtn" v-if="issaveimg">
            <button class="savebtn" @click="saveimg">保存</button>
            <button class="share" @click="sharebtn"> 分享我的职级</button>
          </div>
        </div>
      </div>
      <van-overlay class="group" :show="congratulationsisshow" @click="congratulationsisshow = false">
        <div class="wrapper h100p">
          <div class="block"><img src="./static/images/user-rank-trophy@2x.png" alt="">
            <div class="foryou">恭喜你</div>
            <button class="f18 cfff" @click="gogroupup">立即查看</button>
          </div>
        </div>
      </van-overlay>
      <van-popup class="bgcf7f7f7" v-model="show" position="bottom" :style="{ height: '25%' }">
        <div class="sharepanel rel">
          <div class="f12 c999 tc">分享到</div>
          <van-grid class="grad" :column-num="2">
            <van-grid-item text="微信" @click="weixin"> 
              <template #icon>
                <svg class="icon" aria-hidden="true"> 
                  <use xlink:href="#icon-weixin"> </use>
                </svg>
              </template>
            </van-grid-item>
            <van-grid-item text="微信朋友圈" @click="weixinfriend"> 
              <template #icon>
                <svg class="icon" aria-hidden="true"> 
                  <use xlink:href="#icon-pengyouquan"></use>
                </svg>
              </template>
            </van-grid-item>
          </van-grid>
          <div class="tc mt16 cencal abs bgcfff f14 c333" @click="show = false">取消</div>
        </div>
      </van-popup>
    </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/html2canvas.js"></script>
    <script src="./static/js/iconfont.js"></script>
    <script>
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#rank',
        data() {
          return {
            toptitleisshow:false,
            //- 是否显示生日弹出层
            birthdayisshow:false,
            //- 是否显示生日详细弹出层
            morebirthdayisshow:false,
            //- 是否显示职级徽章
            badgeisshow:false,
            //- 等级进度
            speedlength:0,
            //- 徽章升级弹出层
            congratulationsisshow:false,
            //- 活动方式列表
            number:'H000122',
            cellList:[
              {imgsrc:'./static/images/user-rank-invited@2x.png',title:'邀请好友',main:'发展团队，交易不停，分润不止',option:'去邀请',Url:'invite-frend'},
              //- {imgsrc:'./static/images/user-rank-order@2x.png',title:'商城下单',main:'低成本创业，开通商户，奖励即刻到账',option:'去下单',Url:'mall'},
              //- {imgsrc:'./static/images/user-rank-joinpart@2x.png',title:'参加活动',main:'多种奖励享不停',option:'去参加',Url:'market-active'},
              //- {imgsrc:'./static/images/user-rank-camp@2x.png',title:'参加特训营',main:'支付大神的成长之路',option:'去参加',Url:'trainingCamp'}
            ],
            rankcode:'',
            grade:1,
            tradeamt:'0',
            exceedval:'',
            rankinfo:'',
            status:0,
            username:'',
            test:'',
            issaveimg:true,
            show:false,
            canvas:''
          }
        },
        mounted(){
          this.toptitleisshow = toptitleisshow;
          this.getuserrankinfo();
          this.getmainrankinfo();
        },
        updated(){
          //- 解决标题不居中的问题
          if(this.status <= 1) {
          const str = document.querySelector(".van-progress__portion").style.width;
          document.querySelector(".van-progress__pivot").style.left = Number(str.substring(0,str.length - 2)) - 30 + 'px';
          //- console.log(Number(str.substring(0,str.length - 2)) - 30 + 'px');
          this.$forceUpdate();
          this.status++;
          }
        },
        methods: {
          //- 显示徽章
          visible(){
            this.badgeisshow = true;
          },
          //- 获取用户职级信息
          async getuserrankinfo(){
            PublicLib.ShowLoading({Message:''});
            PublicLib.HideLoading();
            const Id = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/users/mylevelbadge',JSON.stringify({Id}));
            if(res.status !== '1') return tips('获取用户信息失败，请重试！');
            this.username = res.data.RealName;
            this.rankcode = res.data.ReferenceQrCode;
            this.number = res.data.MakerCode;
            PublicLib.CachePicture({picUrl:res.data.ReferenceQrCode});
          },
          async getmainrankinfo(){
            const Id = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/userrank/mylevelinfo',JSON.stringify({UserId:Id}));
            if(res.status !== '1') return tips('获取用户信息失败，请重试！');
            this.grade = res.data.Rank;
            this.tradeamt = String(res.data.TradeAmt);
            this.speedlength = res.data.Percent;
            this.exceedval = res.data.ExceedVal;
            this.rankinfo = res.data.TextNote;
          },
          //- 图片生成
          // 生成快照
          convertToImage(container){
            // 设置放大倍数
            const scale = window.devicePixelRatio / 2;
            // 传入节点原始宽高
            const width = container.offsetWidth;
            const height = container.offsetHeight;
      
            const canvas = document.createElement('canvas');
            // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
            canvas.width = width * scale;
            canvas.height = height * scale;
            // 设定 canvas css宽高为 DOM 节点宽高
            canvas.style.width = `${width}px`;
            canvas.style.height = `${height}px`;
            // 获取画笔
            const context = canvas.getContext('2d');
            // 将所有绘制内容放大像素比倍
            context.scale(scale, scale);
            var rect = container.getBoundingClientRect(); //获取元素相对于视察的偏移量
            context.translate(-rect.left, -rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位
            // html2canvas配置项
            //- console.log(11)
            const ops = {
              scale,
              canvas,
              width,
              height,
              logging: false,
              useCORS: true,
              allowTaint: false,
              dpi:300,
            };
            
            return html2canvas(container, ops).then(canvas => {
              // 返回图片的二进制数据
              return canvas.toDataURL("image/png");
            });
          },
          async saveimg(){
            // 调用函数，取到截图的二进制数据，对图片进行处理（保存本地、展示等）
            this.issaveimg = false;
            this.$nextTick(async()=>{
              const imgBlobData = await this.convertToImage(this.$refs.savecard);   
              this.issaveimg = true;
              //- this.test = imgBlobData;
              //- console.log(imgBlobData);
              PublicLib.SaveToSd({PicPath:imgBlobDatas});
            });
          },
          sharebtn(){
            this.show = true;
            // 调用函数，取到截图的二进制数据，对图片进行处理（保存本地、展示等）
            this.issaveimg = false;
            this.$nextTick(async()=>{
              this.issaveimg = true;
              this.canvas = await this.convertToImage(this.$refs.savecard);
              //- console.log(canvas);   
            });
          },
          weixin(){
             PublicLib.ShareAppMessageImage({PicturePath:this.canvas});
          },
          weixinfriend(){
            PublicLib.ShareTimelineImage({PicturePath:this.canvas});
          },
          //- 关闭徽章
          closebadge(){
            this.badgeisshow = false;
          },
          //- 跳转说明
          goexplan(){
            PublicLib.Goto({Url:'user-rank-explan'});
          },
          //- 升级展示
          gogroupup(){
            PublicLib.Goto({Url:'user-rank-groupup'});
          },
          //- 生日弹窗展开
          group(){
            this.birthdayisshow = true; 
          },
          //- 生日弹窗关闭
          surebtn(){
            this.birthdayisshow = false;
          },
          //- 返回我的界面
          gomine(){
            PublicLib.GoBack({Level:1});
          },
          // 生日详情
          birthdaybtn(){
            this.morebirthdayisshow = true; 
          },
          //- 查看祝福
          learnblessing(){
            PublicLib.Goto({Url:'user-rank-blessing'});
          },
          groupbtn(Url){
             PublicLib.Goto({Url});
          }
        }
      });
    </script>
  </body>
</html>