From 8bdd3a2d2a3a938079d48b1c05a03bcd3c17db17 Mon Sep 17 00:00:00 2001
From: sexygoat <1538832180@qq.com>
Date: Sat, 11 Apr 2026 18:01:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=99=BB=E5=BD=95UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/浅色深色.md | 80 ++++++++++++++
pages/login/login.vue | 245 +++++++++++++++++++++++++++++++++++-------
uni.scss | 2 +
utils/env.js | 6 +-
4 files changed, 292 insertions(+), 41 deletions(-)
create mode 100644 docs/浅色深色.md
diff --git a/docs/浅色深色.md b/docs/浅色深色.md
new file mode 100644
index 0000000..a1ef040
--- /dev/null
+++ b/docs/浅色深色.md
@@ -0,0 +1,80 @@
+声明 color-scheme
+有两种方式：
+
+meta: 在head中声明，声明当前页面支持 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。
+
+
+
+
+
+ 
+
+JavaScript中判断当前模式&监听模式变化
+利用的是matchMedia方法，具体用法参考以下例子：
+
+
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+function darkModeHandler() {
+ if (mediaQuery.matches) {
+ console.log('现在是深色模式')
+ } else {
+ console.log('现在是浅色模式')
+ }
+}
+
+// 判断当前模式
+darkModeHandler()
+// 监听模式变化
+mediaQuery.addListener(darkModeHandler)
\ No newline at end of file
diff --git a/pages/login/login.vue b/pages/login/login.vue
index a6dbb33..b6b9fad 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,14 +1,50 @@
-
-
-
- 登录
-
-
-
-
-
- 立即登录
+
+
+
+ 用户登录
+
+
+ 设备标识
+
+
+
+ ×
+
+
+ 请输入设备标识
+
+
+
+
+
+
+
+ 登录即表示同意
+ 《用户协议》
+ 和
+ 《隐私政策》
+
@@ -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 @@
\ No newline at end of file
+
+ .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 {
+ flex: 1;
+ font-size: 30rpx;
+ color: #1A1A1A;
+ background: transparent;
+ }
+
+ .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;
+ }
+
diff --git a/uni.scss b/uni.scss
index c7f439e..0b7039d 100644
--- 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;
+
+
diff --git a/utils/env.js b/utils/env.js
index 7149612..5095e95 100644
--- 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';
\ No newline at end of file
+export const APP_ID = 'wx404dc822ce15c5f0';
+
+export const USE_WECHAT_AUTH = true;
\ No newline at end of file
+