190 lines
5.9 KiB
Plaintext
190 lines
5.9 KiB
Plaintext
<template>
|
|
<view class="container">
|
|
<view class="">
|
|
<view class="border_level_bottom_f1 pdlft20 pdRit20" style="border-radius: 8rpx;margin-top: 50rpx;">
|
|
<view class="fs-30 bold">昵称(最多6个字)</view>
|
|
<input v-model="phone" maxlength="6" type="number" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请输入昵称"/>
|
|
</view>
|
|
<view class="border_level_bottom_f1 pdlft20 pdRit20" style="border-radius: 8rpx;margin-top: 50rpx;">
|
|
<view class="fs-30 bold">手机号</view>
|
|
<input v-model="phone" maxlength="11" type="number" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请输入手机号"/>
|
|
</view>
|
|
<view class="border_level_bottom_f1 pdlft20 pdRit20 relative" style="border-radius: 8rpx;margin-top: 50rpx;">
|
|
<view class="fs-30 bold">验证码</view>
|
|
<input v-model="code" maxlength="11" type="number" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请输入验证码"/>
|
|
<view @click="verificationes()" class="get_corasd tct fs24 colfff">
|
|
{{verifications?`倒计时${times}s` : '获取验证码' }}
|
|
</view>
|
|
</view>
|
|
<view class="border_level_bottom_f1 pdlft20 pdRit20" style="border-radius: 8rpx;margin-top: 50rpx;">
|
|
<view class="fs-30 bold">密码</view>
|
|
<input v-model="password" type="password" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请输入密码"/>
|
|
</view>
|
|
|
|
|
|
<view class="border_level_bottom_f1 pdlft20 pdRit20" style="border-radius: 8rpx;margin-top: 50rpx;">
|
|
<view class="fs-30 bold">确认密码</view>
|
|
<input v-model="passwords" type="password" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请再次输入密码"/>
|
|
</view>
|
|
|
|
<view @click="isSubmit" class="logis_dsfg colfff fs-30 tct mt-30">立即注册</view>
|
|
<view class="tct fs-24 pt-67">
|
|
<text class="mr-10">已有账号</text>
|
|
<text @tap="goBack()" style="color: #fd4d47;">登录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
timerInsad:null,//定时器
|
|
// name:'',//昵称
|
|
modeList: ['厂家定制','现货批发商','门店店铺','公司采购','个人用户'],
|
|
mode: {type:'',text: ''},//注册类型
|
|
phone:'',//手机号
|
|
password:'',//密码
|
|
passwords:'',//确认密码
|
|
code:'',//验证码
|
|
times:199,//倒计时的时间
|
|
verifications:false,//显示的那个倒计时
|
|
}
|
|
},
|
|
onReady() {
|
|
this.heigha = uni.getSystemInfoSync().windowHeight;//获取设备高
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
modeChange(e) {//模式改变
|
|
this.mode.type = e.detail.value + 1
|
|
this.mode.text = this.modeList[e.detail.value]
|
|
console.log(this.mode.type)
|
|
},
|
|
isSubmit() {//做的非空验证+$
|
|
const reg = /^(?=.*\d)(?=.*[a-z]).{6,12}$/;
|
|
if(!this.mode.type) {
|
|
this.$tools.showtt('请选择注册类型')
|
|
return false
|
|
}
|
|
if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
|
|
this.$tools.showtt('手机号格式不正确')
|
|
return false
|
|
}
|
|
if(!this.password) {
|
|
this.$tools.showtt('请输入密码')
|
|
return false
|
|
}
|
|
if(this.password != this.passwords) {
|
|
this.$tools.showtt('两次密码输入不一致')
|
|
return false
|
|
}
|
|
if(!this.code) {
|
|
this.$tools.showtt('请输入验证码')
|
|
return false
|
|
}
|
|
|
|
this.loginOne();//注册
|
|
},
|
|
verificationes() {// 获取验证码的事件
|
|
if(this.verifications) {
|
|
this.$tools.showtt('您已获取验证码')
|
|
} else {
|
|
if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
|
|
this.$tools.showtt('手机号格式不正确','none')
|
|
return false
|
|
} else {
|
|
let obj = {
|
|
mobile:this.phone,//手机号
|
|
flag:'1',
|
|
}
|
|
this.$tools.axios('POST','sms/send',obj).then(zifan => {
|
|
if(zifan.code == 1) {
|
|
this.$tools.showtt(zifan.msg+'')
|
|
this.verifications = true
|
|
this.timerInsad = setInterval( res => {
|
|
if(this.times <= 0) {
|
|
this.verifications = false
|
|
this.times = 199
|
|
this.code = ''
|
|
clearInterval(this.timerInsad)
|
|
} else {
|
|
this.times--
|
|
}
|
|
},1000)
|
|
} else {
|
|
this.$tools.showtt(zifan.msg+'')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
loginOne() {//按钮
|
|
|
|
let obj = {
|
|
// name:this.name,//昵称
|
|
mobile:this.phone,//手机号
|
|
re_password: this.passwords,//确认密码
|
|
password:this.password,//密码
|
|
code:this.code,//验证码
|
|
type: this.mode.type
|
|
}
|
|
this.$tools.axios('POST','user/register',obj,'注册中').then(one => {
|
|
clearInterval(this.timerInsad)
|
|
this.verifications = false
|
|
this.times = 199
|
|
if(one.code == 1) {
|
|
this.$tools.showtt('注册成功')
|
|
setTimeout(two => {
|
|
this.$tools.goBack(1)
|
|
},600)
|
|
} else {
|
|
this.$tools.showtt(one.msg)
|
|
this.name = '';
|
|
this.password = '';
|
|
this.passwords = '';
|
|
this.code = '';
|
|
this.mode.type = ''
|
|
this.mode.text = ''
|
|
this.phone = ''
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 750rpx;
|
|
padding-left: 50rpx;
|
|
padding-right: 50rpx;
|
|
}
|
|
.logis_dsfg {
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
background-image: linear-gradient(#ff5c5b,#fa3427);
|
|
border-radius: 100rpx;
|
|
margin-top: 100rpx;
|
|
}
|
|
.get_corasd {
|
|
position: absolute;
|
|
bottom: 15rpx;
|
|
right: 0rpx;
|
|
width: 180rpx;
|
|
height: 60rpx;
|
|
color: #fa3326;
|
|
border: 2rpx solid #fa3326;
|
|
font-size: 24rpx;
|
|
border-radius: 100rpx;
|
|
line-height: 56rpx;
|
|
}
|
|
.border_level_bottom_f1 {
|
|
border-bottom: 2rpx solid #f1f1f1;
|
|
}
|
|
</style>
|