pet-system-fulfiller-app/pages/login/login.vue

<template>
  <view class="container">
    <!-- 顶部 Banner 区域 -->
    <view class="banner-area">
      <image class="banner-img" src="/static/header.png" mode="widthFix"></image>
    </view>

    <!-- 白色内容卡片 -->
    <view class="content-card">
      <!-- 悬浮 Logo -->
      <view class="logo-wrapper">
        <image class="logo-img" src="/static/logo.png" mode="widthFix"></image>
      </view>

      <!-- 登录 Tab 切换 -->
      <view class="tabs">
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 0 }" 
          @click="currentTab = 0"
        >
          <text class="tab-text">免密登录</text>
          <view class="tab-indicator" v-if="currentTab === 0"></view>
        </view>
        <view class="divider"></view>
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 1 }" 
          @click="currentTab = 1"
        >
          <text class="tab-text">密码登录</text>
          <view class="tab-indicator" v-if="currentTab === 1"></view>
        </view>
      </view>

      <!-- 表单区域 -->
      <view class="form-area">
        <!-- 手机号 (通用) -->
        <view class="input-group">
          <view class="area-code">
            <text>+86</text>
            <text class="arrow">﹀</text>
          </view>
          <input 
            class="input" 
            type="number" 
            placeholder="手机号" 
            placeholder-style="color: #ccc"
            v-model="mobile"
            maxlength="11"
          />
        </view>

        <!-- 免密登录: 验证码 -->
        <view class="input-group" v-if="currentTab === 0">
          <input 
            class="input" 
            type="number" 
            placeholder="验证码" 
            placeholder-style="color: #ccc"
            v-model="code"
            maxlength="6"
          />
          <view class="get-code-btn" @click="getVerifyCode">
            <text class="code-text">{{ countDown > 0 ? `${countDown}s后重试` : '获取验证码' }}</text>
          </view>
        </view>

        <!-- 密码登录: 密码框 -->
        <view class="input-group" v-if="currentTab === 1">
          <input 
            class="input" 
            :password="!showPassword" 
            type="text"
            placeholder="请输入密码" 
            placeholder-style="color: #ccc"
            v-model="password"
          />
          <view class="eye-icon" @click="showPassword = !showPassword">
            <template v-if="showPassword">
              <!-- 睁眼线框图标 -->
              <svg class="svg-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="#CCCCCC"/>
              </svg>
            </template>
            <template v-else>
               <!-- 闭眼线框图标 (带睫毛) -->
               <svg class="svg-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 7C7 7 2.73 10.11 1 14.5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M23 14.5C21.27 10.11 17 7 12 7" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M12 7V4" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M16 8L18 5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M8 8L6 5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M20 10L22 8" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M4 10L2 8" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </template>
          </view>
        </view>
        
        <!-- 忘记密码 -->
        <view class="forgot-pwd" v-if="currentTab === 1">
             <text @click="goToForgotPwd">忘记密码?</text>
        </view>

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

        <!-- 协议 -->
        <view class="agreement">
          <view class="checkbox" :class="{ checked: isAgreed }" @click="isAgreed = !isAgreed">
            <text v-if="isAgreed" class="check-mark">✓</text>
          </view>
          <text class="agree-text">
            我已经阅读并同意 <text class="link" @click.stop="showAgreement(1)">《用户服务协议》</text> 和 <text class="link" @click.stop="showAgreement(2)">《隐私政策》</text>
          </text>
        </view>
      </view>

      <!-- 底部招募入口 (固定底部) -->
      <view class="footer-recruit" @click="goToRecruit">
        <view class="recruit-badge">
          <!-- 旗帜线框图标 -->
           <svg class="svg-icon flag-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:30rpx; height:30rpx;">
            <path d="M4 14V4H18L17 9L18 14H4Z" stroke="#FF5722" stroke-width="2" stroke-linejoin="round"/>
            <path d="M4 22V14" stroke="#FF5722" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <text> 宠宝履约者招募</text>
        </view>
      </view>
      
      <!-- 协议弹窗 组件化 -->
      <privacy-popup 
        :visible="showAgreementModal" 
        :title="agreementTitle" 
        :content="agreementContent"
        @close="showAgreementModal = false"
      >
      </privacy-popup>
    </view>
  </view>
</template>

<script>
// 使用脚本文件
import logic from './logic.js';
import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';

export default {
    ...logic,
    components: {
        PrivacyPopup
    }
}
</script>

<style>
/* 引用样式文件 */
@import './style.css';
</style>