app/pages/register/index.vue

<!-- 短信登录 - smsLogin  -->
<template>
  <view class="register-container">
    <!-- 标题栏 -->
    <view class="head-box ss-m-b-60">
      <view class="ss-flex ss-m-b-20">
        <view class="head-title head-title-line head-title-animation">短信登录</view>
      </view>
      <view class="head-subtitle">未注册的手机号，验证后自动注册账号</view>
    </view>

    <!-- 表单项 -->
    <uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind" labelWidth="140"
      labelAlign="center" class="form-box">
      <uni-forms-item name="mobile" label="手机号">
        <uni-easyinput placeholder="请输入手机号" v-model="state.model.mobile" :inputBorder="false" type="number">
          <template v-slot:right>
            <button class="ss-reset-button code-btn" :disabled="state.isMobileEnd"
              :class="{ 'code-btn-disabled': state.isMobileEnd }" @tap="getSmsCode('smsLogin', state.model.mobile)">
              {{ getSmsTimer('smsLogin') }}
            </button>
          </template>
        </uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="code" label="验证码">
        <uni-easyinput placeholder="请输入验证码" v-model="state.model.code" :inputBorder="false" type="number" maxlength="4">
          <template v-slot:right>
            <button class="ss-reset-button login-btn" @tap="smsLoginSubmit">注册</button>
          </template>
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms>

    <!-- 用户协议的勾选 -->
    <view class="agreement-box ss-flex ss-row-center" :class="{ shake: currentProtocol }">
      <label class="radio ss-flex ss-col-center" @tap="onChange">
        <radio :checked="state.protocol" color="#d10019" style="transform: scale(0.8)" @tap.stop="onChange" />
        <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
          我已阅读并遵守
          <view class="tcp-text" @tap.stop="onProtocol('用户协议')"> 《用户协议》 </view>
          <view class="agreement-text">与</view>
          <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
        </view>
      </label>
    </view>

  </view>
</template>

<script setup>
import { ref, reactive, unref } from 'vue';
import sheep from '@/sheep';
import { code, mobile } from '@/sheep/validate/form';
import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
import AuthUtil from '@/sheep/api/member/auth';

const smsLoginRef = ref(null);
const currentProtocol = ref(false);

const emits = defineEmits(['onConfirm']);

const props = defineProps({
  agreeStatus: {
    type: Boolean,
    default: false,
  },
});

// 数据
const state = reactive({
  isMobileEnd: false, // 手机号输入完毕
  codeText: '获取验证码',
  protocol: false, // 协议勾选状态
  model: {
    mobile: '', // 手机号
    code: '', // 验证码
    userNo: "1024",
  },
  rules: {
    code,
    mobile,
  },
});

// 勾选协议
function onChange() {
  state.protocol = !state.protocol;
}

// 查看协议
function onProtocol(title) {
  sheep.$router.go('/pages/public/richtext', {
    title,
  });
}

// 短信登录
async function smsLoginSubmit() {

  // 参数校验
  const validate = await unref(smsLoginRef)
    .validate()
    .catch((error) => {
      console.log('error: ', error);
    });
  if (!validate) {
    return;
  }
  if (!state.protocol) {
    currentProtocol.value = true;
    setTimeout(() => {
      currentProtocol.value = false;
    }, 1000);
    sheep.$helper.toast('请勾选同意');
    return;
  }
  // 提交数据
  const { code } = await AuthUtil.register(state.model);
  if (code === 0) {
    sheep.$router.go('/pages/index/index')
    closeAuthModal();
  }
}
</script>

<style lang="scss" scoped>
.register-container {
  padding: 40rpx;
  min-height: 100vh;
  background: #f8f8f8;
}

.head-box {
  margin-top: 60rpx;

  .head-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -10rpx;
      width: 60rpx;
      height: 6rpx;
      background: #d10019;
      border-radius: 3rpx;
    }
  }

  .head-subtitle {
    font-size: 28rpx;
    color: #999;
    margin-top: 30rpx;
  }
}

.form-box {
  margin-top: 80rpx;
  padding: 40rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);

  :deep(.uni-forms-item) {
    margin-bottom: 40rpx;
  }

  :deep(.uni-forms-item__label) {
    font-size: 28rpx;
    color: #666;
  }

  :deep(.uni-easyinput__content) {
    background: #f8f8f8;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
  }
}

.code-btn {
  width: 180rpx;
  height: 70rpx;
  line-height: 70rpx;
  border: 1rpx solid #d10019;
  color: #d10019;
  border-radius: 35rpx;
  font-size: 26rpx;
  text-align: center;

  &.code-btn-disabled {
    background: #ccc;
  }
}

.login-btn {
  width: 180rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: linear-gradient(90deg, #d10019, rgba(209, 0, 25, 0.6));
  border-radius: 35rpx;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  box-shadow: 0 10rpx 20rpx rgba(209, 0, 25, 0.2);
}

.shake {
  animation: shake 0.05s linear 4 alternate;
}

@keyframes shake {
  from {
    transform: translateX(-10rpx);
  }

  to {
    transform: translateX(10rpx);
  }
}

.agreement-box {
  margin-top: 40rpx;
}

.tcp-text {
  color: #d10019;
}

.agreement-text {
  color: #999;
}
</style>