<template>
<div>
<div class="register
-container">
<div class="register
-swiper3">
<div class="swiper
-container mySwiper3">
<div class="swiper
-wrapper">
<div
class="swiper
-slide"
v
-for="(item, index) in swiperList"
:key="item.id"
>
<div>
<el
-image
:src="item.url" fit="cover"></el
-image>
</div>
</div>
</div>
<!
-- Add Pagination
-->
<div class="swiper
-pagination"></div>
<!
-- Add Arrows
-->
<div class="swiper
-button
-next">
<span class="icon iconfont icon
-jiantou18"></span>
</div>
<div class="swiper
-button
-prev">
<span class="icon iconfont icon
-jiantou39"></span>
</div>
</div>
</div>
<el
-form
v
-if="pageFlag == 'register'"
ref="ruleForm"
class="rgs
-form animate__animated animate__fadeIn"
:model="ruleForm"
:rules="rules"
>
<div class="rgs
-form2">
<div class="title">陶瓷爱好者交流平台</div>
<el
-form
-item class="list
-item" v
-if="tableName == 'yonghu'">
<div
class="lable"
:class="changeRules('yonghuming') ? 'required'
: ''"
>
用户名：
</div>
<el
-input
v
-model="ruleForm.yonghuming"
autocomplete="off"
placeholder="用户名"
type="text"
/>
</el
-form
-item>
<el
-form
-item class="list
-item" v
-if="tableName == 'yonghu'">
<div class="lable"
:class="changeRules('mima') ? 'required'
: ''">
密码：
</div>
<el
-input
v
-model="ruleForm.mima"
autocomplete="off"
placeholder="密码"
type="password"
/>
</el
-form
-item>
<el
-form
-item class="list
-item" v
-if="tableName == 'yonghu'">
<div class="lable"
:class="changeRules('mima') ? 'required'
: ''">
确认密码：
</div>
<el
-input
v
-model="ruleForm.mima2"
autocomplete="off"
placeholder="确认密码"
type="password"
/>
</el
-form
-item>
<el
-form
-item class="list
-item" v
-if="tableName == 'yonghu'">
<div
class="lable"
:class="changeRules('nicheng') ? 'required'
: ''"
>
昵称：
</div>
<el
-input
v
-model="ruleForm.nicheng"
autocomplete="off"
placeholder="昵称"
type="text"
/>
</el
-form
-item>
<el
-form
-item class="list
-item" v
-if="tableName == 'yonghu'">
<div
class="lable"
:class="changeRules('xingbie') ? 'required'
: ''"
>
性别：
</div>
<el
-select v
-model="ruleForm.xingbie" placeholder="请选择性别">
<el
-option
v
-for="(item, index) in yonghuxingbieOptions"
v
-bind
:key="index"
:label="item"
:value="item"
>
</el
-option>
</el
-select>
</el
-form
-item>
<el
-form
-item class="list
-item" v
-if="tableName == 'yonghu'">
<div
class="lable"
:class="changeRules('nianling') ? 'required'
: ''"
>
年龄：
</div>
<el
-input
v
-model.number="ruleForm.nianling"
autocomplete="off"
placeholder="年龄"
type="text"
/>
</el
-form
-item>
<el
-form
-item class="list
-item" v
-if="tableName == 'yonghu'">
<div class="lable"
:class="changeRules('shouji') ? 'required'
: ''">
手机：
</div>
<el
-input
v
-model="ruleForm.shouji"
autocomplete="off"
placeholder="手机"
type="text"
/>
</el
-form
-item>
<el
-form
-item class="list
-item" v
-if="tableName == 'yonghu'">
<div
class="lable"
:class="changeRules('touxiang') ? 'required'
: ''"
>
头像：
</div>
<file
-upload
tip="点击上传头像"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.touxiang ? ruleForm.touxiang
: ''"
@change="yonghutouxiangUploadChange"
></file
-upload>
</el
-form
-item>
<div class="register
-btn">
<div class="register
-btn1">
<button type="button" class="r
-btn" @click="login()">注册</button>
</div>
<div class="register
-btn2">
<div class="r
-login" @click="close()">已有账号，直接登录</div>
</div>
</div>
</div>
</el
-form>
</div>
</div>
</template>
<script>
import "animate.
css";
import Swiper from "swiper";
export default {
data() {
return {
ruleForm
: {},
forgetForm
: {},
pageFlag
: "",
tableName
: "",
rules
: {},
yonghuxingbieOptions
: [],
swiperList
: [
{
name
: "003.jpg",
uid
: 1728616881522,
url
: "http
://codegen.caihongy.cn/20241011/f26bb7ee188744ec8dccf4684bd7d560.jpg",
status
: "success",
},
{
name
: "001.jpg",
uid
: 1728616885258,
url
: "http
://codegen.caihongy.cn/20241011/909e2931cae842f0b1bfc33ea25ad3c4.jpg",
status
: "success",
},
{
name
: "002.jpg",
uid
: 1728616888937,
url
: "http
://codegen.caihongy.cn/20241011/3bddfac695c84447af0a76774373690b.jpg",
status
: "success",
},
],
};
},
mounted() {
setTimeout(() => {
new Swiper(".mySwiper3", {
navigation
: {
nextEl
: ".swiper
-button
-next",
prevEl
: ".swiper
-button
-prev",
},
pagination
: { el
: ".swiper
-pagination", clickable
: true },
autoplay
: { delay
: 3000, disableOnInteraction
: false },
effect
: "fade",
});
},
500);
this.pageFlag = this.$route.query.pageFlag;
if (this.$route.query.pageFlag == "register") {
let table = this.$storage.get("loginTable");
this.tableName = table;
if (this.tableName == "yonghu") {
this.ruleForm = {
yonghuming
: "",
mima
: "",
nicheng
: "",
xingbie
: "",
nianling
: "",
shouji
: "",
gerenjianjie
: "",
touxiang
: "",
};
}
if ("yonghu" == this.tableName) {
this.rules.yonghuming = [
{ required
: true, message
: "请输入用户名", trigger
: "blur" },
];
}
if ("yonghu" == this.tableName) {
this.rules.mima = [
{ required
: true, message
: "请输入密码", trigger
: "blur" },
];
}
if ("yonghu" == this.tableName) {
this.rules.nicheng = [
{ required
: true, message
: "请输入昵称", trigger
: "blur" },
];
}
if ("yonghu" == this.tableName) {
this.rules.xingbie = [
{ required
: true, message
: "请输入性别", trigger
: "blur" },
];
}
if ("yonghu" == this.tableName) {
this.rules.nianling = [
{ required
: true, message
: "请输入年龄", trigger
: "blur" },
];
}
if ("yonghu" == this.tableName) {
this.rules.shouji = [
{ required
: true, message
: "请输入手机", trigger
: "blur" },
];
}
this.yonghuxingbieOptions = "男,女".split(",");
}
},
created() {},
destroyed() {},
methods
: {
changeRules(name) {
if (this.rules[name]) {
return true;
}
return false;
},
// 获取uuid
getUUID() {
return new Date().getTime();
},
close() {
this.$router.push({ path
: "/login" });
},
yonghutouxiangUploadChange(fileUrls) {
this.ruleForm.touxiang = fileUrls;
},
// 多级联动参数
// 注册
login() {
var url = this.tableName + "/register";
if (!this.ruleForm.yonghuming && `yonghu` == this.tableName) {
this.$message.error(`用户名不能为空`);
return;
}
if (!this.ruleForm.mima && `yonghu` == this.tableName) {
this.$message.error(`密码不能为空`);
return;
}
if (
this.ruleForm.mima != this.ruleForm.mima2 &&
`yonghu` == this.tableName
) {
this.$message.error(`两次密码输入不一致`);
return;
}
if (!this.ruleForm.nicheng && `yonghu` == this.tableName) {
this.$message.error(`昵称不能为空`);
return;
}
if (!this.ruleForm.xingbie && `yonghu` == this.tableName) {
this.$message.error(`性别不能为空`);
return;
}
if (!this.ruleForm.nianling && `yonghu` == this.tableName) {
this.$message.error(`年龄不能为空`);
return;
}
if (
`yonghu` == this.tableName &&
this.ruleForm.nianling &&
!this.$validate.isIntNumer(this.ruleForm.nianling)
) {
this.$message.error(`年龄应输入整数`);
return;
}
if (!this.ruleForm.shouji && `yonghu` == this.tableName) {
this.$message.error(`手机不能为空`);
return;
}
if (
`yonghu` == this.tableName &&
this.ruleForm.shouji &&
!this.$validate.isMobile(this.ruleForm.shouji)
) {
this.$message.error(`手机应输入手机格式`);
return;
}
if (this.ruleForm.touxiang != null) {
this.ruleForm.touxiang = this.ruleForm.touxiang.replace(
new RegExp(this.$base.url, "g"),
""
);
}
this.$http({
url
: url,
method
: "post",
data
: this.ruleForm,
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message
: "注册成功",
type
: "success",
duration
: 1
500,
onClose
: () => {
this.$router.replace({ path
: "/login" });
},
});
} else {
this.$message.error(data.msg);
}
});
},
},
};
</script>
<style lang="s
css" scoped>
.register
-container {
position
: relative;
background
-repeat
: no
-repeat;
background
-size
: cover;
background
: url(http
://codegen.caihongy.cn/20240929/ec5c51f1ce0845289dd993d890db8d68.png)
right top/
50% 100% no
-repeat;
display
: block;
width
: 100%;
min
-height
: 100vh;
justify
-content
: flex
-start;
align
-items
: center;
background
-position
: center center;
.register
-swiper3 {
margin
: 0 auto;
z
-index
: auto;
top
: 0;
left
: 0;
width
: 100vw;
position
: fixed;
height
: 100vh;
.swiper
-container {
.swiper
-slide {
div {
width
: 100%;
height
: 100vh;
.el
-image {
object
-fit
: cover;
width
: 100%;
height
: 100vh;
}
}
}
.swiper
-pagination {
left
: 0;
bottom
: 10
px;
width
: 100%;
::v
-deep span.swiper
-pagination
-bullet {
border
-radius
: 100%;
margin
: 0 4
px;
background
: #000;
display
: inline
-block;
width
: 8
px;
opacity
: 0.2;
height
: 8
px;
}
::v
-deep span.swiper
-pagination
-bullet
:hover {
background
: #fff;
opacity
: 1;
}
::v
-deep span.swiper
-pagination
-bullet.swiper
-pagination
-bullet
-active {
background
: #fff;
opacity
: 1;
}
}
.swiper
-button
-next {
margin
: -12
px 0 0;
top
: 50%;
width
: 24
px;
height
: 24
px;
.iconfont {
color
: #fff;
width
: 24
px;
font
-size
: 24
px;
height
: 24
px;
}
}
.swiper
-button
-prev {
margin
: -12
px 0 0;
top
: 50%;
width
: 24
px;
height
: 24
px;
.iconfont {
color
: #fff;
width
: 24
px;
font
-size
: 24
px;
height
: 24
px;
}
}
.swiper
-button
-prev
:after {
display
: none;
}
.swiper
-button
-next
:after {
display
: none;
}
}
}
.rgs
-form {
.rgs
-form2 {
width
: 100%;
}
padding
: 40
px 140
px 40
px;
margin
: 0;
z
-index
: 1000;
display
: flex;
min
-height
: 100vh;
border
-radius
: 0;
box
-shadow
: inset 0
px 0
px 0
px 0
px #000;
flex
-direction
: column;
background
: #eff4ff;
width
: 50%;
justify
-content
: center;
align
-items
: center;
position
: relative;
height
: auto;
.title {
padding
: 0 40
px;
margin
: 0 0 60
px 0;
color
: #000;
background
: none;
font
-weight
: 600;
width
: 100%;
font
-size
: 28
px;
line
-height
: 40
px;
text
-align
: center;
}
.list
-item {
padding
: 0 0 0 0
px;
margin
: 0 0 10
px;
width
: 100%;
position
: relative;
height
: auto;
::v
-deep .el
-form
-item__content {
display
: flex;
align
-items
: flex
-start;
}
.lable {
padding
: 0;
color
: #000000;
width
: 120
px;
font
-size
: 16
px;
line
-height
: 34
px;
text
-align
: left;
}
.el
-input {
width
: calc(
100% - 120
px);
}
.el
-input
::v
-deep .el
-input__inner {
border
: 0
px solid #efeff7;
border
-radius
: 0
px;
padding
: 0 10
px;
color
: #666;
width
: 100%;
font
-size
: 14
px;
height
: 44
px;
}
.el
-input
::v
-deep .el
-input__inner
:focus {
border
: 0
px solid #efeff7;
border
-radius
: 0
px;
padding
: 0 10
px;
color
: #000;
width
: 100%;
font
-size
: 14
px;
height
: 44
px;
}
.el
-select {
width
: calc(
100% - 120
px);
}
.el
-select
::v
-deep .el
-input__inner {
border
: 0
px solid #efeff7;
border
-radius
: 0
px;
padding
: 0 10
px;
color
: #666;
width
: 100%;
font
-size
: 14
px;
height
: 44
px;
}
.el
-select
::v
-deep .el
-input__inner
:focus {
border
: 0
px solid #efeff7;
border
-radius
: 0;
padding
: 0 10
px;
color
: #000;
width
: 100%;
font
-size
: 14
px;
height
: 44
px;
}
.el
-date
-editor {
width
: calc(
100% - 120
px);
}
.el
-date
-editor
::v
-deep .el
-input__inner {
border
: 0
px solid #efeff7;
border
-radius
: 0;
padding
: 0 10
px 0 30
px;
color
: #666;
width
: 100%;
font
-size
: 14
px;
height
: 44
px;
}
.el
-date
-editor
::v
-deep .el
-input__inner
:focus {
border
: 0
px solid #efeff7;
border
-radius
: 0;
padding
: 0 10
px 0 30
px;
color
: #000;
width
: 100%;
font
-size
: 14
px;
height
: 44
px;
}
.el
-date
-editor.el
-input {
width
: 100%;
}
::v
-deep .el
-upload
--picture
-card {
background
: transparent;
border
: 0;
border
-radius
: 0;
width
: auto;
height
: auto;
line
-height
: initial;
vertical
-align
: middle;
}
::v
-deep .upload .upload
-img {
border
: 1
px solid #efeff7;
cursor
: pointer;
border
-radius
: 0
px;
color
: #999;
background
: #fff;
width
: 110
px;
font
-size
: 24
px;
line
-height
: 60
px;
text
-align
: center;
height
: 60
px;
}
::v
-deep .el
-upload
-list .el
-upload
-list__item {
border
: 1
px solid #efeff7;
cursor
: pointer;
border
-radius
: 0
px;
color
: #999;
background
: #fff;
width
: 110
px;
font
-size
: 24
px;
line
-height
: 60
px;
text
-align
: center;
height
: 60
px;
}
::v
-deep .el
-upload .el
-icon
-plus {
border
: 1
px solid #efeff7;
cursor
: pointer;
border
-radius
: 0
px;
color
: #999;
background
: #fff;
width
: 110
px;
font
-size
: 24
px;
line
-height
: 60
px;
text
-align
: center;
height
: 60
px;
}
::v
-deep .el
-upload__tip {
margin
: 10
px 0 0;
color
: #999;
font
-size
: 12
px;
line
-height
: 1.5;
}
::v
-deep .el
-input__inner
::placeholder {
color
: #999;
font
-size
: 14
px;
}
.required {
position
: relative;
}
.required
::after {
color
: red;
left
: 0;
position
: inherit;
content
: "*";
order
: -1;
}
.editor {
background
: #fff;
width
: 100%;
height
: auto;
}
.editor > .avatar
-uploader {
line
-height
: 0;
height
: 0;
}
}
.list
-item.email {
input {
border
: 0
px solid #efeff7;
border
-radius
: 0;
padding
: 0 10
px;
margin
: 0;
color
: #666;
background
: #fff;
flex
: 1;
width
: 100%;
font
-size
: 14
px;
height
: 44
px;
}
input
:focus {
border
: 1
px solid #efeff7;
border
-radius
: 4
px 0 0 4
px;
padding
: 0 10
px;
color
: #666;
width
: 100%;
font
-size
: 14
px;
height
: 38
px;
}
input
::placeholder {
color
: #999;
font
-size
: 14
px;
}
button {
border
: 0
px solid #efeff7;
cursor
: pointer;
border
-radius
: 0;
padding
: 0;
margin
: 0;
color
: #fff;
background
: #7ea0f6;
width
: 110
px;
font
-size
: 14
px;
height
: 44
px;
}
button
:hover {
opacity
: 0.8;
}
}
.register
-btn {
width
: 100%;
}
.register
-btn1 {
display
: flex;
width
: 100%;
justify
-content
: center;
}
.register
-btn2 {
width
: 100%;
}
.r
-btn {
border
: 0
px solid rgba(0, 0, 0, 1);
cursor
: pointer;
border
-radius
: 30
px;
padding
: 0 10
px;
margin
: 0 auto
50px;
color
: #fff;
background
: #7ea0f6;
font
-weight
: 600;
width
: 80
%;
font
-size
: 24
px;
min
-width
: 68
px;
height
: 60
px;
}
.r
-btn
:hover {
border
: 0
px solid rgba(0, 0, 0, 1);
opacity
: 0.8;
}
.r
-login {
border
: 0;
cursor
: pointer;
border
-radius
: 0;
padding
: 0;
margin
: 0 10
px 10
px 0;
color
: #
505050;
background
: none;
width
: 100%;
font
-size
: 14
px;
text
-align
: center;
height
: 34
px;
}
.r
-login
:hover {
opacity
: 1;
}
}
}
::-webkit
-scrollbar {
display
: none;
}
</style>
不显示输入框
CSS的calc()函数允许动态计算长度值，如width: calc(100% - 50px)。它支持加减乘除运算，遵循标准数学优先级规则。calc()在布局中尤其有用，能确保表单域适应容器大小，避免挤压并保持适当间距。了解calc()可以帮助优化网页元素的尺寸调整。
扫一扫
5461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
