consumer-front/src/pages/register/register.vue

<template>
  <view class="register-page">
    <!-- 顶部标题 -->
    <view class="header">
      <view class="title">用户注册</view>
      <view class="subtitle">请输入手机号获取验证码完成注册</view>
    </view>

    <!-- 表单区域 -->
    <view class="form-area">
      <!-- 手机号 -->
      <view class="input-group">
        <view class="input-label">手机号</view>
        <view class="input-wrapper">
          <input
            class="input-field"
            type="number"
            maxlength="11"
            placeholder="请输入手机号"
            placeholder-class="placeholder"
            v-model="phone"
          />
        </view>
      </view>

      <!-- 验证码 -->
      <view class="input-group">
        <view class="input-label">验证码</view>
        <view class="input-wrapper code-wrapper">
          <input
            class="input-field"
            type="number"
            maxlength="6"
            placeholder="请输入验证码"
            placeholder-class="placeholder"
            v-model="code"
          />
          <view
            class="code-btn"
            :class="{ disabled: countdown > 0 }"
            @click="handleGetCode"
          >
            {{ countdown > 0 ? countdown + 's' : '获取验证码' }}
          </view>
        </view>
      </view>

      <!-- 注册按钮 -->
      <view class="submit-btn" :class="{ active: canSubmit }" @click="handleRegister">
        注册
      </view>
    </view>

    <!-- 底部协议 -->
    <view class="agreement">
      <text class="agreement-text">注册表示同意</text>
      <text class="agreement-link" @click="showAgreement('user')">《用户协议》</text>
      <text class="agreement-text">和</text>
      <text class="agreement-link" @click="showAgreement('privacy')">《隐私政策》</text>
    </view>
  </view>
</template>

<script>
import config from '@/config/env.js';
import { post } from '@/utils/request.js';

export default {
  data() {
    return {
      phone: '',
      code: '',
      countdown: 0,
      timer: null
    };
  },
  computed: {
    canSubmit() {
      return this.phone.length === 11 && this.code.length >= 4;
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    // 获取验证码
    async handleGetCode() {
      if (this.countdown > 0) return;

      // 验证手机号
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }

      try {
        const res = await post('/auth/send-sms-code', {
          phone: this.phone
        });

        const ret = res.data || {};
        if (ret.code === 0) {
          uni.showToast({ title: '验证码已发送', icon: 'success' });
          this.startCountdown();
        } else {
          uni.showToast({ title: ret.message || '发送失败', icon: 'none' });
        }
      } catch (e) {
        uni.showToast({ title: '网络请求失败', icon: 'none' });
      }
    },

    // 开始倒计时
    startCountdown() {
      this.countdown = 60;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },

    // 注册
    async handleRegister() {
      if (!this.canSubmit) return;

      // 验证手机号
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }

      // 验证验证码
      if (this.code.length < 4) {
        uni.showToast({ title: '请输入验证码', icon: 'none' });
        return;
      }

      uni.showLoading({ title: '注册中...' });

      try {
        const res = await post('/auth/register', {
          phone: this.phone,
          code: this.code
        });

        const ret = res.data || {};
        if (ret.code === 0) {
          // 保存 token
          const token = ret.data && ret.data.token;
          if (token) {
            uni.setStorageSync('token', token);
          }

          // 保存用户信息
          const userInfo = ret.data && ret.data.userInfo;
          if (userInfo) {
            uni.setStorageSync('userInfo', userInfo);
          }

          uni.hideLoading();
          uni.showToast({ title: '注册成功', icon: 'success' });

          // 返回上一页或跳转首页
          setTimeout(() => {
            const pages = getCurrentPages();
            if (pages.length > 1) {
              uni.navigateBack();
            } else {
              uni.redirectTo({ url: '/pages/index/index' });
            }
          }, 1500);
        } else {
          uni.hideLoading();
          uni.showToast({ title: ret.message || '注册失败', icon: 'none' });
        }
      } catch (e) {
        uni.hideLoading();
        uni.showToast({ title: '网络请求失败', icon: 'none' });
      }
    },

    // 显示协议
    showAgreement(type) {
      const title = type === 'user' ? '用户协议' : '隐私政策';
      uni.showToast({ title: title + '开发中', icon: 'none' });
    }
  }
};
</script>

<style scoped>
page {
  height: 100%;
  background-color: #fff;
}

.register-page {
  min-height: 100vh;
  background-color: #fff;
  padding: 0 60rpx;
}

/* 顶部标题 */
.header {
  padding-top: 180rpx;
  margin-bottom: 80rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
}

/* 表单区域 */
.form-area {
  width: 100%;
}

.input-group {
  margin-bottom: 40rpx;
}

.input-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.input-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #e5e5e5;
  padding-bottom: 16rpx;
}

.input-field {
  flex: 1;
  height: 80rpx;
  font-size: 32rpx;
  color: #333;
}

.placeholder {
  color: #ccc;
  font-size: 32rpx;
}

/* 验证码输入框 */
.code-wrapper {
  position: relative;
}

.code-btn {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #2979ff;
  padding: 12rpx 24rpx;
  border: 2rpx solid #2979ff;
  border-radius: 8rpx;
  white-space: nowrap;
}

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

/* 注册按钮 */
.submit-btn {
  width: 100%;
  height: 96rpx;
  background: #e5e5e5;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #fff;
  margin-top: 60rpx;
  transition: all 0.3s;
}

.submit-btn.active {
  background: linear-gradient(135deg, #2979ff, #1e60e0);
  box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.4);
}

/* 底部协议 */
.agreement {
  position: absolute;
  bottom: 80rpx;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.agreement-text {
  font-size: 24rpx;
  color: #999;
}

.agreement-link {
  font-size: 24rpx;
  color: #2979ff;
}
</style>