uniIM/pages/login/register.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="loginV register">
    <view class="content">
      <!-- 头部logo -->
      <view class="header">
        <image src="/static/logo512.png"></image>
        <view class="appName">
        	<text style="letter-spacing: 4rpx;font-style: italic;">AIIM</text>
        </view>
      </view>
      <!-- 主体 -->
      <view class="main" style="margin-top: 20rpx;">
        <uni-forms ref="userForm" :model="registerForm" :rules="rules" label-width="140upx" label-position="top">
          <uni-forms-item class="inputTitle" label="登录名" name="username">
            <uni-easyinput class="inputV" type="text" v-model="registerForm.username" placeholder="请输入登录名" :clearable="false"/>
          </uni-forms-item>
          <uni-forms-item class="inputTitle" label="密码" name="password">
            <uni-easyinput class="inputV" type="password" v-model="registerForm.password" placeholder="请输入密码" :clearable="false"/>
          </uni-forms-item>
          <uni-forms-item class="inputTitle" label="确认密码" name="confirmPassword">
            <uni-easyinput class="inputV" type="password" v-model="registerForm.confirmPassword" placeholder="请输入确认密码"
                           :clearable="false"/>
          </uni-forms-item>
          <!-- <uni-forms-item label="手机" name="phonenumber">
            <uni-easyinput type="text" v-model="registerForm.phonenumber" placeholder="请输入手机" :clearable="false"/>
          </uni-forms-item> -->
          <!-- <uni-forms-item label="验证码" name="code">
            <uni-easyinput type="text" v-model="registerForm.code" placeholder="请输入验证码" :clearable="false"/>
            <image :src="codeUrl" mode="widthFix" class="register-img" @tap="getCode"></image>
          </uni-forms-item> -->
		  <uni-forms-item class="inputTitle" label="E-mail" name="email">
		    <uni-easyinput class="inputV" type="text" v-model="registerForm.email" placeholder="请输入电子邮箱" :clearable="false"/>
		  </uni-forms-item>
		  <uni-forms-item class="inputTitle" label="验证码" name="code">
			  <view class="contentInRowS inputV" style="align-items:center;">
				  <uni-easyinput style="margin-right: 10rpx;" type="text" v-model="registerForm.code" placeholder="请输入验证码" :clearable="false"/>
				  <view class="yzmbt" @click="getEmailcodeSele">
				  	<text>{{huoquyzm}}</text>
				  </view>
			  </view>
		  </uni-forms-item>
		  
          <view class="margin-top text-center">
            <button class="cu-btn bg-zblue lg margin-top-sm" style="border-radius: 40upx;width:100%" @tap="save">注册</button>
          </view>
		  <view class="contentInRowC" style="font-size: 26upx;margin-top: 20px;" @click="login">
		  	<text style="color:darkgray;">已有账号！</text>
		  	<text style="color: #6E75FB;">去登录</text>
		  </view>
        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import UniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import UniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import {ref} from "vue";
import {getCodeImg, register,getEmailcode} from "@/api/Login";
import MessageUtils from "@/utils/MessageUtils";
import Auth from "@/api/Auth";
const fontValue=ref(Auth.getfontSize());

const userForm = ref();

const huoquyzm=ref('获取验证码');
const timeCall=ref(0);
const timer=ref();

// 验证码开关
const captchaOnOff = ref(true);
const codeUrl = ref("");
const equalToPassword = (rule:any, value:any,data:any, callback:any) => {
  if (registerForm.value.password !== value) {
    callback('两次输入的密码不一致');
  } else {
    return true;
  }
}
const login = () => {
  uni.reLaunch({
    url: "/pages/login/login"
  })
}
const getCode = () => {
  getCodeImg().then((res : any) => {
    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
    if (captchaOnOff.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      registerForm.value.uuid = res.uuid
    }
  });
}

getCode();
const rules = {
  username: {
    rules: [{
      required: true,
      errorMessage: '请输入姓名',
    },
      {
        minLength: 5,
        maxLength: 8,
        errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
      }
    ]
  },
  password: {
    rules: [{
      required: true,
      errorMessage: '请输入密码',
    },
      {
        minLength: 5,
        maxLength: 10,
        errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
      }
    ]
  },
  repassword: {
    rules: [
      { required: true, trigger: 'blur', message: '请再次输入您的密码' },
      {validateFunction: equalToPassword}
    ]
  },
  phonenumber: {
    rules: [{
      required: false,
      errorMessage: '请输入手机号',
    }, {
      validateFunction: function (rule: string, value: string, data: string, callback: Function) {
        const pattern = /^1[3456789]\d{9}$/
        if (!pattern.test(value)) {
			return true;
			//callback('手机号格式不对')
        }
        return true
      }
    }]
  },
  email: {
    rules: [{
      required: false,
      errorMessage: '邮箱不能为空！！',
    }, {
      validateFunction: function (rule: string, value: string, data: string, callback: Function) {
        const pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
        if (!pattern.test(value)) {
  			//return true;
  			callback('邮箱格式不正确！')
        }
        return true
      }
    }]
  }
}
const registerForm = ref({
  host: '',
  username: '',
  phonenumber: '',
  email:'',
  password: '',
  confirmPassword: '',
  code: '',
  uuid: ''
})

const save = () => {
  userForm.value.validate().then(() => {
    register(registerForm.value)
        .then(() => {
          MessageUtils.success('注册成功');
          uni.reLaunch({
            url: "/pages/login/login"
          })
        })
        .catch((err) => {
          MessageUtils.error(err.msg);
        })
  })
}

//邮箱验证码
const getEmailcodeSele = () =>{
	var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
	if (pattern.test(registerForm.value.email)) {
	　　;
	} else {
	　　console.log("错误的邮箱地址！",registerForm.value.email);
		if(registerForm.value.email==''||null==registerForm.value.email||undefined==registerForm.value.email){
		}
		else{
			uni.showToast({
				title:'请输入正确的电子邮箱(E-mail)',
				icon: 'none',
				duration: 3500
			})
			return;
		}
	}
	if(timeCall.value==0){
		getEmailcodeact();
	}
	else{
		return;
	}
}

const getEmailcodeact = () =>{
	console.log('getEmailcode',registerForm.value.email);
	uni.showLoading({
		title:'Loading...',
		mask:true
	})
	getEmailcode(registerForm.value.email).then((res : any) => {
	  console.log('getEmailcode',res);
	  uni.hideLoading();
	  if(res.code==200){
		  timeCall.value=60;
		  timer.value = setInterval(() => {
		  	timeCall.value=timeCall.value-1;
		  	if(timeCall.value==0){
		  		clearInterval(timer.value);
		  		huoquyzm.value='获取验证码';
		  	}
		  	else{
				huoquyzm.value='重新获取'+'('+timeCall.value+')';
		  	}
		  }, 1000);
	  }
	});
}
</script>

<style scoped>
@import url('@/static/css/main.css');
.register-img{
  width: 200upx;
  height: 80upx;
}
.uni-forms-item__content{
  display: flex!important;
}

.yzmbt{
	color: white;
	font-size: 26upx;
	width: 170rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	margin-left: auto;
	margin-right: 10rpx;
	border-radius: 2rpx;
	background-color:#60BA63;
}
.inputTitle{
	margin-top: -14rpx;
	font-size: 26upx;
	font-weight: bold;
}
.inputV{
	font-weight:normal;
	margin-top: -20rpx;
}
</style>