JP-ChargeTeam51/pages/user/InviteFriends.vue

<template>
	<view class="all">
		<u-mask :show="show" @click="show = false">
				<u-image width="100%" height="500px"  :mode="'widthFix'"  src="/static/img/guide_point.png"></u-image>
				
		</u-mask>
		
		<ujp-navbar title="邀请好友"></ujp-navbar>
		<view class="InviteFriends" :class="{
			opacityClass:show
		}">
			<view class="InviteFriends-head">
				<u-image width="274rpx" height="60rpx" src="/static/img/logo3.png"></u-image>
				<u-image class="textImg" width="662rpx" height="59rpx" src="/static/img/text.png"></u-image>
				<u-image width="100%" height="320rpx" src="/static/img/handshake.png"></u-image>
			</view>
			<view class="InviteFriends-main">
				<view class="InviteFriends-coupons">
					<h4>每邀请1位好友注册，将获得1张服务费抵扣券</h4>
					<view class="coupons-price">
						<h2>5</h2><span>元</span>
					</view>
					<view class="coupons-line"></view>
					<view class="coupons-btn" @click="inviteFriendsBtn">
						<u-icon name="wechat-fill" custom-prefix="custom-icon" color="#fff" size="48"></u-icon>
						<span>分享至微信</span>
					</view>
				</view>
				<view class="InviteFriends-title">福利获取流程</view>
				<view class="InviteFriends-info">
					<view class="InviteFriends-info-row">
						<u-icon name="question-answer-fill" custom-prefix="custom-icon" color="#00B962" size="48"></u-icon>
						<p>1.发送链接给好友</p>
					</view>
					<view class="InviteFriends-info-row">
						<u-icon name="account-pin-circle-fill" custom-prefix="custom-icon" color="#00B962" size="48"></u-icon>
						<p>2.好友注册并登录51充电联盟</p>
					</view>
					<view class="InviteFriends-info-row">
						<u-icon name="gift-2-fill" custom-prefix="custom-icon" color="#00B962" size="48"></u-icon>
						<p>3.和好友一起领5元红包</p>
					</view>
					<view class="InviteFriends-tips">
						<span>*</span><p>邀请成功，你和好友各得5元红包，一年有效；邀请更多人，你可领最高500元红包</p>
					</view>
				</view>
				<view class="InviteFriends-title">我的奖励</view>
				<view class="InviteFriends-reward">
					<view class="reward-head">
						<p>成功邀请{{list?list.length:0}}人，已获得</p>
						<view class="reward-head-price">
							<h2>{{list?(list.length*5).toFixed(2):'0.00'}}</h2><span>元</span>
						</view>
					</view>
					<view class="reward-main">
						
						<view class="reward-list">
							<view class="reward-list-title">
								成功邀请记录
							</view>
							<view class="rewardList">
								
								<view class="rewardList-item" v-for="(item,i) in list" :key="i" >
									<view class="u-flex">
										<u-avatar :src="item.headImg" size="72"></u-avatar>
										<span v-text="substrMbName(item.nickName)"></span>
									</view>
									<p v-text="item.createTime"></p>
								</view>
								
							</view>
						</view>
					</view>
				</view>
				
				<view class="InviteFriends-title">我的二维码</view>
				<view class="InviteFriends-reward">
					
					<view class="reward-main" style="text-align:center;" >
						<img id="qrcode2" :src="qrCodeImg">
						
						
					</view>
					<img id="qrcode" style="display: none;">
					
				</view>
				
				<view class="InviteFriends-foot">
					*本活动最终解释权，归51充电联盟所有。
				</view>
			</view>
		</view>
		
		<u-modal v-model="show1" @confirm="gotoGz"
		cancel-text="暂不关注"  
		confirm-text="前往关注"
		
		 confirm-color="#53b56b"
			:show-cancel-button="true" 
			ref="uModal2" :asyncClose="true" 
			 >
			<view style="padding: 15px;"
			
			>请关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，以便第一时间收到充电结束消息提醒</view>
		</u-modal>
		
	</view>
</template>

<script>
	import jweixin from 'weixin-js-sdk'
	//var jweixin = require('jweixin-module')  
	import {
		convertCanvasToImage,substrMb
	} from '@/utils'
	import * as API_WeiXin from '@/apis/weixin'
	import * as API from '@/apis/friends.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import * as API_weixin from '@/apis/weixin.js'
	import QRCode from 'qrcodejs2'
	
	
	
	export default {
		data() {
			return {
				elderMode:false,
				id:"",
				qrCodeImg:"",
				code:"",
				show:false,
				amount:0,
				uid:"",
				list:[],
				show1:false,
				show2:false,
				projectName:"",
				
			}
		},
		onLoad(op) {
			this.projectName=process.car.ProjectName;
			
				this.id=op.id
				this.code=op.icode
				this.uid=op.uid
				//
				this.get_wx_config();
				
		},
		onReady(){
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
				
			var info=this.carhelp.getPersonInfo();
				
			let joinUrl = window.location.href.split("#")[0]+"#/?friends=friends&id="+this.id+"&icode="+this.code+"&uid="+info.id;
			//this.joinUrl=joinUrl;
			
			let qrcode = new QRCode('qrcode', {
				width: 200,
				height: 200,
				text: joinUrl,
				correctLevel: QRCode.CorrectLevel.M,
			
			})
			var canvas = document.getElementsByTagName('canvas')[0];
			this.qrCodeImg = convertCanvasToImage(canvas);
			
		},
		onShow() {
			
			//pages/user/InviteFriends?id=2&icode=FX&uid=731b9765-3565-4b3c-918b-5d3ec3b505fb
				if(this.show2){
					
				}
				this.onShowmethods()
			
				this.checkSubscribe()
				
		},
		methods: {
			gotoGz(){
				this.carhelp.setGzDate()
				var url="https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
				window.location.href=url
				
			},
			checkSubscribe(){
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId() 
				}).then((res) => {
					
					if(res.data=="0"){
						this.show1=true
						
					}else{
						//this.init();
						this.show2=true;
						//this.carhelp.setGzDate() 
						
						
					}
					
					//setGzDate
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			onShowmethods(){
				var info=this.carhelp.getPersonInfo();
				if(info){
					 
					
					this.inviteCouponList();
				}else{
					window.location= window.location.href.split("#")[0]+'#';
					var url="/?friends=friends&id="+this.id+"&icode="+this.code+"&uid="+this.uid;
					uni.redirectTo({
						url:url
					})
				}
			},
			theme(type) {
				
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 let data = {
				 	"font-size":'32rpx', 
				 	};
				 this.placeholderStyle = data;
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 let data = {
				 	"font-size":'28rpx'
				 	};
				 this.placeholderStyle = data;
			  } 
			},
			substrMbName(name){
				return substrMb(name,0,4)+'***'
			},
			inviteCouponList(){
						uni.showLoading({
							title: "加载中",
							mask: true,
						})
						API.inviteCouponList().then((res) => {
							this.list = res.data.regUserList
							this.amount=res.data.amount
						
							uni.hideLoading()
							
						}).catch(error => {
							uni.showToast({
								title: error
							})
						})
					},
			inviteFriendsBtn(){
				 this.show=true;
			},
			//获取微信jssdk配置信息
			get_wx_config() {
					//("get_wx_configget_wx_configget_wx_configget_wx_config")
				var _this=this
				API_WeiXin.getConfig().then(response => {
					var wxconfig = response.data.wxConfig;
				
					jweixin.config({
						debug: false, // 开启调试模式,
						appId: wxconfig.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
						timestamp: wxconfig.timestamp, // 必填，生成签名的时间戳
						nonceStr: wxconfig.nonceStr, // 必填，生成签名的随机串
						signature: wxconfig.signature, // 必填，签名，见附录1
						jsApiList:  ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					
					});
					_this.wxShare()
					jweixin.error(function(res) {
						//('微信api配置出错');
					});
				}).catch(error => {
					
						//(error);
				})
				 
			},
			//微信分享自定义
			wxShare() {
				var img = this.carhelp.getConfig().indexLogo
				// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
				// if (indexLogo) {
				// 	this.indexLogo = indexLogo;
				// }
				var info=this.carhelp.getPersonInfo()
				//var img=require("@/static/img/aboutus.png")
				////(this.nowItem);
				var ProjectName=process.car.ProjectName;//info.nickName+
				var nickName=info.nickName?info.nickName:'好友';
				var title=nickName+"邀请你一起领取新能源车充电红包"
				//"["+ProjectName+"]"+'和好友一起领5元红包'
			 	var desc=ProjectName
				let joinUrl = window.location.href.split("#")[0]+"#/?friends=friends&id="+this.id+"&icode="+this.code+"&uid="+info.id;
				//this.joinUrl=joinUrl;
				 
				
				jweixin.ready(function() {
					//("readyreadyreadyreadyready")
					jweixin.updateAppMessageShareData({
						title: title,
						desc:desc ,
						link: joinUrl,
						 imgUrl: img,
						success: function() {
							 //("updateAppMessageShareData")
							// 设置成功
							_this.$emit("wxShare",null);
						}
					})
					jweixin.updateTimelineShareData({
						title: title,
						desc:desc ,
						link: joinUrl,
						 imgUrl: img,
						success: function() {
								 //("updateTimelineShareData")
							// 设置成功
							_this.$emit("wxShare",null);
						}
					})
				});
			}
		}
	}
</script>
<style>
	page{
	}
</style>
<style lang="scss" scoped>
	@import "@/_theme.scss";
	.all{
		@include themeify{
			font-size: themed('font-size1');
		}
	}
	
	.InviteFriends{
		background-image: linear-gradient(0deg, #a2e9c9 , #01b963);

	}
	.InviteFriends-head{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 36px;
		.textImg{
			margin:20px 0 10px;
		}
	}
	.opacityClass{
		    opacity: 0.2;
	}
	.InviteFriends-main{
		padding: 0 32px;
	}
	.InviteFriends-coupons{
		background-color: #fff;
		border-radius: 20px;
		padding: 20px;
		h4{
			@include themeify{
				font-size: themed('font-size3');
			}
/*			font-size: 15px;*/
			font-weight: normal;
			text-align: center;
		}
		.coupons-price{
			display: flex;
			justify-content: center;
			align-items: flex-end;
			margin: 16px 0;
			h2{
				@include themeify{
					font-size: themed('font-size17');
					line-height:themed('font-size17')
				}
/*				
				font-size: 44px;
				line-height: 44px;*/
				color:#FF9600;
			}
			span{
				@include themeify{
					font-size: themed('font-size4');
 				}
/*				font-size: 18px;*/
				margin-left: 2px;
			}
		}
		.coupons-line{
			height: 1px;
			border-bottom: 1px dashed #cacaca;
			position: relative;
			&:before{
				content: '';
				position: absolute;
				height: 15px;
				width: 15px;
				background-color:#2dc67f ;
				border-radius: 50%;
				left:-27px;
				top:-7px;
			}
			&:after{
				content: '';
				position: absolute;
				height: 15px;
				width: 15px;
				background-color:#2dc67f ;
				border-radius: 50%;
				right:-27px;
				top:-7px;
			}
		}
		.coupons-btn{
			background-color: #FF9600;
			margin-top: 20px;
			height: 50px;
			text-align: center;
			line-height: 50px;
			border-radius: 25px;
			@include themeify{
				font-size: themed('font-size5');
			}

/*			font-size: 20px;*/
			color:#fff;
			span{
				margin-left: 8px;
			}
		}
	}
	.InviteFriends-title{
		color:#fff;
		margin: 40px 0 24px;
		@include themeify{
			font-size: themed('font-size4');
		}
/*		font-size: 18px;*/
	}
	.InviteFriends-info{
		background-color: #fff;
		border-radius: 20px;
		padding: 20px;
		.InviteFriends-info-row{
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			&:last-child{
				margin-bottom: 0;
			}
			p{
				margin-left: 12px;
				@include themeify{
					font-size: themed('font-size3');
				}
/*				font-size: 16px;*/
			}
		}
	}
	.InviteFriends-tips{
		padding-left:30px;
		margin-top: -16px;
		span{
			float: left;
			color:#FF1C1C;
		}
		p{
			color:#999;
		}
	}
	.reward-head{
		background-color: #00B962;
		border-radius: 16px 16px 0 0;
		height: 75px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		margin: 0 4px;
		p{
			color:#fff;
/*			font-size: 17px;*/
			@include themeify{
				font-size: themed('font-size4');
			}
		}
		.reward-head-price{
			color:#fff;
			display: flex;
			align-items: flex-end;
			h2{
				@include themeify{
					font-size: themed('font-size13');
					line-height: themed('font-size13');
					
				}
/*				font-size: 36px;
				line-height: 36px;*/
				margin-right: 2px;
			}
		}
	}
	.reward-main{
		background-color: #fff;
		border-radius: 16px;
		padding: 24px;
		margin-top: -4px;
		.reward-info{
			display: flex;
			justify-content: space-between;
			.reward-info-item{
				width: 122px;
				height: 122px;
				display: flex;
				flex-direction: column;
				align-items: center;
				border:1px solid  #CBE1D7 ;
				justify-content: center;
				border-radius: 12px;
			}
			p{
				@include themeify{
					font-size: themed('font-size3');
 				}
/*				font-size: 16px;*/
				color:#666;
				margin-bottom: 10px;
			}
			.reward-info-price{
				display: flex;
				align-items: flex-end;
				h2{
					@include themeify{
						font-size: themed('font-size17');
						line-height: themed('font-size17');
					}
/*	
					font-size: 44px;
					line-height: 44px;*/
					margin-right: 2px;
					color:#00B962;
				}	
			}
			.reward-info-item2{
				background-color:#E6EEEA;
				border: none;
				.reward-info-price h2{
					color:#333;
				}
			}
		}
		.reward-btn{
			height: 40px;
			width: 120px;
			border-radius: 20px;
			background-color: #00B962 ;
/*			line-height: 40px;*/
			color:#fff;
			text-align: center;
			@include themeify{
				font-size: themed('font-size4');
				line-height: themed('font-size15');
 			}
/*			font-size: 18px;*/
			margin: 20px auto;
		}
	}
	.reward-list{
		//border-top: 1px dashed #cacaca;
		padding-top: 20px;
		.reward-list-title{
			@include themeify{
				font-size: themed('font-size4');
 			}
/*			font-size: 18px;*/
			margin-bottom: 20px;
		}
		.rewardList-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12px;
			span{
				margin-left: 12px;
/*				font-size: 16px;*/
				@include themeify{
					font-size: themed('font-size3');
 				}
			}
			p{
				color:#999;
			}
		}
	}
	.InviteFriends-foot{
		text-align: center;
		color:#2A9563;
		padding: 20px 0 64px;
	}
</style>