|
|
@@ -18,24 +18,25 @@
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="left-icon">
|
|
|
- <image src="../../static/register_icon_identity@2x.png" style="width: 100%;height: 100%;"></image>
|
|
|
+ <image src="../../static/register_icon_identity@2x.png" style="width: 100%;height: 100%;"></image>
|
|
|
</view>
|
|
|
<input class="uni-input item-input" v-model="form.idNumber" focus placeholder="请输入身份证号" />
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="left-icon">
|
|
|
- <image src="../../static/login_icon_phone@2x.png" style="width: 100%;height: 100%;"></image>
|
|
|
+ <image src="../../static/login_icon_phone@2x.png" style="width: 100%;height: 100%;"></image>
|
|
|
</view>
|
|
|
- <input class="uni-input item-input" v-model="form.phone" focus placeholder="请输入手机号" />
|
|
|
+ <input class="uni-input item-input" v-model="form.phone" focus placeholder="请输入手机号" type="number" @input="changePhone"/>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="left-icon">
|
|
|
- <image src="../../static/login_icon_code@2x.png" style="width: 100%;height: 100%;"></image>
|
|
|
+ <image src="../../static/login_icon_code@2x.png" style="width: 100%;height: 100%;"></image>
|
|
|
</view>
|
|
|
- <input class="uni-input item-input" style="width:190rpx;" v-model="form.code" placeholder="请输入验证码" />
|
|
|
- <view style="margin-left: 150rpx;font-size: 24rpx;text-align: center;line-height: 40rpx;color:rgba(41,138,253,1);"
|
|
|
- v-show="isGet" @tap="getCode">获取验证码</view>
|
|
|
- <view v-show="isShow" @tap="againGetCode" style="width: 160rpx; margin-left: 116rpx;font-size: 24rpx;text-align: center;line-height: 45rpx;color:rgba(41,138,253,1);">重新获取<sapn>({{num}}s)</sapn>
|
|
|
+ <input class="uni-input item-input" style="width:190rpx;" v-model="form.code" placeholder="请输入验证码" type="number" />
|
|
|
+ <view style="margin-left: 150rpx;font-size: 24rpx;text-align: center;line-height: 40rpx;"
|
|
|
+ v-show="isGet" @tap="getCode" class="getCode" :class="{codeActive:phoneLength==11}">获取验证码</view>
|
|
|
+ <view v-show="isShow" @tap="againGetCode" style="width: 160rpx; margin-left: 116rpx;font-size: 24rpx;text-align: center;line-height: 45rpx;color:rgba(41,138,253,1);"><text
|
|
|
+ @tap="againGetCode" class="cx" :class="{cxActive:num==0}">重新获取</text><text v-show="num>0">({{num}}s)</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!--注册按钮 -->
|
|
|
@@ -61,7 +62,7 @@
|
|
|
<image src="../../static/icon_colse@2x.png" style="width: 100%;height: 100%;"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
+ </uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -73,6 +74,7 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ phoneLength:0,//手机号码的长度
|
|
|
isPopup: false, //判断弹窗是否显示
|
|
|
isShow: false, //判断是否显示重新获取
|
|
|
isGet: true, //判断是否显示获取验证码
|
|
|
@@ -90,16 +92,20 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 监听输入手机号码的长度
|
|
|
+ changePhone(){
|
|
|
+ this.phoneLength = this.form.phone.length
|
|
|
+ },
|
|
|
// 注册成功弹窗关闭
|
|
|
- popupClose(){
|
|
|
- this.$refs.popup.close()
|
|
|
- },
|
|
|
- // 返回登录
|
|
|
- backLogin(){
|
|
|
- uni.navigateTo({
|
|
|
- url:"../login/login"
|
|
|
- })
|
|
|
- },
|
|
|
+ popupClose() {
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ // 返回登录
|
|
|
+ backLogin() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "../login/login"
|
|
|
+ })
|
|
|
+ },
|
|
|
// 现在登录
|
|
|
loginNow() {
|
|
|
uni.navigateTo({
|
|
|
@@ -108,87 +114,104 @@
|
|
|
},
|
|
|
// 获取验证码
|
|
|
getCode() {
|
|
|
- this.isShow = true
|
|
|
- this.isGet = false
|
|
|
- const TIME_COUNT = 60;
|
|
|
- // 判断当前timer是否有值
|
|
|
- if (!this.timer) {
|
|
|
- this.num = TIME_COUNT;
|
|
|
- this.show = false;
|
|
|
- this.timer = setInterval(() => {
|
|
|
- // 判断当前num值大于0并且小于等于60执行
|
|
|
- if (this.num > 0 && this.num <= TIME_COUNT) {
|
|
|
- this.num--;
|
|
|
- } else {
|
|
|
- //否则就清除定时
|
|
|
- clearInterval(this.timer);
|
|
|
- this.timer = null;
|
|
|
+ if(this.phoneLength!=11){
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ let phoneReg = /^1[3|4|5|7|8][0-9]{9}$/; //手机号正则校验
|
|
|
+ if (!phoneReg.test(this.form.phone)) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入正确的手机号码格式',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.isShow = true
|
|
|
+ this.isGet = false
|
|
|
+ const TIME_COUNT = 60;
|
|
|
+ // 判断当前timer是否有值
|
|
|
+ if (!this.timer) {
|
|
|
+ this.num = TIME_COUNT;
|
|
|
+ this.show = false;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ // 判断当前num值大于0并且小于等于60执行
|
|
|
+ if (this.num > 0 && this.num <= TIME_COUNT) {
|
|
|
+ this.num--;
|
|
|
+ } else {
|
|
|
+ //否则就清除定时
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
}
|
|
|
- }, 1000)
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
//重新获取验证码
|
|
|
againGetCode() {
|
|
|
-
|
|
|
+ this.getCode()
|
|
|
},
|
|
|
// 注册
|
|
|
register() {
|
|
|
- this.$refs.popup.open()
|
|
|
// 判断输入框是否都有值 是可以点击注册 否不可以点击
|
|
|
if (!this.form.name || !this.form.idNumber || !this.form.code || !this.form.phone) {
|
|
|
return
|
|
|
} else {
|
|
|
let idNumerReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; //身份证正则
|
|
|
- let phoneReg = /^1[3|4|5|7|8][0-9]{9}$/; //手机号正则校验
|
|
|
- if (!this.form.name) {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '姓名不能为空',
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- } else if (!idNumerReg.test(this.form.idNumber)) {
|
|
|
+ if (!idNumerReg.test(this.form.idNumber)) {
|
|
|
console.log(this.form.idNumber)
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: '身份证号码格式不正确',
|
|
|
duration: 2000
|
|
|
});
|
|
|
- } else if (!phoneReg.test(this.form.phone)) {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '手机号码格式不正确',
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
+ } else {
|
|
|
+ this.$refs.popup.open()
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
- .popupClose{
|
|
|
+ .getCode{
|
|
|
+ color: rgba(163,197,237,1);
|
|
|
+ }
|
|
|
+ .codeActive{
|
|
|
+ color:rgba(41,138,253,1);
|
|
|
+ }
|
|
|
+ .cx{
|
|
|
+ color: rgba(163,197,237,1);
|
|
|
+ }
|
|
|
+ .cxActive{
|
|
|
+ color:rgba(41,138,253,1);
|
|
|
+ }
|
|
|
+ .popupClose {
|
|
|
width: 44rpx;
|
|
|
height: 44rpx;
|
|
|
position: absolute;
|
|
|
right: 20rpx;
|
|
|
top: 20rpx;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .popupBtn{
|
|
|
+
|
|
|
+ .popupBtn {
|
|
|
width: 342rpx;
|
|
|
height: 80rpx;
|
|
|
position: absolute;
|
|
|
bottom: 80rpx;
|
|
|
left: 128rpx;
|
|
|
- background:rgba(41,138,253,1);
|
|
|
+ background: rgba(41, 138, 253, 1);
|
|
|
color: #FFFFFF;
|
|
|
font-size: 32rpx;
|
|
|
- }
|
|
|
- .popupTitle{
|
|
|
+ }
|
|
|
+
|
|
|
+ .popupTitle {
|
|
|
width: 260rpx;
|
|
|
height: 40rpx;
|
|
|
font-size: 28rpx;
|
|
|
@@ -197,14 +220,16 @@
|
|
|
bottom: 232rpx;
|
|
|
left: 170rpx;
|
|
|
}
|
|
|
- .popupImage{
|
|
|
- width:100%;
|
|
|
- height:300rpx;
|
|
|
-/* background-image: url(../../static/success_popup@2x.png);
|
|
|
+
|
|
|
+ .popupImage {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ /* background-image: url(../../static/success_popup@2x.png);
|
|
|
position: absolute;
|
|
|
top: -64rpx; */
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
.loginNow {
|
|
|
width: 116rpx;
|
|
|
height: 40rpx;
|
