|
|
@@ -0,0 +1,279 @@
|
|
|
+<template>
|
|
|
+ <view class="login-container">
|
|
|
+ <navBar title="登录" color="#000" />
|
|
|
+ <view class="login-content">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="login-header">
|
|
|
+ <view text="登录" size="36rpx" color="#333" bold></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 表单区域 -->
|
|
|
+ <view class="login-form">
|
|
|
+ <!-- 手机号码输入 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <view class="item-label"> 手机号码 </view>
|
|
|
+ <u-input
|
|
|
+ placeholder="请输入登录的手机号码"
|
|
|
+ v-model="phoneNumber"
|
|
|
+ clearable
|
|
|
+ class="custom-input"
|
|
|
+ :customStyle="{ padding: '8rpx 24rpx ' }"
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <u-icon name="phone" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
|
|
|
+ </template>
|
|
|
+ </u-input>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 密码输入 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <view class="item-label"> 登录密码 </view>
|
|
|
+ <u-input
|
|
|
+ placeholder="请输入密码"
|
|
|
+ v-model="password"
|
|
|
+ clearable
|
|
|
+ type="password"
|
|
|
+ class="custom-input"
|
|
|
+ :customStyle="{ padding: '8rpx 24rpx ' }"
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <u-icon name="lock" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
|
|
|
+ </template>
|
|
|
+ </u-input>
|
|
|
+ <!-- 忘记密码 -->
|
|
|
+ <view class="forgot-password">
|
|
|
+ <view @click="forgotPassword">忘记密码</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 登录按钮 -->
|
|
|
+ <u-button
|
|
|
+ type="primary"
|
|
|
+ @click="handleLogin"
|
|
|
+ :customStyle="{
|
|
|
+ marginTop: '80rpx',
|
|
|
+ height: '90rpx',
|
|
|
+ fontSize: '32rpx',
|
|
|
+ borderRadius: '100rpx',
|
|
|
+ }"
|
|
|
+ :disabled="!canLogin"
|
|
|
+ >登录</u-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <!-- 注册链接 -->
|
|
|
+ <view class="register-section">
|
|
|
+ <view @click="goToRegister">注册</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import navBar from "@/components/nav-bar/index.vue";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ phoneNumber: "", // 手机号码
|
|
|
+ password: "", // 密码
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ navBar,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 判断是否可以登录
|
|
|
+ canLogin() {
|
|
|
+ return this.phoneNumber.length >= 11 && this.password.length >= 6;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 处理登录
|
|
|
+ handleLogin() {
|
|
|
+ if (!this.validateForm()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "登录中...",
|
|
|
+ });
|
|
|
+
|
|
|
+ // 模拟登录请求
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: "登录成功",
|
|
|
+ icon: "success",
|
|
|
+ });
|
|
|
+
|
|
|
+ // 登录成功后的操作，比如跳转到首页
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.switchTab({
|
|
|
+ url: "/pages/index/index",
|
|
|
+ });
|
|
|
+ }, 1500);
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 表单验证
|
|
|
+ validateForm() {
|
|
|
+ if (!this.phoneNumber) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请输入手机号码",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请输入正确的手机号码",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.password) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请输入密码",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.password.length < 6) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "密码长度不能少于6位",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 忘记密码
|
|
|
+ forgotPassword() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/forgot-password/forgot-password",
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转到注册页面
|
|
|
+ goToRegister() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/register/register",
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 微信登录
|
|
|
+ wechatLogin() {
|
|
|
+ uni.showToast({
|
|
|
+ title: "微信登录",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // QQ登录
|
|
|
+ qqLogin() {
|
|
|
+ uni.showToast({
|
|
|
+ title: "QQ登录",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.login-container {
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ .login-content {
|
|
|
+ padding: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.login-header {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 100rpx;
|
|
|
+ margin-top: 60rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-form {
|
|
|
+}
|
|
|
+
|
|
|
+.form-item {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.item-label {
|
|
|
+ color: rgba(18, 26, 44, 1);
|
|
|
+ font-family: Roboto;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 51.2rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ padding-bottom: 6rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-input {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 2rpx solid rgba(158, 161, 168, 1);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ padding: 8rpx 24rpx !important;
|
|
|
+}
|
|
|
+
|
|
|
+.forgot-password {
|
|
|
+ text-align: left;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ color: rgba(102, 112, 133, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.register-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ color: #016bf6;
|
|
|
+
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: right;
|
|
|
+ text-decoration-line: underline;
|
|
|
+}
|
|
|
+
|
|
|
+.other-login {
|
|
|
+ margin-top: 100rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.divider-line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.line {
|
|
|
+ flex: 1;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e0e0e0;
|
|
|
+}
|
|
|
+::v-deep .u-input {
|
|
|
+ text-align: left !important;
|
|
|
+}
|
|
|
+</style>
|
