< template >
< view class = "loginBack" >
< view class = "loginForm" >
< view class = "welcomeLogin" > 注册 < / view >
< view class = "tip" > yoga < / view >
< view class = "formregion" >
< uni -forms :model ="form" ref = "uForm" >
< uni -forms -item prop = "phonenumber" >
< uni -easyinput type = "number" placeholder = "请输入手机号码" v -model = " form.phonenumber " @blur ="zhhandleBlur" :inputBorder ="false" :clearable ="false" :placeholderStyle ="placeholderStyle" / >
< / u n i - f o r m s - i t e m >
< uni -forms -item prop = "password" >
< uni -easyinput type = "password" placeholder = "请输入密码" v -model = " form.password " @blur ="mmhandleBlur" :inputBorder ="false" :clearable ="false" :placeholderStyle ="placeholderStyle" / >
< / u n i - f o r m s - i t e m >
< uni -forms -item prop = "passwordSecond" >
< uni -easyinput type = "password" placeholder = "请再次输入密码" v -model = " form.passwordSecond " @blur ="mmhandleBlur" :inputBorder ="false" :clearable ="false" :placeholderStyle ="placeholderStyle" / >
< / u n i - f o r m s - i t e m >
< uni -forms -item prop = "code" >
< uni -easyinput type = "text" placeholder = "请输入验证码" v -model .trim = " form.code " :inputBorder ="false" :clearable ="false" :placeholderStyle ="placeholderStyle" / >
< image :src ="checkimg" class = "checkimg" mode = "scaleToFill" > < / image >
< view class = "codebtn" @click ="getcode" > 看 不 清 ? < / view >
< / u n i - f o r m s - i t e m >
< button type = "primary" class = "logincla" @click ="loginpwdDo" > 注 册 < / button >
< view v-if ="iflogin" class="loginno" > 注 册 中 .. < / view >
< view class = "regcon" >
< view class = "regtxtr" @click ="gotologin" > 已 有 账 户 ， 返 回 登 录 ? < / view >
< / view >
< / u n i - f o r m s >
< / view >
< u -toast ref = "uToast" / >
< / view >
< / view >
< / template >
< script >
//#ifdef APP-PLUS
// const jpushModule = uni.requireNativePlugin('JG-JPush');
//#endif
import { myCache } from '../../utils/utils.js' ;
export default {
data ( ) {
return {
checkimg : require ( "@/static/image/check.jpg" ) ,
placeholderStyle : "font-size: 28rpx;color: #c3c4c6; text" ,
form : {
phonenumber : "" ,
miniAppCode : "" ,
passwordSecond : "" ,
password : "" ,
code : "" ,
uuid : ""
} ,
iflogin : false ,
gcj02 : "1" ,
address : '' ,
longitude : '' , // 经度
latitude : '' , // 维度
}
} ,
onLoad ( ) {
// 获取验证码
this . getcheckImg ( ) ;
this . getsystemInfo ( ) ;
} ,
methods : {
gotologin ( ) {
// 注册账号
uni . navigateTo ( {
url : ` /pages/login/login `
} ) ;
} ,
async getcheckImg ( ) {
// 验证图片信息
const { data : res } = await uni . $http . get ( '/captchaImage' ) ;
if ( res && res . img && res . uuid ) {
this . checkimg = 'data:image/png;base64,' + res . img ;
this . form . uuid = res . uuid ;
this . $forceUpdate ( ) ;
}
} ,
// 判断密码是否合规
mmhandleBlur ( e ) {
console . log ( e )
if ( e . detail . value && e . detail . value . length < 6 ) {
// if(e.detail.value&&!this.checkMM(e.detail.value)){
// '密码必须是由6-20位长度的字母、数字组成， ！
// '密码必须是8-20位字符至少包括大写字母、小写字母、数字、特殊符号中3种以上， ！
this . $refs . uToast . show ( {
title : "密码必须是6-20位字符至少包括英文、数字、特殊符号中2种以上， ！ ,
type : 'error' ,
duration : 2000
} ) ;
}
} ,
// 校验密码
checkMM ( mm ) {
// if (!(/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/.test(mm))) {
// // if (!(/((^(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z_\W]{8,20}$))/.test(mm))) {
// return false;
// }
return true ;
} ,
// 判断手机号码是否合法
zhhandleBlur ( e ) {
console . log ( e )
// 判断手机号码是否合法
if ( ! this . $u . test . mobile ( e . detail . value ) ) {
this . $refs . uToast . show ( {
title : '手机号码输入错误，请核实！' ,
type : 'warning' ,
duration : 2000
} ) ;
}
} ,
async getcode ( ) {
uni . showLoading ( {
title : '验证码请求中...'
} ) ;
const { data : res } = await uni . $http . get ( '/captchaImage' ) ;
console . log ( res ) ;
if ( res && res . img && res . uuid ) {
this . checkimg = 'data:image/png;base64,' + res . img ;
this . form . uuid = res . uuid ;
this . $forceUpdate ( ) ;
}
else {
this . $refs . uToast . show ( {
title : "验证码请求失败！请重试！" ,
type : 'error' ,
duration : 2000
} ) ;
}
} ,
// 校验手机号码
checkPhone ( phone ) {
if ( ! ( /^1[3456789]\d{9}$/ . test ( phone ) ) ) {
return false ;
}
return true ;
} ,
// 获取设备信息
getsystemInfo ( ) {
const info = uni . getSystemInfoSync ( ) ;
const platform = info . platform ; // 手机安卓还是苹果
if ( info . platform === 'ios' ) {
// ios
console . log ( 'iOS 设备唯一标识:' , info . deviceId ) ;
}
else {
//安卓
console . log ( '设备信息ID:' , info . deviceId ) ;
}
this . form . miniAppCode = info . deviceId ;
this . $forceUpdate ( ) ;
// const iosApp = info.platform;
console . log ( 'iOS 设备名称:' , info . model ) ;
console . log ( 'iOS 系统版本:' , info . system ) ;
console . log ( 'iOS 设备唯一标识:' , info . deviceId ) ;
console . log ( 'iOS 设备像素比:' , info . devicePixelRatio ) ;
console . log ( 'iOS 设备屏幕宽度:' , info . screenWidth ) ;
console . log ( 'iOS 设备屏幕高度:' , info . screenHeight ) ;
console . log ( 'iOS 设备方向:' , info . deviceOrientation ) ;
// uni.showModal({
// title: '提示',
// content: info.deviceId,
// success(res) {
// if (res.confirm) {
// console.log('用户点击了确定');
// } else if (res.cancel) {
// console.log('用户点击了取消');
// }
// }
// });
} ,
login ( ) {
this . loginpwdDo ( ) ;
} ,
// 注册
async loginpwdDo ( ) {
// 手机号码 密码是否输入
if ( ! this . form . phonenumber ) {
this . $refs . uToast . show ( {
title : "请输入手机号码！" ,
type : 'warn' ,
duration : 2000
} ) ;
return false ;
}
if ( ! this . form . password ) {
this . $refs . uToast . show ( {
title : "请输入密码！" ,
type : 'warn' ,
duration : 2000
} ) ;
return false ;
}
if ( ! this . form . phonenumber ) {
this . $refs . uToast . show ( {
title : "请再次输入密码！" ,
type : 'warn' ,
duration : 2000
} ) ;
return false ;
}
if ( this . form . password !== this . form . passwordSecond ) {
this . $refs . uToast . show ( {
title : "两次输入密码不一致！" ,
type : 'warn' ,
duration : 2000
} ) ;
return false ;
}
if ( ! this . form . code ) {
this . $refs . uToast . show ( {
title : "请输入验证码！" ,
type : 'warn' ,
duration : 2000
} ) ;
return false ;
}
uni . showLoading ( {
title : '正在注册...'
} ) ;
uni . setStorageSync ( 'iftoken' , "1" ) ;
const { data : res } = await uni . $http . post ( '/api/register' , this . form ) ;
console . log ( res ) ;
if ( res && res . success ) {
this . $refs . uToast . show ( {
title : '注册成功，去登录！' ,
type : 'success' ,
isTab : false ,
duration : 2000 ,
url : '/pages/login/login'
} ) ;
}
else {
this . $refs . uToast . show ( {
title : res . msg ? res . msg : "此账号注册失败！请重试！" ,
type : 'error' ,
duration : 2000
} ) ;
}
}
}
}
< / script >
< style >
< / style >
< style lang = "scss" scoped >
: : v - deep . u - checkbox _ _label {
color : # bdbfc1
}
: : v - deep . uni - easyinput _ _content - input {
width : 500 rpx ;
height : 80 rpx ;
background : # fff ;
box - shadow : 0 rpx 12 rpx 64 rpx 2 rpx rgba ( 137 , 150 , 95 , 0.3 ) ;
border - radius : 254 rpx 254 rpx 254 rpx 254 rpx ;
}
: : v - deep . uni - easyinput _ _content {
border - radius : 254 rpx 254 rpx 254 rpx 254 rpx ;
text - indent : 20 rpx ;
}
. lttxt {
font - size : 30 rpx ;
font - family : PingFang SC , PingFang SC ;
font - weight : 400 ;
color : # 333333 ;
line - height : 38 rpx ;
height : 45 rpx ;
margin : 30 rpx auto ;
text - align : center ;
}
. timetxt {
position : absolute ;
top : 20 rpx ;
right : 28 rpx ;
display : block ;
font - size : 36 rpx ;
color : # 00 a89b ;
line - height : 38 rpx ;
height : 45 rpx ;
margin - left : 50 rpx ;
}
. checkimg {
position : absolute ;
top : 14 rpx ;
right : 130 rpx ;
width : 150 rpx ;
height : 50 rpx ;
}
. codebtn {
position : absolute ;
top : 12 rpx ;
right : 20 rpx ;
display : block ;
color : # 00 a89b ;
height : 60 rpx ;
line - height : 60 rpx ;
font - size : 26 rpx ;
padding : 0 10 rpx ;
}
. regcon {
display : flex ;
flex - direction : row ;
align - items : center ;
justify - content : center ;
margin - top : 36 rpx ;
. regtxt {
color : # 00 a89b ;
font - size : 28 rpx ;
display : flex ;
align - items : center ;
}
. regtxtl {
color : # 00 a89b ;
width : 2 rpx ;
height : 26 rpx ;
font - size : 26 rpx ;
margin - left : 10 rpx ;
margin - right : 10 rpx ;
border - right : 1 rpx solid # 00 a89b ;
display : flex ;
align - items : center ;
}
. regtxtr {
color : # 00 a89b ;
height : 28 rpx ;
font - size : 28 rpx ;
display : flex ;
align - items : center ;
margin - right : 10 rpx ;
}
}
. loginno {
display : block ;
background - color : rgba ( 137 , 150 , 95 , 0.3 ) ;
width : 100 % ;
line - height : 2 ;
margin - top : 30 rpx ;
border - radius : 12 rpx ;
font - size : 30 rpx ;
text - align : center ;
box - sizing : border - box ;
}
. logincla {
display : block ;
background - color : # 00 A99A ;
width : 100 % ;
line - height : 2 ;
}
. loginBack {
color : # fff ;
height : 100 vh ;
padding : 60 rpx 50 rpx 200 rpx 50 rpx ;
width : 100 % ;
overflow : hidden ;
background - size : 100 % 100 % ;
background - image : url ( '../../static/image/lgbg.jpg' ) ;
. inpuIcon {
width : 46 rpx ;
height : 46 rpx ;
margin - right : 30 rpx ;
}
. formregion {
width : 100 % ;
padding : 30 px 50 rpx ;
background - color : # fff ;
border - radius : 10 px ;
margin - top : 20 rpx ;
position : relative ;
display : block ;
overflow : hidden ;
. logo {
position : absolute ;
top : - 20 rpx ;
left : 0 ;
width : 100 % ;
display : flex ;
flex - direction : column ;
align - items : center ;
justify - content : center ;
}
. define {
width : 120 rpx ;
height : 120 rpx ;
}
}
}
. welcomeLogin {
font - size : 30 rpx ;
letter - spacing : 2 rpx ;
padding : 20 rpx 0 10 rpx ;
margin : 0 auto ;
width : 100 % ;
}
. tip {
font - weight : 600 ;
font - size : 42 rpx ;
letter - spacing : 4 rpx ;
padding : 0 0 40 rpx 0 ;
width : 100 % ;
}
< / style >
