vist_go_uniApp/pagesA/public/phone-login.vue

<template>
	<!-- 手机登录 -->
	<view class="page-container">
		<!-- 顶部标题区域 -->
		<image class="bg-image " src="@/static/images/bg.png" mode="aspectFill"></image>
		<!-- 登录表单区域 -->
		<view class="login-form">
			<!-- 账号输入框 -->
			<view class="input-group">
				<text class="input-label">账号</text>
				<u-input v-model="account" placeholder="请输入手机号码" :border="false" class="input-field" type="number"
					maxlength="11"></u-input>
			</view>

			<!-- 密码输入框 -->
			<view class="input-group">
				<text class="input-label">密码</text>
				<u-input v-model="password" placeholder="请输入密码" :border="false" class="input-field" type="password"
					:password-icon="true"></u-input>
			</view>

			<!-- 登录按钮 -->
			<button class="login-btn" @tap="handleLogin">
				<text>确定</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		phoneLogin,
		wxLogin
	} from '@/config/api.js';
	export default {
		data() {
			return {
				account: '',
				password: ''
			}
		},
		methods: {
			// 处理登录
			async handleLogin() {
				if (!this.account) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				
				try {
					console.log('登录信息：', {
						account: this.account,
						password: this.password
					});
					
					// 第一步：手机号登录 (system/info/login)
					let params = {
						"username": this.account,
						"password": this.password,
						"wxid": "3"
					}
					const phoneRes = await phoneLogin(params);
					console.log(phoneRes, "手机号登录成功")

					// 保存手机号登录返回的token
					uni.setStorageSync('access_token', phoneRes.token);
					
					// 保存用户信息到缓存
					if (phoneRes.user) {
						uni.setStorageSync('user', phoneRes.user);
					}

					// 第二步：微信登录 (system/link/login)
					const loginRes = await this.wxLoginPromise();
					console.log('微信登录凭证code:', loginRes.code);

					const wxRes = await wxLogin({
						code: loginRes.code
					});
					console.log('微信登录响应:', wxRes);

					// 保存微信登录返回的openid
					if (wxRes.openid) {
						uni.setStorageSync('openid', wxRes.openid);
					}

					// 如果微信登录返回了新的token，也保存
					const wxToken = wxRes.token || wxRes.access_token;
					if (wxToken) {
						uni.setStorageSync('access_token', wxToken);
						uni.setStorageSync('token', wxToken);
					}

					// 如果微信登录返回了用户信息，也保存
					if (wxRes.user) {
						uni.setStorageSync('user', wxRes.user);
					}

					// 保存完整的微信登录数据
					if (wxRes) {
						uni.setStorageSync('loginData', wxRes);
					}

					// 更新store状态
					this.$store.commit('isLogin', true);

					uni.hideLoading();

					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1000
					});

					// 登录成功后的跳转
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1000);
					
				} catch (error) {
					console.error('登录错误:', error);
					uni.hideLoading();
					uni.showToast({
						title: error.message || '登录失败，请重试',
						icon: 'none'
					});
				}
			},
			
			// 微信登录 Promise 封装
			wxLoginPromise() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: (res) => resolve(res),
						fail: (err) => reject(new Error('获取登录凭证失败'))
					});
				});
			}
		},

	}
</script>

<style>
	.page-container {
		min-height: 100vh;
		background: #F5F5F5;
	}

	/* 背景图片 */
	.bg-image {
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		z-index: 0;
	}



	.login-form {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx;
		margin: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(41, 44, 53, 0.1);

		.input-group {
			margin-bottom: 32rpx;

			.input-label {
				display: block;
				font-size: 28rpx;
				color: #292C35;
				margin-bottom: 16rpx;
			}

			.input-field {
				background: #F5F5F5;
				border-radius: 12rpx;
				height: 88rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
			}
		}

		.login-btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(135deg, #FF5B05 0%, #FF8E3C 100%);
			border-radius: 44rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 48rpx;
			border: none;
			box-shadow: 0 4rpx 16rpx rgba(255, 91, 5, 0.3);

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(255, 91, 5, 0.4);
			}
		}
	}
</style>