You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
sliyun-web-h5/src/view/user/Register.vue

185 lines
5.6 KiB

<template>
<div class="content">
<van-nav-bar
title="注册"
left-text="返回"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
<div class="login_top">
<van-image class="user_av"
width="60px"
height="60px"
:src=app.logo>
<template v-slot:loading>
<van-loading type="spinner" size="20"/>
</template>
</van-image>
<div class="van-ellipsis">{{app.name}}</div>
</div>
<div class="login_form">
<van-field
ref="username"
v-model="register.phone"
placeholder="请填写手机号"
:left-icon="icon_user"
@input="onInput"
:rules="[{ required: true, message: '请填写手机号' }]"
/>
<van-field
ref="password"
v-model="register.password"
type="password"
:left-icon="icon_password"
placeholder="请填写密码"
@input="onInput"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<van-field
ref="password"
v-model="register.password2"
type="password"
:left-icon="icon_password"
placeholder="请再次输入密码"
@input="onInput"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<div style="margin: 16px;">
<van-button :disabled="disabled" redround block type="info" @click="onRegister">注册
</van-button>
</div>
</div>
<!-- 右对齐 -->
<van-row type="flex" justify="center">
<van-col @click="onLogin">我有账户直接登录</van-col>
</van-row>
</div>
</template>
<script>
import {Register} from '@/api/user'
import {Toast} from 'vant';
import {Dialog} from 'vant';
import core from '@/core'
import md5 from 'js-md5';
import {icon_password, icon_user} from '@/core/icons'
function isEmpty(obj) {
if (typeof obj == "undefined" || obj == null || obj == "") {
return true;
} else {
return false;
}
}
export default {
name: "register",
data() {
return {
icon_password: icon_password,
icon_user: icon_user,
disabled: true,
app: {
logo: core.info.logo,
name: core.info.name,
},
register: {
phone: "",
password: "",
password2: ""
}
}
}, methods: {
onClickLeft() {
this.$router.go(-1)
},
onClickRight() {
},
onInput() {
window.console.log(JSON.stringify(this.login));
window.console.log(isEmpty(this.register.phone) + "/" + isEmpty(this.register.password) + "/" + this.disabled);
if (isEmpty(this.register.phone) || isEmpty(this.register.password) || isEmpty(this.register.password2)) {
this.disabled = true;
} else {
this.disabled = false;
}
},
onRegister() {
window.console.log('submit', JSON.stringify(this.register));
if (this.register.password != this.register.password2) {
Toast.fail("两次密码不一致")
return
}
const params = {
'phone': this.register.phone,
'password': md5('sunaliyun_'+this.register.password),
'code': ''
}
window.console.log('submit', params);
let _this = this;
Register(params).then(response => {
Toast.fail("注册成功")
window.console.log(response)
this.$router.go(-1)
}
).catch(error => {
window.console.log(error.response.data)
const data = error.response.data
window.console.log(data.code)
if (data.code === 1001) {
Dialog.confirm({
message: '账户已注册,是否直接登录',
}).then(function () {
_this.$router.go(-1)
})
} else {
Toast.fail(data.message)
}
});
},
onLogin() {
this.$router.go(-1)
}
}, setup() {
}
}
</script>
<style scoped>
body {
height: 100%;
padding: 0;
margin: 0;
}
.content {
background: white;
height: 100%;
}
.login_top {
height: 140px;
padding: 10px;
background: white;
text-align: center;
}
.user_av {
display: inline-block;
margin-top: 30px;
}
.login_form {
margin-left: 20px;
margin-right: 20px;
}
.login_register {
margin-right: 40px;
float: right;
}
</style>