<template>
|
<view class="container flex flex-center" style="align-items: flex-start">
|
<view class="repository relative">
|
<view
|
class="Ttop flex flex-center flex-wrap"
|
style="flex-direction: column"
|
>
|
<view></view>
|
<view ref="Rtop">
|
<text class="login"></text>
|
<text
|
style="
|
font-size: 0.36rem;
|
letter-spacing: 4rpx;
|
vertical-align: middle;
|
font-family: cursive;
|
font-weight: bold;
|
"
|
>中国医学人物知识库</text
|
>
|
</view>
|
<view></view>
|
</view>
|
<!-- 注册用户 v-if="isRegister"-->
|
<el-card>
|
<view
|
class="LoginTop"
|
style="
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 0.47rem;
|
align-items: center;
|
"
|
>
|
<!-- <view style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> -->
|
<view class="LoginBg"></view>
|
<view
|
@click="BacktoLogin"
|
style="
|
cursor: pointer;
|
font-size: 0.14rem;
|
color: #244a7b;
|
font-weight: normal;
|
"
|
>
|
已有账号？返回登录
|
</view>
|
</view>
|
<el-form
|
:hide-required-asterisk="true"
|
ref="formLogin"
|
label-position="right"
|
:rules="rules"
|
:model="registerData"
|
>
|
<el-form-item label="登录账号" prop="loginID">
|
<el-input
|
v-model="registerData.loginID"
|
placeholder="由字母或数字组合3-15个字符组成"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="登录密码" prop="pass">
|
<el-input
|
type="password"
|
v-model="registerData.pass"
|
placeholder="字母、数字或特殊符号组成(6-10)个字符"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="checkPass">
|
<el-input
|
type="password"
|
v-model="registerData.checkPass"
|
placeholder="必须与密码一致"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="手机号/邮箱" prop="cellphoneORmailbox">
|
<el-input
|
v-model="registerData.cellphoneORmailbox"
|
placeholder="请填写手机号/邮箱"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="验证码" prop="verifyCode">
|
<view class="verifyCode relative">
|
<el-input
|
v-model="registerData.verifyCode"
|
placeholder="请输入验证码"
|
></el-input>
|
<view
|
@click="verifyCodeClick"
|
class="yzm"
|
style="
|
position: absolute;
|
right: 0%;
|
top: 0%;
|
color: #244a7b;
|
font-size: 0.14rem;
|
font-weight: 500;
|
"
|
>
|
{{
|
countdown > 0 ? `${countdown}秒后重新获取` : "获取验证码"
|
}}</view
|
>
|
</view>
|
</el-form-item>
|
<el-form-item class="btn" style="margin-bottom: 0.09rem">
|
<el-button
|
class="font-family"
|
style="
|
margin-top: 0.22rem;
|
font-weight: 900;
|
font-size: 0.3rem;
|
width: 100%;
|
background-color: #244a7b;
|
color: #fff;
|
padding: 0.16rem;
|
"
|
size="medium"
|
@click="Login('formLogin')"
|
>注册</el-button
|
>
|
</el-form-item>
|
<view
|
class="asdf"
|
style="
|
font-size: 0.12rem;
|
color: #9e9e9e;
|
font-weight: 500;
|
text-align: center;
|
line-height: normal;
|
margin-bottom: 0.19rem;
|
"
|
>
|
<el-checkbox v-model="checked" style="margin-right: 0.06rem;"></el-checkbox>
|
用户注册即代表同意
|
<span
|
class="cursor"
|
style="color: #244a7b"
|
@click="termOfServiceClick(1)"
|
>《服务条款》</span
|
>
|
和<span
|
class="cursor"
|
style="color: #244a7b"
|
@click="termOfServiceClick(2)"
|
>《用户隐私保护和个人信息条款》</span
|
>
|
</view>
|
</el-form>
|
</el-card>
|
</view>
|
<view class="hua"></view>
|
<!-- 底部人物背景图左侧 -->
|
<view class="fff"></view>
|
<!-- 底部花的背景图右侧 -->
|
<view class="rrr"></view>
|
<Footer1 />
|
</view>
|
</template>
|
|
<script>
|
import { getaddLogin, getverifyCode } from "@/api/index.js";
|
import { encryptAES } from "@/utils/Crypto.js";
|
import { nextTick } from "vue";
|
import Footer1 from "@/components/footer/footer.vue";
|
export default {
|
components: {
|
Footer1
|
},
|
data() {
|
// 密码
|
var validatePass = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请输入密码"));
|
} else {
|
if (this.registerData.checkPass !== "") {
|
this.$nextTick(() => {
|
this.$refs.formLogin.validateField("checkPass");
|
});
|
}
|
callback();
|
}
|
};
|
// 确认密码
|
var validatePass2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value !== this.registerData.pass) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
//验证码倒计时
|
countdown: 0,
|
// 用户注册
|
isRegister: false,
|
// 用户登录
|
isLogin: true,
|
// 修改密码
|
isAmendPass: false,
|
// 重置密码
|
isResetPass: false,
|
// 注册用户账号的校验
|
rules: {
|
loginID: [
|
{
|
required: true,
|
message: "请输入登录账号",
|
trigger: "blur"
|
},
|
{
|
pattern: /^[a-zA-Z0-9]{3,15}$/,
|
message: "请输入3-15个字符的字母或数字",
|
trigger: "blur"
|
} // 自定义校验规则，使用正则表达式
|
],
|
pass: [
|
{
|
required: true,
|
message: "请输入密码",
|
trigger: "blur"
|
},
|
{
|
min: 6,
|
max: 10,
|
message: "密码长度在 6 到 12 个字符",
|
trigger: "blur"
|
},
|
{
|
validator: validatePass,
|
trigger: "blur"
|
}
|
],
|
checkPass: [
|
{
|
validator: validatePass2,
|
trigger: "blur"
|
}
|
],
|
cellphoneORmailbox: [
|
{
|
required: true,
|
message: "请输入手机号/邮箱",
|
trigger: "blur"
|
},
|
{
|
validator: this.validateContact,
|
trigger: "blur"
|
}
|
],
|
verifyCode: [
|
{
|
required: true,
|
message: "请输入验证码",
|
trigger: "blur"
|
}
|
]
|
},
|
// 登录注册框
|
loginTrue: true,
|
Rtop1: 0,
|
value: "sdfdsf",
|
// 注册用户对应的数据
|
registerData: {
|
loginID: "",
|
pass: "",
|
checkPass: "",
|
cellphoneORmailbox: null,
|
verifyCode: ""
|
},
|
// 登录用户账号
|
loginData: {
|
// 账号
|
loginID: "",
|
pass: ""
|
},
|
// 重置密码
|
resetDataPass: {
|
cellphoneORmailbox: null,
|
verifyCode: "",
|
newPass: "",
|
checkPass: ""
|
},
|
// 修改密码
|
amendDataPass: {
|
loginID: "",
|
originalPass: "",
|
newPass: "",
|
checkPass: ""
|
},
|
// 书籍数据
|
listData: [
|
{
|
name: "中医人物数据库",
|
id: 1
|
},
|
{
|
name: "世医医家数据库",
|
id: 2
|
},
|
{
|
name: "中医学术流派",
|
id: 3
|
},
|
{
|
name: "中医地域医谱",
|
id: 4
|
},
|
{
|
name: "中医医事制度",
|
id: 5
|
}
|
],
|
checked: false
|
};
|
},
|
onLoad() {
|
uni.getSystemInfo({
|
success: function (info) {
|
// console.log('屏幕的宽度：' + info.windowWidth);
|
// console.log('屏幕的高度：' + info.windowHeight);
|
}
|
});
|
},
|
mounted() {
|
this.getElementWidth();
|
},
|
methods: {
|
// 服务条款
|
termOfServiceClick(number) {
|
if (number == 1) {
|
window.open(`#/pages/userAgreement/userAgreement`);
|
} else if (number == 2) {
|
window.open(`#/pages/userAgreement/userAgreement`);
|
}
|
},
|
// 已有账号？返回登录
|
BacktoLogin() {
|
uni.redirectTo({
|
url: "/pages/Login/Login"
|
});
|
},
|
// 获取验证码
|
async verifyCodeClick() {
|
if (!this.registerData.cellphoneORmailbox) {
|
this.$message({
|
message: "请输入手机！",
|
type: "warning"
|
});
|
|
return false;
|
}
|
if (this.countdown > 0) {
|
return;
|
}
|
let Obj = {
|
communicateParam: this.registerData.cellphoneORmailbox
|
};
|
this.countdown = 60;
|
const intervalId = setInterval(() => {
|
if (this.countdown > 0) {
|
this.countdown -= 1;
|
} else {
|
clearInterval(intervalId);
|
}
|
}, 1000);
|
let code = await getverifyCode(Obj);
|
},
|
// 手机号/或者邮箱
|
validateContact(rule, value, callback) {
|
const regPhone = /^1[0-9]{10}$/;
|
const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
|
if (regPhone.test(value) || regEmail.test(value)) {
|
callback(); // 校验通过
|
} else {
|
callback(new Error("请输入正确的手机号")); // 校验失败
|
}
|
},
|
getElementWidth() {
|
this.$nextTick(() => {
|
var width = this.$refs.Rtop.$el.clientWidth;
|
this.Rtop1 = width + 50;
|
});
|
},
|
// 用户注册
|
async Login(formName) {
|
if(!this.checked) {
|
this.$message({
|
message: '请勾选同意服务条款、用户隐私保护和个人信息条款',
|
type: 'warning'
|
});
|
return false;
|
}
|
let Obj = {
|
username: this.registerData.loginID,
|
password: encryptAES(this.registerData.pass),
|
communicateParam: this.registerData.cellphoneORmailbox,
|
verifyCode: this.registerData.verifyCode
|
};
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
await getaddLogin(Obj).then((res) => {
|
if (res.success == true) {
|
this.$message.success("注册成功");
|
uni.navigateTo({
|
url: "/pages/Login/Login"
|
});
|
} else {
|
this.$message.error(res.errorText);
|
}
|
});
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
@media screen and (max-width: 1366px) {
|
::v-deep .el-card {
|
top: 50% !important;
|
}
|
|
::v-deep .el-input__inner {
|
height: 0.44rem;
|
}
|
|
::v-deep .el-card {
|
padding: 0.2rem 0 !important;
|
}
|
|
.LoginBg {
|
margin: 0 !important;
|
}
|
|
.hua {
|
height: 5rem !important;
|
}
|
}
|
|
@media screen and (min-width: 1366px) and (max-width: 1920px) {
|
/* ::v-deep .el-card__body {
|
padding: 0 .58rem !important;
|
}
|
|
::v-deep .el-card {
|
top: 80% !important;
|
}
|
|
::v-deep .el-input__inner {
|
height: .44rem;
|
}
|
|
::v-deep .el-card {
|
padding: .25rem 0 !important;
|
}
|
|
.LoginBg {
|
margin: 0 !important;
|
}
|
|
.hua {
|
height: 5rem !important;
|
} */
|
.LoginBg {
|
margin: 0 !important;
|
height: 0.3rem !important;
|
}
|
|
::v-deep .el-card {
|
top: 70% !important;
|
padding: 0 !important;
|
}
|
|
::v-deep .el-card__body {
|
padding: 0.25rem 0.5rem !important;
|
}
|
|
::v-deep .el-form {
|
padding-left: 0.1rem !important;
|
}
|
|
::v-deep .el-form-item__error {
|
font-size: 0.13rem !important;
|
}
|
|
::v-deep .el-input__inner {
|
height: 0.35rem !important;
|
}
|
|
.hua {
|
height: 5rem !important;
|
}
|
|
.LoginTop {
|
margin-bottom: 0.25rem !important;
|
}
|
|
.yzm {
|
top: 15% !important;
|
}
|
|
.fff {
|
width: 2.4rem !important;
|
height: 4rem !important;
|
}
|
|
.rrr {
|
width: 2rem !important;
|
height: 2.5rem !important;
|
}
|
|
.btn ::v-deep .el-button {
|
margin-top: 0.2rem !important;
|
/* font-size: 0.2rem !important;
|
width: 100%;
|
padding: 0.12rem !important; */
|
}
|
|
.asdf {
|
margin-bottom: 0.1rem !important;
|
}
|
}
|
|
@media screen and (min-width: 1920px) and (max-width: 2560px) {
|
/* ::v-deep .el-card {
|
top: 80% !important;
|
}
|
|
::v-deep .el-card {
|
padding: .25rem .4rem !important;
|
}
|
|
::v-deep .el-card__body {
|
padding: 0 !important;
|
}
|
|
::v-deep .el-input__inner {
|
height: .44rem;
|
}
|
|
::v-deep .el-form-item__error {
|
font-size: .13rem;
|
}
|
|
.BottomColumn {
|
padding: .10rem 0;
|
}
|
|
|
.btn ::v-deep .el-button {
|
margin-top: 0.3rem !important;
|
width: 100%;
|
padding: 0.12rem !important;
|
}
|
|
.LoginBg {
|
height: .3rem !important;
|
}
|
|
.hua {
|
height: 5rem !important;
|
}
|
|
.fff {
|
height: 3.5rem !important;
|
}
|
|
.rrr {
|
width: 2rem !important;
|
height: 2.5rem !important;
|
}
|
|
|
.LoginBg {
|
margin: 0 !important;
|
height: .3rem !important;
|
}
|
|
::v-deep .el-card {
|
top: 70% !important;
|
padding: 0 !important;
|
}
|
|
::v-deep .el-card__body {
|
padding: .25rem .5rem !important;
|
}
|
|
.LoginTop {
|
margin-bottom: .25rem !important;
|
}
|
::v-deep .el-form {
|
padding-left: .1rem !important;
|
}
|
|
::v-deep .el-form-item__error {
|
font-size: .13rem !important;
|
}
|
|
::v-deep .el-input__inner {
|
height: .35rem !important;
|
} */
|
.LoginBg {
|
margin: 0 !important;
|
height: 0.3rem !important;
|
}
|
|
::v-deep .el-card {
|
top: 70% !important;
|
padding: 0 !important;
|
}
|
|
::v-deep .el-card__body {
|
padding: 0.25rem 0.5rem !important;
|
}
|
|
::v-deep .el-form {
|
padding-left: 0.1rem !important;
|
}
|
|
::v-deep .el-form-item__error {
|
font-size: 0.13rem !important;
|
}
|
|
::v-deep .el-input__inner {
|
height: 0.35rem !important;
|
}
|
|
.hua {
|
height: 5rem !important;
|
}
|
|
.LoginTop {
|
margin-bottom: 0.25rem !important;
|
}
|
|
.yzm {
|
top: 15% !important;
|
}
|
|
.fff {
|
width: 2.4rem !important;
|
height: 4rem !important;
|
}
|
|
.rrr {
|
width: 2rem !important;
|
height: 2.5rem !important;
|
}
|
|
.btn ::v-deep .el-button {
|
margin-top: 0.2rem !important;
|
/* font-size: 0.2rem !important;
|
width: 100%;
|
padding: 0.12rem !important; */
|
}
|
|
.asdf {
|
margin-bottom: 0.1rem !important;
|
}
|
}
|
|
@media screen and (min-width: 2560px) and (max-width: 3840px) {
|
.LoginBg {
|
margin: 0 !important;
|
height: 0.3rem !important;
|
}
|
|
::v-deep .el-card {
|
top: 70% !important;
|
padding: 0 !important;
|
}
|
|
::v-deep .el-card__body {
|
padding: 0.25rem 0.5rem !important;
|
}
|
|
::v-deep .el-form {
|
padding-left: 0.1rem !important;
|
}
|
|
::v-deep .el-form-item__error {
|
font-size: 0.13rem !important;
|
}
|
|
::v-deep .el-input__inner {
|
height: 0.35rem !important;
|
}
|
|
.hua {
|
height: 5rem !important;
|
}
|
|
.LoginTop {
|
margin-bottom: 0.25rem !important;
|
}
|
|
.yzm {
|
top: 15% !important;
|
}
|
|
.fff {
|
width: 2.4rem !important;
|
height: 4rem !important;
|
}
|
|
.rrr {
|
width: 2rem !important;
|
height: 2.5rem !important;
|
}
|
|
.btn ::v-deep .el-button {
|
margin-top: 0.2rem !important;
|
/* font-size: 0.2rem !important;
|
width: 100%;
|
padding: 0.12rem !important; */
|
}
|
|
.asdf {
|
margin-bottom: 0.1rem !important;
|
}
|
}
|
|
/* @media screen and (max-width: 1366px){
|
::v-deep .el-card{
|
top: 60% !important;
|
}
|
.LoginTop{
|
margin-bottom: .2rem !important;
|
}
|
}
|
@media screen and (min-width: 1920px){
|
::v-deep .el-card{
|
top: 80% !important;
|
}
|
|
|
} */
|
/*
|
在屏幕宽度超过 1440px 时的样式设置 */
|
/* @media screen and (min-width: 1441px) {
|
::v-deep .el-card {
|
top: 80% !important;
|
}
|
.BottomColumn{
|
padding: .10rem 0;
|
}
|
.LoginTop{
|
margin-bottom: .17rem !important;
|
}
|
.btn ::v-deep .el-button{
|
margin-top: 0.1rem !important;
|
font-size: 0.3rem !important;
|
width: 100%;
|
padding: 0.12rem !important;
|
}
|
.LoginBg{
|
height: .3rem !important;
|
}
|
.hua{
|
height: 4rem !important;
|
}.fff{
|
height: 3.5rem !important;
|
}.rrr{
|
height: 2.5rem !important;
|
}
|
} */
|
|
.LoginBg {
|
width: 1.2rem;
|
height: 0.37rem;
|
background: url(@/static/image/用户注册.png) no-repeat 0 0;
|
background-size: 100% 100%;
|
/* border: 10px solid red; */
|
}
|
|
::v-deep .el-card {
|
border-radius: 0;
|
width: 5.42rem;
|
/* height: 5.65rem; */
|
position: absolute;
|
top: 80%;
|
}
|
|
::v-deep .el-card__body {
|
padding: 0.175rem 0.58rem;
|
}
|
|
.btn >>> .el-form-item__content {
|
margin-left: 0 !important;
|
}
|
|
::v-deep .el-form-item__content {
|
margin-left: 0 !important;
|
flex: 1;
|
}
|
|
::v-deep .el-input__inner {
|
border: none;
|
border-bottom: 1px solid #2d476a;
|
border-radius: 0;
|
padding: 0;
|
height: 0.4rem;
|
line-height: 0.4rem;
|
font-size: 0.14rem;
|
}
|
|
::v-deep .el-form-item__error {
|
/* display: none; */
|
font-size: 0.12rem;
|
}
|
|
::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 {
|
min-width: 0.8rem;
|
padding: 0;
|
color: #244a7b;
|
font-size: 0.14rem;
|
font-weight: 500;
|
margin-right: 0.1rem;
|
display: flex;
|
align-items: center;
|
text-align: right;
|
}
|
|
::v-deep .el-form-item {
|
margin-bottom: 0.22rem;
|
display: flex;
|
}
|
|
.ss1 {
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
width: 40rpx;
|
height: 40rpx;
|
background-size: 100% 100%;
|
}
|
|
.s1 {
|
background-image: url(@/static/image/search.png);
|
}
|
|
.s2 {
|
background-image: url(@/static/image/question.png);
|
}
|
|
.s3 {
|
background-image: url(@/static/image/question.png);
|
}
|
|
.container {
|
background: url(@/static/image/bg1.png);
|
width: 100vw;
|
height: 100vh;
|
|
color: #fff;
|
|
.repository {
|
width: 100% !important;
|
/* margin-top: 19px; */
|
/* height: 68%; */
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: center;
|
|
.Ttop {
|
margin-top: 0.38rem;
|
margin-bottom: 1.22rem;
|
}
|
|
.r-top {
|
font-size: 40rpx !important;
|
margin: 10rpx 0;
|
}
|
}
|
}
|
|
.login {
|
width: 0.52rem;
|
height: 0.52rem;
|
display: inline-block;
|
vertical-align: middle;
|
margin-right: 0.19rem;
|
background: url(@/static/image/logo.png) no-repeat 0 0;
|
background-size: 100% 100%;
|
}
|
|
.rrr {
|
position: absolute;
|
right: 0.53rem;
|
bottom: 0.36rem;
|
width: 2.5rem;
|
height: 3.07rem;
|
opacity: 1;
|
background: url(@/static/image/bg4.png);
|
background-size: 100% 100%;
|
}
|
|
.hua {
|
width: 13.81rem;
|
height: 5.965rem;
|
position: absolute;
|
background: url(@/static/image/bg3.png) no-repeat 0 0;
|
background-size: 100% 100%;
|
}
|
|
/* 底部人物背景图 */
|
.fff {
|
background: url(@/static/image/bg2.png) no-repeat 0 0;
|
background-size: 100% 100%;
|
width: 2.74rem;
|
height: 4.52rem;
|
position: fixed;
|
bottom: 0;
|
z-index: 9999999999999;
|
left: 0;
|
}
|
|
::v-deep .uni-easyinput__content {
|
border-radius: 30rpx !important;
|
/* height: 52rpx; */
|
}
|
|
.secretary {
|
width: 1300rpx !important;
|
height: 50rpx;
|
/* height: 80%; */
|
/* flex-wrap: wrap; */
|
padding: 0 20px;
|
text-align: center;
|
|
li {
|
background-color: #fff;
|
color: black;
|
height: 600rpx;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
align-items: center;
|
border: 1rpx solid #fff;
|
padding: 50rpx 65rpx;
|
/* padding: 58rpx 128rpx 88rpx; */
|
text-align: center;
|
background: #ebf4ff;
|
}
|
}
|
|
.Bbottom {
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
