420 lines
11 KiB
Plaintext
420 lines
11 KiB
Plaintext
<script lang="uts">
|
||
import { setIsLoggedIn, setUserProfile, getCurrentUser } from '@/utils/store.uts'
|
||
import supa from '@/components/supadb/aksupainstance.uts'
|
||
|
||
// 自动登录凭据（开发测试用）
|
||
const AUTO_LOGIN_EMAIL = 'test@mall.com'
|
||
const AUTO_LOGIN_PASSWORD = 'Hf2152111'
|
||
|
||
export default {
|
||
onLaunch: function () {
|
||
console.log('App Launch')
|
||
|
||
// 尝试自动登录并跳转（使用 Promise 链）
|
||
this.tryAutoLogin()
|
||
},
|
||
onShow: function () {
|
||
console.log('App Show')
|
||
},
|
||
onHide: function () {
|
||
console.log('App Hide')
|
||
},
|
||
methods: {
|
||
tryAutoLogin: function(): void {
|
||
// 检查是否已有有效会话
|
||
const session = supa.getSession()
|
||
if (session.user != null) {
|
||
console.log('已有有效会话，跳过自动登录')
|
||
setIsLoggedIn(true)
|
||
uni.reLaunch({ url: '/pages/mall/consumer/index' })
|
||
return
|
||
}
|
||
|
||
// 检查本地存储的登录状态
|
||
const savedUserId = uni.getStorageSync('user_id')
|
||
if (savedUserId != null && savedUserId != '') {
|
||
console.log('本地存储中有用户ID，尝试恢复会话')
|
||
getCurrentUser().then((profile) => {
|
||
if (profile != null) {
|
||
console.log('会话恢复成功')
|
||
setIsLoggedIn(true)
|
||
uni.reLaunch({ url: '/pages/mall/consumer/index' })
|
||
return
|
||
}
|
||
// 恢复失败，执行自动登录
|
||
this.doAutoLogin()
|
||
}).catch(() => {
|
||
console.log('会话恢复失败，尝试自动登录')
|
||
this.doAutoLogin()
|
||
})
|
||
return
|
||
}
|
||
|
||
// 执行自动登录
|
||
this.doAutoLogin()
|
||
},
|
||
doAutoLogin: function(): void {
|
||
console.log('开始自动登录...')
|
||
supa.signIn(AUTO_LOGIN_EMAIL, AUTO_LOGIN_PASSWORD).then((result) => {
|
||
if (result.user != null) {
|
||
console.log('自动登录成功')
|
||
setIsLoggedIn(true)
|
||
|
||
// 保存用户ID到本地存储
|
||
const uid = result.user.getString('id')
|
||
if (uid != null) {
|
||
uni.setStorageSync('user_id', uid)
|
||
console.log('用户ID已保存:', uid)
|
||
}
|
||
|
||
// 获取用户资料
|
||
getCurrentUser().then(() => {
|
||
console.log('获取用户资料成功')
|
||
}).catch((e) => {
|
||
console.log('获取用户资料失败（忽略）')
|
||
})
|
||
|
||
// 直接跳转到首页
|
||
uni.reLaunch({ url: '/pages/mall/consumer/index' })
|
||
} else {
|
||
console.log('自动登录失败，用户需要手动登录')
|
||
}
|
||
}).catch((e) => {
|
||
console.error('自动登录异常:', e)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* ===== 全局重置样式 (App-UVUE 不支持标签选择器和通配符，已注释) ===== */
|
||
/*
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body {
|
||
height: 100%;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: #262626;
|
||
background-color: #f0f2f5;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
view, text, input, textarea, button {
|
||
box-sizing: border-box;
|
||
}
|
||
*/
|
||
|
||
/* ===== 全局主题色 (建议移动到 uni.scss 或使用 class) ===== */
|
||
/* :root 选择器在 UVUE 中可能不支持，建议定义为 class */
|
||
.theme-vars {
|
||
/* 主色调 */
|
||
--primary-color: #1890ff;
|
||
--primary-hover: #40a9ff;
|
||
--primary-active: #096dd9;
|
||
|
||
/* 成功色 */
|
||
--success-color: #52c41a;
|
||
--success-hover: #73d13d;
|
||
--success-active: #389e0d;
|
||
|
||
/* 警告色 */
|
||
--warning-color: #faad14;
|
||
--warning-hover: #ffc53d;
|
||
--warning-active: #d48806;
|
||
|
||
|
||
/* 错误色 */
|
||
--error-color: #ff4d4f;
|
||
--error-hover: #ff7875;
|
||
--error-active: #d4380d;
|
||
|
||
/* 中性色 */
|
||
--text-primary: #262626;
|
||
--text-secondary: #595959;
|
||
--text-disabled: #bfbfbf;
|
||
--text-inverse: #ffffff;
|
||
|
||
/* 边框色 */
|
||
--border-color: #d9d9d9;
|
||
--border-color-light: #f0f0f0;
|
||
--border-color-dark: #bfbfbf;
|
||
|
||
/* 背景色 */
|
||
--background-color: #ffffff;
|
||
--background-color-light: #fafafa;
|
||
--background-color-dark: #f5f5f5;
|
||
|
||
/* 阴影 */
|
||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
--shadow-xl: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||
|
||
/* 圆角 */
|
||
--border-radius-sm: 2px;
|
||
--border-radius: 4px;
|
||
--border-radius-lg: 6px;
|
||
--border-radius-xl: 8px;
|
||
|
||
/* 间距 */
|
||
--spacing-xs: 4px;
|
||
--spacing-sm: 8px;
|
||
--spacing: 16px;
|
||
--spacing-lg: 24px;
|
||
--spacing-xl: 32px;
|
||
--spacing-xxl: 48px;
|
||
|
||
/* 字体大小 */
|
||
--font-size-xs: 12px;
|
||
--font-size-sm: 14px;
|
||
--font-size: 16px;
|
||
--font-size-lg: 18px;
|
||
--font-size-xl: 20px;
|
||
--font-size-xxl: 24px;
|
||
|
||
/* 行高 */
|
||
--line-height-tight: 1.25;
|
||
--line-height-normal: 1.5;
|
||
--line-height-relaxed: 1.75;
|
||
}
|
||
|
||
/* ===== 全局字体设置 ===== */
|
||
.text-xs { font-size: var(--font-size-xs); }
|
||
.text-sm { font-size: var(--font-size-sm); }
|
||
.text-base { font-size: var(--font-size); }
|
||
.text-lg { font-size: var(--font-size-lg); }
|
||
.text-xl { font-size: var(--font-size-xl); }
|
||
.text-2xl { font-size: var(--font-size-xxl); }
|
||
|
||
.font-medium { font-weight: 400; } /* UVUE不支持500 */
|
||
.font-semibold { font-weight: 700; } /* UVUE不支持600 */
|
||
.font-bold { font-weight: 700; }
|
||
|
||
/* ===== 全局颜色类 ===== */
|
||
.text-primary { color: var(--primary-color); }
|
||
.text-success { color: var(--success-color); }
|
||
.text-warning { color: var(--warning-color); }
|
||
.text-error { color: var(--error-color); }
|
||
.text-secondary { color: var(--text-secondary); }
|
||
.text-disabled { color: var(--text-disabled); }
|
||
|
||
/* ===== 全局背景类 ===== */
|
||
.bg-white { background-color: var(--background-color); }
|
||
.bg-light { background-color: var(--background-color-light); }
|
||
.bg-dark { background-color: var(--background-color-dark); }
|
||
|
||
/* ===== 全局边框类 ===== */
|
||
.border { border: 1px solid var(--border-color); }
|
||
.border-light { border: 1px solid var(--border-color-light); }
|
||
.border-primary { border: 1px solid var(--primary-color); }
|
||
|
||
/* ===== 全局阴影类 ===== */
|
||
.shadow-sm { box-shadow: var(--shadow-sm); }
|
||
.shadow { box-shadow: var(--shadow); }
|
||
.shadow-lg { box-shadow: var(--shadow-lg); }
|
||
.shadow-xl { box-shadow: var(--shadow-xl); }
|
||
|
||
/* ===== 全局圆角类 ===== */
|
||
.rounded-sm { border-radius: var(--border-radius-sm); }
|
||
.rounded { border-radius: var(--border-radius); }
|
||
.rounded-lg { border-radius: var(--border-radius-lg); }
|
||
.rounded-xl { border-radius: var(--border-radius-xl); }
|
||
|
||
/* ===== 全局间距类 ===== */
|
||
.m-1 { margin: var(--spacing-xs); }
|
||
.m-2 { margin: var(--spacing-sm); }
|
||
.m-3 { margin: var(--spacing); }
|
||
.m-4 { margin: var(--spacing-lg); }
|
||
.m-5 { margin: var(--spacing-xl); }
|
||
|
||
.p-1 { padding: var(--spacing-xs); }
|
||
.p-2 { padding: var(--spacing-sm); }
|
||
.p-3 { padding: var(--spacing); }
|
||
.p-4 { padding: var(--spacing-lg); }
|
||
.p-5 { padding: var(--spacing-xl); }
|
||
|
||
/* ===== 全局布局类 ===== */
|
||
.flex { display: flex; }
|
||
.inline-flex { display: flex; } /* UVUE仅支持flex */
|
||
.block { display: flex; } /* UVUE仅支持flex */
|
||
.inline-block { display: flex; } /* UVUE仅支持flex */
|
||
|
||
.flex-col { flex-direction: column; }
|
||
.flex-row { flex-direction: row; }
|
||
.flex-wrap { flex-wrap: wrap; }
|
||
.flex-nowrap { flex-wrap: nowrap; }
|
||
|
||
.items-start { align-items: flex-start; }
|
||
.items-center { align-items: center; }
|
||
.items-end { align-items: flex-end; }
|
||
.items-stretch { align-items: stretch; }
|
||
|
||
.justify-start { justify-content: flex-start; }
|
||
.justify-center { justify-content: center; }
|
||
.justify-end { justify-content: flex-end; }
|
||
.justify-between { justify-content: space-between; }
|
||
.justify-around { justify-content: space-around; }
|
||
|
||
.flex-1 { flex: 1; }
|
||
.flex-auto { flex: auto; }
|
||
.flex-none { flex: none; }
|
||
|
||
/* ===== 全局工具类 ===== */
|
||
.w-full { width: 100%; }
|
||
.h-full { height: 100%; }
|
||
.text-left { text-align: left; }
|
||
.text-center { text-align: center; }
|
||
.text-right { text-align: right; }
|
||
|
||
/* .cursor-pointer { cursor: pointer; } */
|
||
/* .cursor-default { cursor: default; } */
|
||
|
||
/* ===== 响应式断点 (App-UVUE 不支持 @media :root) ===== */
|
||
/*
|
||
@media (min-width: 1200px) {
|
||
:root {
|
||
--container-width: 1200px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1199px) and (min-width: 768px) {
|
||
:root {
|
||
--container-width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
:root {
|
||
--container-width: 100%;
|
||
}
|
||
}
|
||
*/
|
||
|
||
/* ===== App根容器 ===== */
|
||
.app-root {
|
||
/* min-height: 100vh; */ /* UVUE不支持vh */
|
||
background-color: var(--background-color);
|
||
flex: 1;
|
||
}
|
||
|
||
/* ===== 24栅格系统 (App-UVUE暂不支持百分比max-width) ===== */
|
||
/*
|
||
.row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 0 calc(-1 * var(--spacing-sm));
|
||
}
|
||
|
||
.col {
|
||
padding: 0 var(--spacing-sm);
|
||
}
|
||
|
||
.col-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; }
|
||
|
||
/* Grid system disabled */
|
||
/* (Grid system md disabled) */
|
||
|
||
/* ===== 按钮基础样式 ===== */
|
||
.btn {
|
||
display: flex; /* UVUE 不支持 inline-flex */
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--spacing-sm) var(--spacing);
|
||
font-size: var(--font-size-sm);
|
||
font-weight: 400;
|
||
line-height: var(--line-height-tight);
|
||
white-space: nowrap;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--border-radius);
|
||
/* cursor: pointer; */
|
||
transition: all 0.2s ease;
|
||
/* user-select: none; */
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.6;
|
||
/* cursor: not-allowed; */
|
||
}
|
||
|
||
.btn-primary {
|
||
color: var(--text-inverse);
|
||
background-color: var(--primary-color);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
/* .btn-primary:hover:not(:disabled) {
|
||
background-color: var(--primary-hover);
|
||
border-color: var(--primary-hover);
|
||
} */
|
||
|
||
.btn-secondary {
|
||
color: var(--text-secondary);
|
||
background-color: var(--background-color);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
/* .btn-secondary:hover:not(:disabled) {
|
||
color: var(--primary-color);
|
||
border-color: var(--primary-color);
|
||
} */
|
||
|
||
/* ===== 卡片基础样式 ===== */
|
||
.card {
|
||
background-color: var(--background-color);
|
||
border: 1px solid var(--border-color-light);
|
||
border-radius: var(--border-radius-lg);
|
||
box-shadow: var(--shadow);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ===== 输入框基础样式 ===== */
|
||
.input {
|
||
display: flex; /* UVUE 不支持 block */
|
||
width: 100%;
|
||
padding: var(--spacing-sm) var(--spacing);
|
||
font-size: var(--font-size-sm);
|
||
line-height: var(--line-height-tight);
|
||
color: var(--text-primary);
|
||
background-color: var(--background-color);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
transition: border-color 0.2s ease;
|
||
}
|
||
|
||
.input:focus {
|
||
/* outline: none; */
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
}
|
||
|
||
/* ===== 滚动条样式 (App-UVUE 不支持 CSS 滚动条设置) ===== */
|
||
/*
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--background-color-light);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--border-color);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--text-disabled);
|
||
}
|
||
*/
|
||
</style>
|