登录页面设计
This commit is contained in:
minimaxagent1
parent
15b551e01b
commit
bea633cea7
|
|
@ -27,8 +27,6 @@
|
|||
<text class="agreement-link" @click="showPrivacyPolicy">《隐私政策》</text>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 服务条款弹窗 -->
|
||||
<view v-if="showServiceTermsPopup" class="popup-overlay" @click="closeServiceTermsPopup">
|
||||
<view class="popup-content" @click.stop>
|
||||
|
|
@ -79,7 +77,6 @@ import { commonEnum } from "../../enum/commonEnum";
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTime: '',
|
||||
loginLoading: false,
|
||||
hasAgreed: false,
|
||||
hasReadServiceTerms: false,
|
||||
|
|
@ -89,45 +86,23 @@ export default {
|
|||
serviceTermsContent: '',
|
||||
privacyPolicyContent: '',
|
||||
scrollTop: 0,
|
||||
statusBarHeight: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
CommonEnum() {
|
||||
return commonEnum
|
||||
},
|
||||
canLogin() {
|
||||
return this.hasAgreed;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 获取状态栏高度
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
||||
|
||||
// 初始化页面loading管理器
|
||||
this.pageLoading = new AutoLoadingManager();
|
||||
|
||||
// 更新时间
|
||||
this.updateTime();
|
||||
setInterval(this.updateTime, 1000);
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除loading
|
||||
forceHideLoading();
|
||||
if (this.pageLoading) {
|
||||
this.pageLoading.destroy()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateTime() {
|
||||
const now = new Date();
|
||||
const hours = now.getHours().toString().padStart(2, '0');
|
||||
const minutes = now.getMinutes().toString().padStart(2, '0');
|
||||
this.currentTime = `${hours}:${minutes}`;
|
||||
},
|
||||
|
||||
// 切换同意状态
|
||||
toggleAgreement() {
|
||||
if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
|
||||
this.hasAgreed = !this.hasAgreed;
|
||||
|
|
@ -139,7 +114,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 显示服务条款
|
||||
async showServiceTerms() {
|
||||
try {
|
||||
const res = await getServiceTerms();
|
||||
|
|
@ -165,7 +139,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 显示隐私政策
|
||||
async showPrivacyPolicy() {
|
||||
try {
|
||||
const res = await getPrivacyPolicy();
|
||||
|
|
@ -191,17 +164,14 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 关闭服务条款弹窗
|
||||
closeServiceTermsPopup() {
|
||||
this.showServiceTermsPopup = false;
|
||||
},
|
||||
|
||||
// 关闭隐私政策弹窗
|
||||
closePrivacyPolicyPopup() {
|
||||
this.showPrivacyPolicyPopup = false;
|
||||
},
|
||||
|
||||
// 同意服务条款
|
||||
async agreeServiceTerms() {
|
||||
this.hasReadServiceTerms = true;
|
||||
this.closeServiceTermsPopup();
|
||||
|
|
@ -214,7 +184,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 同意隐私政策
|
||||
async agreePrivacyPolicy() {
|
||||
this.hasReadPrivacyPolicy = true;
|
||||
this.closePrivacyPolicyPopup();
|
||||
|
|
@ -227,14 +196,12 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 检查同意状态
|
||||
checkAgreementStatus() {
|
||||
if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
|
||||
this.hasAgreed = true;
|
||||
}
|
||||
},
|
||||
|
||||
// 显示未阅读的条款
|
||||
async showUnreadTerms() {
|
||||
if (!this.hasReadServiceTerms) {
|
||||
await this.showServiceTerms();
|
||||
|
|
@ -339,58 +306,9 @@ page {
|
|||
.login-container {
|
||||
padding-bottom: 40rpx;
|
||||
max-width: 750rpx;
|
||||
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.status-icons {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
/* 头部区域 */
|
||||
.header-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 32rpx;
|
||||
padding: 10rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
.logo-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -399,125 +317,36 @@ page {
|
|||
margin-bottom: 80rpx;
|
||||
width: 100%;
|
||||
margin-top: 330rpx;
|
||||
//border:green 1px solid;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 276rpx;
|
||||
height: 276rpx;
|
||||
border-radius: 28rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f8f9fa;
|
||||
border-radius: 25rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-container:focus-within {
|
||||
border-color: #ff9a9e;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 6rpx rgba(255, 154, 158, 0.1);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
font-size: 32rpx;
|
||||
padding: 10rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 表单选项 */
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.remember-password {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 6rpx;
|
||||
.main-content {
|
||||
padding: 0 53rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 654rpx;
|
||||
//border: red 1px solid;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background: #ff9a9e;
|
||||
border-color: #ff9a9e;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.option-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
font-size: 26rpx;
|
||||
color: #ff9a9e;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background: #ff6b35;
|
||||
border-radius: 45rpx;
|
||||
height: 98rpx;
|
||||
background: #F15A04;
|
||||
border-radius: 10rpx;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
|
||||
}
|
||||
|
|
@ -538,7 +367,6 @@ page {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
/* 底部协议 */
|
||||
.agreement-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -588,7 +416,6 @@ page {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -682,4 +509,4 @@ page {
|
|||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,6 @@ const utils_loadingManager = require("../../utils/loading-manager.js");
|
|||
const _sfc_main = {
|
||||
data() {
|
||||
return {
|
||||
currentTime: "",
|
||||
loginLoading: false,
|
||||
hasAgreed: false,
|
||||
hasReadServiceTerms: false,
|
||||
|
|
@ -18,24 +17,16 @@ const _sfc_main = {
|
|||
showPrivacyPolicyPopup: false,
|
||||
serviceTermsContent: "",
|
||||
privacyPolicyContent: "",
|
||||
scrollTop: 0,
|
||||
statusBarHeight: 0
|
||||
scrollTop: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
CommonEnum() {
|
||||
return enum_commonEnum.commonEnum;
|
||||
},
|
||||
canLogin() {
|
||||
return this.hasAgreed;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const systemInfo = common_vendor.index.getSystemInfoSync();
|
||||
this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
||||
this.pageLoading = new utils_loadingManager.AutoLoadingManager();
|
||||
this.updateTime();
|
||||
setInterval(this.updateTime, 1e3);
|
||||
},
|
||||
onUnload() {
|
||||
utils_loadingManager.forceHideLoading();
|
||||
|
|
@ -44,13 +35,6 @@ const _sfc_main = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
updateTime() {
|
||||
const now = /* @__PURE__ */ new Date();
|
||||
const hours = now.getHours().toString().padStart(2, "0");
|
||||
const minutes = now.getMinutes().toString().padStart(2, "0");
|
||||
this.currentTime = `${hours}:${minutes}`;
|
||||
},
|
||||
// 切换同意状态
|
||||
toggleAgreement() {
|
||||
if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
|
||||
this.hasAgreed = !this.hasAgreed;
|
||||
|
|
@ -61,7 +45,6 @@ const _sfc_main = {
|
|||
});
|
||||
}
|
||||
},
|
||||
// 显示服务条款
|
||||
async showServiceTerms() {
|
||||
try {
|
||||
const res = await api_article_article.getServiceTerms();
|
||||
|
|
@ -79,14 +62,13 @@ const _sfc_main = {
|
|||
});
|
||||
}
|
||||
} catch (error) {
|
||||
common_vendor.index.__f__("error", "at pages/login/login.vue:160", "获取服务条款失败:", error);
|
||||
common_vendor.index.__f__("error", "at pages/login/login.vue:134", "获取服务条款失败:", error);
|
||||
common_vendor.index.showToast({
|
||||
title: "获取服务条款失败",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
},
|
||||
// 显示隐私政策
|
||||
async showPrivacyPolicy() {
|
||||
try {
|
||||
const res = await api_article_article.getPrivacyPolicy();
|
||||
|
|
@ -104,22 +86,19 @@ const _sfc_main = {
|
|||
});
|
||||
}
|
||||
} catch (error) {
|
||||
common_vendor.index.__f__("error", "at pages/login/login.vue:186", "获取隐私政策失败:", error);
|
||||
common_vendor.index.__f__("error", "at pages/login/login.vue:159", "获取隐私政策失败:", error);
|
||||
common_vendor.index.showToast({
|
||||
title: "获取隐私政策失败",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
},
|
||||
// 关闭服务条款弹窗
|
||||
closeServiceTermsPopup() {
|
||||
this.showServiceTermsPopup = false;
|
||||
},
|
||||
// 关闭隐私政策弹窗
|
||||
closePrivacyPolicyPopup() {
|
||||
this.showPrivacyPolicyPopup = false;
|
||||
},
|
||||
// 同意服务条款
|
||||
async agreeServiceTerms() {
|
||||
this.hasReadServiceTerms = true;
|
||||
this.closeServiceTermsPopup();
|
||||
|
|
@ -130,7 +109,6 @@ const _sfc_main = {
|
|||
}, 500);
|
||||
}
|
||||
},
|
||||
// 同意隐私政策
|
||||
async agreePrivacyPolicy() {
|
||||
this.hasReadPrivacyPolicy = true;
|
||||
this.closePrivacyPolicyPopup();
|
||||
|
|
@ -141,13 +119,11 @@ const _sfc_main = {
|
|||
}, 500);
|
||||
}
|
||||
},
|
||||
// 检查同意状态
|
||||
checkAgreementStatus() {
|
||||
if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
|
||||
this.hasAgreed = true;
|
||||
}
|
||||
},
|
||||
// 显示未阅读的条款
|
||||
async showUnreadTerms() {
|
||||
if (!this.hasReadServiceTerms) {
|
||||
await this.showServiceTerms();
|
||||
|
|
@ -172,7 +148,7 @@ const _sfc_main = {
|
|||
common_vendor.index.login({
|
||||
success(res) {
|
||||
if (res.code) {
|
||||
common_vendor.index.__f__("log", "at pages/login/login.vue:266", "登录！", res);
|
||||
common_vendor.index.__f__("log", "at pages/login/login.vue:233", "登录！", res);
|
||||
let data = {
|
||||
loginCode: res.code,
|
||||
appId: 1
|
||||
|
|
@ -186,7 +162,7 @@ const _sfc_main = {
|
|||
}
|
||||
utils_loadingManager.forceHideLoading();
|
||||
if (res2.code == 200) {
|
||||
common_vendor.index.__f__("log", "at pages/login/login.vue:283", res2, "resres");
|
||||
common_vendor.index.__f__("log", "at pages/login/login.vue:250", res2, "resres");
|
||||
common_vendor.index.setStorageSync("token", res2.token);
|
||||
common_vendor.index.showToast({
|
||||
title: "登录成功",
|
||||
|
|
@ -207,7 +183,7 @@ const _sfc_main = {
|
|||
that.pageLoading.hide();
|
||||
}
|
||||
utils_loadingManager.forceHideLoading();
|
||||
common_vendor.index.__f__("error", "at pages/login/login.vue:305", "登录失败:", error);
|
||||
common_vendor.index.__f__("error", "at pages/login/login.vue:272", "登录失败:", error);
|
||||
common_vendor.index.showToast({
|
||||
title: "登录失败",
|
||||
icon: "none"
|
||||
|
|
@ -216,7 +192,7 @@ const _sfc_main = {
|
|||
}
|
||||
},
|
||||
fail(err) {
|
||||
common_vendor.index.__f__("error", "at pages/login/login.vue:314", "微信登录失败:", err);
|
||||
common_vendor.index.__f__("error", "at pages/login/login.vue:281", "微信登录失败:", err);
|
||||
common_vendor.index.showToast({
|
||||
title: "微信登录失败",
|
||||
icon: "none"
|
||||
|
|
|
|||
141
unpackage/dist/dev/mp-weixin/pages/login/login.wxss
vendored
141
unpackage/dist/dev/mp-weixin/pages/login/login.wxss
vendored
|
|
@ -31,48 +31,6 @@ page {
|
|||
max-width: 750rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
.status-icons {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
}
|
||||
.status-icon {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
/* 头部区域 */
|
||||
.header-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.action-btn {
|
||||
font-size: 32rpx;
|
||||
padding: 10rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
.logo-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -85,105 +43,24 @@ page {
|
|||
.logo-image {
|
||||
width: 276rpx;
|
||||
height: 276rpx;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f8f9fa;
|
||||
border-radius: 25rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.input-container:focus-within {
|
||||
border-color: #ff9a9e;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 6rpx rgba(255, 154, 158, 0.1);
|
||||
}
|
||||
.input-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.form-input::-webkit-input-placeholder {
|
||||
color: #999;
|
||||
}
|
||||
.form-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
.password-toggle {
|
||||
font-size: 32rpx;
|
||||
padding: 10rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 表单选项 */
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.remember-password {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
.checkbox {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 6rpx;
|
||||
.main-content {
|
||||
padding: 0 53rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 654rpx;
|
||||
}
|
||||
.checkbox.checked {
|
||||
background: #ff9a9e;
|
||||
border-color: #ff9a9e;
|
||||
}
|
||||
.checkmark {
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.option-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
.forgot-password {
|
||||
font-size: 26rpx;
|
||||
color: #ff9a9e;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background: #ff6b35;
|
||||
border-radius: 45rpx;
|
||||
height: 98rpx;
|
||||
background: #F15A04;
|
||||
border-radius: 10rpx;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
|
||||
}
|
||||
|
|
@ -200,8 +77,6 @@ page {
|
|||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 底部协议 */
|
||||
.agreement-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -244,8 +119,6 @@ page {
|
|||
color: #ff6b35;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user