haha/haha-mp/src/pages/login/login.vue

<template>
  <view class="container">
    <view class="login-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">快与慢充电桩</text>
      <text class="subtitle">智能视觉零售柜</text>
    </view>

    <view class="login-content">
      <!-- 账号密码登录表单 -->
      <view class="form-item">
        <input 
          class="input" 
          type="number" 
          placeholder="请输入手机号" 
          v-model="loginForm.phone"
          maxlength="11"
        />
      </view>
      <view class="form-item">
        <input 
          class="input" 
          type="password" 
          placeholder="请输入密码" 
          v-model="loginForm.password"
        />
      </view>
      
      <button class="login-btn" @click="onPasswordLogin">
        立即登录
      </button>

      <!-- 微信手机号一键登录 (个人版小程序暂不可用，已注释) -->
      <!-- 
      <button 
        class="login-btn wechat-btn" 
        open-type="getPhoneNumber" 
        @getphonenumber="onGetPhoneNumber"
      >
        微信手机号一键登录
      </button>
      -->
      
      <view class="agreement">
        登录即代表您同意<text class="link">《用户协议》</text>和<text class="link">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { loginByPassword } from '@/api/user';
import { setToken, setUserInfo } from '@/utils/auth';
// import { loginByWechatPhone } from '@/api/user';

const loginForm = reactive({
  phone: '',
  password: ''
});

// 登录后跳转的页面
const redirectUrl = ref('');

// 页面加载时获取redirect参数
onLoad((options: any) => {
  if (options.redirect) {
    redirectUrl.value = decodeURIComponent(options.redirect);
  }
});

const onPasswordLogin = async () => {
  if (!loginForm.phone || loginForm.phone.length !== 11) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
    return;
  }
  if (!loginForm.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' });
    return;
  }

  uni.showLoading({ title: '登录中...' });
  try {
    const res = await loginByPassword({
      phone: loginForm.phone,
      password: loginForm.password
    });
    handleLoginSuccess(res);
  } catch (error) {
    console.error('登录失败', error);
  } finally {
    uni.hideLoading();
  }
};

/**
 * 微信手机号快捷登录 (已禁用)
 */
/*
const onGetPhoneNumber = async (e: any) => {
  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    });
    return;
  }
  const { code, encryptedData, iv } = e.detail;
  uni.showLoading({ title: '登录中...' });
  try {
    const res = await loginByWechatPhone({ code, encryptedData, iv });
    handleLoginSuccess(res);
  } catch (error) {
    console.error('登录失败', error);
  } finally {
    uni.hideLoading();
  }
};
*/

const handleLoginSuccess = (res: any) => {
  // 使用auth工具保存token和用户信息
  setToken(res.token);
  setUserInfo(res.userInfo);
  
  uni.showToast({
    title: '登录成功',
    icon: 'success'
  });
  
  // 根据redirect参数跳转
  setTimeout(() => {
    if (redirectUrl.value) {
      uni.reLaunch({ url: redirectUrl.value });
    } else {
      // 返回上一页或首页
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        uni.reLaunch({ url: '/pages/index/index' });
      }
    }
  }, 1000);
};
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 40rpx;
  min-height: 100vh;
  background-color: #fff;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
  margin-bottom: 150rpx;
  
  .logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 30rpx;
  }
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #999;
  }
}

.login-content {
  width: 100%;
  
  .form-item {
    width: 100%;
    margin-bottom: 30rpx;
    
    .input {
      width: 100%;
      height: 90rpx;
      padding: 0 30rpx;
      background-color: #f5f5f5;
      border-radius: 45rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
  }
  
  .login-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #FFD700;
    color: #333;
    border-radius: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
    border: none;
    
    &::after {
      border: none;
    }
    
    &.wechat-btn {
      background-color: #07c160;
      color: #fff;
    }
  }
  
  .agreement {
    font-size: 24rpx;
    color: #999;
    text-align: center;
    
    .link {
      color: #576b95;
    }
  }
}
</style>