baby-app/src/pages/user/login.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>
<template>
  <view class="login-container">
    <view class="login-box">
      <view class="login_title">
        <view class="title-en">Hello!</view>
        <view class="title-en">欢迎登录橙宝日志</view>
      </view>
      <!--  输入框-->
      <view class="input-wrapper">
        <!-- 账号 -->
        <view class="country-code">
          <view class="country-phone">
            <image class="imgIcon" src="@/static/icon/phone.svg"></image>
            <view class="login-text">手机号</view>
          </view>
          <view class="phone-input">
            <view @click="replacePhone">{{ replacePoneValue }}</view>
            <image class="w-[32rpx] h-[32rpx]" src="@/static/icon/chevron-right.svg"></image>
            <view>
              <input v-model="account" type="text" placeholder="请输入手机号" />
            </view>
          </view>
        </view>
        <!-- 验证码 -->
        <view class="country-password">
          <view class="country-phone">
            <image class="imgIcon" src="@/static/icon/Verification.svg"></image>
            <view class="login-text">验证码</view>
          </view>
          <view class="phone-input">
            <view class="verification-input">
              <input v-model="verification" type="text" placeholder="请输入验证码" />
            </view>
            <image
              style="width: 2rpx; height: 32rpx; background: #e7e7e7"
              src="@/static/icon/textBor.svg"
            ></image>
            <view class="send-btn" :disabled="isCountingDown" @click="sendVerificationCode">
              {{ buttonText }}
            </view>
          </view>
        </view>
      </view>

      <wd-button @click="loginBtn" class="login-button">登录</wd-button>

      <!-- 手机 -->
      <view @click.stop="showArea = false" v-if="showArea" class="wrap">
        <view class="wrap-content">
          <wd-index-bar sticky>
            <view v-for="item in areaData" :key="item.index">
              <wd-index-anchor :index="item.index" />
              <wd-cell
                border
                clickable
                v-for="city in item.data"
                :key="city"
                :title="city"
                @click="handleClick(item.index, city)"
              ></wd-cell>
            </view>
          </wd-index-bar>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  const account = ref('') // 账号
  const verification = ref('') // 验证码
  const countdown = ref(0) // 发送验证码
  const replacePoneValue = ref('+86')
  const isCountingDown = ref(false)
  const showArea = ref(false)
  const areaData = ref([
    {
      index: 'A',
      data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'],
    },
    {
      index: 'B',
      data: [
        '北京',
        '白银',
        '保定',
        '宝鸡',
        '保山',
        '包头',
        '巴中',
        '北海',
        '蚌埠',
        '本溪',
        '毕节',
        '滨州',
        '百色',
        '亳州',
      ],
    },
    {
      index: 'C',
      data: [
        '重庆',
        '成都',
        '长沙',
        '长春',
        '沧州',
        '常德',
        '昌都',
        '长治',
        '常州',
        '巢湖',
        '潮州',
        '承德',
        '郴州',
        '赤峰',
        '池州',
        '崇左',
        '楚雄',
        '滁州',
        '朝阳',
      ],
    },
    {
      index: 'D',
      data: [
        '大连',
        '东莞',
        '大理',
        '丹东',
        '大庆',
        '大同',
        '大兴安岭',
        '德宏',
        '德阳',
        '德州',
        '定西',
        '迪庆',
        '东营',
      ],
    },
    {
      index: 'E',
      data: ['鄂尔多斯', '恩施', '鄂州'],
    },
    {
      index: 'F',
      data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'],
    },
    {
      index: 'G',
      data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛'],
    },
    {
      index: 'H',
      data: [
        '杭州',
        '哈尔滨',
        '合肥',
        '海口',
        '呼和浩特',
        '海北',
        '海东',
        '海南',
        '海西',
        '邯郸',
        '汉中',
        '鹤壁',
        '河池',
        '鹤岗',
        '黑河',
        '衡水',
        '衡阳',
        '河源',
        '贺州',
        '红河',
        '淮安',
        '淮北',
        '怀化',
        '淮南',
        '黄冈',
        '黄南',
        '黄山',
        '黄石',
        '惠州',
        '葫芦岛',
        '呼伦贝尔',
        '湖州',
        '菏泽',
      ],
    },
  ])

  const buttonText = computed(() => {
    return isCountingDown.value ? `${countdown.value}秒后重新发送` : '发送验证码'
  })

  // 发验证码
  const sendVerificationCode = () => {
    if (isCountingDown.value) return
    countdown.value = 60
    isCountingDown.value = true
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
        isCountingDown.value = false
      }
    }, 1000)
  }

  // 更换手机
  const replacePhone = () => {
    showArea.value = true
  }
  // 选取手机地区区号
  const handleClick = (item, area) => {
    replacePoneValue.value = area
  }

  // 点击登录
  const loginBtn = () => {
    console.log(account.value, verification.value, replacePoneValue.value)
    console.log(2222)
  }
</script>

<style scoped lang="scss">
  .login-container {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    // background: linear-gradient(0deg, #fff 0%, #ffac78 100%);
    background-image: url('@/static/icon/loginGg.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .login-box {
    width: 90%;
  }

  .login_title {
    width: 100%;
    height: 144rpx;
    margin: 200rpx 0 40rpx 0;
    .title-en {
      margin: 0 0 16rpx 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 48rpx;
      font-weight: 600;
      color: #333333;
    }
  }

  .input-wrapper {
    position: relative;
    width: 100%;
    height: 360rpx;
    margin: 20rpx 0 40rpx 0;
  }

  .country-code {
    width: 100%;
    height: 160rpx;
    padding: 32rpx 0;
  }

  .phone-input {
    display: flex;
    gap: 20rpx;
    align-items: center;
    height: 56px; /* 3.5rem = 56px */
    border-bottom: 0.5px solid var(--Gray-Gray3, #e7e7e7);
  }

  .country-phone {
    display: flex;
    align-items: center;
  }

  .login-text {
    margin-left: 20rpx;
  }

  .phone-input input {
    flex: 1;
    padding: 0 32rpx;
    font-size: 28rpx;
  }

  .verification-input {
    width: 27.75rem; /* 27.75rem = 444px */
  }

  .send-btn {
    width: 440rpx;
    overflow: hidden;
    font-size: 28rpx;
    color: #f88842;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
  }

  .login-button {
    width: 100%;
    height: 96rpx;
    margin: 160rpx 0 40rpx 0;
    font-size: 32rpx;
    color: white;
    background: #f88842 !important;
    border-radius: 16rpx;
  }

  .wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background: rgba(3, 3, 3, 0.2);
  }

  .wrap-content {
    position: relative;
    top: 176rpx;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
  }

  .imgIcon {
    width: 48rpx;
    height: 48rpx;
  }
</style>