ylrz_scrm_company_h5/pages/user/users/becomeVIP.vue

<template>
	<view class="content hb column justify-center align-center bgf">
		<image src="https://fbylive.obs.cn-southwest-2.myhuaweicloud.com/app/image/becomevip.png" mode="widthFix"></image>
		<view class="bold">成为会员，享受更多权益</view>
		<!--#ifdef H5-->
		<view class="sure" @click="registerCourse">{{isVip==1?'您已成为会员':viptext}}</view>
		<!--#endif-->
		<!--#ifdef MP-WEIXIN-->
		<view class="btns">
			<button
				class="author-btn"
				open-type="getPhoneNumber"
				@getphonenumber="phoneLogin"  >{{isVip==1?'您已成为会员':'申请成为会员'}}</button>
			<button class="author-btn" v-if="isVip==1 || isbecomevip==1" @click="handleAgree()">{{viptext}}</button>
		</view>
		<!--#endif-->
		<view class="footer-tips">重庆云联融智提供技术支持</view>
	</view>
</template>

<script>
	import { loginByMp,registerCourses,loginByMiniApp} from '@/api/user'
	export default {
		data() {
			return {
				isVip: 0,
				isWechat: false,
				isLogin: false,
				companyid:'',
				companyUserId:'',
				userInfo:{},
				tagIds:[],
				isbecomevip:0,
				viptext:'申请成为会员'
			}
		},
		onLoad(option) {
			if(uni.getStorageSync('userInfo')&&JSON.stringify(uni.getStorageSync('userInfo'))!='{}') {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			} else {
				this.userInfo = {}
			}
			// this.userInfo=JSON.parse(uni.getStorageSync('userInfo')) || {};
			//#ifdef MP-WEIXIN
			let obj=uni.getStorageSync('AppToken_MYfby');
			//#endif
			// #ifdef H5
			let obj=uni.getStorageSync('TOKEN_KEY');
			// #endif
			// let obj=uni.getStorageSync('AppToken');
			this.isLogin = !!obj;
			this.companyid = option.companyId || ''
			this.companyUserId=option.companyUserId || 0
			if(option.tagids=="null"){
				this.tagIds=[]
			}else{
				this.tagIds=option.tagids 
				const arr =this.tagIds.split("，")
				  .map(item => parseInt(item.trim(), 10))
				  .filter(num => !isNaN(num)); // 过滤无效转换
				  this.tagIds =arr
				console.log(this.tagIds); // [66, 78]
			}
			this.isWechat = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger"
			this.code = option.code
				// #ifdef H5
				if(this.code&&!this.isLogin) {
					this.loginByMp()
				}
				// #endif
		},
		onShow() {
			if(uni.getStorageSync('userInfo')&&JSON.stringify(uni.getStorageSync('userInfo'))!='{}') {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			} else {
				this.userInfo = {}
			}
			//#ifdef MP-WEIXIN
			let obj=uni.getStorageSync('AppToken_MYfby');
			//#endif
			// #ifdef H5
			let obj=uni.getStorageSync('TOKEN_KEY');
			// #endif
			this.isLogin = !!obj;
			if(this.isLogin&&this.isVip!=1) {
				this.registerCourse()
			}
			
		},
		methods: {
			handleAgree(){
				if(this.isVip==1){
					uni.showToast({
						title: '您已成为会员!',
						icon: 'none',
						duration: 2000,
					})
				}else{
					uni.showToast({
						title: this.viptext,
						icon: 'none',
						duration: 2000,
					})
				}
				
			},
			// 微信用户手机号登录
			phoneLogin(e) {
				var that=this;
				uni.showLoading({
					title:"处理中..."
				})
					if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
						this.utils.getProvider()
						.then(provider => {
							if (!provider) {
							  reject()
							}
							// uni登录
							uni.login({
								provider: provider,
								success: async loginRes => {
									console.log(loginRes)
									let code = loginRes.code // 获取开发code
									loginByMiniApp({
									   encryptedData: e.mp.detail.encryptedData,
									   iv: e.mp.detail.iv,
									   code: code,
									})
									.then( res => {
										if(res.code==200){
											console.log(res)
											uni.hideLoading();
											uni.showToast({
												icon:'none',
												title: "登录成功",
											});
											uni.setStorageSync('AppToken_MYfby', res.token);
											uni.setStorageSync('userInfo', JSON.stringify(res.user));
											this.userInfo=res.user;
											uni.hideLoading()
											this.isLogin = true
											setTimeout(()=>{
												this.registerCourse()
											},200)
										}
										else{
											uni.hideLoading();
											uni.showToast({
												icon:'none',
												title: "授权登录失败,请重新登录",
											});
										}
									   
									 })
								}
							})
						})
						.catch(err => {
							uni.showToast({
								icon:'none',
								title: err,
							});
						})
						 
					} else {
						uni.showToast({
							title: '已拒绝授权',
							icon: 'none',
							duration: 2000,
						})
					}
			},
			getWechatCode() {
				if (this.isWechat) {
					let appid = "wx961fadab9bcb792b"; //微信APPid
					let code = this.getUrlCode().code; //是否存在code
					let local = window.location.href;
					if (code == null || code === "") {

						let urlPaths = local.split("/registerCourse");
						uni.setStorageSync('beforLoginPage', urlPaths[1]);

						//不存在就打开上面的地址进行授权
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
							appid +
							"&redirect_uri=" +
							encodeURIComponent(local) +
							"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
					} else {
						this.code = code;
						this.loginByMp()
					}
				}else{
					uni.showToast({
						title: '请在微信浏览器中打开',
						icon:'error'
					})
				}
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				return theRequest;
			},
			loginByMp() {
				if (this.code == null) {
					return;
				}
				uni.showLoading({
					title: "处理中..."
				});
				loginByMp({code:this.code}).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.setStorageSync('TOKEN_KEY', res.token);
							uni.setStorageSync('userInfo', JSON.stringify(res.user));
							this.userInfo= res.user
							let beforLoginUrl = uni.getStorageSync('beforLoginPage');
							this.isLogin = true
							this.registerCourse()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					err => {}
				);
			},
			// 成为会员
			registerCourse() {
				this.isVip = 0
				// 确保从本地存储重新获取最新数据
				  // if(uni.getStorageSync('userInfo')){
				  // 	this.userInfo=JSON.parse(uni.getStorageSync('userInfo'));
				  // }
				  // if (!this.userInfo.userId) {
				  // 	// 空值检查
				  //   uni.showToast({ title: '用户未登录或信息不完整', icon: 'none' });
				  //   return;
				  // }
				  if(this.tagIds==null){
					  this.tagIds=""
				  }
				  console.log(this.tagIds)
				const data={
					userId:this.userInfo.userId,
					companyUserId:this.companyUserId,
					companyId:this.companyid,
					tagIds:this.tagIds
					}
				if(this.isLogin) {
					registerCourses(data).then(res=>{
						if(res.code == 200) {
							this.isVip = 1
							this.isbecomevip=1
							this.viptext='您已成为会员'
							uni.showToast({
								title: '您已成为会员,',
								icon:'none'
							})
						} else {
							this.isbecomevip=1
							console.log(this.isbecomevip)
							this.viptext=res.msg
							uni.showToast({
								icon:'none',
								title: res.msg
							})
						}
					})
				} else {
					// #ifdef H5
					this.getWechatCode()
					// #endif
					
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.footer-tips {
			// margin-top: 14rpx;
			position: fixed;
			width: 100%;
			bottom: 44rpx;
			text-align: center;
			font-family: PingFang SC,PingFang SC;
			font-weight: 500;
			font-size: 12px;
			color: #bbb;
			transform: scale(0.8); 
		}
	.content {
		image {
			width: 300rpx;
			height: 300rpx;
		}
	}
	.bold {
		color: #999;
		font-size: 16px;
		height: auto;
		line-height: inherit;
		margin-bottom: 0;
		width: 304px;
		word-break: break-all;
		text-align: center;
		margin: 50rpx 0 100rpx 0;
	}
	.sure {
		width: 500rpx;
		background-color: #1777ff;
		line-height: 88rpx;
		text-align: center;
		border-radius: 8rpx;
		color: #fff;
	}
	.btns{
		position: relative;
		width: 630rpx;
		height: 80rpx;
		.author-btn{				
			z-index:100;
			position: absolute;
			width: 630rpx;
			height: 80rpx;
			background: #1777ff;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>