lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
							<!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>
      .bgcstrong {background-color: #494965; background-image:none !important;}
      .ranking{background-image: linear-gradient(to bottom, #494965, #6C6D8C);height:100%;}
      .van-nav-bar{background-color:rgba(0,0,0,0);}
      .title{width:3.5467rem;vertical-align:middle;}
      .share{width:.56rem;vertical-align:middle;}
      .ranking_table{width:100vw;height:8.4267rem;}
      .ranking_table .time{margin-top:.08rem;opacity:.5;}
      .opt5{opacity:.5;}
      .ranking_table .photo{width:1.9733rem;height:1.9733rem;border-radius:50%;background-color:rgba(255,255,255,.6);}
      .ranking_table .table{width:100vw;bottom:0;}
      .ranking_table .name{margin-top:.16rem;}
      .ranking_table .opennum{justify-content:space-evenly;margin-top:.48rem;}
      .ranking_table .ranking_1{left:40%;top:-20%;transform:translateX(-50%);width:.8267rem;}
      .ranking_table .ranking_2{left:50%;top:50%;transform:translate(-50%,-50%);width:1.8133rem;border-radius:50%;}
      .ranking_3{width:.32rem;height:.32rem;margin-right:.1067rem;}
      .ranking_table .fir{left:50%;transform:translateX(-50%);top:19%;}
      .ranking_table .sec{left:7%;top:28%;}
      .ranking_table .thr{right:7%;top:31%;}
      .ranking_panel{padding:.8rem .5333rem .5867rem;border-radius:.5333rem .5333rem 0 0;margin-top:-26px;min-height:50vh;}
      .ranking_panel .ovh-x{height:100%;width:100%;padding-bottom:60px;box-sizing:border-box;}
      .van-cell::after{display: none;}
      .margintop{margin-top:.6667rem;}
      .ranking_cell {padding:0;height: .8533rem;}
      .ranking_cell .van-cell__title .ranking_cell_img {width: .8533rem;height: .8533rem;border-radius: 50%;vertical-align: middle;margin: 0 .2133rem 0 .4267rem; }
      .van-cell__title{flex:1.2;}
      .van-cell__value{flex:.5;}
      .shareimg{width:100%;}
      .rank_sharepanel .userinfo{top:51%;left:50%;transform:translateX(-50%);width:100%;}
      .rank_sharepanel .userinfo .qrcode{width:1.6rem;height:1.6rem;border-radius:50%;}
      .rank_sharepanel .spcolor{color:#F8CC95;}
      .lineheight{line-height:.7rem;}
    </style>
  </head>
  <body class="pb0 vh100 ovh" style="box-sizing:border-box;">
    <div class="iphonetitle bgcstrong"></div>
    <div class="user_ranking" id="app" v-cloak>
      <div class="ranking" ref="shareel">
        <van-nav-bar @click-left="goback" @click-right="sharebtn" left-arrow v-cloak>
          <template #left> 
            <van-icon name="arrow-left" color="#fff" size="20" v-show="isshare"></van-icon>
          </template>
          <template #title> <img class="title" src="./static/images/user-ranking-title.png" alt=""></template>
          <template #right> <img class="share" src="./static/images/user-ranking-share.png" alt="" v-show="isshare"></template>
        </van-nav-bar>
        <div class="ranking_table rel">
          <div class="time f12 tc cfff">统计时间：{{date.StratTime}}-{{date.EndTime}}</div><img class="table abs" src="./static/images/user-ranking-table.png">
          <div class="fir tc abs" @click="makercode = 'K0000014'">
            <div class="photo rel"><img class="abs ranking_2" :src="userlist[0].HeadPhoto"><img class="abs ranking_1" src="./static/images/user-ranking-1.png"></div>
            <div class="f14 cfff name">{{userlist[0].RealName}}</div>
            <div class="f12 opt5 cfff">{{userlist[0].MakerCode}}</div>
            <div class="opennum df aic">
              <div class="df aic"><img class="ranking_3" src="./static/images/user-ranking-2.png">
                <div class="f14 cfff">{{userlist[0].OpenCount}}</div>
              </div>
            </div>
          </div>
          <div class="sec tc abs" @click="makercode = 'K0000011'">
            <div class="photo rel"><img class="abs ranking_2" :src="userlist[1].HeadPhoto"></div>
            <div class="f14 cfff name">{{userlist[1].RealName}}</div>
            <div class="f12 opt5 cfff">{{userlist[1].MakerCode}}</div>
            <div class="opennum df aic">
              <div class="df aic"><img class="ranking_3" src="./static/images/user-ranking-2.png">
                <div class="f14 cfff">{{userlist[1].OpenCount}}</div>
              </div>
            </div>
          </div>
          <div class="thr tc abs" @click="makercode = 'K0000012'">
            <div class="photo rel"><img class="abs ranking_2" :src="userlist[2].HeadPhoto"></div>
            <div class="f14 cfff name">{{userlist[2].RealName}}</div>
            <div class="f12 opt5 cfff">{{userlist[2].MakerCode}}</div>
            <div class="opennum df aic">
              <div class="df aic"><img class="ranking_3" src="./static/images/user-ranking-2.png">
                <div class="f14 cfff">{{userlist[2].OpenCount}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="ranking_panel bgcfff rel ovh">
          <div class="ovh-x">
            <van-cell class="ranking_cell" v-for="item,index in behinduser" :key="item.UserId" :class="index !== 0 ? 'margintop':''">
              <template #title>
                <div class="df aic"><span class="f18 c999">{{index + 4}}</span><img class="ranking_cell_img" :src="item.HeadPhoto" alt=""><span class="mr8 f14">{{item.RealName}}</span><span class="f14 c999">{{item.MakerCode}}</span></div>
              </template>
              <template #default>
                <div class="ranking_cell_money ranking_balabce c666"><img class="ranking_3" src="./static/images/user-ranking-2.png"><span class="f18">{{item.OpenCount}}</span><span class="f12">台</span></div>
              </template>
            </van-cell>
          </div>
        </div>
      </div>
      <div class="rel rank_sharepanel" ref="savecard"><img class="shareimg" src="./static/images/user-ranking-firstimg.jpg" alt="">
        <div class="abs tc userinfo"><img class="qrcode" :src="userlist[0].HeadPhoto">
          <div class="f14 cfff name" style="margin-top:.18rem;">{{userlist[rank].RealName}}</div>
          <div class="f12 cfff opt5" style="margin-top:.08rem;">{{userlist[rank].MakerCode}}</div>
          <div class="lineheight">
            <div class="f14 c999" style="margin-top:.2733rem">在{{date.StratTime}}-{{date.EndTime}}成功开机<span class="spcolor f18">{{userlist[rank].OpenCount}}</span><span>台</span></div>
            <div class="f14 c999">成为创业帮平台本周<span class="spcolor f18">[开机达人]</span></div>
            <div class="f14 c999">特此鼓励 再接再厉</div>
          </div>
        </div>
      </div>
      <van-share-sheet v-model="show" title="立即分享给好友" :options="options" @select="onquerycount"></van-share-sheet>
    </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/iconfont.js"></script>
    <script src="./static/js/html2canvas.js"></script>
    <script>
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
      	el: '#app',
      	data() {
      		return {
      			makercode:'',
      			date:{StratTime:'2022.08.08',EndTime:'2022.09.01'},
      			pageinfo:{
      				PageSize:10,
      				PageNum:1
      			},
      			isshare:true,
      			userlist:[
      				{OpenCount:20,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000014',RealName:'王*内1'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000011',RealName:'王*内2'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000012',RealName:'王*内3'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000016',RealName:'王*内'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000016',RealName:'王*内'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000016',RealName:'王*内'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000016',RealName:'王*内'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000016',RealName:'王*内'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000016',RealName:'王*内'},
      				{OpenCount:0,HeadPhoto:'https://thirdwx.qlogo.cn/mmopen/vi_32/OMDImDtH2ia1GSYfPiajE14VecYNA8nu2P2XPJYdjgUQNHlLCFhjwGyP1nB8YjiaTC3ovOMwPmOicTT0FQYbvFZGxA/132',MakerCode:'K0000016',RealName:'王*内'},
      			],
      			show:false,
      			InvitePhoto:'',
      			toptitleisshow:true,
      			options: [
      				{ name: '微信', icon: 'wechat' },
      				{ name: '微信朋友圈', icon: 'wechat-moments' },
      			],
      			Base64:'',
      			rank:0,
      		}
      	},
      	created(){
      		this.getrankinglist();
      	},
      	mounted(){
      		this.$nextTick(() => {
      			setTimeout(()=>{
      				const height = document.getElementsByClassName('ranking_table')[0].getBoundingClientRect().bottom;
      				document.getElementsByClassName('ranking_panel')[0].style.height = `calc(100vh - ${ height + 26 }px)`;
      			},100)
      		});
      	},
      	computed:{
      		//- 使用计算属性算筛选出非前三的列表
      		behinduser(){
      			const arr = [];
      			for(let i = 0; i<7; i++){
      				arr.push(this.userlist[ i + 3 ]);
      			}
      			return arr
      		},
      	},
      	methods: {
      		//- 图片生成
      		// 生成快照
      		convertToImage(container){
      			window.pageYoffset = 0;
      			document.documentElement.scrollTop = 0;
      			document.body.scrollTop = 0;
      			// 设置放大倍数
      			const scale = window.devicePixelRatio;
      			// 传入节点原始宽高
      			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.InvitePhoto = imgBlobData;
      		//-   });
      		//- },
      		async getrankinglist(){
      			const res = await getRequest('api/v1/ActivityRecommendKing/List',JSON.stringify(this.pageinfo));
      			if(res.status !== '1')return tips('获取排行榜失败，请重试！');
      			//- 替换名字
      			//- res.data.forEach(item=>{
      			//- 	item.UserInfo.RealName = hidemiddlenum(item.UserInfo.RealName,1);
      			//- });
      			this.userlist = res.data;
      			this.date = res.other;
      		},
      		goback(){
      			PublicLib.GoBack({Level:1});
      		},
      		//- 分享
      		sharebtn(){
      			this.isshare = false;
      			//- this.saveimg();
      			this.show = true;
      			const makercode = this.makercode;
      			setTimeout(async()=>{
      				//- const makercode = JSON.parse(PublicLib.getCookieInfo('userInfo')).MakerCode;
      				if(String(makercode) === String(this.userlist[0].MakerCode)){
      					this.rank = 0;
      					setTimeout(async()=>{
      						this.Base64 = await this.convertToImage(this.$refs.savecard);
      					});
      				}else if(String(makercode) === String(this.userlist[1].MakerCode)){
      					this.rank = 1;
      					setTimeout(async()=>{
      						this.Base64 = await this.convertToImage(this.$refs.savecard);
      					});
      				}else if(String(makercode) === String(this.userlist[2].MakerCode)){
      					this.rank = 2;
      					setTimeout(async()=>{
      						this.Base64 = await this.convertToImage(this.$refs.savecard);
      					});
      				}else{
      					this.Base64 = await this.convertToImage(this.$refs.shareel);
      				};
      				this.isshare = true;
      			},100)
      		},
      		weixinfriend:undebounce(function(){
      			const type = browsertype.versions.ios ? 'ios' : 'android';
      			if(type === 'ios'){
      			window.webkit.messageHandlers.Base64ImageShareWechatTimeline.postMessage({Base64:this.Base64});
      			}else{
      			Func.Base64ImageShareWechatTimeline(JSON.stringify({Base64:this.Base64}))
      			};
      		}),
      		weixin:undebounce(function(){
      			//- debugger;
      			const type = browsertype.versions.ios ? 'ios' : 'android';
      			if(type === 'ios'){
      			window.webkit.messageHandlers.Base64ImageShareWechatSession.postMessage({Base64:this.Base64});
      			}else{
      			Func.Base64ImageShareWechatSession(JSON.stringify({Base64:this.Base64}))
      			};
      		}),
      		saveloaction(){
      			PublicLib.SaveToSd({PicturePath:this.InvitePhoto});
      		},
      		onquerycount(option){
      			if(option.name === '微信'){
      				this.weixin();
      			}else{
      				this.weixinfriend();
      			};
      		},
      	}
      });
    </script>
  </body>
</html>