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="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 scale1-11 {
      	0% {
      		transform: scale(.9);
      	}
      	100% {
      		transform: scale(1);
      	}
      }
      @keyframes transX {
      	0% {
      		transform: translateX(0);
      	}
      	100% {
      		transform: translateX(-100vw);
      	}
      }
      @keyframes -transX {
      	0% {
      		transform: translateX(-100vw);
      	}
      	80% {
      		transform: translateX(0);
      	}
      	100% {
      		transform: translateX(0);
      	}
      }
      @keyframes transY {
      	0% {
      		transform: translateY(18px);
      	}
      	100% {
      		transform: translateY(0px) ;
      	}
      }
      @keyframes -transY {
      	0% {
      		transform: translateY(0px);
      		opacity:1;
      	}
      	70% {
      		transform: translateY(16px);
      		opacity:1;
      	}
      	90% {
      		transform: translateY(16px);
      		opacity:.5;
      	}
      	100% {
      		transform: translateY(18px);
      		opacity:0;
      	}
      }
      .transimg{
      	animation: transX .5s ease-in-out;
      	animation-fill-mode:forwards;
      }
      .openimg{
      	animation: scale1-11 .5s ease-in-out;
      }
      .transimgy{
      	animation: transY .5s ease-in-out;
      	animation-fill-mode:forwards;
      }
      .-transimg{
      	animation: -transX .5s ease-in-out;
      }
      .-transimgy{
      	animation: -transY .5s ease-in-out;
      }
      .z-in{z-index:999;}
      .invited-new .invited_title_panel .card .qrcode{
      	top:57%;
      }
      .iphonetitle{
      	opacity:0;
      	position:inherit !important;
      }
      .van-nav-bar{background-color:rgba(0,0,0,0);}
      .invited-new .bgimg img{filter:blur(30px);}
      .van-nav-bar__title{font-weight:normal;color:#333 !important;}
      .van-share-sheet__options{justify-content:space-around !important;}
    </style>
  </head>
  <body class="pb0 ovh invited-new pt0">
    <div class="iphonetitle"> </div>
    <div id="app" v-cloak>
      <van-nav-bar class="f14 mall_title f16" right-text="保存本地" title="邀请好友" @click-left="backbtn" @click-right="savelocal" left-arrow v-if="toptitleisshow" v-cloak>
        <template #left> 
          <van-icon name="arrow-left" color="#333" size="20"></van-icon>
        </template>
      </van-nav-bar>
      <div class="bgimg abs" style="opacity:1"><img :src="piclist[index2].PicPath" alt=""></div>
      <div class="invited_title_panel rel">
        <div class="card abs" style="height:auto;"></div>
        <div class="card abs invite-test" style="height:auto;z-index:999;" @touchstart="gtouchstart" @touchend="gtouchend">
          <div>
            <div class="abs showel" style="width:90%;height:93%;z-index:-8;top:10%;" ref="show1"></div>
            <div class="abs showel" style="width:80%;z-index:-9;height:96%;top:10%;" ref="show2"></div>
          </div>
          <div class="right abs arrow" @click="rightclick" style="z-index:1000;"><img class="abs" src="./static/images/invited-right.png" alt=""></div>
          <div class="left abs arrow" @click="leftclick" style="z-index:1000;"><img class="abs" src="./static/images/invited-left.png" alt=""></div>
          <div class="abs" style="top:0;width:100%; min-height:20vh" :class="rightclickan" v-cloak v-if="bgisshow"><img :src="piclist[index1].PicPath" alt="" style="border-radius:16px;z-index:11;">
            <div class="qrcode abs tc"><img :src="userinfo.InvitePhoto" alt="">
              <div class="f12 mt8" :class="index1 === 1? 'cfff' : 'c333'">{{userinfo.RealName}}</div>
              <div class="f12" style="white-space: nowrap;" :class="index1 === 1? 'cfff' : 'c333'">推荐码:{{userinfo.MakerCode}}</div>
            </div>
          </div>
          <div class="rel" :class="rightclickan1" v-cloak><img :src="piclist[index].PicPath" alt="" style="border-radius:16px;z-index:99;">
            <div class="qrcode abs tc"><img :src="userinfo.InvitePhoto" alt="">
              <div class="f12 mt8" :class="index === 1? 'cfff' : 'c333'">{{userinfo.RealName}}</div>
              <div class="f12" style="white-space: nowrap;" :class="index === 1? 'cfff' : 'c333'">推荐码:{{userinfo.MakerCode}}</div>
            </div>
          </div>
        </div>
      </div>
      <button class="abs invited_bottom_panel f14 c333" @click="sharebtn" style="border-radius:999px;z-index:999;">立即分享</button>
      <van-share-sheet v-model="show" title="立即分享给好友" :options="options" @select="weixin"></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>
      function OnStart(){
      	PublicLib.SetStatusBarStyle({type:'light', isShow:1});
      };
      //--- PublicLib.SetStatusBarStyle({type:'light', isShow:1});
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
      	el: '#app',
      	data() {
      		return {
      			options: [
      				{ name: '微信', icon: 'wechat' },
      				{ name: '微信朋友圈', icon: 'wechat-moments' },
      			],
      			bgisshow:true,
      			toptitleisshow:true,
      			userinfo:{},
      			piclist:[],
      			show:false,
      			picindex:0,
      			isclick:false,
      			leisclick:false,
      			upan:'',
      			rightbtn:'',
      			index:0,
      			index1:1,
      			index2:0,
      			pagX:0,
      			pagX1:0,
      		}
      	},
      	created() {
      		this.getuserinfo();
      		this.getpiclist();
      	},
      	computed:{
      		rightclickan(){
      			return this.upan;
      		},
      		rightclickan1(){
      			return this.rightbtn;
      		}
      	},
      	methods: {
      		rightclick(){
      			const that = this;
      			this.bgisshow = true;
      			if(!that.isclick){
      				if(that.index === (that.piclist.length - 1)){
      					that.index2 = 0;
      				}else{
      					that.index2++;
      				};
      				setTimeout(()=>{
      					if(that.index === (that.piclist.length - 1)){
      						that.index1 = 1;
      						that.index = 0;
      					}else{
      						that.index++;
      						that.index1++;
      						if(that.index1 === that.piclist.length){
      							that.index1 = 0;
      						};
      					};
      				},500);
      				setTimeout(()=>{
      					that.isclick = false;
      					that.upan = '';
      					that.rightbtn = '';
      					this.bgisshow = false;
      				},500);
      			};
      			that.upan = 'transimgy';
      			that.rightbtn = 'transimg';
      			that.isclick = true;
      		},
      		leftclick(){
      			const that = this;
      			this.bgisshow = true;
      			if(!that.isclick){
      				if(that.index === 0){
      					that.index2 = that.piclist.length;
      					that.index = that.piclist.length;
      				};
      				if(that.index1 === 0){
      					that.index1 = that.piclist.length;
      				};
      				that.index1--;
      				that.index2--;
      				that.index--;
      				setTimeout(()=>{
      					that.isclick = false;
      					that.upan = '';
      					that.rightbtn = '';
      					this.bgisshow = false;
      				},500);
      			};
      			that.rightbtn = '-transimg z-in';
      			that.upan = '-transimgy';
      			that.isclick = true;
      		},
      		gtouchstart(e){
      			this.pagX = e.changedTouches[0].clientX;
      		},
      		gtouchend(e){
      			this.pagX1 = e.changedTouches[0].clientX;
      			if((this.pagX1 - this.pagX) > 50){
      			this.leftclick();
      			};
      			if((this.pagX1 - this.pagX) < -50){
      			this.rightclick();
      			};
      		},
      		async getuserinfo(){
      			const Id = PublicLib.getCookieInfo('userId');
      			const res = await getRequest('api/v1/users/mycard?t='+Math.random(6),JSON.stringify({Id}));
      			if(res.status !== '1') tips('获取个人信息失败！请刷新重试');
      			//- 个人信息
      			this.userinfo = res.data;
      		},
      		async getpiclist(){
      			const Id = PublicLib.getCookieInfo('userId');
      			const res = await getRequest('api/v1/UserInviteFriends/InviteFriendsPhotoList?t='+Math.random(6),JSON.stringify({Id}));
      			if(res.status !== '1') tips('获取图片列表失败！请刷新重试');
      			this.piclist = res.data;
      		},
      		//- 后端图片合成方法
      		async putionvitedpic(){
      			const UserId = PublicLib.getCookieInfo('userId');
      			const res = await getRequest('api/v1/UserInviteFriends/InviteFriendsList?t='+Math.random(6),JSON.stringify({UserId,photoId:this.piclist[this.index].Id}));
      			if(res.status !== '1') tips(res.info);
      			return res.data.ReferenceQrCode;
      		},
      		pageindex(index){
      			this.picindex = index;
      		},
      		//- 点击保存
      		savelocal:undebounce(async function(){
      			const that = this;
      			PublicLib.SaveToSd({PicPath:await that.putionvitedpic()});
      			console.log(await that.putionvitedpic());
      		}),
      		//- 点击分享
      		sharebtn(){
      			this.show = true; 
      		},
      		//- 分享微信
      		async weixin(option){
      			const that = this;
      			if(option.name === '微信'){
      				PublicLib.ShareAppMessageImage({PicturePath:await that.putionvitedpic()});
      			}else{
      				PublicLib.ShareTimelineImage({PicturePath:await that.putionvitedpic()});
      			}
      			//- 好友
      		},
      		backbtn(){
      			PublicLib.GoBack({Level:1});
      		},
      
      	},
      });
    </script>
  </body>
</html>