页面跳转

pages/webbox/webbox.vue

 <template>
-	<web-view :src="url"></web-view>
+
+	<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 {
-				url: ""
+				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.showPhone =false
+						that.obj.phoneNum =JSON.parse(res.data).phoneNumber
+						let urls =`https://jj.kookaku.com?phoneNum=${that.obj.phoneNum}`
+						that.url=decodeURIComponent(urls)
+						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 {
+			width: 60vw;
+			height: 60rpx;
+			border-radius: 30rpx;
+			background: #4C50E7;
+			font-size: 14px;
+			color: #FFFEFE;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 20px;
+			position: relative;
+		}
 </style>