shop-toy/src/pages/login/index.vue

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { login, sendCode } from '@/api/auth'

definePage({
  style: {
    navigationBarTitleText: '登录',
    navigationBarBackgroundColor: '#ffffff',
  },
})

const userStore = useUserStore()

// 状态
const phone = ref('13800138000')
const code = ref('')
const loading = ref(false)
const countdown = ref(0)
const timer = ref<any>(null)

// 发送验证码
async function handleSendCode() {
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  if (countdown.value > 0) return
  
  try {
    await sendCode(phone.value)
    uni.showToast({ title: '验证码已发送', icon: 'none' })
    
    // 倒计时
    countdown.value = 60
    timer.value = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer.value)
      }
    }, 1000)
  } catch (error) {
    uni.showToast({ title: '发送失败', icon: 'none' })
  }
}

// 登录
async function handleLogin() {
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  if (!code.value) {
    // 为了演示方便，这里允许空验证码直接登录（模拟）
    // uni.showToast({ title: '请输入验证码', icon: 'none' })
    // return
  }
  
  loading.value = true
  try {
    const res: any = await login({ phone: phone.value, code: code.value })
    
    // 更新用户信息
    userStore.userInfo = res.data.user
    userStore.isLogin = true
    
    uni.showToast({ title: '登录成功', icon: 'success' })
    
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }, 1500)
  } catch (error) {
    uni.showToast({ title: '登录失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

onUnload(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

<template>
  <view class="login-page">
    <view class="logo-wrapper">
      <view class="logo">
        <text class="i-carbon-store icon"></text>
      </view>
      <!-- <text class="app-name">商城+金融</text> -->
    </view>
    
    <view class="form">
      <view class="input-group">
        <text class="i-carbon-phone icon"></text>
        <input
          v-model="phone"
          class="input"
          type="number"
          placeholder="请输入手机号"
          :maxlength="11"
        />
      </view>
      
      <view class="input-group">
        <text class="i-carbon-security icon"></text>
        <input
          v-model="code"
          class="input"
          type="number"
          placeholder="请输入验证码"
          :maxlength="6"
        />
        <view
          class="code-btn"
          :class="{ disabled: countdown > 0 }"
          @click="handleSendCode"
        >
          {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
        </view>
      </view>
      <wd-notice-bar text="演示使用,直接点击登录~" prefix="warn-bold" custom-class="space" color="#34D19D" background-color="#f0f9eb" />
      <view class="submit-btn" @click="handleLogin">
        <text v-if="!loading">登录</text>
        <text v-else>登录中...</text>
      </view>
      
      <view class="tips">
        <text>未注册手机号验证后自动创建账号</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: #fff;
  padding: 60rpx;
  display: flex;
  flex-direction: column;
}

.logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
  margin-bottom: 100rpx;
  
  .logo {
    width: 160rpx;
    height: 160rpx;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;
    box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
    
    .icon {
      font-size: 80rpx;
      color: #fff;
    }
  }
  
  .app-name {
    font-size: 40rpx;
    font-weight: 600;
    color: #333;
  }
}

.form {
  .input-group {
    display: flex;
    align-items: center;
    height: 100rpx;
    background: #f5f5f5;
    border-radius: 50rpx;
    padding: 0 40rpx;
    margin-bottom: 30rpx;
    
    .icon {
      font-size: 40rpx;
      color: #999;
      margin-right: 20rpx;
    }
    
    .input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
    }
    
    .code-btn {
      font-size: 26rpx;
      color: #ff4d4f;
      padding-left: 20rpx;
      border-left: 1rpx solid #ddd;
      line-height: 1;
      
      &.disabled {
        color: #999;
      }
    }
  }
  
  .submit-btn {
    height: 100rpx;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    margin-top: 60rpx;
    box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
    
    &:active {
      opacity: 0.9;
    }
  }
  
  .tips {
    text-align: center;
    margin-top: 30rpx;
    font-size: 24rpx;
    color: #999;
  }
}
</style>