nongxiaoyu/pages/login/register.vue

<template>
  <view class="register-container">
    <view class="page-header">
      <text class="back-icon" @click="goBack">←</text>
      <text class="page-title">注册账号</text>
      <text class="placeholder"></text>
    </view>
    
    <view class="register-form">
      <view class="form-group">
        <view class="input-group">
          <text class="input-icon">手</text>
          <input 
            class="input" 
            type="number" 
            placeholder="请输入手机号" 
            v-model="formData.phone"
            maxlength="11"
          />
        </view>
      </view>
      
     <view class="form-group">
        <view class="input-group">
          <text class="input-icon">验</text>
          <input 
            class="input" 
            type="number" 
            placeholder="请输入验证码" 
            v-model="formData.code"
            maxlength="6"
          />
          <text 
            class="code-btn" 
            :class="{ disabled: codeBtnDisabled }"
            @click="getVerificationCode"
          >
            {{ codeBtnText }}
          </text>
        </view>
      </view>
      
      <view class="form-group">
        <view class="input-group">
          <text class="input-icon">密</text>
          <input 
            class="input" 
            :type="showPassword ? 'text' : 'password'" 
            placeholder="请设置密码" 
            v-model="formData.password"
          />
          <text class="eye-icon" @click="togglePasswordVisibility">
            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
          </text>
        </view>
      </view>
      
      <view class="form-group">
        <view class="input-group">
          <text class="input-icon">确</text>
          <input 
            class="input" 
            :type="showConfirmPassword ? 'text' : 'password'" 
            placeholder="请确认密码" 
            v-model="formData.confirmPassword"
          />
          <text class="eye-icon" @click="toggleConfirmPasswordVisibility">
            {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
          </text>
        </view>
      </view>
      
      <view class="form-group">
        <view class="input-group">
          <text class="input-icon">昵</text>
          <input 
            class="input" 
            type="text" 
            placeholder="请输入昵称（选填）" 
            v-model="formData.nickname"
          />
        </view>
      </view>
      
      <button class="register-btn" @click="handleRegister" :loading="isSubmitting">立即注册</button>
      
      <view class="login-link">
        <text>已有账号？</text>
        <text class="link" @click="navigateToLogin">立即登录</text>
      </view>
    </view>
    
    <view class="privacy-agreement">
      <checkbox :checked="agreed" @click="toggleAgreement"></checkbox>
      <text class="agreement-text">
        注册即表示您已同意
        <text class="link" @click="navigateToTerms">用户协议</text>
        和
        <text class="link" @click="navigateToPrivacy">隐私政策</text>
      </text>
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <view class="wechat-register-tip">
      <text>推荐使用微信一键登录</text>
      <button class="wechat-register-btn" @click="navigateToLogin">
        <text class="wechat-icon">微</text>
        <text>一键登录</text>
      </button>
    </view>
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import storage from "@/utils/storage.js"
import { register,sendVcode, phoneRegister } from '@/api/services/connect.js'
import Foundation from "@/utils/Foundation.js"

// 响应式数据
const formData = reactive({
  phone: '',
  code: '',
  scene: "REGIST",
  password: '',
  confirmPassword: '',
  nickname: ''
})

const showPassword = ref(false)
const showConfirmPassword = ref(false)
const agreed = ref(false)
const codeBtnText = ref('获取验证码')
const codeBtnDisabled = ref(false)
const countdown = ref(60)
const isSubmitting = ref(false)

// 方法定义
const goBack = () => {
  uni.navigateBack()
}

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value
}

const toggleAgreement = () => {
  agreed.value = !agreed.value
}

const navigateToLogin = () => {
  uni.navigateBack()
}

const navigateToTerms = () => {
  uni.navigateTo({
    url: '/pages/login/terms'
  })
}

const navigateToPrivacy = () => {
  uni.navigateTo({
    url: '/pages/login/privacy'
  })
}

const startCountdown = () => {
  codeBtnDisabled.value = true
  codeBtnText.value = `${countdown.value}秒`
  
  const timer = setInterval(() => {
    countdown.value--
    codeBtnText.value = `${countdown.value}秒`
    
    if (countdown.value <= 0) {
      clearInterval(timer)
      codeBtnDisabled.value = false
      codeBtnText.value = '获取验证码'
      countdown.value = 60
    }
  }, 1000)
}

const getVerificationCode = () => {
  if (!formData.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  
  const phone = formData.phone
  const result = Foundation.validatePhoneNumber(phone)

  if (!result.valid) {
    uni.showToast({
      title: result.message,
      icon: 'none'
    })
    return
  }
  
  // 调用获取验证码接口
  uni.showLoading({ title: '发送验证码...' })
  

  sendVcode({
    terminal: formData.phone,
    scene: formData.scene
  }).then(res => {
    console.log("验证码：",res.data.code);
    if (res.data.code == 500 || res.data.code == 1) {
      uni.showToast({
        title: res.data.msg || '发送验证码失败，请稍后重试',
        icon: 'none'
      })
      return
    }
    uni.hideLoading()
    uni.showToast({
      title: '验证码已发送',
      icon: 'success'
    })
    startCountdown()
  }).catch(err => {
    uni.hideLoading()
    uni.showToast({
      title: '发送验证码失败，请稍后重试',
      icon: 'none'
    })
    console.error(err)
  })
}

const validateForm = () => {
  if (!formData.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return false
  }
  
  const phone = formData.phone // 获取用户输入的手机号
  const result = Foundation.validatePhoneNumber(phone)

  if (!result.valid) {
    uni.showToast({
      title: result.message,
      icon: 'none'
    })
    return false
  }
  
  if (!formData.password) {
    uni.showToast({
      title: '请设置密码',
      icon: 'none'
    })
    return false
  }
  
  if (formData.password.length < 6) {
    uni.showToast({
      title: '密码长度不能少于6位',
      icon: 'none'
    })
    return false
  }
  
  if (formData.password !== formData.confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return false
  }
  
  return true
}

const handleRegister = () => {
  if (!validateForm()) return
  
  if (!agreed.value) {
    uni.showToast({
      title: '请同意用户协议和隐私政策',
      icon: 'none'
    })
    return
  }
  
  isSubmitting.value = true
  
  // 调用注册接口
  uni.showLoading({ title: '注册中...' })
  
  const data = {
    phonenumber: formData.phone,
    password: formData.password,
    userName: formData.nickname || `用户${formData.phone.substr(-4)}`,
    vcode: formData.code,
  }
  
  // 调用注册接口
  phoneRegister(data)
    .then(res => {
      console.log("res注册", res)
      if (res.data.code == 1 || res.data.code == 2) {
        uni.showToast({
          title: res.data.msg || '注册失败，请稍后重试',
          icon: 'none'
        })
        return
      }
      
      if (res.statusCode === 200) {
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })
        storage.setUserInfo(data)
        // 自动登录
        // if (res.data.data && res.data.data.token) {
        //   storage.setAccessToken(res.data.data.token)
        //   storage.setUserInfo(data)
        //   storage.setHasLogin(true)
        // }
        
        // 延迟跳转到登录页或首页
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          })
        }, 1500)
      } else {
        uni.showToast({
          title: res.data.msg || '注册失败，请稍后重试',
          icon: 'none'
        })
      }
    })
    .catch(err => {
      uni.showToast({
        title: '网络异常，请稍后重试',
        icon: 'none'
      })
      console.error(err)
    })
    .finally(() => {
      uni.hideLoading()
      isSubmitting.value = false
    })
}
</script>

<style>
.register-container {
  min-height: 100vh;
  padding: 0 40rpx 40rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 0;
}

.back-icon {
  font-size: 50rpx;
  color: #333;
  width: 60rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.placeholder {
  width: 60rpx;
}

.register-form {
  width: 100%;
  margin-bottom: 30rpx;
}

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

.input-group {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #E0E0E0;
  padding: 20rpx 0;
}

.input-icon {
  width: 44rpx;
  height: 44rpx;
  background-color: #E8F5E9;
  color: #4CAF50;
  font-size: 24rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

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

.eye-icon {
  padding: 0 10rpx;
  color: #999;
}

.code-btn {
  font-size: 28rpx;
  color: #4CAF50;
  padding: 0 10rpx;
}

.code-btn.disabled {
  color: #999;
}

.register-btn {
  width: 100%;
  height: 90rpx;
  background-color: #4CAF50;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin: 60rpx 0 30rpx;
}

.login-link {
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
}

.link {
  color: #4CAF50;
  margin-left: 10rpx;
}

.privacy-agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
  margin-left: 10rpx;
}

/* 微信注册提示 */
.wechat-register-tip {
  margin-top: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wechat-register-tip text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.wechat-register-btn {
  width: 80%;
  height: 90rpx;
  background-color: #07C160;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
}

.wechat-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 20rpx;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

/* #ifdef H5 */
/* H5特殊样式调整 */
@media screen and (min-width: 768px) {
  .register-form {
    max-width: 600rpx;
    margin: 0 auto;
  }
}
/* #endif */

/* #ifdef APP-PLUS || MP-HARMONY */
/* APP和鸿蒙特殊样式调整 */
.register-container {
  padding-top: 20rpx;
}

.input-group {
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx 15rpx;
  border-bottom: none;
  margin-bottom: 20rpx;
}

.input {
  background-color: transparent;
}

.register-btn {
  margin-top: 40rpx;
}

.privacy-agreement {
  margin-top: auto;
}
/* #endif */
</style>