jd_logistics/jd_logistics-app/pages/mine/login.vue

<!-- pages/mine/login.vue -->
<template>
	<view class="login-page">
		<!-- 标题图片占位区 -->
		<view class="logo-placeholder">
			<image src="/static/img/logo.png"></image>
		</view>

		<!-- 账号密码登录区域（根据模式显示） -->
		<template v-if="loginMode === 'password'">
			<!-- 手机号输入框 -->
			<view class="input-wrapper">
				<input v-model="phone" type="number" maxlength="11" class="input-field" placeholder="请输入帐号"
					placeholder-style="color: #999;" confirm-type="done" />
			</view>

			<!-- 密码输入框 -->
			<view class="input-wrapper">
				<input v-model="password" :password="true" maxlength="20" class="input-field" placeholder="请输入密码"
					placeholder-style="color: #999;" confirm-type="done" />
			</view>
		</template>

		<!-- 协议同意行 -->
		<view class="agreement-row">
			<checkbox-group @change="onAgreeChange">
				<checkbox :value="'agree'" :checked="agree" class="agree-checkbox" color="#007AFF">
					我已阅读并同意
				</checkbox>
			</checkbox-group>
			<text class="agree-text"></text>
			<text class="link-text" @click.stop="toUserAgreement">《用户协议》</text>
			<text class="link-text" @click.stop="toPrivacyPolicy">《隐私政策》</text>
		</view>

		<!-- 密码登录按钮（密码模式显示） -->
		<button v-if="loginMode === 'password'" class="btn login-btn" @click="handlePhoneLogin">登录</button>

		<!-- 微信快捷登录按钮（快捷模式显示） -->
		<button v-if="loginMode === 'quick'" class="btn wechat-btn" open-type="getPhoneNumber"
			@getphonenumber="handleWechatLogin" :loading="wechatLoading" :disabled="wechatLoading">快捷登录</button>

		<!-- 登录方式切换链接 - 放在按钮正下方 -->
		<view class="toggle-mode" @click="toggleMode">
			{{ loginMode === 'quick' ? '账号密码登录' : '快捷登录' }}
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { quickLogin, telEncrypt } from '@/utils/util.js'
import { getLoginByPwdApi } from '@/api/user.js'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
const phone = ref('')          // 手机号
const password = ref('')       // 密码
const agree = ref(false)       // 协议勾选状态
const wechatLoading = ref(false) // 微信登录loading
const loginMode = ref('quick')  // 登录模式：quick-快捷登录，password-密码登录

// 复选框组变化处理
const onAgreeChange = (e) => {
	agree.value = e.detail.value.includes('agree')
}

// 切换登录模式
const toggleMode = () => {
	loginMode.value = loginMode.value === 'quick' ? 'password' : 'quick'
}

// 手机号密码登录
const handlePhoneLogin = async () => {
	if (!phone.value) {
		uni.showToast({ title: '请输入帐号', icon: 'none' })
		return
	}
	if (!password.value) {
		uni.showToast({ title: '请输入密码', icon: 'none' })
		return
	}
	if (!agree.value) {
		uni.showToast({ title: '请先同意用户协议和隐私政策', icon: 'none' })
		return
	}
	const params = {
		username: phone.value,
		password: password.value
	}
	try {
		const res = await getLoginByPwdApi(params)
		if (res.code == 200) {
			uni.showToast({ title: '登录成功~', icon: 'none' })
			appStore.UPDATE_TOKEN(res.data.access_token || res.data);
			setTimeout(() => {
				uni.navigateBack()
			}, 200)
		} else {
			uni.showToast({ title: res.msg, icon: 'none' })
		}
	} catch (err) {
		console.error('登录接口异常', err)
		uni.showToast({ title: err, icon: 'none' })
	}
}

// 微信快捷登录
const handleWechatLogin = async (e) => {
	// 检查协议同意
	if (!agree.value) {
		uni.showToast({ title: '请先同意用户协议和隐私政策', icon: 'none' })
		return
	}
	if (wechatLoading.value) return
	wechatLoading.value = true
	uni.showLoading({ title: '登录中...', mask: true })

	try {
		await quickLogin(e, {
			onSuccess: (result) => {
				console.log('登录成功', result)
				if (result.data) {
					appStore.UPDATE_USERINFO(result.data)
				}
				uni.hideLoading()
				uni.showToast({ title: '登录成功', icon: 'success' })
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
			onFail: (error) => {
				console.error('登录失败', error)
				uni.hideLoading()
				let msg = error.message || '登录失败'
				if (error.type === 'auth_denied') {
					msg = '您拒绝了授权，无法登录'
					uni.showModal({
						title: '提示',
						content: '需要手机号授权才能正常使用，请点击右上角菜单，选择「重新进入小程序」后重新授权',
						showCancel: false
					})
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			}
		})
	} catch (err) {
		console.error('quickLogin 异常', err)
		uni.hideLoading()
		uni.showToast({ title: '登录异常', icon: 'none' })
	} finally {
		wechatLoading.value = false
	}
}

// 跳转用户协议
const toUserAgreement = () => {
	uni.navigateTo({
		url: '/pages/webView/webView?title=用户协议&url=' + encodeURIComponent('https://rjsd.mychery.com/user_agreement.html')
	});
}

// 跳转隐私政策
const toPrivacyPolicy = () => {
	uni.navigateTo({
		url: '/pages/webView/webView?title=隐私政策&url=' + encodeURIComponent('https://rjsd.mychery.com/privacy_policy.html')
	});
}
</script>

<style scoped lang="less">
/* 页面容器 */
.login-page {
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(135deg, #CFE9FF 0%, #F5F7FA 50.86%);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 80rpx;
	box-sizing: border-box;
}

.logo-placeholder {
	width: 100%;
	margin: 120rpx 0rpx 90rpx 0rpx;
	display: flex;
	justify-content: center;

	image {
		width: 425rpx;
		height: 100rpx;
	}
}

/* 通用输入框包装 */
.input-wrapper {
	width: 100%;
	padding: 24rpx 32rpx;
	height: 88rpx;
	background: #FFFFFF;
	border-radius: 44rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	transition: border-color 0.2s;
	margin-bottom: 32rpx;

	&:focus-within {
		border-color: #007AFF;
	}
}

.input-field {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	background-color: transparent;
	height: 88rpx;
	line-height: 88rpx;
	padding: 0;
}

/* 协议行 */
.agreement-row {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #4a5568;

	checkbox-group {
		display: flex;
		align-items: center;
	}
}

.agree-checkbox {
	transform: scale(0.9);
	margin-right: 8rpx;
}

/* 覆盖 checkbox 样式 */
::v-deep .agree-checkbox .wx-checkbox-input,
::v-deep .agree-checkbox .uni-checkbox-input {
	border-radius: 50%;
	width: 36rpx;
	height: 36rpx;
	background-color: #ffffff;
	border: 2rpx solid #ccc;
}

::v-deep .agree-checkbox .wx-checkbox-input.wx-checkbox-input-checked,
::v-deep .agree-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
	background-color: #007AFF !important;
	border-color: #007AFF !important;
}

::v-deep .agree-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before,
::v-deep .agree-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
	color: #ffffff !important;
}

.link-text {
	color: #007AFF;
	display: inline-block;
}

/* 登录方式切换链接 - 按钮正下方 */
.toggle-mode {
	width: 100%;
	text-align: right;
	color: #007AFF;
	font-size: 28rpx;
	margin-top: 30rpx;        /* 与按钮保持适当间距 */
	margin-bottom: 0;
	padding: 10rpx 0;
}

/* 按钮基础样式 */
.btn {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	color: #ffffff;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.25);
	transition: opacity 0.2s;

	&.login-btn {
		background-color: #007AFF;
	}

	&.wechat-btn {
		background-color: #2DAB6C;
	}
}

/* 重置按钮默认样式 */
button {
	padding: 0;
	margin: 0;
	line-height: 1.5;
	background: none;
	box-shadow: none;
}
button::after {
	border: none;
}
</style>