登录、注册页样式修改

2026-03-12 09:11:48 +08:00
parent affb2342eb
commit e6d95b52b9
5 changed files with 302 additions and 192 deletions
--- a/pages/mall/admin/product/product-management/edit.uvue
+++ b/pages/mall/admin/product/product-management/edit.uvue
@@ -188,7 +188,7 @@ onMounted(async () => {
  await ensureSupabaseReady()
  const mId = uni.getStorageSync('merchant_id') as string | null
  if (!mId) {
-    uni.showToast({ title: '未获取到商家信息，请重新登录', icon: 'none' })
+    uni.showToast({ title: '商家未获取到信息，请重新登录', icon: 'none' })
    return
  }
  formData.value.merchant_id = mId
--- a/pages/user/login.uvue
+++ b/pages/user/login.uvue
@@ -60,14 +60,18 @@
                    @input="(e: any) => account = e.detail.value"
                  />
                </view>
-                <view class="field">
+                <view class="field password-field">
                  <input
                    class="input"
-                    type="password"
+                    :type="isPasswordVisible ? 'text' : 'password'"
                    placeholder="密码"
                    :value="password"
                    @input="(e: any) => password = e.detail.value"
                  />
+                  <view class="eye-btn" @click="isPasswordVisible = !isPasswordVisible">
+                    <!-- 睁眼表示可见(type='text'), 闭眼表示不可见(type='password') -->
+                    <text class="eye-icon">{{ isPasswordVisible ? '👁️' : '🙈' }}</text>
+                  </view>
                </view>
              </template>

@@ -163,6 +167,7 @@ const loginType = ref<number>(0)
 const account = ref<string>('')
 const password = ref<string>('')
 const captcha = ref<string>('')
+const isPasswordVisible = ref<boolean>(false)

 const isLoading = ref<boolean>(false)

@@ -170,32 +175,38 @@ const isLoading = ref<boolean>(false)
 * 【核心函数】：登录成功后，多条件校验是否为商家角色
 * 优先级: session_uid (auth_id) -> id -> normalized email
 */
-const checkMerchantAccess = async (uid: string, rawEmail: string) : Promise<boolean> => {
+const checkMerchantAccess = async (uid: string, rawEmail: string) : Promise<string | null> => {
 	const email = rawEmail.trim().toLowerCase()
 	console.log(`🔍 开始校验商家端角色 -> UID: ${uid}, Email: ${email}`)

 	try {
 		// 1. 尝试按 auth_id 查询
-		let res = await supa.from('ak_users').select('role').eq('auth_id', uid).execute()
+		let res = await supa.from('ak_users').select('id, role').eq('auth_id', uid).execute()
 		let dataArray = res.data
 		if (Array.isArray(dataArray) && dataArray.length > 0) {
-			const role = (dataArray[0] as UTSJSONObject).getString('role')
+			const obj = dataArray[0] as UTSJSONObject
+			const role = obj.getString('role')
+			const id = obj.getString('id')
 			console.log('✅ 按 auth_id 匹配成功，role:', role)
-			return role === 'merchant'
+			if (role === 'merchant' && id != null) return id
+			return null
 		}

 		// 2. 尝试按 id 查询 (兼容老数据)
-		res = await supa.from('ak_users').select('role').eq('id', uid).execute()
+		res = await supa.from('ak_users').select('id, role').eq('id', uid).execute()
 		dataArray = res.data
 		if (Array.isArray(dataArray) && dataArray.length > 0) {
-			const role = (dataArray[0] as UTSJSONObject).getString('role')
+			const obj = dataArray[0] as UTSJSONObject
+			const role = obj.getString('role')
+			const id = obj.getString('id')
 			console.log('✅ 按 id 匹配成功，role:', role)
-			return role === 'merchant'
+			if (role === 'merchant' && id != null) return id
+			return null
 		}

 		// 3. 尝试按 email 兜底查询
 		if (email !== '') {
-			res = await supa.from('ak_users').select('role').eq('email', email).execute()
+			res = await supa.from('ak_users').select('id, role').eq('email', email).execute()
 			dataArray = res.data
 			
 			if (Array.isArray(dataArray) && dataArray.length > 0) {
@@ -203,9 +214,12 @@ const checkMerchantAccess = async (uid: string, rawEmail: string) : Promise<bool
 				if (dataArray.length > 1) {
 					console.error('⚠️ 警告: 按 email 查到多条 ak_users 记录，取第一条校验。Email:', email)
 				}
-				const role = (dataArray[0] as UTSJSONObject).getString('role')
+				const obj = dataArray[0] as UTSJSONObject
+				const role = obj.getString('role')
+				const id = obj.getString('id')
 				console.log('✅ 按 email 匹配成功，role:', role)
-				return role === 'merchant'
+				if (role === 'merchant' && id != null) return id
+				return null
 			}
 		}

@@ -336,6 +350,7 @@ const handleLogin = async () => {
      class_id: ''
    } as UserProfile
    setUserProfile(adminProfile)
+    uni.setStorageSync('merchant_id', 'admin') // mock
    
    uni.showToast({ title: '管理员登录成功', icon: 'success' })
    setTimeout(() => {
@@ -385,12 +400,15 @@ const handleLogin = async () => {
 		const sessionUser = result.user
 		let sessionUid = sessionUser?.getString('id') ?? ''
 		
-		const isMerchant = await checkMerchantAccess(sessionUid, account.value)
-		if (!isMerchant) {
+		const merchantId = await checkMerchantAccess(sessionUid, account.value)
+		if (merchantId == null) {
 			await supa.signOut()
 			logout() 
 			throw new Error('您还没有注册商家端账户，快去注册一个')
 		}
+
+		// 存入商家ID
+		uni.setStorageSync('merchant_id', merchantId)
      } else {
        uni.showToast({ title: '手机号密码登录功能开发中', icon: 'none' })
        return
@@ -619,6 +637,24 @@ const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'n
 /* Form */
 .form{ margin-top: 10px; }
 .field{ margin-bottom: 14px; }
+.password-field {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.eye-btn {
+  position: absolute;
+  right: 14px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+.eye-icon {
+  font-size: 18px;
+}
 .input{
  width: 100%;
  height: 44px;
--- a/pages/user/register.uvue
+++ b/pages/user/register.uvue
@@ -1,86 +1,97 @@
 <template>
-	<view class="register-wrapper">
+	<view class="page">
 		<!-- Header Logo -->
 		<view class="header">
-			<image :src="logoUrl" mode="aspectFit" class="logo" />
+			<view class="header-inner">
+				<image :src="logoUrl" mode="aspectFit" class="logo" />
+				<!-- 已有账号 -->
+				<view class="header-right">
+					<text class="tips-text">已有账号？</text>
+					<text class="tips-link" @click="navigateToLogin">立即登录</text>
+				</view>
+			</view>
 		</view>

 		<!-- 注册表单区域 -->
-		<view class="register-box">
-			<view class="title">注册账号</view>
+		<view class="main">
+			<view class="register-box">
+				<text class="title">注册账号</text>

-			<!-- 注册表单 -->
-			<view class="form-content">
-				<!-- 邮箱 -->
-				<view class="input-group">
-					<view class="input-wrapper">
-						<image src="/static/user/phone_1.png" class="input-icon" />
-						<input 
-							type="text" 
-							placeholder="输入邮箱" 
-							:value="email" 
-							@input="(e: any) => email = e.detail.value"
-							class="input-field"
-						/>
+				<!-- 注册表单 -->
+				<view class="form-content">
+					<!-- 邮箱 -->
+					<view class="input-group">
+						<view class="input-wrapper">
+							<image src="/static/user/phone_1.png" class="input-icon" />
+							<input 
+								type="text" 
+								placeholder="输入邮箱" 
+								:value="email" 
+								@input="(e: any) => email = e.detail.value"
+								class="input-field"
+							/>
+						</view>
+					</view>
+
+					<!-- 密码 -->
+					<view class="input-group">
+						<view class="input-wrapper">
+							<image src="/static/user/code_1.png" class="input-icon" />
+							<input 
+								:type="isPasswordVisible ? 'text' : 'password'" 
+								placeholder="填写密码" 
+								:value="password" 
+								@input="(e: any) => password = e.detail.value"
+								class="input-field"
+							/>
+							<view class="eye-btn" @click="isPasswordVisible = !isPasswordVisible">
+								<!-- 睁眼表示可见, 闭眼表示不可见 -->
+								<text class="eye-icon">{{ isPasswordVisible ? '👁️' : '🙈' }}</text>
+							</view>
+						</view>
+					</view>
+
+					<!-- 确认密码 -->
+					<view class="input-group">
+						<view class="input-wrapper">
+							<image src="/static/user/code_1.png" class="input-icon" />
+							<input 
+								:type="isConfirmPasswordVisible ? 'text' : 'password'" 
+								placeholder="确认密码" 
+								:value="confirmPassword" 
+								@input="(e: any) => confirmPassword = e.detail.value"
+								class="input-field"
+							/>
+							<view class="eye-btn" @click="isConfirmPasswordVisible = !isConfirmPasswordVisible">
+								<text class="eye-icon">{{ isConfirmPasswordVisible ? '👁️' : '🙈' }}</text>
+							</view>
+						</view>
 					</view>
 				</view>

-				<!-- 密码 -->
-				<view class="input-group">
-					<view class="input-wrapper">
-						<image src="/static/user/code_1.png" class="input-icon" />
-						<input 
-							type="password" 
-							placeholder="填写密码" 
-							:value="password" 
-							@input="(e: any) => password = e.detail.value"
-							class="input-field"
-						/>
-					</view>
+				<!-- 注册按钮 -->
+				<view class="register-btn" @click="handleRegister" :class="{ 'disabled': isLoading }">
+					<text class="btn-text">注册</text>
 				</view>

-				<!-- 确认密码 -->
-				<view class="input-group">
-					<view class="input-wrapper">
-						<image src="/static/user/code_1.png" class="input-icon" />
-						<input 
-							type="password" 
-							placeholder="确认密码" 
-							:value="confirmPassword" 
-							@input="(e: any) => confirmPassword = e.detail.value"
-							class="input-field"
+				<!-- 协议勾选 -->
+				<view class="protocol">
+					<checkbox-group class="protocol-group" @change="handleProtocolChange">
+						<checkbox 
+							:checked="protocol" 
+							class="protocol-checkbox"
+							:class="{ 'trembling': inAnimation }"
+							@animationend="inAnimation = false"
 						/>
-					</view>
+						<text class="protocol-text">
+							已阅读并同意
+							<text class="main-color" @click="navigateToTerms(3)">《用户协议》</text>
+							与
+							<text class="main-color" @click="navigateToTerms(4)">《隐私协议》</text>
+						</text>
+					</checkbox-group>
 				</view>
 			</view>
-
-			<!-- 注册按钮 -->
-			<view class="register-btn" @click="handleRegister" :class="{ 'disabled': isLoading }">
-				注册
-			</view>
-
-			<!-- 已有账号 -->
-			<view class="tips">
-				<text class="tips-text">已有账号？</text>
-				<text class="tips-link" @click="navigateToLogin">立即登录</text>
-			</view>
-
-			<!-- 协议勾选 -->
-			<view class="protocol">
-				<checkbox-group @change="handleProtocolChange">
-					<checkbox 
-						:checked="protocol" 
-						:class="{ 'trembling': inAnimation }"
-						@animationend="inAnimation = false"
-					/>
-					<text class="protocol-text">
-						已阅读并同意
-						<text class="main-color" @click="navigateToTerms(3)">《用户协议》</text>
-						与
-						<text class="main-color" @click="navigateToTerms(4)">《隐私协议》</text>
-					</text>
-				</checkbox-group>
-			</view>
 		</view>

 		<!-- 底部版权信息 -->
@@ -101,6 +112,8 @@
 	const protocol = ref<boolean>(false)
 	const inAnimation = ref<boolean>(false)
 	const isLoading = ref<boolean>(false)
+	const isPasswordVisible = ref<boolean>(false)
+	const isConfirmPasswordVisible = ref<boolean>(false)
 	const logoUrl = ref<string>('/static/logo.png')

 	// 处理协议勾选变化
@@ -314,176 +327,208 @@
 </script>

 <style>
-page {
-	background: #F5F5F5;
-}
-
-.register-wrapper {
+/* Base Layout */
+.page {
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
-	background: #F5F5F5;
+	background-color: #FFFFFF;
 }

-/* Header Logo */
+/* Header Area */
 .header {
-	padding: 40rpx 0 0 60rpx;
-	background: #F5F5F5;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	border-bottom: 1px solid #EEEEEE;
+	background-color: #FFFFFF;
+}
+
+.header-inner {
+	width: min(1200px, 92vw);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 24px 0;
 }

 .logo {
-	width: 200rpx;
-	height: 80rpx;
+	width: 180px;
+	height: 64px;
 }

-/* 注册表单区域 */
-.register-box {
+.header-right {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.tips-text {
+	font-size: 15px;
+	color: #666666;
+}
+
+.tips-link {
+	font-size: 15px;
+	color: var(--view-theme, #FF4D4F);
+	margin-left: 8px;
+	cursor: pointer;
+}
+
+/* Main Form Area */
+.main {
 	flex: 1;
-	background: #FFFFFF;
-	margin: 60rpx 40rpx 0;
-	border-radius: 8rpx;
-	padding: 60rpx 50rpx 40rpx;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: flex-start;
+	padding-top: 80px;
+	background-color: #FFFFFF;
+}
+
+.register-box {
+	width: 420px;
+	max-width: 92vw;
+	display: flex;
+	flex-direction: column;
+	background-color: #FFFFFF;
 }

 .title {
-	font-size: 40rpx;
+	font-size: 26px;
 	font-weight: 600;
 	color: #333333;
 	text-align: center;
-	margin-bottom: 50rpx;
+	margin-bottom: 40px;
 }

-/* 表单内容 */
+/* Form Content */
 .form-content {
-	margin-bottom: 40rpx;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
 }

 .input-group {
-	margin-bottom: 30rpx;
+	margin-bottom: 24px;
+	width: 100%;
 }

 .input-wrapper {
 	position: relative;
 	display: flex;
+	flex-direction: row;
 	align-items: center;
-	padding: 0 20rpx;
-	height: 88rpx;
-	border: 1rpx solid #E0E0E0;
-	border-radius: 4rpx;
-	background: #FFFFFF;
+	height: 48px;
+	border: 1px solid #D9D9D9;
+	border-radius: 4px;
+	background-color: #FFFFFF;
+	padding: 0 16px;
+	transition-property: border-color, box-shadow;
+	transition-duration: 0.3s;
 }

 .input-wrapper:focus-within {
 	border-color: var(--view-theme, #FF4D4F);
+	box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
 }

 .input-icon {
-	width: 32rpx;
-	height: 32rpx;
-	flex-shrink: 0;
-	margin-right: 20rpx;
+	width: 22px;
+	height: 22px;
+	margin-right: 12px;
+	opacity: 0.4;
 }

 .input-field {
 	flex: 1;
-	font-size: 28rpx;
-	height: 88rpx;
-	line-height: 88rpx;
+	height: 100%;
+	font-size: 15px;
 	color: #333333;
-	display: flex;
-	align-items: center;
-}
-
-.code-input {
-	flex: 1;
-}
-
-.code-btn {
-	position: absolute;
-	right: 20rpx;
-	top: 50%;
-	transform: translateY(-50%);
-	color: var(--view-theme, #FF4D4F);
-	font-size: 26rpx;
 	background: transparent;
 	border: none;
-	padding: 0;
-	line-height: 1;
+	outline: none;
 }

-.code-btn.disabled {
+.input-field::placeholder {
+	color: #BFBFBF;
+}
+
+/* Eye Button */
+.eye-btn {
+	padding: 0 8px;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.eye-icon {
+	font-size: 18px;
 	color: #999999;
 }

-/* 注册按钮 */
+/* Register Button */
 .register-btn {
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	height: 88rpx;
-	margin-top: 50rpx;
-	background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
-	border-radius: 4rpx;
-	color: #FFFFFF;
-	font-size: 32rpx;
-	font-weight: 500;
-	box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
+	height: 48px;
+	margin-top: 10px;
+	background: linear-gradient(90deg, var(--view-theme, #FF4D4F) 0%, #FF7A45 100%);
+	border-radius: 4px;
+	cursor: pointer;
 }

 .register-btn.disabled {
-	background: #D9D9D9;
-	box-shadow: none;
 	opacity: 0.6;
+	cursor: not-allowed;
+	background: #D9D9D9;
 }

-/* 已有账号提示 */
-.tips {
-	margin-top: 30rpx;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
+.btn-text {
+	color: #FFFFFF;
+	font-size: 16px;
+	font-weight: 500;
+	letter-spacing: 2px;
 }

-.tips-text {
-	font-size: 28rpx;
-	color: #666666;
-}
-
-.tips-link {
-	font-size: 28rpx;
-	color: var(--view-theme, #FF4D4F);
-	margin-left: 8rpx;
-}
-
-/* 协议区域 */
+/* Protocol */
 .protocol {
-	margin-top: 40rpx;
+	margin-top: 24px;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
 }

-.protocol checkbox-group {
+.protocol-group {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 }

-.protocol checkbox {
-	margin-right: 10rpx;
+.protocol-checkbox {
+	transform: scale(0.8);
+	margin-right: 4px;
 }

 .protocol-text {
-	font-size: 24rpx;
-	color: #999999;
+	font-size: 13px;
+	color: #666666;
 }

 .main-color {
+	font-size: 13px;
 	color: var(--view-theme, #FF4D4F);
+	cursor: pointer;
 }

 .trembling {
@@ -491,20 +536,43 @@ page {
 }

@keyframes shake {
-	0%, 100% { transform: translateX(0); }
-	10%, 30%, 50%, 70%, 90% { transform: translateX(-10rpx); }
-	20%, 40%, 60%, 80% { transform: translateX(10rpx); }
+	0%, 100% { transform: translateX(0) scale(0.8); }
+	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px) scale(0.8); }
+	20%, 40%, 60%, 80% { transform: translateX(4px) scale(0.8); }
 }

-/* 底部版权 */
+/* Footer */
 .footer {
-	padding: 40rpx 0;
-	text-align: center;
-	background: #F5F5F5;
+	padding: 40px 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
 }

 .footer-text {
-	font-size: 22rpx;
+	font-size: 13px;
 	color: #999999;
 }
+
+/* Responsive */
+@media screen and (max-width: 768px) {
+	.header-inner {
+		padding: 16px 20px;
+	}
+	.logo {
+		width: 140px;
+		height: 50px;
+	}
+	.main {
+		padding-top: 40px;
+	}
+	.register-box {
+		width: 100%;
+		padding: 0 24px;
+	}
+	.title {
+		font-size: 24px;
+		margin-bottom: 30px;
+	}
+}
 </style>