cankao-h5/src/pages/realtimeInfo/components/LoginPopup/index.vue

<template>
  <u-popup
    class="loginPopup"
    :show="props.show"
    closeable
    :mode="props.mode"
    round="12"
    :closeOnClickOverlay="false"
    @close="handlePopupClose"
  >
    <view class="loginPopupContent">
      <view class="loginTitle">登录后掌握更多优质财经内容</view>

      <!-- 登录表单 -->
      <view class="loginForm">
        <u--form :model="state.loginForm" ref="uForm">
          <u-form-item
            style="padding: 0"
            class="loginFormItem"
            prop="userInfo.name"
            borderBottom
            ref="item1"
          >
            <u--input
              class="loginFormInput"
              placeholder="请输入您的手机号"
              v-model="state.loginForm.phone"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            class="loginFormItem"
            prop="userInfo.name"
            borderBottom
            ref="item1"
          >
            <u--input
              class="loginFormInput"
              placeholder="请输入短信验证码"
              v-model="state.loginForm.code"
              border="none"
            ></u--input>
            <view class="getCode" @click="captcha">{{ codeText }}</view>
          </u-form-item>
        </u--form>
        <u-button class="loginFormBtn" text="登录" @click="Login"></u-button>
      </view>
      <!-- 用户协议 -->
      <view class="tips"
        >登录即代表已经阅读并同意
        <view class="userAgreement">《用户协议》</view>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { getCaptcha, login } from "@/api";
import { validatePhoneNumber } from "@/utils/util";
import { Session } from "@/utils/storage";
import { useUserStore } from "@/stores/user";

const emit = defineEmits(["onSuccess", "onError", "onCancel"]);
const props = defineProps({
  // 列表内容
  show: {
    type: Boolean,
    default: () => false,
  },

  mode: {
    type: String,
    default: () => "bottom",
  },
});
const userStore = useUserStore();
const codeText = ref("获取验证码");
const isDisabled = ref(false);
const state = reactive({
  loginForm: {
    phone: "",
    code: "",
  },
});

// 获取验证码
const captcha = async () => {
  if (!validatePhoneNumber(state.loginForm.phone)) {
    return uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
  } else {
    const res = await getCaptcha({
      phone: state.loginForm.phone,
    });

    if (res.code == 200) {
      let countdown = 60;
      if (!isDisabled.value) {
        isDisabled.value = true;
        codeText.value = `${countdown}秒后重新获取`;
        const intervalId = setInterval(() => {
          countdown--;
          codeText.value = `${countdown}秒后重新获取`;
          if (countdown <= 0) {
            clearInterval(intervalId);
            isDisabled.value = false;
            codeText.value = "获取验证码";
          }
        }, 1000);
      } else {
        uni.showToast({
          title: "请等待 60s 后重试",
          icon: "error",
        });
      }
    }
  }
};

// 登录成功之后的回调
const callbackSuccess = () => {
  emit("onSuccess");
};
// 登录失败之后的回调
const callBackError = () => {
  emit("onError");
};

// 登录
const Login = async () => {
  if (!validatePhoneNumber(state.loginForm.phone)) {
    return uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
  } else if (state.loginForm.code.length !== 6) {
    return uni.showToast({
      title: "请输入正确的验证码",
      icon: "none",
    });
  }
  const result = await userStore.onLogin({ ...state.loginForm });
  if (result.code === 200) {
    callbackSuccess();
  } else {
    callBackError();
  }
};

// 关闭弹框
const handlePopupClose = () => {
  emit("onCancel");
};
</script>

<style lang="scss" scoped>
.loginPopup {
  ::v-deep {
    .u-slide-up-enter-active {
      width: 100%;
      height: 786rpx;
    }

    .u-popup__content__close {
      margin-top: 30rpx;
    }
  }

  .loginPopupContent {
    box-sizing: border-box;
    padding: 30rpx;
    position: relative;

    .loginTitle {
      // font-size: 32rpx;
      font-size: var(--h1-font-size);
      font-weight: bold;
      text-align: center;
      box-sizing: border-box;
      padding-top: 30rpx;
    }

    .loginForm {
      width: 600rpx;
      // border: 1px solid;
      margin: 60rpx auto;

      .loginFormItem {
        width: 600rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background-color: #fff;
        border: 2rpx solid #b9b9b9;
        // padding: 0 !important;

        &:nth-child(2) {
          margin: 32rpx 0;
        }

        ::v-deep {
          .u-form-item__body {
            padding: 0;
          }
        }

        .loginFormInput {
          width: 100%;
          height: 100rpx !important;
          box-sizing: border-box;
          padding: 0 20px !important;
        }

        .getCode {
          height: 100rpx;
          box-sizing: border-box;
          padding: 20px;
          display: flex;
          align-items: center;
          font-size: var(--h1-font-size);
          color: rgba(51, 51, 51, 0.6);
          position: relative;

          &::before {
            content: "";
            display: block;
            width: 2rpx;
            height: 52rpx;
            background-color: rgba(51, 51, 51, 0.1);
            position: absolute;
            left: 0;
          }
        }
      }

      .loginFormBtn {
        width: 600rpx;
        height: 100rpx;
        border-radius: 20rpx;
        border: none;
        background-color: #e7303f;
        color: #fff;

        ::v-deep {
          .u-button__text {
            font-size: var(--h1-font-size) !important;
          }
        }
      }
    }

    .tips {
      // font-size: 24rpx;
      font-size: var(--h4-font-size);
      display: flex;
      justify-content: center;
      color: #717171;

      .userAgreement {
        color: #333;
      }
    }
  }
}
</style>