分享

//jweixin-1.4.0   一定要下载这个版本  踩过坑

<template>
	<view class="container">
		<view class="content">
			<!-- <view :style="styleobj1" class="topContent"> -->
			<view class="topContent">
				<view class="couponBox hide">
					<view class="tipsText">
						好友得新人礼，我得奖励 
					</view>	
					<view class="quans">
						<view class="quan1 Cfff">
							<view class="fs28 tac lh70">无门槛</view>
							<view class="tac">
								<text class="fs30">￥</text>
								<text class="fs50 fw400">5</text>
							</view>
						</view>
						<view class="quan2 Cfff">
							<view class="fs28 tac lh70">满35可用</view>
							<view class="tac">
								<text class="fs30">￥</text>
								<text class="fs50 fw400">10 </text>
								<text class="fs20"> (仅生鲜)</text>
							</view>
						</view>
					</view>				
				</view>
				<image :src="topImg" style=" 100%;height: 510upx;" mode=""></image>
			</view>
			<view class="step">
				<text>①发送邀请给好友</text>
				<text>②好友下单并收货</text>
				<text>③奖励到账</text>
			</view>
			
			<view style="100%;height:65upx;overflow: hidden;" class="">
				<view class="page-section-spacing">
					<swiper class="swiper1" 
						vertical="true"
						:circular="circular"
						:indicator-dots="indicatorDots"
						autoplay="true" 
						interval="4000" 
						duration="400"	>					
						<swiper-item v-for="(item,index) in invite_log" :key="index">								
							<view class="tipsBox">
								{{hiddenTel(item.p_member_name,3,3)}}成功邀请{{hiddenTel(item.member_name,3,3)}},获取{{item.value}}积分
								<!-- {{item.p_member_name}}成功邀请{{item.member_name}},获取{{item.value}}积分 -->
							</view>
						</swiper-item>		
					</swiper>				
				</view>
			</view>	
			<view class="buttonBox">
				<!-- #ifdef H5 -->				
					<view  @click="H5Share" class="button">
						<image src="../../static/images/personalCenter/y2_wechat.png" mode=""></image>
						<text>立即邀请微信好友</text>					
					</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->				
					<button class="button" data-name="shareBtn" open-type="share">
						<image src="../../static/images/personalCenter/y2_wechat.png" mode=""></image>
						<text>立即邀请微信好友</text>					
					</button>
				<!-- #endif -->
			</view>
			
			
			<view class="share">
				<!-- #ifdef H5 -->
					<view @click="H5Share" class="friend">
						<image src="../../static/images/personalCenter/y2_pyq.png" mode=""></image>
						<text>分享到朋友圈</text>
					</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
					<view @click="noOpen" class="friend">
						<image src="../../static/images/personalCenter/y2_pyq.png" mode=""></image>
						<text>分享到朋友圈</text>
					</view>
				<!-- #endif -->
				
				
				
				<view @click="openCode" class="meet">
					<image src="../../static/images/personalCenter/y2_code.png" mode=""></image>
					<text>面对面邀请</text>
				</view>
			</view>
			<view style="height:20upx;background-color: #f1f1f1;"></view>
			<view class="person">
				<view class="tabBox">
					<view class="tabBoxs" @click="tabClick(1)">
						<text :class="{'active': index == 1}">我的邀请</text>
					</view>
					<view class="tabBoxs" @click="tabClick(2)">
						<text :class="{'active': index == 2}">活动规则</text>
					</view>
				</view>
				<view v-if="index == 1" class="box1">
					<view class="box2 box3 C7C7C7C fs26">
						<text>成功邀请</text>
						<text>{{my_invite}}人</text>
					</view>
					<view class="box2 C7C7C7C fs26">
						<text>获得积分</text>
						<text class="coupon">{{reward_num}}积分</text>
					</view>
				</view>
				<view v-if="index == 2">					
					<view v-html="invite_rule" class="plr20 pT20">
						
					</view>
				</view>
			</view>
			<view class="C999 tac 2h100">
				<!-- 没有更多了 -->
			</view>
		</view>
		
		<uni-popup ref="code" type="center">
			<view class="code">
				<image :src="code" mode=""></image>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	// #ifdef H5
	import WX from '@/node_modules/jweixin-wechat/jweixin-1.4.0';

	// #endif
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components:{
			uniPopup
		},
		data(){
			return {
				invite_rule:"",
				topImg:"",
				styleobj1:{},
				bgImg:"",
				indicatorDots:false,
				circular:true,	
				index:1,				
				curpage:1,
				my_invite:0,
				reward_num:0,
				invite_log:[],
				code:"",
				member_id:0,
				
			}
		},
		onShow() {
			// #ifdef H5
			    let that=this
				// let jweixin = require('jweixin-module') 								
				let surl = encodeURIComponent(window.location.href)
				// let surl = encodeURIComponent(window.location.href.split('?')[0]) || encodeURIComponent(window.location.href.split('#')[0]);
				// let surl = "https://qkg.aitecc.com/QKG/"
				console.log('surl')
				console.log(surl)
				this.$util.request({
						url: '/mobile/index.php?act=index&op=getWxApiConfig',
						method: 'get',
						data: {
							url: surl  
						},
					}).then((res)=> {						
						 if(res.error_code == 0){
							console.log(res.datas.signPackage.appId)
							console.log(res.datas.signPackage.timestamp)
							console.log(res.datas.signPackage.nonceStr)
							console.log(res.datas.signPackage.signature)
						
							
							// surl: surl+"/pages/home/home?scene="+that.member_id, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确  
							// jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]  
						 WX.config({  
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端console.log出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
							appId: res.datas.signPackage.appId, // 必填，公众号的唯一标识  
							timestamp: res.datas.signPackage.timestamp, // 必填，生成签名的时间戳  
							nonceStr: res.datas.signPackage.nonceStr, // 必填，生成签名的随机串  
							signature: res.datas.signPackage.signature, // 必填，签名，见附录1  
                             jsApiList:['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的js接口列表
						});  															
						WX.ready(function() { 
							console.log(1)
							//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）  
							WX.onMenuShareTimeline({  
								title: '好友分享', // 分享标题  
								desc: "分享注册", // 分享描述  
								link: "https://qkg.aitecc.com/QKG/#/pages/home/home?member_id="+that.member_id, // 分享链接  
								imgUrl: that.topImg, // 分享图标                                
								success: function() {  
									// 用户确认分享后执行的回调函数  
									 console.log(2)
								},  
								cancel: function() {  
									console.log(6)
									// 用户取消分享后执行的回调函数  
								}  
							});  
							//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）  
							WX.onMenuShareAppMessage({  
								title: '好友分享', // 分享标题  
								desc: "分享注册",
								link: "https://qkg.aitecc.com/QKG/#/pages/home/home?member_id="+that.member_id, // 分享链接  
								imgUrl: that.topImg, // 分享图标                                
								success: function() { 
									 console.log(3)
									// 用户确认分享后执行的回调函数  
								},  
								cancel: function() {  
									console.log(5)
									// 用户取消分享后执行的回调函数  
								}  
							});  
						console.log(4)
						});  
						
						 }else{
							uni.showToast({
								title:res.message,
								icon:"none"
							})
						}								
				})	
			// #endif
		},
		onLoad() {
			this.getData()
			this.getCode()
			this.member_id=uni.getStorageSync('api_member_id')		
			let that=this
			// #ifdef H5
			

			// #endif
			
		},
		onShareTimeline(){
			return {
				title: "邀请好友注册",
				path: '/pages/home/home?scene='+this.member_id,
				imageUrl:this.topImg
			}
		},
		onShareAppMessage() {
			return {
				title: "邀请好友注册",
				path: '/pages/home/home?scene='+this.member_id,
				imageUrl:this.topImg
			}
		},
		methods:{
			//H5分享
			H5Share(){
				uni.showToast({	
					title:"点击右上角可以分享哟",
					icon:"none"
				})
			},
			noOpen(){
				uni.showToast({
					title:"该功能暂未开放",
					icon:"none"
				})
			},
			hiddenTel(str,frontLen,endLen) { 
				// return false
			   var len = str.length-frontLen-endLen;
			   var xing = '';
			   for (var i=0;i<len;i++) {
			   xing+='*';
			  }
			   return str.substring(0,frontLen)+xing+str.substring(str.length-endLen);
			},
			openCode(){
				this.$refs.code.open()
			},
			getCode(){
				// 两个码
				let that=this
				this.$util.request({
					url: '/mobile/index.php?act=member_invite&op=faceToFace',
					method: 'post',
					data: {},
				}).then((res)=> {						
					 if(res.error_code == 0){	
						// #ifdef H5
							that.code=res.datas.public_url
						// #endif
						
						// #ifdef MP-WEIXIN
							that.code=res.datas.applet_url
						// #endif
					 }
				})
			},
			getData(){
				let that=this
				this.$util.request({
					url: '/mobile/index.php?act=member_invite&op=inviteIndex',
					method: 'post',
					data: {
						"curpage":this.curpage						
					},
				}).then((res)=> {						
					 if(res.error_code == 0){						
						that.invite_rule=res.datas.invite_rule
						that.my_invite=res.datas.my_invite
						that.reward_num=res.datas.reward_num
						that.invite_log=res.datas.invite_log
						that.invite_top_img=res.datas.invite_top_img
						// that.code=res.datas.invite_qrcode_url
						that.styleobj1.backgroundImage='url(' + res.datas.invite_top_img + ')'
						that.topImg=res.datas.invite_top_img						
					 }else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}									
				})	
			},
			tabClick(value){
				if(value == 1){
					this.index = 1
				}else{
					this.index = 2
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url('../../../common/commonCss/dfcCommon.css');
	page{
		font-size: 24upx;
	}
	.flex{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.container{
		 100%;
	}
	.content{
		 100%;
	}
	.topContent{
		position: relative;
		 100%;
		height: 510upx;
		// background: url(../../static/images/personalCenter/y2_bg.png) no-repeat 100%/100%;
		background-repeat: none;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.couponBox{
		margin-top: 270upx;
		 537upx;
		height: 196upx;
		box-sizing: border-box;
		position: relative;
		background: url(../../static/images/personalCenter/y2_bg2.png) no-repeat 100%/100%;
	}
	.tipsText{
		display:block;
		 353upx;
		padding: 20upx;
		text-align: center;
		box-sizing: border-box;
		background:rgba(251,78,51,1);
		box-shadow:3px -4px 10px 0px rgba(0, 0, 0, 0.08);
		border-radius:31upx;
		color:#fff;
		position: absolute;
		left: 50%;
		top: -50upx;
		transform: translateX(-50%);		
	}
	.step{
		display: flex;
		justify-content: space-around;
		background-color: #F6D372;
		padding: 20upx 0;
		box-sizing: border-box;
		color:#A5672C;
		font-size: 25upx;
	}
	.tipsBox{
		padding: 20upx 0;
		box-sizing: border-box;
		background-color: #fae5e2;
		color: #fe7a0d;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
	}
	.buttonBox{
		 100%;
		margin-top: 40upx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 60upx;
	}
	.buttonBox .button{
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 34upx;
		background-color: #f42221;
		padding: 0upx 120upx;
		box-sizing: border-box;
		color:#fff;
		border-radius: 92upx;
		
		image{
			margin-top: 2upx;
			 54upx;
			height: 50upx;
		}
	}
	.share{
		 100%;
		display: flex;
		font-size: 32upx;
	}
	.share .friend,.meet{
		flex:1;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		padding: 20upx 0;
		box-sizing: border-box;
		image{
			 38upx;
			height: 38upx;
			padding-right: 6upx;
		}
	}
	.person{
		 100%;
		display: flex;
		flex-flow: column;
	}
	.person .tabBox{
		 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #f4f4f4;
	}
	.person .tabBoxs{
		 100%;
		display: flex;
		align-items: center;
		justify-content:center;
	}
	.tabBoxs>text{
		font-size: 30upx;
		padding: 20upx 80upx;
		box-sizing: border-box;
		border-bottom: 2upx solid #fff;
	}
	.person .tabBoxs .active{
		color: #f42223;
		border-bottom : 4upx solid #f42223;
	}
	.box1{
		display: flex;
		border-bottom: 2upx solid #f4f4f4;
	}
	.box2{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
	}
	.box2>text{
		margin-top: 20upx;
	}
	.box2>text:last-child{
		margin-top: 20upx;
		margin-bottom: 20upx;
	}
	.box3{
		border-right: 2upx solid #f4f4f4;
	}
	.swiper1{
		height: 65upx;
	}
	.quans{		
		 537upx;
		height: 196upx;
		padding:35upx 45upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-content: center;
	}
	.quans view.quan1{
		background:url(../../static/images/personalCenter/y2_quan2.png) no-repeat;
		background-size: cover;
		position: relative;
		
	}
	.quans view.quan2{
		background:url(../../static/images/personalCenter/y2_quan1.png) no-repeat;
		position: relative;
		background-size: cover;
	}
	.quans>view{
		 206upx;
		height: 140upx;
	}
	.code{
		 360upx;
		height: 360upx;
		background-color: #fff;
	}
	.code image{
		 100%;
		height: 100%;
	}

</style>