wxmp_pay_h5/src/views/Login.vue

<template>
  <div class="login-page">
    <!-- 顶部标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="logo-wrapper">
          <div class="logo-container">
            <img src="@/assets/images/logo.png" alt="告白语音" class="logo-image" />
          </div>
        </div>
      </div>
    </div>

    <!-- 登录表单 -->
    <div class="login-container">
      <div class="login-card">
        <div class="login-title">手机号登录</div>

        <!-- 手机号输入 -->
        <div class="input-group">
          <div class="country-code">+86</div>
          <van-field v-model="phoneNumber" type="tel" placeholder="请输入手机号" maxlength="11" class="phone-input"
            :border="false" />
        </div>

        <!-- 获取验证码按钮 -->
        <div class="verify-btn-container">
          <van-button type="primary" block round :disabled="!isPhoneValid || isCountingDown" @click="getVerifyCode"
            class="verify-btn">
            {{ countDownText }}
          </van-button>
        </div>

        <!-- 协议条款 -->
        <div class="agreement-section">
          <div class="agreement-text">
            登录即表示同意
            <span class="agreement-link" @click="showUserAgreement">《用户协议》</span>
            和
            <span class="agreement-link" @click="showPrivacyPolicy">《隐私政策》</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户协议弹框 -->
    <van-dialog v-model="userAgreementVisible" title="用户协议" confirm-button-text="我已阅读" :show-cancel-button="false">
      <div class="agreement-content">
        <iframe v-if="userAgreementVisible" src="https://gbyy91.com/agreement/user_agreement.html" frameborder="0"
          class="agreement-iframe"></iframe>
      </div>
    </van-dialog>

    <!-- 隐私政策弹框 -->
    <van-dialog v-model="privacyPolicyVisible" title="隐私政策" confirm-button-text="我已阅读" :show-cancel-button="false">
      <div class="agreement-content">
        <iframe v-if="privacyPolicyVisible" src="https://gbyy91.com/agreement/personal_info_protect.html"
          frameborder="0" class="agreement-iframe"></iframe>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getLoginSmsCode } from '@/api/user'

export default {
  name: "LoginPage",
  data() {
    return {
      phoneNumber: "",
      isCountingDown: false,
      countDown: 60,
      userAgreementVisible: false,
      privacyPolicyVisible: false,
    };
  },
  computed: {
    // 验证手机号格式
    isPhoneValid() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      return phoneRegex.test(this.phoneNumber);
    },
    // 倒计时文本
    countDownText() {
      if (this.isCountingDown) {
        return `${this.countDown}s后重新获取`;
      }
      return "获取验证码";
    },
  },
  methods: {
    // 获取验证码
    async getVerifyCode() {
      if (!this.isPhoneValid) {
        this.$toast("请输入正确的手机号");
        return;
      }

      try {
        this.$toast.loading({
          message: "发送中...",
          forbidClick: true,
          duration: 0,
        });

        // 调用发送验证码的API
        await getLoginSmsCode(this.phoneNumber)

        this.$toast.clear();
        this.$toast.success("验证码已发送");

        // 开始倒计时
        this.startCountDown();

        // 跳转到验证码页面
        this.$router.push({
          path: "/verify-code",
          query: {
            phone: this.phoneNumber,
          },
        });
      } catch (error) {
        this.$toast.clear();
        this.$toast.fail("发送失败，请重试");
        console.error("发送验证码失败:", error);
      }
    },

    // 开始倒计时
    startCountDown() {
      this.isCountingDown = true;
      this.countDown = 60;

      const timer = setInterval(() => {
        this.countDown--;
        if (this.countDown <= 0) {
          clearInterval(timer);
          this.isCountingDown = false;
          this.countDown = 60;
        }
      }, 1000);
    },

    // 显示用户协议
    showUserAgreement() {
      this.userAgreementVisible = true;
    },

    // 显示隐私政策
    showPrivacyPolicy() {
      this.privacyPolicyVisible = true;
    },
  },
};
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background-color: var(--background-color);
}

/* 页面头部 */
.page-header {
  padding: 20px 16px;
  text-align: center;
}

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

.logo-wrapper {
  display: flex;
  justify-content: center;
}

.logo-container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 登录容器 */
.login-container {
  padding: 40px 20px;
}

.login-card {
  background: var(--card-background);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.login-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  text-align: left;
  margin-bottom: 40px;
}

/* 输入组 */
.input-group {
  display: flex;
  align-items: center;
  background: var(--input-background);
  border-radius: 24px;
  padding: 4px 20px;
  margin-bottom: 32px;
  border: 1px solid var(--border-color);
}

.country-code {
  font-size: 16px;
  color: var(--text-color);
  margin-right: 12px;
  font-weight: 500;
}

.phone-input {
  flex: 1;
  background: transparent;
}

.phone-input :deep(.van-field__control) {
  font-size: 16px;
  color: var(--text-color);
  background: transparent;
}

.phone-input :deep(.van-field__control::placeholder) {
  color: var(--text-lighter-color);
}

/* 验证码按钮 */
.verify-btn-container {
  margin-bottom: 32px;
}

.verify-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  background: var(--primary-color);
  border: none;
}

.verify-btn:disabled {
  background: var(--text-lighter-color);
  opacity: 0.6;
}

/* 协议部分 */
.agreement-section {
  text-align: center;
}

.agreement-text {
  font-size: 12px;
  color: var(--text-lighter-color);
  line-height: 1.5;
}

.agreement-link {
  color: var(--primary-color);
  text-decoration: none;
}

.agreement-link:hover {
  text-decoration: underline;
}

/* 协议内容 */
.agreement-content {
  height: 400px;
  overflow: hidden;
}

.agreement-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .login-container {
    padding: 30px 16px;
  }

  .login-card {
    padding: 24px 20px;
  }

  .login-title {
    font-size: 20px;
    margin-bottom: 32px;
  }
}
</style>