177 lines
6.0 KiB
Vue
177 lines
6.0 KiB
Vue
<template>
|
|
<view>
|
|
<status-nav-slot>
|
|
<view slot="leftContent" @tap="goLogin"><image class="register-close" src="/static/public/icon-close.png" mode="widthFix" lazy-load></image></view>
|
|
<view slot="rightContent" @tap="goLogin">登录</view>
|
|
</status-nav-slot>
|
|
<container-subgroup-two>
|
|
<view slot="content">
|
|
<view class="disjcac">
|
|
<image src="/static/public/icon-register.png" mode="widthFix" lazy-load></image>
|
|
</view>
|
|
<view class="register-title line-h56">
|
|
<view class="fon40 bold">注册</view>
|
|
<view class="fon28">欢迎来到飞猴云服务平台</view>
|
|
</view>
|
|
<view class="fon24">
|
|
<!-- 手机号 -->
|
|
<view class="disac mar-s30">
|
|
<view class="disac fon30">+86 <view class="register-phone-img"></view></view>
|
|
<view class="posir width100">
|
|
<input class="clear-input" type="number" maxlength="11" v-model="register_phone" placeholder="请输入手机号" placeholder-class="placeholderColor" />
|
|
<!-- 清除按钮 -->
|
|
<view class="clear-box" v-show="register_phone!=''" @tap="clearInput(0)"><view class="clear-close"><span></span><span></span></view></view>
|
|
</view>
|
|
</view>
|
|
<!-- 验证码 -->
|
|
<view class="disjbac mar-s50">
|
|
<view class="posir width100">
|
|
<input class="clear-input" type="number" maxlength="4" v-model="register_code" placeholder="请输入验证码" placeholder-class="placeholderColor" />
|
|
<!-- 清除按钮 -->
|
|
<view class="clear-box" v-show="register_code!=''" @tap="clearInput(1)"><view class="clear-close"><span></span><span></span></view></view>
|
|
</view>
|
|
<view class="obtain-code">获取验证码</view>
|
|
</view>
|
|
<!-- 密码 -->
|
|
<view class="disjbac mar-s50">
|
|
<view class="posir width100">
|
|
<input class="clear-input" type="text" maxlength="16" v-model="register_password" placeholder="请输入密码" placeholder-class="placeholderColor" />
|
|
<!-- 清除按钮 -->
|
|
<view class="clear-box" v-show="register_password!=''" @tap="clearInput(2)"><view class="clear-close"><span></span><span></span></view></view>
|
|
</view>
|
|
</view>
|
|
<!-- 确认密码 -->
|
|
<view class="disjbac mar-s50">
|
|
<view class="posir width100">
|
|
<input class="clear-input" type="text" maxlength="16" v-model="register_qpassword" placeholder="请再次确认密码" placeholder-class="placeholderColor" />
|
|
<!-- 清除按钮 -->
|
|
<view class="clear-box" v-show="register_qpassword!=''" @tap="clearInput(3)"><view class="clear-close"><span></span><span></span></view></view>
|
|
</view>
|
|
</view>
|
|
<!-- 单位名称 -->
|
|
<view class="disjbac mar-s50">
|
|
<view class="posir width100">
|
|
<input class="clear-input" type="text" v-model="register_unitName" placeholder="请输入单位名称" placeholder-class="placeholderColor" />
|
|
<!-- 清除按钮 -->
|
|
<view class="clear-box" v-show="register_unitName!=''" @tap="clearInput(4)"><view class="clear-close"><span></span><span></span></view></view>
|
|
</view>
|
|
</view>
|
|
<!-- 协议、政策 -->
|
|
<view class="disac mar-s50">
|
|
<label class="radio disac col9" @tap="chooseXY">
|
|
<radio class="register-radio" color="#03affb" :checked="ifAgreen"/><view>我已阅读并同意 <text @tap.stop="goXY(0)" class="register-agree-policy">《飞猴用户服务协议》</text>和 <text @tap.stop="goXY(1)" class="register-agree-policy">《飞猴隐私政策》</text></view>
|
|
</label>
|
|
</view>
|
|
<!-- 免费注册 -->
|
|
<view class="register-btn" @tap="submitEv">免费注册</view>
|
|
</view>
|
|
</view>
|
|
</container-subgroup-two>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import statusNavSlot from '@/components/status-navs/status-nav-slot.vue';
|
|
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
|
export default {
|
|
components:{
|
|
statusNavSlot,
|
|
containerSubgroupTwo
|
|
},
|
|
data() {
|
|
return {
|
|
register_phone:'', // 注册时的手机号
|
|
register_code:'', // 注册时的验证码
|
|
register_password:'', // 注册时的密码
|
|
register_qpassword:'', // 注册时的确认密码
|
|
register_unitName:'', // 注册时的单位名称
|
|
ifAgreen:false // 注册时是否勾选协议与政策
|
|
}
|
|
},
|
|
methods: {
|
|
// 提交事件
|
|
submitEv(){
|
|
if(this.checkEmpty()){
|
|
console.log('执行事件');
|
|
}
|
|
},
|
|
// 检测是否某个输入框为空
|
|
checkEmpty(){
|
|
let ifEmpty = true;
|
|
if(this.$toolAll.tools.isPhone(this.register_phone)) {
|
|
this.$toolAll.tools.showToast('手机号格式不正确');
|
|
ifEmpty = false;
|
|
return;
|
|
}
|
|
if(!this.register_code) {
|
|
this.$toolAll.tools.showToast('请输入验证码');
|
|
ifEmpty = false;
|
|
return;
|
|
}
|
|
if(!this.register_password) {
|
|
this.$toolAll.tools.showToast('密码不能为空');
|
|
ifEmpty = false;
|
|
return;
|
|
}
|
|
if(!this.register_qpassword) {
|
|
this.$toolAll.tools.showToast('确认密码不能为空');
|
|
ifEmpty = false;
|
|
return;
|
|
}
|
|
if(this.register_password != this.register_qpassword) {
|
|
this.$toolAll.tools.showToast('两次输入的密码必须相同');
|
|
ifEmpty = false;
|
|
return;
|
|
}
|
|
if(!this.register_unitName) {
|
|
this.$toolAll.tools.showToast('请输入单位名称');
|
|
ifEmpty = false;
|
|
return;
|
|
}
|
|
if(!this.ifAgreen) {
|
|
this.$toolAll.tools.showToast('请勾选协议与政策');
|
|
ifEmpty = false;
|
|
return;
|
|
}
|
|
return ifEmpty;
|
|
},
|
|
// 关闭当前页返回到登录页
|
|
goLogin(){
|
|
uni.navigateBack({delta:1})
|
|
},
|
|
// 清除手机号
|
|
clearInput(index){
|
|
switch (index){
|
|
case 0:
|
|
this.register_phone = '';
|
|
break;
|
|
case 1:
|
|
this.register_code = '';
|
|
break;
|
|
case 2:
|
|
this.register_password = '';
|
|
break;
|
|
case 3:
|
|
this.register_qpassword = '';
|
|
break;
|
|
case 4:
|
|
this.register_unitName = '';
|
|
break;
|
|
}
|
|
},
|
|
// 勾选协议
|
|
chooseXY(){
|
|
this.ifAgreen = !this.ifAgreen;
|
|
},
|
|
// 前往协议或政策
|
|
goXY(index){
|
|
console.log(index);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|