<template> <view class="normal-login-container regbox" style="padding-top: 120rpx;"> <!-- <view class="logo-content align-center justify-center flex"> <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix"> </image> <text class="title">若依移动端注册</text> </view> --> <view> <image :src="headimg" class="headimg flex0"></image> <view class="headtit">注册</view> </view> <view class="login-form-content"> <view class="input-item flex align-center"> <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"> <view class="iconfont icon-password icon"></view> <uni-easyinput type="password" placeholderStyle="font-size: 28rpx;color: grey;" :inputBorder="false" v-model="registerForm.password" placeholder="请输入密码"></uni-easyinput> </view> <view class="input-item flex align-center"> <view class="iconfont icon-password icon"></view> <uni-easyinput type="password" placeholderStyle="font-size: 28rpx;color: grey;" :inputBorder="false" v-model="registerForm.confirmPassword" placeholder="请再次输入您的密码"></uni-easyinput> </view> <view class="input-item flex align-center" > <view class="iconfont icon-password icon"></view> <input v-model="registerForm.code" class="input" placeholder="请输入短信验证码" maxlength="20" /> <view v-if="timefalg" class="codes">重新发送{{time}}s</view> <view v-else class="codess" @click="getsendCode">发送验证码</view> </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"></image> </view> </view> <view class="titico">*密码必须包含数字、大小写字母、特殊符号且大于8位</view> <view class="action-btn"> <button @click="handleRegister()" type="primary" class=" rbtn mb24 mt50 btn2" >注册</button> <!-- <button class="register-btn cu-btn block bg-blue lg round">注册</button> --> </view> </view> <view class="xieyi text-center"> <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text> </view> </view> </template> <script> import * as base64 from "base-64" import { getCodeImg, register,sendSmszcOnly,getInfo } from '@/api/login.js' export default { data() { return { headimg:require('@/static/logo.png'), codeUrl: "", captchaEnabled: true, timefalg:'', tucode:'', time:'', globalConfig: getApp().globalData.config, jzflag:true, registerForm: { username: "", password: "", confirmPassword: "", code: "", uuid: '' } } }, created() { this.getCode() }, methods: { // 用户登录 handleUserLogin() { this.$tab.navigateTo(`/pages/login`) }, // 获取图形验证码 getCode() { getCodeImg().then(res => { this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled if (this.captchaEnabled) { this.codeUrl = 'data:image/gif;base64,' + res.img this.registerForm.uuid = res.uuid } }) }, // 获取短信验证码 getsendCode(){ var that=this; if (!this.registerForm.username ) { that.$toast("请输入手机号") return } let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 座机号 let reg1=/^(0\d{2,3})-?(\d{7,8})$/ if (this.registerForm.username && !regphone.test(this.registerForm.username)) { that.$toast("请输入正确的手机号") return } var params={ 'username':this.registerForm.username } // getSMS(); // return sendSmszcOnly(params).then(res=>{ if (res.code == 200) { // 发送验证码 that.$toast("发送成功") that.time=60; that.timefalg=true; that.setTimein() } else { that.$toast(res.msg) } }) }, // 验证码倒计时 setTimein(){ var that=this; clearInterval(that.timer) that.timer=setInterval(()=>{ if(that.time<=1){ that.timefalg=false; that.time=60; clearInterval(that.timer) } that.time=that.time-1; },1000) }, // 注册方法 async handleRegister() { let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ if (this.registerForm.username === "") { this.$toast('请输入您的手机号') } else if (this.registerForm.username && !regphone.test(this.registerForm.username)) { this.$toast('请输入正确的手机号') } else if (this.registerForm.password === "") { this.$toast('请输入您的密码') } else if (this.registerForm.confirmPassword === "") { this.$toast('请再次输入您的密码') } else if (this.registerForm.password !== this.registerForm.confirmPassword) { this.$toast('两次输入的密码不一致') // } else if (this.registerForm.code === "" && this.captchaEnabled) { } else if (this.registerForm.code === "") { this.$toast('请输入验证码') } else { this.$toast('注册中,请耐心等待...') this.register() } }, // 用户注册 async register() { var that=this; register(this.registerForm).then(res => { this.$modal.closeLoading() uni.showModal({ title: "系统提示", content: "恭喜你,您的账号 " + this.registerForm.username + " 注册成功!现在登录", success: function (res) { if (res.confirm) { that.pwdLogin() // uni.redirectTo({ url: `/pages/login` }); } } }) }).catch(() => { if (this.captchaEnabled) { this.getCode() } }) }, // 密码登录 async pwdLogin() { var that=this; var params={ username:this.registerForm.username, password:this.registerForm.password, type:1,//1:账号密码 2:手机登录 } this.$store.dispatch('Login', params).then((res) => { if(that.jzflag){ var newObj={ username:params.username, password:base64.encode(params.password), captchaEnabled:that.captchaEnabled, } uni.setStorageSync('account', JSON.parse(JSON.stringify(newObj))) }else{ uni.removeStorageSync('account') } this.$modal.closeLoading() this.$toast('登录成功') setTimeout(function(){ that.registerSuccess() },1500) }).catch((error) => { }) }, // 注册成功后,处理函数 registerSuccess(result) { // 设置用户信息 this.$store.dispatch('GetInfo').then(res => { this.$tab.reLaunch('/pages/index/index') }) } } } </script> <style lang="scss"> page { background-color: #ffffff; } .headimg{width: 154rpx;height: 160rpx;margin:0 auto 20rpx;} .headtit{ font-weight: bold; font-size: 40rpx; color: #343434;text-align: center; } .rbtn {font-size: 30rpx; &.btn{background: #9a9c9e;color: #ffffff;} &.btn2{background: $com-cd3;color: #ffffff;} } .codess{font-size: 30rpx;color: $com-cd3;flex: 0 0 auto;min-width: 200rpx;text-align: center;border-left: 2rpx solid #CDCDCD;} .codes{background: none;font-size: 28rpx;flex: 0 0 auto;width: 180rpx;text-align: center;border-left: 2rpx solid #CDCDCD;} .titico{font-weight: 500;font-size: 24rpx;color: #FF6969;} .normal-login-container { width: 100%; .logo-content { width: 100%; font-size: 21px; text-align: center; padding-top: 15%; image { border-radius: 4px; } .title { margin-left: 10px; } } .login-form-content { text-align: center; margin: 20px auto; margin-top: 15%; width: 80%; .input-item { margin: 20px auto; background-color: #f5f6f7; height: 45px; border-radius: 20px; .icon { font-size: 38rpx; margin-left: 10px; color: #999; } .input { width: 100%; font-size: 14px; line-height: 20px; text-align: left; padding-left: 15px; } } .register-btn { margin-top: 40px; height: 45px; } .xieyi { color: #333; margin-top: 20px; } .login-code { height: 38px; float: right; .login-code-img { height: 38px; position: absolute; margin-left: 10px; width: 200rpx; } } } } </style>