JP-ChargeTeam51/pages/user/InviteFriends.vue

<template>
	<view class="all">
		<u-mask :show="show" @click="show = false">
				<u-image width="100%" height="1000rpx"  :mode="'widthFix'"  src="@/assets/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="298rpx" height="64rpx" src="@/assets/static/img/logo3Ud.png"></u-image>
				
				<u-image  width="350rpx"  style="margin-top: 28rpx ;"
				height="142rpx" src="@/assets/img/20250625/info3-1.png"></u-image>
				
				<u-image class="textImg" style="margin-top: 10rpx ;"
				 width="664rpx" height="90rpx" src="@/assets/static/img/text-1.png"></u-image>
				<u-image width="100%" height="320rpx" src="@/assets/static/img/handshake.png"></u-image>
			</view>
		
			<view class="InviteFriends-main">

				
				<view class="InviteFriends-reward" style="padding-bottom: 40rpx ;" >
					<img id="qrcode" style="display: none;">
					
					<view class="reward-main" style="text-align:center;" >
						<img id="qrcode2" :src="qrCodeImg">
						
						
						<view class="qrcode3" >扫码关注公众号  注册会员享优惠</view>
						
					</view>
				</view>
				
				<view class="InviteFriends-coupons">
					<view class="h4">每邀请1位好友注册，</view>
					<view class="h4">将获得1张服务费代金券</view>
					
					<view class="coupons-price">
						<h2>{{availableAmount}}</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.好友注册并登录{{projectName}}</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.和好友一起领<span style=" color: #FF9600;">{{availableAmount}}</span>元服务费代金券</p>
					</view>
					<view class="InviteFriends-tips">
						<span>*</span><p>邀请成功，你和好友各得{{availableAmount}}元服务费代金券，一年有效；邀请更多人，你可领最高200元服务费代金券</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?(amount):'0'}}</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-foot">
					*本活动最终解释权，归{{projectName}}所有。
				</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: 30rpx;"
			
			>请关注<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:"",
				availableAmount:2,
				
			}
		},
		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: 175,
				height: 175,
				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 = process.car.gzUrl;
				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
							this.availableAmount=res.data.availableAmount
							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 ="http://oss.xiaoxinda.com/charging/chargingconfigure/2022/6/6/ec228c56-487a-4ae1-ac6f-37284060fbba/hongbao.jpg"
				// 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;
				var  _this=this
				
				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: 72rpx;
		.textImg{
			margin:40rpx 0 20rpx;
		}
	}
	.opacityClass{
		    opacity: 0.2;
	}
	.InviteFriends-main{
		margin-top: 10rpx;
		padding: 0 58rpx;
	}
	.InviteFriends-coupons{
		background-color: #fff;
		border-radius: 40rpx;
		padding: 40rpx;
		.h4{
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 16rpx;
		}
		.coupons-price{
			display: flex;
			justify-content: center;
			align-items: flex-end;
			margin-bottom: 36rpx;
			h2{
				@include themeify{
					font-size: themed('font-size17');
					line-height:themed('font-size17')
				}

				color:#FF9600;
			}
			span{
				@include themeify{
					font-size: themed('font-size4');
 				}

				margin-left: 4rpx;
			}
		}
		.coupons-line{
			height: 1px;
			border-bottom: 1px dashed #cacaca;
			position: relative;
			&:before{
				content: '';
				position: absolute;
				height: 30rpx;
				width: 30rpx;
				background-color:#2dc67f ;
				border-radius: 50%;
				left:-54rpx;
				top:-14rpx;
			}
			&:after{
				content: '';
				position: absolute;
				height: 30rpx;
				width: 30rpx;
				background-color:#2dc67f ;
				border-radius: 50%;
				right:-54rpx;
				top:-14rpx;
			}
		}
		.coupons-btn{
			background-color: #FF9600;
			margin-top: 40rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
		

			font-size: 40rpx;
			color:#fff;
			span{
				margin-left: 32rpx;
			}
		}
	}
	.InviteFriends-title{
		color:#fff;
		margin: 80rpx 0 48rpx;
		@include themeify{
			font-size: themed('font-size4');
		}

	}
	.InviteFriends-info{
		background-color: #fff;
		border-radius: 40rpx;
		padding: 40rpx;
		.InviteFriends-info-row{
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			&:last-child{
				margin-bottom: 0;
			}
			p{
				margin-left: 24rpx;
				@include themeify{
					font-size: themed('font-size3');
				}
 
			}
		}
	}
	.InviteFriends-tips{
		padding-left:60rpx;
		margin-top: -32rpx;
		span{
			float: left;
			color:#FF1C1C;
		}
		p{
			color:#999;
		}
	}
	.reward-head{
		background-color: #00B962;
		border-radius: 32rpx 32rpx 0 0;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 0 40rpx;
		margin: 0 8rpx;
		p{
			color:#fff;
/*			;*/
			font-size: 36rpx
		}
		.reward-head-price{
			color:#fff;
			display: flex;
			align-items: flex-end;
			h2{
				@include themeify{
					font-size: themed('font-size13');
					line-height: themed('font-size13');
					
				}

				margin-right: 4rpx;
			}
		}
	}
	.reward-main{
		background-color: #fff;
		border-radius: 32rpx;
		padding: 48rpx;
		margin-top: -8rpx;
		
		
	}
	.reward-list{
	 
		.reward-list-title{
			
			font-size: 40rpx;
			margin-bottom: 40rpx;
		}
		.rewardList-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;
			span{
				margin-left: 24rpx;
 
				@include themeify{
					font-size: themed('font-size3');
 				}
			}
			p{
				color:#999;
			}
		}
	}
	.InviteFriends-foot{
		text-align: center;
		color:#2A9563;
		padding: 40rpx 0 128rpx;
	}
	.qrcode3{
		color: rgba(16, 16, 16, 1);
		font-size: 32rpx;
		margin-top: 24rpx;
		
	}
	
</style>