lift-drawing-wechat/components/Login/Login.vue

<template>
  <view class="login-overlay">
    <view class="login-container">
      <!-- 关闭按钮 -->
      <view class="close-btn" @click="closeLogin">
        <uv-icon name="close" color="#FFFFFF" size="24"></uv-icon>
      </view>

      <!-- 登录类型切换 -->
      <view class="login-type">
        <view
          class="type-item"
          :class="{ active: loginType === 'personal' }"
          @click="loginType = 'personal'"
        >
          个人
        </view>
        <view
          class="type-item"
          :class="{ active: loginType === 'enterprise' }"
          @click="loginType = 'enterprise'"
        >
          企业
        </view>
      </view>

      <!-- 登录表单 -->
      <view class="login-form">
        <!-- 用户名输入 -->
        <view class="input-item">
          <view class="icon">
            <uv-icon name="account" color="#AAAAAA" size="20"></uv-icon>
          </view>
          <input
            class="input"
            type="text"
            v-model="username"
            placeholder="请输入8位数字或英文字母"
            maxlength="20"
          />
        </view>

        <!-- 密码输入 -->
        <view class="input-item">
          <view class="icon">
            <uv-icon name="eye" color="#AAAAAA" size="20"></uv-icon>
          </view>
<!--          <input
            class="input"
            :type="showPassword ? 'text' : 'password'"
            v-model="password"
            placeholder="请输入六密码"
            maxlength="20"
          /> -->
		  <uv-input class="input" placeholder="请输入密码" :type="showPassword ? 'text' : 'password'" border="none" v-model="password"></uv-input>
          <view class="eye-icon" @click="togglePasswordVisibility">
            <uv-icon
              :name="showPassword ? 'eye-fill' : 'eye-off'"
              color="#AAAAAA"
              size="20"
            ></uv-icon>
          </view>
        </view>

        <!-- 登录按钮 -->
        <view class="login-btn" @click="handleLogin">登录</view>

        <!-- 用户协议 -->
        <view class="agreement">
          <checkbox
            :checked="agreePolicy"
            @click="agreePolicy = !agreePolicy"
            color="#4080FF"
            style="transform: scale(0.7)"
          />
          <text class="agreement-text">
            阅读
            <text class="link" @click.stop="openUserPolicy">用户政策</text>
            和
            <text class="link" @click.stop="openPrivacyPolicy">隐私政策</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useAuthStore } from "@/store";

// 登录类型：个人/企业
const loginType = ref("personal");
// 用户名和密码
const username = ref("");
const password = ref("");
// 是否显示密码
const showPassword = ref(false);
// 是否同意用户协议
const agreePolicy = ref(false);

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 处理登录
const handleLogin = () => {
  // 表单验证
  if (!username.value) {
    return uni.showToast({
      title: "请输入用户名",
      icon: "none",
    });
  }

  if (!password.value) {
    return uni.showToast({
      title: "请输入密码",
      icon: "none",
    });
  }

  if (!agreePolicy.value) {
    return uni.showToast({
      title: "请阅读并同意用户政策和隐私政策",
      icon: "none",
    });
  }

  // 登录逻辑
  const authStore = useAuthStore();

  // 显示加载中
  uni.showLoading({
    title: "登录中...",
  });

  // 模拟登录请求
  setTimeout(() => {
    uni.hideLoading();

    // 这里应该调用实际的登录API
    // 示例：模拟登录成功
    authStore.signIn({
      token: "sample_token_123456",
      userInfo: {
        id: "1",
        username: username.value,
        type: loginType.value,
      },
    });

    // 登录成功提示
    uni.showToast({
      title: "登录成功",
      icon: "success",
    });

    // 关闭登录弹窗
    emit("close");
  }, 1500);
};

// 打开用户政策
const openUserPolicy = () => {
  uni.navigateTo({
    url: "/pages/policy/user-policy",
  });
};

// 打开隐私政策
const openPrivacyPolicy = () => {
  uni.navigateTo({
    url: "/pages/policy/privacy-policy",
  });
};

// 关闭登录弹窗
const emit = defineEmits(["close"]);
const closeLogin = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.login-container {
  width: 85vw;
  background-color: #f0f4ff;
  border-radius: 20rpx;
  position: relative;
  padding: 40rpx 0;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 80rpx;
  height: 80rpx;
  background-color: #a0b4ff;
  border-radius: 0 20rpx 0 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-type {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;

  .type-item {
    font-size: 32rpx;
    padding: 10rpx 40rpx;
    margin: 0 20rpx;
    color: #999999;
    position: relative;

    &.active {
      color: #333333;
      font-weight: bold;

      &::after {
        content: "";
        position: absolute;
        bottom: -10rpx;
        left: 40rpx;
        right: 40rpx;
        height: 6rpx;
        background-color: #4080ff;
        border-radius: 3rpx;
      }
    }
  }
}

.login-form {
  padding: 0 40rpx;

  .input-item {
    background-color: #ffffff;
    border-radius: 50rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 30rpx;

    .icon {
      margin-right: 20rpx;
    }

    .input {
      flex: 1;
      height: 90rpx;
      font-size: 28rpx;
    }

    .eye-icon {
      padding: 0 10rpx;
    }
  }

  .login-btn {
    background-color: #4080ff;
    color: #ffffff;
    height: 90rpx;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    margin: 40rpx 0;
  }

  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;

    .agreement-text {
      font-size: 24rpx;
      color: #666666;

      .link {
        color: #4080ff;
      }
    }
  }
}
</style>