todo-frontend/pages/login/index.vue

<template>
  <view class="login-page">
    <view class="logo">
      <text class="logo-text">🏠</text>
      <text class="app-name">建材销售管家</text>
    </view>

    <!-- 手机号登录 -->
    <view class="login-form">
      <view class="form-item">
        <input 
          class="input" 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号" 
          maxlength="11"
        />
      </view>
      <view class="form-item">
        <input 
          class="input" 
          type="number" 
          v-model="code" 
          placeholder="请输入验证码" 
          maxlength="6"
        />
        <button 
          class="code-btn" 
          :disabled="countdown > 0" 
          @click="sendCode"
        >
          {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
        </button>
      </view>
      <button class="login-btn" @click="phoneLogin">登录</button>
    </view>

    <!-- 其他登录方式 -->
    <view class="other-login">
      <view class="divider">
        <view class="line"></view>
        <text class="divider-text">其他登录方式</text>
        <view class="line"></view>
      </view>
      <view class="login-methods">
        <view class="method-item" @click="wechatLogin">
          <text class="method-icon">💬</text>
          <text class="method-text">微信登录</text>
        </view>
        <view class="method-item" @click="alipayLogin">
          <text class="method-icon">💰</text>
          <text class="method-text">支付宝登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import authApi from '@/api/auth'

export default {
  data() {
    return {
      phone: '',
      code: '',
      countdown: 0
    }
  },
  methods: {
    // 发送验证码
    async sendCode() {
      if (!this.phone || this.phone.length !== 11) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
      
      try {
        await authApi.sendCode(this.phone)
        uni.showToast({ title: '验证码已发送', icon: 'success' })
        
        // 开始倒计时
        this.countdown = 60
        const timer = setInterval(() => {
          this.countdown--
          if (this.countdown <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      } catch (e) {
        console.error(e)
      }
    },

    // 手机号登录
    async phoneLogin() {
      if (!this.phone || this.phone.length !== 11) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      if (!this.code || this.code.length !== 6) {
        uni.showToast({ title: '请输入验证码', icon: 'none' })
        return
      }

      try {
        const data = await authApi.phoneLogin(this.phone, this.code)
        uni.setStorageSync('token', data.token)
        uni.setStorageSync('refreshToken', data.refreshToken)
        uni.setStorageSync('userId', data.userId)
        
        uni.showToast({ title: '登录成功', icon: 'success' })
        setTimeout(() => {
          uni.reLaunch({ url: '/pages/index/index' })
        }, 1000)
      } catch (e) {
        console.error(e)
      }
    },

    // 微信登录
    async wechatLogin() {
      // #ifdef MP-WEIXIN
      uni.getProvider({
        service: 'oauth',
        success: (res) => {
          if (res.provider.includes('weixin')) {
            uni.login({
              provider: 'weixin',
              success: async (loginRes) => {
                try {
                  const data = await authApi.wechatLogin(loginRes.code)
                  uni.setStorageSync('token', data.token)
                  uni.setStorageSync('refreshToken', data.refreshToken)
                  uni.setStorageSync('userId', data.userId)
                  
                  uni.showToast({ title: '登录成功', icon: 'success' })
                  setTimeout(() => {
                    uni.reLaunch({ url: '/pages/index/index' })
                  }, 1000)
                } catch (e) {
                  console.error(e)
                }
              }
            })
          }
        }
      })
      // #endif
      // #ifndef MP-WEIXIN
      uni.showToast({ title: '请在微信小程序中使用', icon: 'none' })
      // #endif
    },

    // 支付宝登录
    alipayLogin() {
      // #ifdef MP-ALIPAY
      my.getAuthCode({
        scopes: 'auth_base',
        success: async (res) => {
          try {
            const data = await authApi.alipayLogin(res.authCode)
            uni.setStorageSync('token', data.token)
            uni.setStorageSync('refreshToken', data.refreshToken)
            uni.setStorageSync('userId', data.userId)
            
            uni.showToast({ title: '登录成功', icon: 'success' })
            setTimeout(() => {
              uni.reLaunch({ url: '/pages/index/index' })
            }, 1000)
          } catch (e) {
            console.error(e)
          }
        }
      })
      // #endif
      // #ifndef MP-ALIPAY
      uni.showToast({ title: '请在支付宝小程序中使用', icon: 'none' })
      // #endif
    }
  }
}
</script>

<style>
.login-page {
  padding: 100rpx 60rpx;
  min-height: 100vh;
  background: #fff;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}

.logo-text {
  font-size: 120rpx;
}

.app-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.login-form {
  margin-bottom: 60rpx;
}

.form-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
}

.input {
  flex: 1;
  font-size: 28rpx;
}

.code-btn {
  width: 200rpx;
  font-size: 24rpx;
  background: #3cc51f;
  color: #fff;
  border: none;
}

.code-btn[disabled] {
  background: #ccc;
}

.login-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #3cc51f;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  border: none;
  margin-top: 40rpx;
}

.other-login {
  margin-top: 60rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.line {
  flex: 1;
  height: 1rpx;
  background: #eee;
}

.divider-text {
  padding: 0 20rpx;
  color: #999;
  font-size: 24rpx;
}

.login-methods {
  display: flex;
  justify-content: center;
}

.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 40rpx;
}

.method-icon {
  font-size: 60rpx;
}

.method-text {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
</style>