cfc/zxyj-frontend/pages/login/login.vue

<template>
  <view class="login-container">
    <view class="logo-section">
      <image class="logo" src="/static/logo.png" mode="aspectFit" @error="handleImageError"></image>
      <text class="app-name">知行益家</text>
      <text class="slogan">家庭教育任务管理系统</text>
    </view>

    <!-- 手机号登录 -->
    <view class="login-form">
      <view class="form-item">
        <text class="label">手机号</text>
        <input 
          class="input" 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号" 
          maxlength="11"
          cursor-spacing="100"
        />
      </view>
      
      <view class="form-item">
        <text class="label">验证码</text>
        <view class="code-input-wrapper">
          <input 
            class="input code-input" 
            type="number" 
            v-model="code" 
            placeholder="请输入验证码" 
            maxlength="6"
          />
          <button 
            class="send-code-btn" 
            :disabled="countdown > 0" 
            @click="sendCode"
          >
            {{ countdown > 0 ? countdown + 's' : '发送验证码' }}
          </button>
        </view>
        </view>

        <button class="login-btn" :loading="loading" @click="phoneLogin">登录</button>

        <!-- 微信一键登录 -->
        <view class="wechat-section">
          <button 
            class="wechat-btn" 
            open-type="getPhoneNumber" 
            @getphonenumber="handleWechatPhoneLogin"
          >
            <text class="wechat-icon">微信</text>
            <text>一键登录</text>
          </button>
        </view>
      </view>

      <view class="agreement">
        <checkbox-group @change="onAgreementChange">
          <label>
            <checkbox value="agree" :checked="agreed" />
            <text class="agreement-text">我已阅读并同意</text>
          </label>
        </checkbox-group>
        <text class="link" @click="showAgreement">《用户协议》</text>
        <text class="agreement-text">和</text>
        <text class="link" @click="showPrivacy">《隐私政策》</text>
      </view>
    </view>
</template>

<script>
import { sendCode, phoneLogin as phoneLoginApi, wechatPhoneLogin, checkPhone } from '../../utils/api.js'

export default {
  data() {
    return {
      phone: '',
      code: '',
      loading: false,
      countdown: 0,
      agreed: false,
      nickname: '',
      avatar: ''
    }
  },
  onLoad(options) {
    // 处理邀请码
    if (options.inviteCode) {
      uni.setStorageSync('inviteCode', options.inviteCode)
      uni.setStorageSync('inviteType', options.inviteType || 'family')
    }
  },
  methods: {
    handleImageError(e) {
      console.log('Logo 加载失败，使用默认显示')
    },
    onAgreementChange(e) {
      this.agreed = e.detail.value.length > 0
    },
    showAgreement() {
      uni.showModal({
        title: '用户协议',
        content: '这里是用户协议内容...',
        showCancel: false
      })
    },
    showPrivacy() {
      uni.showModal({
        title: '隐私政策',
        content: '这里是隐私政策内容...',
        showCancel: false
      })
    },
    async sendCode() {
      if (!this.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        uni.showToast({ title: '手机号格式不正确', icon: 'none' })
        return
      }

      try {
        await sendCode({ phone: this.phone, type: 'login' })
        uni.showToast({ title: '验证码已发送', icon: 'success' })
        
        // 开始倒计时
        this.countdown = 60
        const timer = setInterval(() => {
          this.countdown--
          if (this.countdown <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      } catch (e) {
        uni.showToast({ title: e.message || '发送失败', icon: 'none' })
      }
    },
    async phoneLogin() {
      if (!this.agreed) {
        uni.showToast({ title: '请先同意用户协议', icon: 'none' })
        return
      }
      if (!this.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      if (!this.code) {
        uni.showToast({ title: '请输入验证码', icon: 'none' })
        return
      }

      this.loading = true
      try {
        const res = await phoneLoginApi({
          phone: this.phone,
          code: this.code,
          nickname: this.nickname || '用户',
          avatar: this.avatar || ''
        })

        // 保存 token 和用户信息
        uni.setStorageSync('token', res.data.token)
        uni.setStorageSync('userId', res.data.userId)
        uni.setStorageSync('role', res.data.role)
        uni.setStorageSync('familyId', res.data.familyId)
        // 登录后以本次登录角色为准，避免沿用上次切换视图
        uni.setStorageSync('currentRole', res.data.role)
        uni.setStorageSync('isSwitchedChild', false)
        uni.setStorageSync('isSwitchedTeacher', false)
        uni.setStorageSync('userInfo', {
          nickname: res.data.nickname,
          userId: res.data.userId
        })

        // 存储成长规划师审核状态
        if (res.data.teacherStatus) {
          uni.setStorageSync('teacherStatus', res.data.teacherStatus)
        }
        if (res.data.teacherRejectReason) {
          uni.setStorageSync('teacherRejectReason', res.data.teacherRejectReason)
        }

        uni.showToast({ title: '登录成功', icon: 'success' })

        // 根据角色跳转到对应首页，或进入信息编辑页面
        setTimeout(() => {
          if (res.data.needsRoleSelect) {
            // 新用户需要选择角色
            uni.redirectTo({
              url: `/pages/user-edit/user-edit?token=${res.data.token}&userId=${res.data.userId}&needsRoleSelect=true`
            })
          } else {
            // 老用户直接进入首页
            this.navigateToHome(res.data.role)
          }
        }, 1000)
      } catch (e) {
        uni.showToast({ title: e.message || '登录失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
async handleWechatPhoneLogin(e) {
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        if (!this.agreed) {
          uni.showToast({ title: '请先同意用户协议', icon: 'none' })
          return
        }

        // 测试环境：使用用户输入的手机号
        const inputPhone = this.phone
        if (!inputPhone || !/^1[3-9]\d{9}$/.test(inputPhone)) {
          uni.showToast({ title: '请先输入手机号', icon: 'none' })
          return
        }

        this.loading = true
        try {
          // 获取登录 code 用于获取 openid
          const loginRes = await new Promise((resolve, reject) => {
            uni.login({
              provider: 'weixin',
              success: resolve,
              fail: reject
            })
          })

          // 调用后端微信手机号登录接口
          // 测试环境：将用户输入的手机号作为 phoneCode 传递
          const res = await wechatPhoneLogin({
            code: loginRes.code, // 用于获取 openid
            phoneCode: inputPhone, // 测试环境：用输入的手机号
            nickname: this.nickname || '用户',
            avatar: this.avatar || ''
          })

          // 保存 token 和用户信息
          uni.setStorageSync('token', res.data.token)
          uni.setStorageSync('userId', res.data.userId)
          uni.setStorageSync('role', res.data.role)
          uni.setStorageSync('familyId', res.data.familyId)
          uni.setStorageSync('currentRole', res.data.role)
          uni.setStorageSync('isSwitchedChild', false)
          uni.setStorageSync('isSwitchedTeacher', false)
          // 保存 openid，用于后续自动登录
          if (res.data.openid) {
            uni.setStorageSync('openid', res.data.openid)
          }
          uni.setStorageSync('userInfo', {
            nickname: res.data.nickname,
            userId: res.data.userId
          })

          // 存储成长规划师审核状态
          if (res.data.teacherStatus) {
            uni.setStorageSync('teacherStatus', res.data.teacherStatus)
          }
          if (res.data.teacherRejectReason) {
            uni.setStorageSync('teacherRejectReason', res.data.teacherRejectReason)
          }

          uni.showToast({ title: '登录成功', icon: 'success' })

          // 根据角色跳转到对应首页，或进入信息编辑页面
          setTimeout(() => {
            if (res.data.needsRoleSelect) {
              // 新用户需要选择角色
              uni.redirectTo({
                url: `/pages/user-edit/user-edit?token=${res.data.token}&userId=${res.data.userId}&needsRoleSelect=true`
              })
            } else {
              // 老用户直接进入首页
              this.navigateToHome(res.data.role)
            }
          }, 1000)
        } catch (e) {
          uni.showToast({ title: e.message || '登录失败', icon: 'none' })
        } finally {
          this.loading = false
        }
    }
    },
    navigateToHome(role) {
      // 通过 TabBar 首页跳转，让 index.vue 根据角色显示不同内容
      uni.reLaunch({ url: '/pages/index/index' })
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx;
}

.logo-section {
  text-align: center;
  margin-bottom: 80rpx;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  background: #fff;
}

.app-name {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
  margin-top: 20rpx;
}

.slogan {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10rpx;
}

.login-form {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.code-input-wrapper {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.code-input {
  flex: 1;
}

.send-code-btn {
  width: 200rpx;
  height: 80rpx;
  background: #667eea;
  color: #fff;
  border-radius: 10rpx;
  font-size: 24rpx;
  line-height: 80rpx;
  padding: 0;
}

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

.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  line-height: 88rpx;
  margin-top: 20rpx;
}

/* 角色选择器样式 */
.role-select {
  display: flex;
  gap: 40rpx;
  padding: 20rpx 0;
}

.role-option {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.picker-input {
  width: 100%;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  color: #333;
}

.wechat-section {
  margin-top: 40rpx;
  text-align: center;
}

.wechat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  width: 100%;
  height: 88rpx;
  background: #07c160;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
}

.wechat-icon {
  font-size: 36rpx;
}

.agreement {
  margin-top: 40rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
}

.agreement-text {
  color: rgba(255, 255, 255, 0.8);
}

.link {
  color: #ffd700;
  text-decoration: underline;
}
</style>