|
|
@@ -1,7 +1,40 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <view :style="{height: statusBarHeight + 'px'}"></view>
|
|
|
- 注册
|
|
|
+ <u-form :model="registerForm" ref="registerForm" label-width="180"
|
|
|
+ :label-style="{ color: '#000', fontSize: '30rpx'}">
|
|
|
+ <u-form-item label="账号" prop="zhanghao" required :border-bottom="false">
|
|
|
+ <u-input height="80" placeholder="请输入账号" border-color="#b1b1b1" v-model="registerForm.zhanghao"
|
|
|
+ :border="true" class="form-item-input" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="密码" prop="mima" required :border-bottom="false">
|
|
|
+ <u-input height="80" placeholder="请输入密码" border-color="#b1b1b1" v-model="registerForm.mima"
|
|
|
+ :border="true" class="form-item-input" type="password" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="确认密码" prop="querenmima" required :border-bottom="false">
|
|
|
+ <u-input height="80" placeholder="请确认密码" border-color="#b1b1b1" v-model="registerForm.querenmima"
|
|
|
+ :border="true" class="form-item-input" type="password" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="手机号码" prop="shoujihaoma" required :border-bottom="false">
|
|
|
+ <u-input height="80" placeholder="请输入手机号" border-color="#b1b1b1" v-model="registerForm.shoujihaoma"
|
|
|
+ :border="true" class="form-item-input" type="number" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="身份证" prop="shenfenzheng" :border-bottom="false">
|
|
|
+ <u-input height="80" placeholder="请输入身份证" border-color="#b1b1b1" v-model="registerForm.shenfenzheng"
|
|
|
+ :border="true" class="form-item-input" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="性别" prop="xingbie" required :border-bottom="false">
|
|
|
+ <u-radio-group v-model="registerForm.xingbie">
|
|
|
+ <u-radio v-for="(item, index) in radioList1" :key="index" :name="item.name"
|
|
|
+ :disabled="item.disabled">
|
|
|
+ {{ item.text }}
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </u-form-item>
|
|
|
+ <view class="form-button" @click="submit">
|
|
|
+ 注册
|
|
|
+ </view>
|
|
|
+ <view class="form-tip" @click="back">已有账号，立即登录</view>
|
|
|
+ </u-form>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -9,30 +42,144 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- statusBarHeight: 0,
|
|
|
- navBarHeight:0
|
|
|
+ registerForm: {
|
|
|
+ zhanghao: '', //账号
|
|
|
+ mima: "", //密码
|
|
|
+ querenmima: '', // 确认密码
|
|
|
+ shoujihaoma: '', // 手机号码
|
|
|
+ shenfenzheng: '', // 身份证
|
|
|
+ xingbie: '' // 性别
|
|
|
+ },
|
|
|
+ radioList1: [{
|
|
|
+ name: '男',
|
|
|
+ text: '男',
|
|
|
+ disabled: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '女',
|
|
|
+ text: '女',
|
|
|
+ disabled: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ rules: {
|
|
|
+ zhanghao: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入账号',
|
|
|
+ trigger: ['blur']
|
|
|
+ }],
|
|
|
+ mima: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入密码',
|
|
|
+ trigger: ['blur']
|
|
|
+ }],
|
|
|
+ querenmima: [{
|
|
|
+ required: true,
|
|
|
+ message: "密码与确认密码不一致",
|
|
|
+ trigger: ['blur'],
|
|
|
+ validator: this.validateConfirmPassword
|
|
|
+ }],
|
|
|
+ shoujihaoma: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入手机号码',
|
|
|
+ trigger: ['blur']
|
|
|
+ }, {
|
|
|
+ pattern: /^1[3-9]\d{9}$/,
|
|
|
+ message: '请输入正确的手机号',
|
|
|
+ trigger: ['blur']
|
|
|
+ }],
|
|
|
+ shenfenzheng: [{
|
|
|
+ pattern: /^(?:\d{15}|\d{17}[\dXx])$/,
|
|
|
+ transform(value) {
|
|
|
+ return String(value);
|
|
|
+ },
|
|
|
+ message: '请输入正确的手机号',
|
|
|
+ trigger: ['blur']
|
|
|
+ }],
|
|
|
+ xingbie: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择性别',
|
|
|
+ trigger: ['change']
|
|
|
+ }]
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
- onReady() {
|
|
|
- const that = this;
|
|
|
- uni.getSystemInfo({
|
|
|
- success(e) {
|
|
|
- that.statusBarHeight = e.statusBarHeight;
|
|
|
- let custom = uni.getMenuButtonBoundingClientRect();
|
|
|
- that.navBarHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
|
|
|
+ methods: {
|
|
|
+ validateConfirmPassword(rule, value, callback) {
|
|
|
+ if (value !== this.registerForm.mima) {
|
|
|
+ callback(new Error('密码与确认密码不一致'));
|
|
|
+ } else {
|
|
|
+ callback(); // 校验通过
|
|
|
}
|
|
|
- })
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ const that = this;
|
|
|
+ that.$refs.registerForm.validate((valid) => {
|
|
|
+ console.log(valid, that.registerForm.xingbie, 456);
|
|
|
+ if (valid) {
|
|
|
+ that.showToast("数据验证成功")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提示
|
|
|
+ showToast(msg, type) {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: msg,
|
|
|
+ type: type ? type : "error",
|
|
|
+ position: "top"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ back(){
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1,
|
|
|
+ animationType: 'pop-out',
|
|
|
+ animationDuration: 200
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ onLoad() {},
|
|
|
+ onReady() {
|
|
|
+ this.$refs.registerForm.setRules(this.rules);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="scss">
|
|
|
+ .u-form-item {
|
|
|
+ padding: 30rpx 0 !important;
|
|
|
+ }
|
|
|
|
|
|
+ .u-form-item .u-form-item--left__content__label {
|
|
|
+ display: block !important;
|
|
|
+ text-align: justify;
|
|
|
+ text-align-last: justify;
|
|
|
+ padding: 0 20rpx 0 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-input {
|
|
|
+ background-color: #f7f7f7 !important;
|
|
|
+ }
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
- background-color: $uni-bg-color;
|
|
|
- padding: 0 20rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 0 40rpx;
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+ .form-item-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-button {
|
|
|
+ background: linear-gradient(90deg, #006af5, #21b0fc);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ margin: 20rpx 0 50rpx;
|
|
|
+ }
|
|
|
+ .form-tip{
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+</style>
|
littleblue55