menber-center/pages/initial/initial.vue

<template>
	<view class="app-login-page">
		<view class="app-login">
			<view class="app-icon u-m-b-30 ">
				<image src="http://www.gzrea.org.cn:8543/icon/wxmp/login-icon.png"
					mode="aspectFit" style="height: 80rpx;"></image>
			</view>
			<view class="app-title u-m-b-60">
				欢迎使用会员中心系统小程序
			</view>
			<view style="height: 25vh;">
				<u-button v-if="userBook" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="custom-button" style="width: 40px;" plain :hair-line="false">
					<view class="login-button">
						本机号码一键登录
					</view>
				</u-button>
				<u-button v-else class="custom-button" style="width: 40px;" plain :hair-line="false" @click="check">
					<view class="login-button">
						本机号码一键登录
					</view>
				</u-button>
				<view class="login-button other-button u-m-b-50 u-m-t-50" @click="toLogin">
					其他手机号/账号登录
				</view>
			</view>
			<view class="app-user-book  mb-30">
				<u-checkbox-group style="display: flex;justify-content: center;">
					<u-checkbox v-model="userBook" name="yes" shape="circle">我已阅读&#x300A;运营商一键登录服务协议&#x300B;</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<u-modal v-model="userBookModal" mask-close-able class="modal" show-cancel-button
			:title-style="{fontWeight: 'bold'}" @confirm="confirmModal">
			<view class="modal-content">
				为了更好地保障你的合法权益，进行下一步前，请阅读并同意
				<text class="content-a">&#x300A;运营商一键登录服务协议&#x300B;</text>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import { wxLoginOpenid, wxloginPhone } from '@/api/login.js'
	import {
		msg,
		msgSuccess
	} from "@/utils/common.js"
	import { ref } from 'vue'
	import {
		useAuthStore
	} from '@/store/authStore'
	import {
		me
	} from '@/api/user.js'
	const authStore = useAuthStore()
	const userBook = ref(false)
	const userBookModal = ref(false)
	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	async function wxlogin(){
		
		
		const loginRes = await wx.login();
		const code = loginRes.code;
		wxLoginOpenid({code}).then(res=>{
			if(res?.data){
				const { openid, sessionKey } = res.data
				
			}
		})
	}
	
	function confirmModal() {
		userBook.value = true
		// this.wxlogin()
	}
	
	function checkUserBook() {
		if (!userBook.value) {
			userBookModal.value = true
			return false;
		}
		return true
	}
	
	function check(){
		if (!checkUserBook()) return;
	}
	
	async function decryptPhoneNumber(e){
		if (e.detail.encryptedData) {
			const {
				encryptedData,
				iv,
				code
			} = e.detail;
			const loginRes = await wx.login();
			const wxcode = loginRes.code;
			try{
				const openidRes = await wxLoginOpenid({code : wxcode})
				if(openidRes?.data){
					const { openid, sessionKey } = openidRes.data
					authStore.setOpenid(openid);
					const phoneRes = await wxloginPhone({ openid, phoneCode: code})
					const { phone, isNewUser } = phoneRes.data;
					authStore.setPhone(phone);
					// uni.reLaunch({
					// 	url: "/pages/register/register?mode=refine"
					// })
					if(isNewUser){
						//新用户，跳转：完善用户信息
						// console.log("完善用户信息")
						uni.reLaunch({
							url: "/pages/register/register?mode=refine"
						})
					}else{
						const { token } = phoneRes.data;
						authStore.setAuthToken(token);
						// 老用户，跳转至：首页
						msgSuccess("授权成功！")
						let userRes = await me();
						if(userRes && userRes?.code===0){
							authStore.setUserInfo(userRes.data)
							setTimeout(()=>{
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 1000)
						}
					}
				}
			}catch(err){
				console.log("ee", err)
			}
			
			// 将 encryptedData 和 iv 发送到后端进行解密
		} else {
			msg('取消授权手机号');
		}
	}
</script>
<style lang="scss">
	.form-item .u-input--border {
		border-radius: 16rpx !important;
	}

	.custom-button {
		.u-btn {
			display: block !important;
			width: fit-content;
			padding: 0 !important;
			border-radius: 50rpx;
		}

		.u-btn--default {
			border: none !important;
			background-color: transparent !important;
		}
	}
</style>
<style lang="scss" scoped>
	.app-login-page {
		background-color: #ffffff;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.app-login {
		width: 90%;
	}

	.app-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		text-align: center;
	}

	.app-title {
		text-align: center;
		font-size: 44rpx;
		letter-spacing: 2px;
		font-weight: 700;
	}

	.mb-30 {
		margin-bottom: 30rpx;
	}
	
	.login-button {
		background: linear-gradient(90deg, #006af5, #21b0fc);
		border-radius: 20rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin-bottom: 50rpx;
		width: 550rpx;
		margin: 0 auto;
		font-size: 32rpx;
		letter-spacing: 4rpx;
	}
	.other-button{
		color: #006af5;
		background: #e5e5e5;
	}
	
	// 用户手册模拟态
	.modal {
		.modal-content {
			padding: 50rpx;
	
			.content-a {
				color: #2979ff;
			}
		}
	}
</style>