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
	} from '@/config/api.js';
	export default {
		data() {
			return {
				account: '',
				password: ''
			}
		},
		methods: {
			// 处理登录
			handleLogin() {
				if (!this.account) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				console.log('登录信息：', {
					account: this.account,
					password: this.password
				});
				let params = {
					"username": this.account,
					"password": this.password,
					"wxid": "3"
				}
				phoneLogin(params).then((res) => {
					console.log(res, "登陆成功")

					uni.setStorageSync('access_token', res.token);


					this.$store.commit('isLogin', true);

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

					// 登录成功后的跳转
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1000);
					uni.hideLoading();
				})

			}
		},

	}
</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>