<template>
|
<view>
|
<el-card :style="{width: width + 'px'}">
|
<view style="display: flex; justify-content: space-between;">
|
<h2 style="color: #244a7b;padding-bottom: 20rpx;">{{title}}</h2>
|
<view v-if="BackLoginTrue" style="cursor: pointer;font-size: 20rpx;color: #244a7b;">
|
{{BackLogin}}
|
</view>
|
</view>
|
<el-form :hide-required-asterisk="true" ref="loginForm" :label-position="BackLoginTrue ? 'left' : 'top'"
|
label-width="80px" :rules="getDynamicRules" :model="formData">
|
<el-form-item class="ssss" v-for="(item,index) in internalData.formData" :key="item.id"
|
:prop="item.id" :label="item.lable">
|
<el-input type="password" class="aaa" :data-index="index" autocomplete="off"
|
v-if="item.type == 'pass'||item.type == 'affirmPass'" v-model="item.val"></el-input>
|
<el-input class="aaa" v-else v-model="item.val"></el-input>
|
</el-form-item>
|
<el-form-item class="btn">
|
<el-button class="font-family"
|
style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
|
size="medium" @click="Login">登录</el-button>
|
</el-form-item>
|
<view
|
style="font-size: 18rpx;color: #9E9E9E;text-align: center;line-height: 1;margin-bottom: 20rpx;">
|
用户注册即代表同意《服务条款》和《用户隐私保护和个人信息条款》</view>
|
<!-- 登录时 忘记密码/快速注册 -->
|
<view v-if="loginTrue" style="display: flex;font-size: 20rpx;" :style="{color:color}">
|
<view style="display: inline-block;cursor: pointer;" @click="forgetPass">忘记密码</view>
|
<view style="display: inline-block;margin: 0 20rpx;"> | </view>
|
<view style="display: inline-block;cursor: pointer;" @click="quickRegister">快速注册</view>
|
</view>
|
</el-form>
|
</el-card>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
title: {
|
type: String,
|
default () {
|
return "用户注册"
|
}
|
},
|
BackLogin: {
|
type: String,
|
default () {
|
return " 已有账号？返回登录"
|
}
|
},
|
// 上下排列
|
BackLoginTrue: {
|
type: Boolean,
|
default () {
|
return true
|
}
|
},
|
color: {
|
type: String,
|
default () {
|
return "#244a7b"
|
}
|
},
|
// 用户登录时
|
loginTrue: {
|
type: Boolean,
|
default () {
|
return false
|
}
|
},
|
// 用户注册时
|
Register: {
|
type: Boolean,
|
default () {
|
return false
|
}
|
},
|
width: {
|
type: Number,
|
default () {
|
return 400;
|
},
|
},
|
// data数据
|
formData: {
|
type: Object,
|
default () {
|
return {
|
formData: [{
|
lable: '登录',
|
id: 1,
|
val: '',
|
type: '',
|
},
|
{
|
lable: '登录1',
|
id: 2,
|
val: 'sdwwwf',
|
type: 'pass',
|
},
|
],
|
};
|
},
|
},
|
},
|
watch: {
|
formData: {
|
deep: true,
|
handler(a, b) {
|
if (this.dataIndex != null) {
|
this.InputElem(this.dataIndex)
|
}
|
},
|
},
|
},
|
computed: {
|
getDynamicRules() {
|
const dynamicRules = {};
|
this.formData.formData.forEach((item) => {
|
item.id = String(item.id);
|
dynamicRules[item.id] = [];
|
// 是密码 F
|
if (item.type == 'pass' || item.type == "affirmPass") {
|
dynamicRules[item.id].push({
|
required: true,
|
message: '请输入' + item.lable,
|
trigger: ['blur', 'change']
|
});
|
dynamicRules[item.id].push({
|
min: 3,
|
max: 5,
|
message: '长度在 3 到 5 个字符',
|
trigger: ['blur', 'change']
|
});
|
// 手机号或邮箱
|
} else if (item.type == 'cellphoneORmailbox') {
|
dynamicRules[item.id].push({
|
required: true,
|
message: '请输入' + item.lable,
|
trigger: ['blur', 'change']
|
}, )
|
// 所有不是的走
|
} else {
|
dynamicRules[item.id].push({
|
required: true,
|
message: '请输入' + item.lable,
|
trigger: ['blur', 'change']
|
});
|
}
|
});
|
return dynamicRules;
|
},
|
},
|
methods: {
|
// 登录跳转
|
Login() {
|
// 将数据修改成一个对象返回出去
|
const result = this.formData.formData.reduce((obj, item) => {
|
obj[item.name] = item.val
|
return obj
|
}, {})
|
this.$emit('Login', result)
|
},
|
// 忘记密码
|
forgetPass() {
|
|
},
|
// 快速注册
|
quickRegister() {
|
|
},
|
handleInputChange(event, index) {
|
this.dataIndex = index
|
},
|
handleBlur(index) {
|
// this.InputElem(index)
|
},
|
InputElem(index) {
|
// 找到输入框元素
|
var inputElement = document.querySelectorAll('.aaa input')[index];
|
|
if (inputElement.value.trim() === '') {
|
// 如果值为空，将边框颜色设为黑色
|
inputElement.style.borderColor = 'red';
|
setTimeout(() => {
|
this.$nextTick(() => {
|
inputElement.parentNode.nextElementSibling.style.display = "block"
|
})
|
}, 0)
|
} else {
|
// 如果有值，保持原本的样式（这里可以根据需求设置其他样式）
|
inputElement.style.borderColor = '#2d476a';
|
setTimeout(() => {
|
this.$nextTick(() => {
|
inputElement.parentNode.nextElementSibling.style.display = "none"
|
})
|
}, 0)
|
}
|
// 监听输入框的 blur 事件
|
inputElement.addEventListener('blur', function() {
|
// 描述问题
|
// var inputerror = document.querySelectorAll('.ssss .el-form-item__error')[index];
|
|
// // 可以根据需要继续添加其他需要重置的样式
|
if (inputElement.value.trim() === '') {
|
// 如果值为空，将边框颜色设为黑色
|
inputElement.style.borderColor = 'red';
|
// inputerror.style.display = 'block';
|
setTimeout(() => {
|
inputElement.parentNode.nextElementSibling.style.display = "block"
|
}, 0)
|
} else {
|
// 如果有值，保持原本的样式（这里可以根据需求设置其他样式）
|
inputElement.style.borderColor = '#2d476a';
|
setTimeout(() => {
|
inputElement.parentNode.nextElementSibling.style.display = "none"
|
}, 0)
|
}
|
});
|
// 监听输入框的 focus 事件
|
inputElement.addEventListener('focus', function() {
|
inputElement.style.borderColor = '#2d476a';
|
});
|
|
}
|
|
},
|
data() {
|
|
return {
|
dataIndex: null,
|
internalData: this.formData,
|
formValueData: {}
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
* {
|
box-sizing: border-box;
|
}
|
|
.btn>>>.el-form-item__content {
|
margin-left: 0 !important;
|
}
|
|
::v-deep .el-input__inner {
|
border: none;
|
border-bottom: 1px solid #2d476a;
|
border-radius: 0;
|
}
|
|
::v-deep .el-form-item__error {
|
/* display: none; */
|
}
|
|
::v-deep .input.invalid:focus {
|
border-color: #2d476a !important;
|
}
|
|
::v-deep .el-input__inner:invalid {
|
border-color: #2d476a !important;
|
}
|
|
::v-deep .el-form-item__label {
|
padding: 0;
|
}
|
|
::v-deep .el-form-item__label {
|
color: #2d476a;
|
}
|
|
::v-deep .el-form-item {
|
margin-bottom: 32rpx;
|
}
|
</style>
|
