<template>
  <view class="login-container">
    <image src="/static/logo.png" mode="aspectFit" class="logo"></image>
    <!-- #ifdef MP-WEIXIN -->
    <button class="login-btn" type="primary" @tap="weixinLogin">微信一键登录</button>
    <!-- #endif -->
    <!-- #ifdef MP-ALIPAY -->
    <button class="login-btn" type="primary" @tap="alipayLogin">支付宝一键登录</button>
    <!-- #endif -->
    <!-- #ifdef H5 || APP -->
    <view class="form">
      <input type="text" v-model="username" placeholder="请输入用户名/手机号" />
      <input type="password" v-model="password" placeholder="请输入密码" />
      <button class="login-btn" type="primary" @tap="passwordLogin">登录</button>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: ''
      };
    },
    methods: {
      // 微信登录
      async weixinLogin() {
        try {
          const [err, loginRes] = await uni.login({ provider: 'weixin' });
          if (err) throw err;
          // 获取 code, 发送到你的后端服务器换取 openid/session_key 和 用户信息
          console.log('微信登录code:', loginRes.code);
          // uni.request 发送 code 到后端...
          // 登录成功处理...
        } catch (error) {
          console.error('微信登录失败:', error);
          uni.showToast({ title: '登录失败', icon: 'none' });
        }
      },
      // 支付宝登录 (类似微信)
      async alipayLogin() {
        try {
          const [err, authRes] = await uni.login({ provider: 'alipay' });
          if (err) throw err;
          console.log('支付宝授权码:', authRes.authCode);
          // uni.request 发送 authCode 到后端...
          // 登录成功处理...
        } catch (error) {
          console.error('支付宝登录失败:', error);
          uni.showToast({ title: '登录失败', icon: 'none' });
        }
      },
      // 账号密码登录 (H5/App)
      passwordLogin() {
        if (!this.username || !this.password) {
          uni.showToast({ title: '请输入账号和密码', icon: 'none' });
          return;
        }
        // uni.request 发送用户名密码到后端验证...
        console.log('发起密码登录:', this.username);
        // 登录成功处理...
      }
    }
  };
</script>

<style scoped>
  .login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 40rpx;
  }
  .logo {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 80rpx;
  }
  .login-btn {
    width: 100%;
    margin-top: 40rpx;
  }
  .form {
    width: 100%;
  }
  .form input {
    height: 80rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 0 20rpx;
    margin-bottom: 30rpx;
  }
</style>