<template>

	<web-view :src="url" v-if="!showPhone"></web-view>
		<view v-else class="indexassembly" >
			<u-popup v-model="showPhone" mode="center" length="auto">
				<view style="width: 70vw;" class="mask">
					<view
						style="width: 100vw;background: #FFF;display: flex;flex-direction: column;align-items: center;padding-bottom: 20px;border-radius: 8px;">
						<view
							style="width: 100%;height: 45px;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #EBEBEB;color: #111111;">
							手机号授权
						</view>
						<image :src="obj.Photo" style="width: 120rpx;height: 120rpx;border-radius: 50%;margin-top: 15px;">
						</image>
						<text style="margin-top: 5px;font-size: 13px;color: #111111;">申请获取您微信绑定的手机号码</text>
						<view class="btn">获取手机号
							<button type="default" open-type="getPhoneNumber" v-if="showLogin == true"
								style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;"
								@getphonenumber=" decryptPhoneNumber"></button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false,
				showPhone:true,
				showLogin: true, //多次点击
				show3:false,
				url: "",
				obj: {
					iv: '',
					encryptedData: '',
					phoneNum: '',
					code: ''
				}
			}
		},
		onShow() {
			this.getCode()
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.url = decodeURIComponent(option.u)
			if(option.auth){
				this.showPhone =true
			} else {
				this.showPhone =false
			}
		},
		methods: {
			getUserProfile() {
								//新的获取用户资料
					var that = this;
					wx.getUserProfile({
						desc: "用于完善资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (info) => {
							this.showPhone = true; //显示获取手机号码弹窗
						},
						fail: () => {
							uni.showToast({
								title: "微信登录授权失败",
								icon: "none",
							});
						},
					});
				},
			getCode() { //获取code
			let that =this 
				uni.getProvider({
					service: "oauth",
					success: function(res) {
						if (~res.provider.indexOf("weixin")) {
							uni.login({
								provider: "weixin",
								success: (res) => {
									//获取code
									that.obj.code = res.code
									// console.log('code',res)
								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none",
									});
								},
							});
						} else {
							uni.showToast({
								title: "请先安装微信或升级版本",
								icon: "none",
							});
						}
					},
				});
			},
			decryptPhoneNumber(e) { //授权手机号码
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用户点击拒绝
					uni.showToast({
						title: "微信手机号码授权失败",
						icon: "none",
					});
				} else { //授权通过
					console.log(e)
					this.obj.iv = e.detail.iv
					this.obj.encryptedData = e.detail.encryptedData
					// console.log('kkkk',e.detail)
					this.parsePhoneNum(this.obj.encryptedData, this.obj.iv, this.obj.code)
				}
			},
			// 跳转
			goUrl(url) {
				console.log('跳转l')
			    uni.redirectTo({
			      url: "/pages/webbox/webbox?u=" + encodeURIComponent(url)
			    });
			},
			// 解密手机号
			 parsePhoneNum(encryptedData, iv, code) {
				 let that =this
				this.request2(
				  {
				   url: "/api/AppletLogin/GetGuestWeiXinMobile",
				   data: {
				    encryptedData:this.obj.encryptedData,
				     iv:this.obj.iv,
				     code:this.obj.code,
				   },
				  },
				  (res) => {
				    if (res.resultCode == 1) {
						that.obj.phoneNum =JSON.parse(res.data).phoneNumber
						let urls =`https://jj.kookaku.com?phoneNum=${that.obj.phoneNum}`
						that.url=decodeURIComponent(urls)
						that.showPhone =false
						console.log('要跳转的链接',that.url)
						// that.goUrl(`https://jj.kookaku.com?phoneNum=${that.obj.phoneNum}`)
				    }
				  }
				);
			},
		}
	}
</script>

<style>
.mask{
		display: flex;
		justify-content: center;
	}
.indexassembly {
		line-height: 90rpx;
		position: relative;
	}
		.btn {
			/* margin: auto; */
			    width: 159px;
			    height: 50px;
			    background: #FA5B23;
			    box-shadow: 0px 2px 0px 0px rgba(128, 3, 14, 0.24), 0px 5px 0px 0px rgba(0, 0, 0, 0.16);
			    border-radius: 25px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    font-size: 15px;
			    font-family: PingFang SC;
			    font-weight: 500;
			    color: #FFFFFF;
			/* width: 60vw;
			height: 60rpx;
			border-radius: 30rpx;
			background: #4C50E7;
			font-size: 14px;
			color: #FA5B23;
			display: flex;
			align-items: center;
			justify-content: center; */
			margin-top: 20px;
			position: relative;
		}
</style>
