mahjong_group/pages/me/login.vue

<template>
	<view class="login-container">
		<view style="position: relative;top: 100rpx;display: flex;">
			<view style="flex: 2;display: flex;justify-content:center;">
				<image src="/static/back.png" style="width: 40rpx;height:40rpx;position: relative;top:10rpx;"
					mode="widthFix" @click="skipLogin"></image>
			</view>
			<view
				style="flex:10;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 40rpx;color: #000000;text-align: center;font-style: normal;text-transform: none;">
				登录
			</view>
			<view style="flex: 2;"></view>
		</view>
		<view class="login-form">
			<image src="@@:app/static/login/logo_5.png" style="width: 500rpx;height:500rpx;" mode="widthFix"></image>
		</view>
		<view class="login-button-container">

			<button v-if="agreedToTerms && isMobile" class="login-button" :class="{ disabled: loading }"
				open-type="getPhoneNumber" @getphonenumber="mobileClickLogin">
				<view class="login-button-text">{{ (loading ? '登录中...' : '一键登录') }}</view>
			</button>
			<button v-if="!agreedToTerms" class="login-button" :class="{ disabled: loading }"
				@click="agreementClickLogin">
				<view class="login-button-text">{{ (loading ? '登录中...' : '一键登录') }}</view>
			</button>
			<button v-if="agreedToTerms && !isMobile" class="login-button" :class="{ disabled: loading }"
				@click="anonymousLoginClickLogin">
				<view class="login-button-text">{{ (loading ? '登录中...' : '一键登录') }}</view>
			</button>
		</view>
		<view class="agreement-container">
			<view class="agreement-checkbox" @click="toggleAgreement">
				<checkbox :value="agreedToTerms" :checked="agreedToTerms"
					style="transform:scale(0.5);margin-top: -8rpx;position: relative;left: 8px;" />
				<text class="agreement-text">
					我已阅读并同意
					<text class="agreement-link" @click.stop="showUserAgreement">《用户协议》</text>
					和
					<text class="agreement-link" @click.stop="showPrivacyPolicy">《隐私政策》</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	computed
} from 'vue'
import { useLogin } from '@/common/com'
import { getAnonymousLogin, ueWxPhoneNumberLogin, useWxAnonymousLogin } from '@/common/server/interface/user'
import { userInfo, loadUserInfo } from '@/common/server/user'
// 响应式数据
const loading = ref(false)
const agreedToTerms = ref(false)

// 方法
const toggleAgreement = () => {
	agreedToTerms.value = !agreedToTerms.value
}

const agreementClickLogin = async () => {
	if (loading.value) return

	if (!agreedToTerms.value) {
		uni.showToast({
			title: '请先同意用户协议和隐私政策',
			icon: 'none'
		})
		return
	}
}
const mobileClickLogin = async (e) => {
	console.log(e) // 动态令牌
	console.log(e.detail.code) // 动态令牌
	var code = e.detail.code;
	loading.value = true
	try {
		// 这里调用一键登录API（如运营商一键登录）
		// const response = await oneClickLoginApi()
		var response = await ueWxPhoneNumberLogin(code, sessionAuthId);
		if (response == null) {
			uni.showToast({
				title: '登录失败，请重试',
				icon: 'error'
			})
			return;
		}
		uni.setStorageSync("tokenInfo", response);

		await loadUserInfo();
		uni.showToast({
			title: '登录成功',
			icon: 'success'
		});
		// 延迟跳转
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)

	} catch (error) {
		console.error('一键登录失败:', error)
		uni.showToast({
			title: '登录失败，请重试',
			icon: 'error'
		})
	} finally {
		loading.value = false
	}
}
const anonymousLoginClickLogin = async (e) => {
	console.log('aaa');
	loading.value = true
	try {
		// 这里调用一键登录API（如运营商一键登录）
		// const response = await oneClickLoginApi()
		var response = await useWxAnonymousLogin(sessionAuthId);
		if (response == null) {
			uni.showToast({
				title: '登录失败，请重试',
				icon: 'error'
			})
			return;
		}
		uni.setStorageSync("tokenInfo", response);
		await loadUserInfo();
		uni.showToast({
			title: '登录成功',
			icon: 'success'
		});
		// 延迟跳转
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)

	} catch (error) {
		console.error('一键登录失败:', error)
		uni.showToast({
			title: '登录失败，请重试',
			icon: 'error'
		})
	} finally {
		loading.value = false
	}
}

const skipLogin = () => {
	uni.navigateBack()
}

const showUserAgreement = () => {
	com.navigateToAgreement('userAgreement');

}

const showPrivacyPolicy = () => {
	com.navigateToAgreement('privacyPolicy');
}
let isMobile = ref(false);
let sessionAuthId = null;
async function AnonymousLogin() {
	var code = await useLogin();
	console.log("res", code);
	var res = await getAnonymousLogin(code);
	if (res.user == 0) {
		isMobile.value = true;
	}
	sessionAuthId = res.sessionAuthId;
}
onLoad(() => {
	AnonymousLogin();
	/* uni.login({
		
	}) */
})


</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background: #F7F7F7;
	width: 100%;
	height: 100%;
}


.login-form {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	padding-top: 400rpx;
}

.login-button {
	width: 642rpx;
	height: 80rpx;
	background: #00AC4E;
	box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.25);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
}

.login-button-text {

	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.login-button-container {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 280rpx;
	width: 100%;

	&.disabled {
		background: linear-gradient(135deg, #D3D3D3 0%, #A9A9A9 100%);
		color: #666;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

}

.agreement-container {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 180rpx;
	width: 100%;
}

.agreement-text {

	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #515151;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.agreement-link {
	color: #00AC4E;
}
</style>