lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
							<!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: #FFD500; background-image:none !important;}
      
      .whit_icon .van-nav-bar__right .van-nav-bar__text{color:#333}
      .ranking_titpanel {
      	height: 7rem;
      	background-image: linear-gradient(to top, #FFD500, #FFD500);
      	padding: .2133rem .613333rem 0; }
      	.ranking_titpanel .title {
      		color: rgba(51, 51, 51, 0.7); }
      	.ranking_titpanel .ranking_front {
      		display: grid;
      		height: 100%;
      		grid-template-columns: 1fr 1.3fr 1fr; }
      		.ranking_titpanel .ranking_front .ranking {
      			height: 100%; }
      			.ranking_titpanel .ranking_front .ranking .image {
      				width: 1.706667rem;
      				height: 1.706667rem;
      				margin: 0 auto;
      				border-radius: 50%;
      				background-image: linear-gradient(to bottom, #F7F6F9, #BCC0C8); }
      				.ranking_titpanel .ranking_front .ranking .image img {
      					width: 90%;
      					border-radius: 50%;
      					top: 50%;
      					left: 50%;
      					transform: translate(-50%, -50%); }
      			.ranking_titpanel .ranking_front .ranking .ranklogo {
      				position: absolute;
      				bottom: 0;
      				left: 50%;
      				transform: translate(-50%, 40%);
      				width: .533333rem;
      				height: .533333rem;
      				background-image: linear-gradient(to bottom, #FFFFFF, #c5c5c5);
      				border-radius: 50%;
      				line-height: .533333rem; }
      	.ranking_titpanel .table {
      		width: 100%;
      		height: 3.02rem;
      		margin: .64rem auto 0;
      		border-radius: .213333rem 0 0 0;
      		background-image: linear-gradient(to bottom, #ffc400, #ffd500); }
      		.ranking_titpanel .table .mt12 {
      			margin-top: .32rem; }
      	.ranking_titpanel .frist {
      		width: 2.026667rem !important;
      		height: 2.026667rem !important;
      		background-image: linear-gradient(to bottom, #ffc400, #EEB031) !important; }
      		.ranking_titpanel .frist .ranklogo {
      			background-image: linear-gradient(to bottom, #FFD971, #EEB031) !important; }
      	.ranking_titpanel .firsttable {
      		border-radius: .213333rem .213333rem 0 0; }
      	.ranking_titpanel .third {
      		background-image: linear-gradient(to bottom, #F3BB6D, #C18135) !important; }
      		.ranking_titpanel .third .ranklogo {
      			background-image: linear-gradient(to bottom, #f3c27e, #e29f41) !important; }
      	.ranking_titpanel .thirdtable {
      		border-radius: 0 .213333rem 0 0; }
      
      .ranking_cell {
      	padding: 0 .426667rem;
      	height: 1.706667rem; }
      	.ranking_cell .van-cell__title {
      		line-height: 1.706667rem; }
      		.ranking_cell .van-cell__title .ranking_cell_img {
      			width: 1.066667rem;
      			height: 1.066667rem;
      			border-radius: 50%;
      			vertical-align: middle;
      			margin: 0 .426667rem; }
      	.ranking_cell .ranking_cell_money {
      		line-height: 1.706667rem; }
      .van-cell__title{flex:1.2;}
      .van-cell__value{flex:.5;}
      
    </style>
  </head>
  <body class="pb0">
    <div class="iphonetitle bgcstrong"></div>
    <div id="app" v-cloak>
      <van-sticky>
        <van-nav-bar class="bgcstrong whit_icon" title="开机排行榜" @click-left="goback" right-text="分享到" @click-right="sharebtn" left-arrow v-if="toptitleisshow" v-cloak>
          <template #left> 
            <van-icon name="arrow-left" color="#333" size="20"></van-icon>
          </template>
        </van-nav-bar>
      </van-sticky>
      <div ref="savecard">
        <div class="ranking_titpanel">
          <div class="title f12 tc">统计时间：{{date.StratTime}} - {{date.EndTime}}</div>
          <div class="ranking_front" :class="userlist.length === 1 ? 'ranking_iscenter':''">
            <div class="ranking rel" style="padding-top:1.8133rem;" v-if="userlist.length &gt; 1">
              <div class="image rel"><img class="sec abs" :src="userlist[1].HeadPhoto" alt="">
                <div class="ranklogo tc c333 b abs f12">2</div>
              </div>
              <div class="table tc ovh">
                <div class="f12 c333 mt8">{{userlist[1].RealName}}</div>
                <div class="f12 c333">{{userlist[1].MakerCode}}</div>
                <div class="f12 c333 mt8 tc ranking_balabce">{{userlist[1].OpenCount}}台</div>
              </div>
            </div>
            <div class="ranking rel" style="padding-top:1.1733rem;" v-if="userlist.length !== 0">
              <div class="image rel frist"><img class="sec abs" :src="userlist[0].HeadPhoto" alt="">
                <div class="ranklogo tc c333 b abs f12">1</div>
              </div>
              <div class="table firsttable tc ovh">
                <div class="f12 c333 mt8">{{userlist[0].RealName}}</div>
                <div class="f12 c333">{{userlist[0].MakerCode}}</div>
                <div class="f12 c333 mt8 tc ranking_balabce">{{userlist[0].OpenCount}}台</div>
              </div>
            </div>
            <div class="ranking rel" style="padding-top:2.1333rem;" v-if="userlist.length &gt; 2">
              <div class="image rel third"><img class="sec abs" :src="userlist[2].HeadPhoto" alt="">
                <div class="ranklogo tc c333 b abs f12">3</div>
              </div>
              <div class="table thirdtable tc ovh">
                <div class="f12 c333 mt8">{{userlist[2].RealName}}</div>
                <div class="f12 c333">{{userlist[2].MakerCode}}</div>
                <div class="f12 c333 mt8 tc ranking_balabce">{{userlist[2].OpenCount}}台</div>
              </div>
            </div>
          </div>
        </div>
        <van-cell class="ranking_cell" v-for="item,index in behinduser" :key="item.UserId">
          <template #title><span>{{index + 4}}</span><img class="ranking_cell_img" :src="item.HeadPhoto" alt=""><span class="mr8 f14">{{item.RealName}}</span><span>{{item.MakerCode}}</span></template>
          <template #default>
            <div class="ranking_cell_money ranking_balabce">{{item.OpenCount}}台</div>
          </template>
        </van-cell>
      </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 {
      			date:{},
      			pageinfo:{
      				PageSize:10,
      				PageNum:1
      			},
      			userlist:[
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      				{OpenCount:0,HeadPhoto:'',MakerCode:'',RealName:''},
      			],
      			show:false,
      			InvitePhoto:'',
      			toptitleisshow:true,
      			options: [
      				{ name: '微信', icon: 'wechat' },
      				{ name: '微信朋友圈', icon: 'wechat-moments' },
      			],
      			Base64:'',
      		}
      	},
      	created(){
      		this.getrankinglist();
      	},
      	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});
      		},
      		//- 分享
      		async sharebtn(){
      			//- this.saveimg();
      			this.show = true;
      			this.Base64 = await this.convertToImage(this.$refs.savecard);
      		},
      		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>