Small_goose_Vue3/pages/login/verify-code.vue

<template>
  <view class="login-bg">
    <view class="login-center">
      <view class="login-card">
        <!-- 顶部Tab切换 -->
        <view class="login-tabs">
          <view :class="['tab', loginType==='code' ? 'active' : '']" @click="loginType='code'">验证码登录</view>
          <view :class="['tab', loginType==='password' ? 'active' : '']" @click="loginType='password'">密码登录</view>
        </view>

        <!-- 验证码登录表单 -->
        <view v-if="loginType==='code'" class="form-area">
          <input class="input" type="number" v-model="phone" maxlength="11" placeholder="请输入手机号" />
          <view class="input-group">
            <input class="input" type="number" v-model="verifyCode" maxlength="6" placeholder="请输入验证码" />
            <text class="send-code" :class="{disabled: counting}" @click="sendVerifyCode">
              {{ counting ? `${countdown}s后重发` : '获取验证码' }}
            </text>
          </view>
        </view>

        <!-- 密码登录表单 -->
        <view v-else class="form-area">
          <input class="input" type="text" v-model="account" maxlength="32" placeholder="请输入账号/手机号" />
          <view class="input-group">
            <input class="input" :type="showPassword ? 'text' : 'password'" v-model="password" password maxlength="20" placeholder="请输入密码" />
            <text class="iconfont" :class="showPassword ? 'icon-eye-open' : 'icon-eye-close'" @click="showPassword=!showPassword"></text>
          </view>
        </view>

      <!-- 返回微信登录链接 -->
      <view class="back-to-wechat" @click="goToWechatLogin">
        <text class="back-link">返回微信登录</text>
      </view>
        <!-- 登录按钮 -->
        <button class="login-btn" :disabled="!isFormValid" @click="handleLogin">
          登录/注册
        </button>

        <!-- 协议勾选 -->
        <view class="agreement">
          <checkbox-group @change="handleAgreementChange">
            <label class="agreement-label">
              <checkbox :checked="isAgreed" color="#07C160" />
              <text class="agreement-text">
                我已阅读并同意
                <text class="link" @click.stop="showServiceAgreement = true">《用户协议》</text>
                和
                <text class="link" @click.stop="showPrivacyPolicy = true">《隐私政策》</text>
              </text>
            </label>
          </checkbox-group>
        </view>
      </view>


      <!-- 协议弹窗 -->
     <!-- <uni-popup ref="popup" :show="showServiceAgreement || showPrivacyPolicy" type="center" @close="closePopup">
        <view class="popup-content">
          <view class="popup-title">{{ showServiceAgreement ? '服务协议' : '隐私政策' }}</view>
          <scroll-view scroll-y class="popup-scroll">
            <text v-if="showServiceAgreement">这里是服务协议内容...</text>
            <text v-else>这里是隐私政策内容...</text>
          </scroll-view>
          <button class="popup-btn" @click="closePopup">我已知晓</button>
        </view>
      </uni-popup> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginType: 'code',
      phone: '',
      verifyCode: '',
      account: '',
      password: '',
      showPassword: false,
      counting: false,
      countdown: 60,
      isAgreed: false,
      showServiceAgreement: false,
      showPrivacyPolicy: false
    }
  },
  computed: {
    isFormValid() {
      if (!this.isAgreed) return false
      if (this.loginType === 'code') {
        return this.phone.length === 11 && this.verifyCode.length === 6
      } else {
        return this.account.length > 0 && this.password.length >= 6
      }
    }
  },
  methods: {
    handleAgreementChange(e) {
      this.isAgreed = e.detail.value.length > 0
    },
    async sendVerifyCode() {
      if (this.counting) return
      if (this.phone.length !== 11) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }

      try {
        // 调用获取验证码接口
        const res = await uni.request({
          url: 'http://localhost:9527/api/getCode',
          method: 'POST',
          data: {
            phone: this.phone
          },
          header: {
            'content-type': 'application/json'
          },
        });
		console.log(res.statusCode);
        if (res.statusCode === 200 ) {
			console.log('验证码接口返回：', res);
          uni.showToast({ 
            title: '验证码已发送', 
            icon: 'success' 
          });
          // 开始倒计时
          this.counting = true
          this.countdown = 60
          this.startCountdown()
        } else {
          throw new Error(res.data.msg || '获取验证码失败')
        }
      } catch (error) {
        console.error('获取验证码失败:', error);
        uni.showToast({ 
          title: error.message || '获取验证码失败，请重试', 
          icon: 'none' 
        });
      }
    },
    startCountdown() {
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          this.counting = false
          clearInterval(timer)
        }
      }, 1000)
    },
    async handleLogin() {
      if (!this.isFormValid) return
      if (!this.isAgreed) {
        uni.showToast({ title: '请先同意服务协议和隐私政策', icon: 'none' })
        return
      }
      // TODO: 调用后端登录接口
	  const res = await uni.request({
	  	url: "http://localhost:9527/api/login",
		method:'POST',
		data:{
			phone: this.phone,
			password: this.password,
			code: this.verifyCode
		},
		header: {
            'content-type': 'application/json'
        }
	  })
	  console.log(res.data)
	  if(res.data.code===200){
		 // 登录成功，保存token
		 uni.setStorageSync('token', res.data.data.token);
		  uni.switchTab({
          url: '/pages/discover/index'  // 替换为实际页面路径
		});
	  }else{
		  uni.showToast({
		  	title: '登录失败', icon: 'none'
		  })
	  }
    },
    closePopup() {
      this.showServiceAgreement = false
      this.showPrivacyPolicy = false
    },
    goToWechatLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    }
  }
}
</script>

<style lang="scss">
.login-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-center {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-card {
  width: 100%;
  max-width: 750rpx;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08);
  padding: 80rpx 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform 0.3s ease;
  margin: 0 auto;
  
  &:hover {
    transform: translateY(-5rpx);
  }
}

.login-tabs {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 60rpx;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  }
  
  .tab {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    color: #666;
    padding-bottom: 20rpx;
    border-bottom: 4rpx solid transparent;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    
    &.active {
      color: #2c3e50;
      font-weight: 700;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -4rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
        height: 4rpx;
        background: linear-gradient(90deg, #2c3e50, #3498db);
        border-radius: 2rpx;
      }
    }
  }
}

.form-area {
  width: 100%;
  margin-bottom: 50rpx;
  
  .input {
    width: 100%;
    height: 100rpx;
    border: none;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
    font-size: 34rpx;
    margin-bottom: 40rpx;
    background: transparent;
    outline: none;
    padding: 0 16rpx;
    transition: all 0.3s ease;
    
    &:focus {
      border-bottom-color: #07C160;
    }
  }
  
  .input-group {
    display: flex;
    align-items: center;
    position: relative;
    
    .input {
      flex: 1;
      margin-bottom: 0;
    }
    
    .send-code {
      font-size: 30rpx;
      color: #ffffff;
      margin-left: 24rpx;
      padding: 16rpx 32rpx;
      background: linear-gradient(45deg, #07C160, #0a9d4e);
      border-radius: 36rpx;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.2);
      
      &.disabled {
        color: #ffffff;
        background: #e0e0e0;
        box-shadow: none;
      }
      
      &:active:not(.disabled) {
        transform: scale(0.95);
        box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.15);
      }
    }
    
    .iconfont {
      font-size: 44rpx;
      color: #666;
      margin-left: 20rpx;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.9);
      }
    }
  }
}

.login-btn {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(45deg, #07C160, #0a9d4e);
  color: #fff;
  border-radius: 50rpx;
  font-size: 36rpx;
  font-weight: 600;
  border: none;
  margin: 30rpx 0 50rpx;
  box-shadow: 0 8rpx 20rpx rgba(7, 193, 96, 0.2);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 10rpx rgba(7, 193, 96, 0.15);
  }
  
  &:disabled {
    background: #e0e0e0;
    color: #aaa;
    box-shadow: none;
  }
}

.agreement {
  margin-top: 30rpx;
  text-align: center;
  
  .agreement-label {
    display: inline-flex;
    align-items: center;
    font-size: 26rpx;
    color: #666;
  }
  
  .agreement-text {
    margin-left: 10rpx;
  }
  
  .link {
    color: #07C160;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -2rpx;
      left: 0;
      width: 100%;
      height: 1px;
      background: #07C160;
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    
    &:active::after {
      transform: scaleX(1);
    }
  }
}

.back-to-wechat {
  margin-top: 50rpx;
  text-align: center;
  
  .back-link {
    color: #3498db;
    font-size: 30rpx;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    padding: 10rpx 0;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: #3498db;
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    
    &:active::after {
      transform: scaleX(1);
    }
  }
}

// 协议弹窗样式
.popup-content {
  width: 650rpx;
  background: #fff;
  border-radius: 40rpx;
  padding: 60rpx 50rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
}

.popup-title {
  font-size: 40rpx;
  font-weight: bold;
  background: linear-gradient(45deg, #07C160, #0a9d4e);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 40rpx;
}

.popup-scroll {
  max-height: 400rpx;
  width: 100%;
  margin-bottom: 40rpx;
  font-size: 30rpx;
  color: #444;
  line-height: 1.6;
}

.popup-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(45deg, #07C160, #0a9d4e);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
  box-shadow: 0 8rpx 20rpx rgba(7, 193, 96, 0.2);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 10rpx rgba(7, 193, 96, 0.15);
  }
}
</style>