fix: 登录UI

2026-04-11 18:01:27 +08:00
parent 8d2b3094c6
commit 8bdd3a2d2a
4 changed files with 292 additions and 41 deletions
--- a/docs/浅色深色.md
+++ b/docs/浅色深色.md
@@ -0,0 +1,80 @@
+声明 color-scheme
+有两种方式：
+
+meta: 在head中声明<meta name="color-scheme" content="light dark">，声明当前页面支持 light 和 dark 两种模式，系统切换到深色模式时，浏览器默认样式也会切换到深色；
+css：下面的 css 同样可以实现上面 meta 声明的效果
+:root {
+    color-scheme: light dark;
+}
+注意：此声明并非为页面做自动适配，只影响浏览器默认样式
+
+更多信息可查阅 W3C 文档 《CSS Color Adjustment Module Level 1》
+
+通过 CSS 媒体查询
+:root {
+    color-scheme: light dark;
+    background: white;
+    color: black;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        background: black;
+        color: white;
+    }
+}
+颜色较多的情况，建议使用CSS变量对颜色值进行管理
+
+:root {
+    color-scheme: light dark;
+    --nav-bg-color: #F7F7F7;
+    --content-bg-color: #FFFFFF;
+    --font-color: rgba(0,0,0,.9);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --nav-bg-color: #2F2F2F;
+        --content-bg-color: #2C2C2C;
+        --font-color: rgba(255, 255, 255, .8);
+    }
+}
+
+:root {
+    color: var(--font-color)
+}
+
+.header {
+    background-color: var(--nav-bg-color);
+}
+
+.content {
+    background-color: var(--content-bg-color);
+}
+图片适配
+利用picture+source标签，设置不同模式下的图片 url。
+
+<picture>
+    <!-- 深色模式下的图片 -->
+    <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
+    <!-- 默认模式下的图片 -->
+    <img src="light.jpg"/>
+</picture>
+JavaScript中判断当前模式&监听模式变化
+利用的是matchMedia方法，具体用法参考以下例子：
+
+
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+function darkModeHandler() {
+    if (mediaQuery.matches) {
+        console.log('现在是深色模式')
+    } else {
+        console.log('现在是浅色模式')
+    }
+}
+
+// 判断当前模式
+darkModeHandler()
+// 监听模式变化
+mediaQuery.addListener(darkModeHandler)
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,14 +1,50 @@
 <template>
-	<view class="container">
+	<view class="login-page">
+		<view class="content">
 			<view class="card">
-			<view class="title-login">
-				登录
+				<view class="card-title">用户登录</view>
+				
+				<view class="form-item">
+					<view class="label">设备标识</view>
+					<view class="input-wrap" :class="{ focus: inputFocus }">
+						<input 
+							v-model="identifier"
+							class="input"
+							placeholder="请输入SN/IMEI/虚拟号/ICCID/MSISDN"
+							placeholder-class="placeholder"
+							@focus="inputFocus = true"
+							@blur="inputFocus = false"
+							@input="showError = false"
+						/>
+						<view v-if="identifier" class="clear" @tap="identifier = ''">
+							<text>×</text>
 						</view>
-			<view class="input">
-				<up-input class="mt-30" v-model="identifier" placeholder="请输入SN/IMEI/虚拟号/ICCID/MSISDN"></up-input>
 					</view>
-			<view class="button">
-				<up-button class="mt-30 btn-apple btn-primary" type="primary" :loading="loading" @click="login">立即登录</up-button>
+					<text v-if="showError" class="error">请输入设备标识</text>
+				</view>
+
+				<view class="form-item">
+					<button 
+						class="btn-login" 
+						:class="{ disabled: !identifier || loading }"
+						:disabled="!identifier || loading"
+						@tap="handleLogin"
+					>
+						<view v-if="loading" class="loading">
+							<view class="dot"/>
+							<view class="dot"/>
+							<view class="dot"/>
+						</view>
+						<text v-else>登录</text>
+					</button>
+				</view>
+
+				<view class="agreement">
+					<text class="agree-text">登录即表示同意</text>
+					<text class="link">《用户协议》</text>
+					<text class="agree-text">和</text>
+					<text class="link">《隐私政策》</text>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -18,14 +54,15 @@
 	import { ref, onMounted } from 'vue';
 	import { authApi } from '@/api/index.js';
 	import { useUserStore } from '@/store/index.js';
-	import { APP_ID } from '@/utils/env.js';
+	import { APP_ID, USE_WECHAT_AUTH } from '@/utils/env.js';

 	const userStore = useUserStore();

 	const identifier = ref('');
 	const loading = ref(false);
-
-	const isWechat = /micromessenger/i.test(navigator.userAgent);
+	const agreed = ref(true);
+	const inputFocus = ref(false);
+	const showError = ref(false);

 	const getCode = () => {
 		const params = new URLSearchParams(window.location.search);
@@ -42,23 +79,28 @@
 		window.location.href = url;
 	};

-	const login = async () => {
+	const handleLogin = () => {
 		if (!identifier.value) {
-			uni.showToast({ title: '请输入SN/IMEI/虚拟号/ICCID/MSISDN', icon: 'none' });
+			showError.value = true;
 			return;
 		}
+		doLogin();
+	};

+	const doLogin = async () => {
 		loading.value = true;
 		try {
 			const verifyData = await authApi.verifyAsset(identifier.value);
 			userStore.setAssetToken(verifyData.asset_token);
 			userStore.setIdentifier(identifier.value);

-			// if (!isWechat) {
-			// 	uni.showToast({ title: '请在微信中打开', icon: 'none' });
-			// 	loading.value = false;
-			// 	return;
-			// }
+			if (!USE_WECHAT_AUTH) {
+				const loginData = await authApi.wechatLogin(verifyData.asset_token, 'mock_code');
+				userStore.setToken(loginData.token);
+				uni.setStorageSync('identifier', userStore.state.identifier);
+				uni.redirectTo({ url: '/pages/index/index' });
+				return;
+			}

 			redirectToWxAuth(verifyData.asset_token);
 		} catch (e) {
@@ -68,6 +110,8 @@
 	};

 	const handleWechatCallback = async () => {
+		if (!USE_WECHAT_AUTH) return;
+
 		const code = getCode();
 		const assetToken = userStore.state.assetToken;

@@ -94,23 +138,146 @@
 </script>

 <style lang="scss" scoped>
-	.container {
-		padding-top: 30vh;
+	.login-page {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background: #FFFFFF;
+	}

-		.title-login {
-			color: var(--text-primary);
-			font-size: 24px;
-			text-align: center;
-			margin: 20px 0;
-			font-weight: bold;
+	.card {
+		background: #FFFFFF;
+		border-radius: 24rpx;
+		padding: 48rpx;
+		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
+	}
+
+	.card-title {
+		font-size: 40rpx;
+		font-weight: 600;
+		color: #1A1A1A;
+		margin-bottom: 48rpx;
+	}
+
+	.form-item {
+		margin-bottom: 32rpx;
+	}
+
+	.label {
+		font-size: 26rpx;
+		color: #6B7280;
+		margin-bottom: 16rpx;
+	}
+
+	.input-wrap {
+		display: flex;
+		align-items: center;
+		background: #F9FAFB;
+		border: 2rpx solid #E5E7EB;
+		border-radius: 16rpx;
+		padding: 0 24rpx;
+		height: 96rpx;
+		transition: all 0.2s;
+	}
+
+	.input-wrap.focus {
+		border-color: #2563EB;
+		background: #FFFFFF;
 	}

 	.input {
-			margin: 70rpx 0 50rpx 0;
+		flex: 1;
+		font-size: 30rpx;
+		color: #1A1A1A;
+		background: transparent;
 	}

-		.button {
-			margin-bottom: 40rpx;
+	.placeholder {
+		color: #9CA3AF;
 	}
+
+	.clear {
+		width: 40rpx;
+		height: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #9CA3AF;
+		font-size: 36rpx;
+	}
+
+	.error {
+		font-size: 24rpx;
+		color: #EF4444;
+		margin-top: 12rpx;
+	}
+
+	.btn-login {
+		width: 100%;
+		height: 96rpx;
+		background: #2563EB;
+		border: none;
+		border-radius: 16rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s;
+	}
+
+	.btn-login.disabled {
+		background: #E5E7EB;
+		color: #9CA3AF;
+	}
+
+	.btn-login:active:not(.disabled) {
+		background: #1D4ED8;
+	}
+
+	.loading {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+	}
+
+	.dot {
+		width: 8rpx;
+		height: 8rpx;
+		background: #9CA3AF;
+		border-radius: 50%;
+		animation: load 1.4s infinite ease-in-out both;
+	}
+
+	.dot:nth-child(1) { animation-delay: -0.32s; }
+	.dot:nth-child(2) { animation-delay: -0.16s; }
+
+	@keyframes load {
+		0%, 80%, 100% { transform: scale(0); }
+		40% { transform: scale(1); }
+	}
+
+	.agreement {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		justify-content: center;
+		gap: 8rpx;
+		margin-top: 40rpx;
+	}
+
+	.agree-text {
+		font-size: 24rpx;
+		color: #9CA3AF;
+		white-space: nowrap;
+	}
+
+	.link {
+		font-size: 24rpx;
+		color: #2563EB;
+		white-space: nowrap;
 	}
 </style>
--- a/uni.scss
+++ b/uni.scss
@@ -74,3 +74,5 @@ $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
 $uni-font-size-paragraph:15px;
+
+
--- a/utils/env.js
+++ b/utils/env.js
@@ -1,5 +1,7 @@
 export const BASE_URL = 'https://cmp-api.boss160.cn';

-export const APP_TYPE = 'miniapp';
+export const APP_TYPE = 'official_account';

-export const APP_ID = 'wxea8c599fe100ce8a';
+export const APP_ID = 'wx404dc822ce15c5f0';
+
+export const USE_WECHAT_AUTH = true;