feat : 小程序支持手机号登录

config/env.js

@@ -1,7 +1,7 @@
 const envConf = {
   // 开发版-本地环境
   develop: {
-    BASE_URL: 'http://192.168.3.66:8361',
+    BASE_URL: 'http://192.168.10.8:8361',
   },
   // 体验版-测试环境
   trial: {

pages/login/index.vue

@@ -8,8 +8,31 @@
 
 		<view class="btn-area">
 			<!-- #ifdef MP-WEIXIN -->
-			<button class="login-btn" @tap="handleWxLogin" :loading="loading">
-				微信一键登录
+			<view v-if="mpLoginMode === 'wx'">
+				<button class="login-btn" @tap="handleWxLogin" :loading="loading">
+					微信一键登录
+				</button>
+			</view>
+			<view v-else class="phone-form">
+				<view class="form-item">
+					<input class="form-input" type="number" v-model="phone" placeholder="请输入手机号" maxlength="11" />
+				</view>
+				<view class="form-item code-row">
+					<input class="form-input code-input" type="number" v-model="smsCode" placeholder="请输入验证码" maxlength="6" />
+					<button class="sms-btn" :disabled="countdown > 0" @tap="sendSms">
+						{{ countdown > 0 ? countdown + 's' : '获取验证码' }}
+					</button>
+				</view>
+				<button class="login-btn" @tap="handlePhoneLogin" :loading="loading">
+					登录
+				</button>
+			</view>
+			<button class="mode-switch-btn" @tap="toggleMpLoginMode">
+				<u-icon
+					:name="mpLoginMode === 'wx' ? 'phone-fill' : 'weixin-fill'"
+					size="30"
+					:color="mpLoginMode === 'wx' ? '#0F78E9' : '#07C160'"
+				/>
 			</button>
 			<!-- #endif -->
 
@@ -40,13 +63,13 @@
 			<!-- #endif -->
 
 			<!-- #ifdef MP-WEIXIN -->
-			<view class="agree-row" @tap="agreed = !agreed">
-				<u-checkbox-group>
-					<u-checkbox :checked="agreed" shape="circle" activeColor="#0F78E9" size="18" @change="agreed = !agreed" />
+			<view class="agree-row">
+				<u-checkbox-group v-model="agreementValues" @change="handleAgreementChange">
+					<u-checkbox name="agree" shape="circle" activeColor="#0F78E9" size="18" />
 				</u-checkbox-group>
-				<text class="agree-text">请阅读并同意</text>
+				<text class="agree-text" @tap="toggleAgreement">请阅读并同意</text>
 				<text class="link" @tap.stop="goService">《用户服务协议》</text>
-				<text class="agree-text">和</text>
+				<text class="agree-text" @tap="toggleAgreement">和</text>
 				<text class="link" @tap.stop="goPrivacy">《隐私政策》</text>
 			</view>
 			<!-- #endif -->
@@ -68,8 +91,9 @@ const loading = ref(false)
 const phone = ref('')
 const smsCode = ref('')
 const countdown = ref(0)
-const agreed = ref(false)
+const agreementValues = ref([])
 const h5Mode = ref('qrcode')
+const mpLoginMode = ref('wx')
 let timer = null
 
 onUnmounted(() => {
@@ -90,12 +114,32 @@ const loginSuccess = (res) => {
 	}, 500)
 }
 
+const checkAgreement = () => {
+	// #ifdef MP-WEIXIN
+	if (!agreementValues.value.includes('agree')) {
+		uni.showToast({ title: '请先阅读并同意相关协议', icon: 'none' })
+		return false
+	}
+	// #endif
+	return true
+}
+
 // #ifdef MP-WEIXIN
+const toggleAgreement = () => {
+	agreementValues.value = agreementValues.value.includes('agree') ? [] : ['agree']
+}
+
+const handleAgreementChange = (values) => {
+	agreementValues.value = values || []
+}
+
+const toggleMpLoginMode = () => {
+	mpLoginMode.value = mpLoginMode.value === 'wx' ? 'phone' : 'wx'
+}
+
 const handleWxLogin = async () => {
 	if (loading.value) return
-	if (!agreed.value) {
-		return uni.showToast({ title: '请先阅读并同意相关协议', icon: 'none' })
-	}
+	if (!checkAgreement()) return
 	loading.value = true
 	try {
 		const code = await new Promise((resolve, reject) => {
@@ -115,9 +159,9 @@ const handleWxLogin = async () => {
 }
 // #endif
 
-// #ifdef H5
 const sendSms = async () => {
 	if (countdown.value > 0) return
+	if (!checkAgreement()) return
 	if (!phone.value || phone.value.length !== 11) {
 		return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
 	}
@@ -140,6 +184,7 @@ const sendSms = async () => {
 
 const handlePhoneLogin = async () => {
 	if (loading.value) return
+	if (!checkAgreement()) return
 	if (!phone.value || phone.value.length !== 11) {
 		return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
 	}
@@ -156,7 +201,6 @@ const handlePhoneLogin = async () => {
 		loading.value = false
 	}
 }
-// #endif
 
 const goPrivacy = () => {
 	// #ifdef H5
@@ -179,10 +223,7 @@ const goService = () => {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding-top: 25vh;
-	/* #ifdef H5 */
 	padding-top: 10vh;
-	/* #endif */
 }
 
 .logo-area {
@@ -265,6 +306,30 @@ const goService = () => {
 			color: #0F78E9;
 		}
 	}
+
+	.mode-switch-btn {
+		width: 96rpx;
+		height: 96rpx;
+		line-height: 1;
+		border-radius: 50%;
+		margin: 40rpx auto 0;
+		padding: 0;
+		background: #fff;
+		border: 1rpx solid #e5e6eb;
+		box-shadow: 0 8rpx 24rpx rgba(15, 120, 233, 0.12);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&::after {
+			border: none;
+		}
+
+		&:active {
+			transform: scale(0.96);
+			opacity: 0.9;
+		}
+	}
 }
 
 .phone-form {