优化
This commit is contained in:
yzy committed
1 parent
76ba02d29b
commit
2c6d011736
4 files changed
+113
-334
No files matched your search
+67
-288
@@ -102,7 +102,7 @@ const onLogin = async() => {
|
||||
});
|
||||
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
url:'/pages/mine/index'
|
||||
})
|
||||
// 延迟一点时间再关闭弹窗，让用户看到成功提示
|
||||
setTimeout(() => {
|
||||
@@ -400,27 +400,28 @@ const emit = defineEmits(['close', 'success']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="login-container">
|
||||
<view class="h-[120vh] p-4 min-h-screen bg-white flex flex-col justify-center">
|
||||
<!-- 标题 -->
|
||||
<view class="login-header">
|
||||
<text class="title">欢迎登录</text>
|
||||
<text class="subtitle">请使用您的账号信息登录</text>
|
||||
<view class="mb-12 mt-20 text-center">
|
||||
<image src="/static/tabbar/find.png" class="w-20 h-20 mb-8" mode="aspectFit"></image>
|
||||
<text class="block text-3xl font-bold text-gray-800 mb-4">WELCOME BACK</text>
|
||||
<text class="text-sm text-gray-500">Sign in to connect with Sweekar</text>
|
||||
</view>
|
||||
|
||||
<!-- 邮箱输入 -->
|
||||
<view class="input-group">
|
||||
<view class="label">邮箱</view>
|
||||
<view class="input-wrapper">
|
||||
<view class="mb-8">
|
||||
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
|
||||
<u-icon name="email" class="h-10" color="black" bold="true"></u-icon>
|
||||
<input
|
||||
class="input-field"
|
||||
type="text"
|
||||
placeholder="请输入邮箱"
|
||||
class="w-full text-base text-gray-800 bg-transparent"
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
v-model="email"
|
||||
@input="onInputChange('email')"
|
||||
/>
|
||||
<view
|
||||
v-if="email"
|
||||
class="clear-btn"
|
||||
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-black font-bold"
|
||||
@tap="clearInput('email')"
|
||||
>
|
||||
×
|
||||
@@ -429,19 +430,20 @@ const emit = defineEmits(['close', 'success']);
|
||||
</view>
|
||||
|
||||
<!-- 密码输入 -->
|
||||
<view class="input-group">
|
||||
<view class="label">密码</view>
|
||||
<view class="input-wrapper">
|
||||
<view class="mb-8">
|
||||
|
||||
<view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid border-round-theme">
|
||||
<u-icon name="lock" class="h-10" color="black" bold="true"></u-icon>
|
||||
<input
|
||||
class="input-field"
|
||||
class="w-full text-base text-gray-800 bg-transparent"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
placeholder="Password"
|
||||
v-model="password"
|
||||
@input="onInputChange('password')"
|
||||
/>
|
||||
<view
|
||||
v-if="password"
|
||||
class="clear-btn"
|
||||
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
|
||||
@tap="clearInput('password')"
|
||||
>
|
||||
×
|
||||
@@ -450,39 +452,38 @@ const emit = defineEmits(['close', 'success']);
|
||||
</view>
|
||||
|
||||
<!-- 忘记密码链接 -->
|
||||
<view class="links-section">
|
||||
<text class="link" @tap="forgetPassword">忘记密码？</text>
|
||||
<view class="flex justify-end mb-8">
|
||||
<text class="text-blue-500 text-sm" @tap="forgetPassword">Forget Password?</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<button
|
||||
class="login-btn"
|
||||
:class="{ 'btn-loading': isLoading }"
|
||||
@tap="onLogin"
|
||||
<view
|
||||
class="w-full h-12 bg-theme rounded-lg text-white text-xl flex items-center justify-center "
|
||||
:disabled="isLoading"
|
||||
@click="onLogin"
|
||||
>
|
||||
<text v-if="!isLoading">登录</text>
|
||||
<view v-else class="loading-spinner"></view>
|
||||
</button>
|
||||
<text v-if="!isLoading">SIGN IN</text>
|
||||
<view v-else class="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin"></view>
|
||||
</view>
|
||||
|
||||
<!-- 注册链接 -->
|
||||
<view class="register-section">
|
||||
<text>还没有账号？</text>
|
||||
<text class="register-link" @tap="showRegisterPopup">立即注册</text>
|
||||
<view class="flex justify-center items-center my-8 text-gray-500 text-sm">
|
||||
<text>Don't have an account?</text>
|
||||
<text class="text-green-500 ml-2" @tap="showRegisterPopup">立即注册</text>
|
||||
</view>
|
||||
|
||||
<!-- 同意条款 -->
|
||||
<view class="agreement-section">
|
||||
<label class="agreement-label">
|
||||
<view class="mt-auto text-center">
|
||||
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
|
||||
<checkbox
|
||||
class="checkbox"
|
||||
class="scale-75 mr-2"
|
||||
:checked="checked"
|
||||
@change="onChange"
|
||||
/>
|
||||
我已阅读并同意
|
||||
<text class="agreement-link" @tap="showAgreement">《用户协议》</text>
|
||||
<text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
|
||||
和
|
||||
<text class="agreement-link" @tap="showAgreement">《隐私政策》</text>
|
||||
<text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
@@ -497,25 +498,25 @@ const emit = defineEmits(['close', 'success']);
|
||||
:closeable="true"
|
||||
@close="hideRegisterPopup"
|
||||
>
|
||||
<view class="register-popup">
|
||||
<view class="register-header">
|
||||
<text class="register-title">用户注册</text>
|
||||
<text class="register-subtitle">请填写注册信息</text>
|
||||
<view class="p-4 min-h-screen bg-white">
|
||||
<view class="mb-12 text-center">
|
||||
<text class="block text-2xl font-bold text-gray-800 mb-4">用户注册</text>
|
||||
<text class="text-lg text-gray-500">请填写注册信息</text>
|
||||
</view>
|
||||
|
||||
<!-- 注册邮箱输入 -->
|
||||
<view class="input-group">
|
||||
<view class="label">邮箱</view>
|
||||
<view class="input-wrapper">
|
||||
<view class="mb-8">
|
||||
<view class="text-sm text-gray-700 mb-4 ml-2">邮箱</view>
|
||||
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
|
||||
<input
|
||||
class="input-field"
|
||||
class="w-full text-base text-gray-800 bg-transparent"
|
||||
type="text"
|
||||
placeholder="请输入邮箱"
|
||||
v-model="registerEmail"
|
||||
/>
|
||||
<view
|
||||
v-if="registerEmail"
|
||||
class="clear-btn"
|
||||
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
|
||||
@tap="clearInput('registerEmail')"
|
||||
>
|
||||
×
|
||||
@@ -524,25 +525,25 @@ const emit = defineEmits(['close', 'success']);
|
||||
</view>
|
||||
|
||||
<!-- 验证码输入 -->
|
||||
<view class="input-group">
|
||||
<view class="label">验证码</view>
|
||||
<view class="input-wrapper">
|
||||
<view class="mb-8">
|
||||
<view class="text-sm text-gray-700 mb-4 ml-2">验证码</view>
|
||||
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
|
||||
<input
|
||||
class="input-field"
|
||||
class="w-full text-base text-gray-800 bg-transparent pr-32"
|
||||
type="text"
|
||||
placeholder="请输入验证码"
|
||||
v-model="verificationCode"
|
||||
/>
|
||||
<view
|
||||
v-if="verificationCode"
|
||||
class="clear-btn"
|
||||
class="absolute right-36 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
|
||||
@tap="clearInput('verificationCode')"
|
||||
>
|
||||
×
|
||||
</view>
|
||||
</view>
|
||||
<button
|
||||
class="code-btn"
|
||||
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-10 px-4 bg-gradient-to-r from-green-500 to-green-400 text-white text-xs rounded-full disabled:bg-gray-400 disabled:text-gray-300"
|
||||
:disabled="codeBtnDisabled"
|
||||
@tap="getVerificationCode"
|
||||
>
|
||||
@@ -551,18 +552,18 @@ const emit = defineEmits(['close', 'success']);
|
||||
</view>
|
||||
|
||||
<!-- 注册密码输入 -->
|
||||
<view class="input-group">
|
||||
<view class="label">密码</view>
|
||||
<view class="input-wrapper">
|
||||
<view class="mb-8">
|
||||
<view class="text-sm text-gray-700 mb-4 ml-2">密码</view>
|
||||
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
|
||||
<input
|
||||
class="input-field"
|
||||
class="w-full text-base text-gray-800 bg-transparent"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
v-model="registerPassword"
|
||||
/>
|
||||
<view
|
||||
v-if="registerPassword"
|
||||
class="clear-btn"
|
||||
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
|
||||
@tap="clearInput('registerPassword')"
|
||||
>
|
||||
×
|
||||
@@ -571,18 +572,18 @@ const emit = defineEmits(['close', 'success']);
|
||||
</view>
|
||||
|
||||
<!-- 确认密码输入 -->
|
||||
<view class="input-group">
|
||||
<view class="label">确认密码</view>
|
||||
<view class="input-wrapper">
|
||||
<view class="mb-8">
|
||||
<view class="text-sm text-gray-700 mb-4 ml-2">确认密码</view>
|
||||
<view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
|
||||
<input
|
||||
class="input-field"
|
||||
class="w-full text-base text-gray-800 bg-transparent"
|
||||
type="password"
|
||||
placeholder="请再次输入密码"
|
||||
v-model="confirmPassword"
|
||||
/>
|
||||
<view
|
||||
v-if="confirmPassword"
|
||||
class="clear-btn"
|
||||
class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
|
||||
@tap="clearInput('confirmPassword')"
|
||||
>
|
||||
×
|
||||
@@ -592,248 +593,26 @@ const emit = defineEmits(['close', 'success']);
|
||||
|
||||
<!-- 注册按钮 -->
|
||||
<button
|
||||
class="register-submit-btn"
|
||||
class="w-full h-12 bg-gradient-to-r from-green-500 to-green-400 rounded-full text-white text-xl font-bold flex items-center justify-center mt-5"
|
||||
@tap="onRegister"
|
||||
>
|
||||
注册
|
||||
</button>
|
||||
|
||||
<!-- 同意条款 -->
|
||||
<view class="agreement-section">
|
||||
<label class="agreement-label">
|
||||
<view class="mt-auto text-center">
|
||||
<label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
|
||||
<checkbox
|
||||
class="checkbox"
|
||||
class="scale-75 mr-2"
|
||||
:checked="checked"
|
||||
@change="onChange"
|
||||
/>
|
||||
我已阅读并同意
|
||||
<text class="agreement-link" @tap="showAgreement">《用户协议》</text>
|
||||
<text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
|
||||
和
|
||||
<text class="agreement-link" @tap="showAgreement">《隐私政策》</text>
|
||||
<text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
padding: 40rpx;
|
||||
min-height: 600rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
margin-bottom: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 44rpx;
|
||||
padding: 0 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.links-section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: 26rpx;
|
||||
color: #00a88e;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(90deg, #00a88e, #00c4a2);
|
||||
border-radius: 44rpx;
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
border: none;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&.btn-loading {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 3rpx solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.register-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 30rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
color: #00a88e;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.agreement-section {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.agreement-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
transform: scale(0.7);
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
color: #00a88e;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.register-popup {
|
||||
padding: 40rpx;
|
||||
min-height: 600rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.register-header {
|
||||
margin-bottom: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 70%;
|
||||
transform: translateY(-50%);
|
||||
height: 60rpx;
|
||||
padding: 0 20rpx;
|
||||
background: linear-gradient(90deg, #00a88e, #00c4a2);
|
||||
color: white;
|
||||
font-size: 24rpx;
|
||||
border-radius: 30rpx;
|
||||
border: none;
|
||||
z-index: 10;
|
||||
|
||||
&:disabled {
|
||||
background: #ccc;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.register-submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(90deg, #00a88e, #00c4a2);
|
||||
border-radius: 44rpx;
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
border: none;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user