ShenhaiH5/src/base/register.vue

<!--
 * @Author: wyd
 * @Date: 2024-03
 * @LastEditors: wyd
 * @LastEditTime: 2024-05
 * @Description: 注册
-->
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onPullDownRefresh, onReady } from '@dcloudio/uni-app'
import { system } from '@/stores/modules/system'
import { useGlobal } from '@/composables'
import { validatorMobile, verifyPwd } from '@/utils/verification'
import { registerApi } from '@/api/login'
import Captcha from '@/base/components/Captcha.vue'
import type { captchaInfo } from '@/types/login'

const systemStore = system()
// 表单信息
const form = ref({
  // username: '',
  realname: '',
  password: '',
  mobile: '',
  uuid: '',
  code: ''
})
// 表单校验
const rules: UniHelper.UniFormsRules = {
  // username: {
  //   rules: [
  //     {
  //       required: true,
  //       errorMessage: '请输入用户名'
  //     },
  //     {
  //       maxLength: useGlobal().textMax,
  //       errorMessage: '限制{maxLength}个字符'
  //     }
  //   ]
  // },
  realname: {
    rules: [
      {
        required: true,
        errorMessage: '请输入姓名'
      },
      {
        maxLength: useGlobal().textMax,
        errorMessage: '限制{maxLength}个字符'
      }
    ]
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: '请输入密码'
      },
      {
        validateFunction: verifyPwd
      }
    ]
  },
  code: {
    rules: [
      {
        required: true,
        errorMessage: '请输入验证码'
      }
    ]
  },
  mobile: {
    rules: [
      {
        required: true,
        errorMessage: '请输入手机号'
      },
      {
        validateFunction: validatorMobile
      }
    ]
  }
}
// 表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>()

// 是否展示验证码
let isShowCaptcha: boolean = true
const captchaRef = ref()
const getCaptchaInfo = (val: captchaInfo) => {
  isShowCaptcha = val.captchaEnabled
  form.value.uuid = val.uuid
  form.value.code = val.code
}

const handleSubmit = async () => {
  formRef.value?.validate?.((err, formData) => {
    if (!err) {
      uni.showLoading()
      registerApi(form.value)
        .then(() => {
          // 注册成功，返回上一页
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        })
        .catch((err) => {
          captchaRef.value?.getCaptchaImage()
        })
    }
  })
}
onLoad(async () => {
  await systemStore.getConfigData()
})
onReady(() => {
  formRef.value?.setRules?.(rules)
})
// 下拉刷新
onPullDownRefresh(async () => {
  await systemStore.getConfigData()
  uni.stopPullDownRefresh()
})
</script>

<template>
  <view class="login-box">
    <view class="center-box p15 shadow">
      <view class="tc f18 weight-600 black-color mb20">注册</view>
      <uni-forms ref="formRef" :model="form" :rules="rules">
        <uni-forms-item name="mobile">
          <uni-easyinput type="text" v-model="form.mobile" placeholder="请输入手机号" />
        </uni-forms-item>
        <!-- <uni-forms-item name="username">
          <uni-easyinput type="text" v-model="form.username" placeholder="请输入用户名" />
        </uni-forms-item> -->
        <uni-forms-item name="realname">
          <uni-easyinput type="text" v-model="form.realname" placeholder="请输入姓名" />
        </uni-forms-item>
        <uni-forms-item name="password">
          <uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
        </uni-forms-item>
        <uni-forms-item v-if="isShowCaptcha && systemStore.config.captcha === 'true'" name="code">
          <Captcha ref="captchaRef" @getCaptchaInfo="getCaptchaInfo" class="w100" />
        </uni-forms-item>
      </uni-forms>
      <view class="btn-b warning-bg" @tap="handleSubmit">确 定</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  background: url('http://1.94.6.75:9000/zlhy-app/bg_login.jpg') center no-repeat;
  background-size: 100% 100%;
  position: relative;
  .center-box {
    width: calc(100vw - 60px);
    min-height: 200px;
    border-radius: 10rpx;
    background: rgba($color: #fff, $alpha: 0.8);
    position: absolute;
    left: 15px;
    top: 20%;
    .btn-b {
      width: 100% !important;
    }
  }
}
</style>