Bit_Wise_World/src/views/user/SetPassword.vue

<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M15 18L9 12L15 6"
            stroke="#333"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round" />
        </svg>
      </div>
      <div class="nav-title">设置密码</div>
      <div class="nav-right"></div>
    </div>
    <div class="content">
      <!-- 表单区域 -->
      <div class="form-group">
        <label class="form-label">填写支付密码</label>
        <div class="input-wrapper">
          <input
            type="password"
            v-model="password"
            placeholder="请输入"
            class="custom-input"
            maxlength="6" />
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">请确认支付密码</label>
        <!-- 这里的 class 用于演示截图中的选中状态效果，实际使用中浏览器自带 focus 样式 -->
        <div class="input-wrapper">
          <input
            type="password"
            v-model="confirmPassword"
            placeholder="请输入"
            class="custom-input"
            maxlength="6" />
        </div>
      </div>
      <!-- 提交按钮 -->
      <div class="footer-action">
        <button class="submit-btn" @click="handleSubmit">提交</button>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import { showToast } from "vant";
  import { setPassword } from "@/api/user";

  const router = useRouter();

  const password = ref("");
  const confirmPassword = ref("");

  const handleSubmit = async () => {
    if (!password.value || !confirmPassword.value) {
      showToast("请输入密码");
      return;
    }
    if (!/^\d+$/.test(password.value) || !/^\d+$/.test(confirmPassword.value)) {
      showToast("密码只能为数字");
      return;
    }
    if (password.value !== confirmPassword.value) {
      showToast("两次输入的密码不一致");
      return;
    }
    if (password.value.length !== 6) {
      showToast("密码长度必须为6位");
      return;
    }

    const params = {
      password: password.value,
    };
    const data = await setPassword(params);
    if (data.code == "00000") {
      showToast("密码设置成功");
      router.back();
    }
  };
</script>

<style scoped>
  .page-container {
    min-height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  /* 导航栏 */
  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  .nav-left,
  .nav-right {
    width: 40px;
    display: flex;
    align-items: center;
  }

  /* 内容区 */
  .content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .form-group {
    margin-bottom: 24px;
  }

  .form-label {
    display: block;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin-bottom: 12px;
  }

  /* 输入框样式 */
  .custom-input {
    width: 100%;
    height: 50px;
    background: #f7f8fa; /* 截图中的浅灰背景 */
    border: 1px solid transparent; /* 默认无边框 */
    border-radius: 8px;
    padding: 0 16px;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    outline: none; /* 去掉浏览器默认的黑框 */
    transition: all 0.2s;
  }

  /* 占位符颜色 */
  .custom-input::placeholder {
    color: #c2c4cc;
  }

  /* 核心细节：输入框聚焦时变蓝 */
  .custom-input:focus {
    border-color: #2b6bff; /* 截图中的亮蓝色边框 */
    background: #fff; /* 聚焦时背景可能变白，视设计而定，这里保留灰底或变白均可 */
  }

  /* 底部按钮区域 */
  .footer-action {
    margin-top: auto; /* 把按钮推到最底部 */
    padding-bottom: 30px;
  }

  .submit-btn {
    width: 100%;
    height: 48px;
    background: #e02f44; /* 截图中的红色 */
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }
  .submit-btn:active {
    opacity: 0.9;
  }
</style>