x-forend/src/pages/register/index.vue

<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '注册',
    navigationStyle: 'custom',
  },
  notNeedLogin: true,
}
</route>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import { isLogged } from '@/interceptors/route'
import { registerUserAPI } from '@/service'
import { useUserStore } from '@/store/user'
import { mergeStep } from '@/utils'

const userStore = useUserStore()
const form = ref({
  username: '',
  // member_nickname: '',
  password: '',
  retpassword: '',
  invitecode: '',
  // tpassword: '',
  // rettpassword: '',
})

let redirect = '/'
onLoad((options) => {
  redirect = options.redirect ?? '/'
  form.value.invitecode = options.invitecode ?? ''
})

const handleRegister = mergeStep(async () => {
  if (!/^\d{11}$/.test(form.value.username)) {
    uni.showToast({
      title: '请输入正确手机号（11位）',
      icon: 'none',
    })
    return
  }
  if (!form.value.password) {
    uni.showToast({
      title: '请输入登录密码',
      icon: 'none',
    })
    return
  }
  if (form.value.password !== form.value.retpassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none',
    })
    return
  }

  if (!form.value.invitecode) {
    uni.showToast({
      title: '请输入邀请码',
      icon: 'none',
    })
    return
  }
  const {
    data: {
      userinfo: { token },
    },
  } = await registerUserAPI(form.value)
  userStore.setToken(token)
  uni.reLaunch({
    url: redirect,
  })
})
onLoad(async (options) => {
  if (isLogged()) {
    uni.reLaunch({
      url: redirect,
    })
  }
  form.value.invitecode = options.invite ?? ''
})
</script>

<template>
  <view class="register-container relative">
    <NavBar title-color="#333" />
    <view class="pt-45">
      <view class="mx-15 bg-white px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
        <view class="flex items-center py-15">
          <view class="text-gradient">手机号</view>
          <input
            v-model="form.username"
            type="text"
            placeholder-class="text-#889BC6"
            class="text-right flex-1 text-14"
            placeholder="请输入手机号"
          />
        </view>
        <view class="flex items-center py-15">
          <view class="text-gradient">登录密码</view>
          <input
            v-model="form.password"
            placeholder-class="text-#889BC6"
            type="password"
            class="text-right flex-1 text-14"
            placeholder="请输入登录密码"
          />
        </view>
        <view class="flex items-center py-15">
          <view class="text-gradient">确认登录密码</view>
          <input
            v-model="form.retpassword"
            placeholder-class="text-#889BC6"
            type="password"
            class="text-right flex-1 text-14"
            placeholder="请再次输入登录密码"
          />
        </view>
        <!-- <view class="flex items-center py-15">
          <view class="text-gradient">验证码</view>
          <input
            v-model="form.invitecode"
            placeholder-class="text-#889BC6"
            type="text"
            class="text-right flex-1 text-14"
            placeholder="请输入验证码"
          />
          <image class="w-60 h-24 ml-15 bg-gray-400" mode="aspectFit" />
        </view> -->
        <view class="flex items-center py-15">
          <view class="text-gradient">邀请码</view>
          <input
            v-model="form.invitecode"
            placeholder-class="text-#889BC6"
            type="text"
            class="text-right flex-1 text-14"
            placeholder="请输入邀请码"
          />
        </view>
      </view>
      <view
        class="mt-50 text-center py-12 rounded-full mx-15 text-15 text-white btn-gradient"
        @click="handleRegister"
      >
        注册
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.register-container {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: 50px;
  // background-repeat: no-repeat;
  // background-size: cover;
  background:
    url('@/static/images/brand-person.png') right 20px bottom / 60% no-repeat,
    url('@/static/images/login-bg.jpg') top center / cover no-repeat;
}
</style>