Files
intc-vue-h5/src/pages/register.vue
2024-12-13 09:35:48 +08:00

105 lines
2.7 KiB
Vue

<template>
<view class="pwd-retrieve-container">
<uni-forms ref="form" :value="user" labelWidth="80px">
<uni-forms-item name="username" required label="账号">
<uni-easyinput v-model="user.username" placeholder="请输入账号" />
</uni-forms-item>
<uni-forms-item name="password" required label="密码">
<uni-easyinput type="password" v-model="user.password" placeholder="请输入密码" />
</uni-forms-item>
<uni-forms-item name="confirmPassword" required label="确认密码">
<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认密码" />
</uni-forms-item>
<button type="primary" @click="handleRegister">用户注册</button>
</uni-forms>
<u-toast ref="uToast"></u-toast>
<view class="xieyi text-center"><br>
<text class="text-grey1">Copyright © 2024 qdintc All Rights Reserved.</text>
</view>
</view>
</template>
<script>
import { register } from "@/api/login"
export default {
data() {
return {
user: {
username: '',
password: '',
resource: '3',
confirmPassword: '',
code: '',
uuid: ''
},
rules: {
username: {
rules: [{
required: true,
errorMessage: '账号不能为空',
},
{
minLength: 6,
maxLength: 20,
errorMessage: '账号长度在 6 到 20 个字符'
}
]
},
password: {
rules: [{
required: true,
errorMessage: '密码不能为空',
},
{
minLength: 6,
maxLength: 20,
errorMessage: '长度在 6 到 20 个字符'
}
]
},
confirmPassword: {
rules: [{
required: true,
errorMessage: '确认密码不能为空'
}, {
validateFunction: (rule, value, data) => data.password === value,
errorMessage: '两次输入的密码不一致'
}
]
}
}
}
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
handleRegister() {
this.$refs.form.validate().then(res => {
register(this.user)
.then((res) => {
uni.showToast({
title: '注册成功,请登录',
icon: 'success',
duration: 2000
});
uni.navigateTo({ url: `/pages/login` })
})
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
.pwd-retrieve-container {
padding-top: 36rpx;
padding: 15px;
}
</style>