Anti-fraud-mobile/pages/me/me.vue

<template>
	<view class="container">
		<view :style="{height: statusBarHeight + 'px'}"></view>
		<!-- 用户信息展示 -->
		<view class="user-section" @click="showLoginPopup = true">
			<text v-if="!userInfo.phone">欢迎登录</text>
			<text v-else>{{ userInfo.phone }}</text>
		</view>

		<!-- 登录弹窗 -->
		<view v-if="showLoginPopup" class="login-popup" @click="showLoginPopup = false">
			<view class="popup-content" @click.stop>
				<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="login-btn">
					一键登录
				</button>
			</view>
		</view>
		<!-- 底部导航 -->
		<Tabbar :current-page="4" />
	</view>
</template>

<script>
	import Tabbar from "@/components/Tabbar/index.vue";
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight,
				showLoginPopup: false,
				userInfo: {
					phone: ''
				}
			}
		},
		methods: {
			// 获取手机号回调
			async onGetPhoneNumber(e) {
				console.log(1111, e)
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					try {
						const {
							code,
							encryptedData,
							iv
						} = e.detail

						// 发送到后端解密
						const res = await uni.request({
							url: 'YOUR_BACKEND_API',
							method: 'POST',
							data: {
								code,
								encryptedData,
								iv
							}
						})

						// 处理登录成功
						if (res.data.success) {
							this.userInfo.phone = res.data.phone
							uni.setStorageSync('userInfo', this.userInfo)
							this.showLoginPopup = false
							uni.showToast({
								title: '登录成功'
							})
						}
					} catch (error) {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '已取消授权',
						icon: 'none'
					})
				}
			}
		},
		onLoad() {
			// 加载本地存储的用户信息
			const user = uni.getStorageSync('userInfo')
			if (user) this.userInfo = user
		}
	}
</script>

<style scoped>
	.user-section {
		padding: 30rpx;
		font-size: 32rpx;
		color: #333;
	}

	.login-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		transition: all 0.3s ease;
		z-index: 999;
	}

	.popup-content {
		background: #fff;
		width: 100%;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;
		box-sizing: border-box;
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}

	.login-popup .popup-content {
		transform: translateY(0);
	}

	.login-btn {
		background: #07c160;
		color: #fff;
		border-radius: 48rpx;
		font-size: 32rpx;
		height: 96rpx;
		line-height: 96rpx;
		margin: 0;
	}

	.login-btn::after {
		border: none;
	}
</style>