QTApp_800/pages/register.uvue

<template>
  <view class=" normal-login-container my-page">
    <view class=" logo-content align-center justify-center flex">
        <image class="my-image" style="width: 150rpx;height: 150rpx;" :src="(globalConfig['appInfo'] as UTSJSONObject)['logo'] as string" mode="widthFix">
      </image>
	  
      <text class="title">用户注册</text>
    </view>
    <view class=" login-form-content">
      <view class=" input-item flex align-center uni-row">
        <view class=" iconfont icon-user icon"></view>
        <input v-model="registerForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
	  <view class=" input-item flex align-center uni-row">
	    <view class=" iconfont icon-user icon"></view>
	    <input v-model="registerForm.name" class="input" type="text" placeholder="请输入用户姓名" maxlength="30" />
	  </view>
      <view class=" input-item flex align-center uni-row">
        <view class=" iconfont icon-password icon"></view>
        <input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      <view class=" input-item flex align-center uni-row">
        <view class=" iconfont icon-password icon"></view>
        <input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码" maxlength="20" />
      </view>
	  <!--
      <view class=" input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class=" iconfont icon-code icon"></view>
        <input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class=" login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img my-image"></image>
        </view>
      </view> -->
      <view class=" action-btn">
        <button @click="handleRegister()" class="register-btn block bg-blue lg round">注册</button>
      </view>
    </view>
    <view class=" xieyi text-center" v-if="login">
      <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
    </view>
  </view>
</template>

<script lang="uts">
  import { GlobalConfig } from '../config'
import { getCodeImg, register, RegForm} from '@/api/login'
  import {GetInfo} from '@/store'
  export default {
	
    data() {
      return {
        codeUrl: "" as string,
        captchaEnabled: false as boolean,
		login: false as boolean,
        globalConfig: getApp().globalData.config as UTSJSONObject,
        registerForm: {
          username: "",
		  name: "",
          password: "",
		  token: "",
          confirmPassword: "",
          code: "",
          uuid: ''
        } as RegForm
      } 
    },
    created() {
      //this.getCode()
    },
	onBackPress() {
		// 覆盖系统默认的返回行为，返回到指定页面
		uni.navigateTo({
			url: `/pages/mine/index`,
			// 修改动画方向为从左到右退回
			animationType: 'slide-in-left', // 使用从左到右滑出的动画效果
			animationDuration: 300 // 动画持续时间，单位ms
		})
		// 返回true表示拦截默认返回行为
		return true
	},
    methods: {
      // 用户登录
     handleUserLogin() {
       uni.navigateTo({
         url: '/pages/login'
       });
     },
      // 获取图形验证码
      async getCode() {
        getCodeImg().then((res:UTSJSONObject) => {
          this.captchaEnabled = res.getBoolean("captchaEnabled") as boolean | false
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + (res.getString("img") as string)
            this.registerForm.uuid = res.getString("uuid") as string
          }
        })
      },
      // 注册方法
      async handleRegister() {
        if (this.registerForm.username == "") {
          uni.showToast({
            title: '请输入您的账号',
            icon: 'error'
          });
        } else if (this.registerForm.username.length < 4 || this.registerForm.username.length > 20) {
          uni.showToast({
            title: '账号长度需在4-20位之间',
            icon: 'error'
          });
        } else if (!/^[a-zA-Z0-9]+$/.test(this.registerForm.username)) {
          uni.showToast({
            title: '账号只能包含字母和数字',
            icon: 'error'
          });
        } else if (this.registerForm.password == "") {
          uni.showToast({
            title: '请输入您的密码',
            icon: 'error'
          });
        } else if (this.registerForm.confirmPassword == "") {
          uni.showToast({
            title: '请再次输入您的密码',
            icon: 'error'
          });
        } else if (this.registerForm.password != this.registerForm.confirmPassword) {
          uni.showToast({
            title: '两次输入的密码不一致',
            icon: 'error'
          });
        } else if (this.registerForm.name == "") {
          uni.showToast({
            title: '请输入您的用户姓名',
            icon: 'error'
          });
        }
		else {
          uni.showLoading({
            title: '注册中，请耐心等待...'
          });
          this.register();
        }
      },
      // 用户注册
      async register() {
        register(this.registerForm).then(() => {
		  uni.hideLoading()
          uni.showModal({
          	title: "系统提示",
          	content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！",
          	success: function (res:UniShowModalResult) {
          		if (res.confirm) {
					uni.redirectTo({ url: `/pages/mine/index` });
          		}
          	}
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="scss">
  .my-page {
    background-color: #ffffff;
	width: 100%;
	height: 100%;
  }

  .normal-login-container {
    width: 100%;
	align-items: center;
	justify-content: center;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      .my-image {
        border-radius: 4px;
      }

      .title {
		margin-top: 15rpx;
      }
    }

    .login-form-content {
     /* #ifdef APP-NVUE */
     text-align: center;
     /* #endif */
      margin: 20rpx auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20rpx auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          /* #ifdef APP-NVUE */
            font-size: 38rpx;
            color: #999;
          /* #endif */
          margin-left: 10px;
        }

        .input {
          width: 100%;
          font-size: 14px;
          /* #ifdef APP-NVUE */
          line-height: 20px;
          /* #endif */
          padding-left: 15px;
        }

      }

      .register-btn {
        margin-top: 40px;
        height: 45px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        margin-left: auto;
      
        .login-code-img {
          height: 38px;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>