<template>
|
<view class="container flex flex-center" style="align-items: flex-start;">
|
<view class="repository relative" style="margin-top: 38rpx;">
|
<view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;">
|
<view class="r-top flex flex-center" style="width: 100%;justify-content: space-around;">
|
<view class="" style="width: 5%;"></view>
|
<view class="" ref="Rtop">
|
<!-- <uni-icons type="heart-filled" size="26" style="margin-right: 18rpx;"></uni-icons> -->
|
<text class="login"></text>
|
<text
|
style="font-size: 72rpx;font-weight: normal;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
|
</view>
|
<view class="flex" >
|
<view v-if="!loginTrue" v-for="item in 3" :key="item" :class="'s'+item" class="ss1" style="margin: 0 10rpx;">
|
</view>
|
</view>
|
</view>
|
<view v-if="!loginTrue" class="rbottom " :style="{width:Rtop1+'px'}">
|
<uni-easyinput class="search1 uni-mt-12" suffixIcon="search" v-model="value" placeholder="按照姓名搜索"
|
@iconClick="iconClick"></uni-easyinput>
|
</view>
|
</view>
|
<view class="Bbottom relative">
|
<!-- 选项卡 -->
|
<ul v-if="!loginTrue" class="secretary flex relative">
|
<li v-for="(item,index) in listData" :key="item">
|
<span class="font-family"
|
style="font-weight: 700;color: #2C2C2C; width: 36px;display: inline-block; font-size: 45rpx;overflow: hidden;height: 80%;line-height: 1.5;">{{item.name}}</span>
|
<view class="flex flex-content"
|
style="width: 80rpx;height: 80rpx;border-radius: 50%;background-color: #244A7B;">
|
<image style="width: 40%;height: 20%;" src="@/static/image/eResize.png" mode=""></image>
|
</view>
|
</li>
|
</ul>
|
<!-- 注册用户 v-if="isRegister"-->
|
<el-card v-if="isRegister" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;" >
|
<view class="" style="display: flex; justify-content: space-between;">
|
<h2 style="color: #244a7b;padding-bottom: 20rpx;">用户注册</h2>
|
<view class="" @click="isRegister= !isRegister,isLogin=!isLogin" style="cursor: pointer;font-size: 20rpx;color: #244a7b;">
|
已有账号？返回登录
|
</view>
|
</view>
|
<el-form :hide-required-asterisk="true" ref="formLogin" label-position="left" :rules="rules"
|
label-width="80px" :model="registerData">
|
<el-form-item label="登录账号" prop="loginID">
|
<el-input v-model="registerData.loginID"></el-input>
|
</el-form-item>
|
<el-form-item label="登录密码" prop="pass">
|
<el-input type="password" v-model="registerData.pass"></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="checkPass">
|
<el-input type="password" v-model="registerData.checkPass"></el-input>
|
</el-form-item>
|
<el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
|
<el-input v-model="registerData.cellphoneORmailbox"></el-input>
|
</el-form-item>
|
<el-form-item label="验证码" prop="verifyCode">
|
<el-input v-model="registerData.verifyCode"></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="Login1('formLogin')">登录</el-button>
|
</el-form-item>
|
<view class=""
|
style="font-size: 17rpx;color: #9E9E9E;text-align: center;line-height: 1;margin-bottom: 20rpx;">
|
用户注册即代表同意《服务条款》和《用户隐私保护和个人信息条款》</view>
|
</el-form>
|
</el-card>
|
<!-- 用户登录 v-if="isLogin"-->
|
<el-card v-if="isLogin" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
|
<view class="" style="display: flex; justify-content: space-between;">
|
<h2 style="color: #244a7b;padding-bottom: 20rpx;">用户登录</h2>
|
<view class=""> </view>
|
</view>
|
<el-form :hide-required-asterisk="true" ref="formLogin1" label-position="top" label-width="80px" :rules="rules1"
|
:model="loginData">
|
<el-form-item label="登录账号" prop="loginID">
|
<el-input v-model="loginData.loginID"></el-input>
|
</el-form-item>
|
<el-form-item label="登录密码" prop="pass">
|
<el-input v-model="loginData.pass"></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('formLogin1')">登录</el-button>
|
</el-form-item>
|
<view class="" style="display: flex;font-size: 20rpx;">
|
<view class="" style="display: inline-block;cursor: pointer;" @click="forgetPass">忘记密码
|
</view>
|
<view class="" style="display: inline-block;margin: 0 20rpx;"> | </view>
|
<view class="" style="display: inline-block;cursor: pointer;" @click="quickRegister">快速注册
|
</view>
|
</view>
|
</el-form>
|
</el-card>
|
<!-- 重置密码 -->
|
<el-card v-if="isResetPass" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
|
<view class="" style="display: flex; justify-content: space-between;">
|
<h2 style="color: #244a7b;padding-bottom: 20rpx;">重置密码 </h2>
|
<view class=""> </view>
|
</view>
|
<el-form :hide-required-asterisk="true" ref="formLogin2" label-position="left" label-width="80px" :rules="rules"
|
:model="resetDataPass">
|
<el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
|
<el-input v-model="resetDataPass.cellphoneORmailbox"></el-input>
|
</el-form-item>
|
<el-form-item label="验证码" prop="verifyCode">
|
<el-input v-model="resetDataPass.verifyCode"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="pass">
|
<el-input v-model="resetDataPass.newPass"></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="checkPass">
|
<el-input v-model="resetDataPass.checkPass"></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="Login2('formLogin2')">确定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
<!-- 修改密码 -->
|
<!-- <el-card style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
|
<view class="" style="display: flex; justify-content: space-between;">
|
<h2 style="color: #244a7b;padding-bottom: 20rpx;">修改密码 </h2>
|
<view class="" > </view>
|
</view>
|
<el-form :hide-required-asterisk="true" ref="formLogin" label-position="left" label-width="80px" :rules="rules" :model="amendDataPass">
|
<el-form-item label="登录账号" prop="loginID">
|
<el-input v-model="amendDataPass.loginID"></el-input>
|
</el-form-item>
|
<el-form-item label="原密码" prop="pass">
|
<el-input v-model="amendDataPass.originalPass"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="pass">
|
<el-input v-model="amendDataPass.newPass"></el-input>
|
</el-form-item>
|
<el-form-item label="确认新密码" prop="checkPass">
|
<el-input v-model="amendDataPass.checkPass"></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('formLogin')">确定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card> -->
|
</view>
|
</view>
|
<view class="hua"></view>
|
<!-- 底部人物背景图左侧 -->
|
<view class="fff"></view>
|
<!-- 底部花的背景图右侧 -->
|
<view class="rrr"></view>
|
<view class="BottomColumn flex flex-center">
|
<view class="Bbar flex">
|
<img style="display: block;margin-right: 20rpx;" src="@/static/image/logo.png" alt="" srcset="" />
|
<view class="font-family">
|
<view class="">
|
92017中国中医科学院中医药信息研究所版权所有京ICP备业方安大业方业方
|
</view>
|
<view class="">地址:北京市东城区东直门内南小街16号邮编:100700
|
电话:8610-64089611Email:tcmbase@126.com</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
nextTick
|
} from "vue";
|
export default {
|
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 {
|
// 用户注册
|
isRegister: false,
|
// 用户登录
|
isLogin: true,
|
// 修改密码
|
isAmendPass: false,
|
// 重置密码
|
isResetPass: false,
|
// 注册用户账号的校验
|
rules: {
|
loginID: [{
|
required: true,
|
message: '请输入登录账号',
|
trigger: 'blur'
|
}],
|
pass: [{
|
required: true,
|
message: '请输入密码',
|
trigger: 'blur'
|
},
|
{
|
min: 6,
|
max: 12,
|
message: '密码长度在 6 到 12 个字符',
|
trigger: 'blur'
|
},
|
{
|
validator: validatePass,
|
trigger: 'blur'
|
}
|
],
|
checkPass: [{
|
validator: validatePass2,
|
trigger: 'blur'
|
}],
|
cellphoneORmailbox: [{
|
required: true,
|
message: '请输入邮箱地址',
|
trigger: 'blur'
|
},
|
{
|
type: 'email',
|
message: '请输入正确的邮箱地址',
|
trigger: ['blur', 'change']
|
}
|
],
|
verifyCode: [{
|
required: true,
|
message: '请输入验证码',
|
trigger: 'blur'
|
},
|
{
|
validator: (rule, value, callback) => this.validateVerificationCode(rule, value, callback),
|
trigger: 'blur'
|
}
|
]
|
},
|
rules1: {
|
loginID: [{
|
required: true,
|
message: '请输入登录账号',
|
trigger: 'blur'
|
}],
|
pass: [{
|
required: true,
|
message: '请输入密码',
|
trigger: 'blur'
|
},
|
{
|
min: 6,
|
max: 12,
|
message: '密码长度在 6 到 12 个字符',
|
trigger: 'blur'
|
}
|
],
|
},
|
|
// 登录注册框
|
loginTrue: true,
|
Rtop1: 0,
|
value: 'sdfdsf',
|
// 注册用户对应的数据
|
registerData: {
|
loginID: '',
|
pass: '',
|
checkPass: '',
|
cellphoneORmailbox: '',
|
verifyCode: ''
|
},
|
// 登录用户账号
|
loginData: {
|
// 账号
|
loginID: '',
|
pass: ''
|
},
|
// 重置密码
|
resetDataPass: {
|
cellphoneORmailbox: '',
|
verifyCode: "",
|
newPass: "",
|
checkPass: ""
|
},
|
// 修改密码
|
amendDataPass: {
|
loginID: '',
|
originalPass: "",
|
newPass: "",
|
checkPass: ""
|
},
|
// 书籍数据
|
listData: [{
|
name: '历代医家传记库',
|
id: 1,
|
}, {
|
name: '世医医家库',
|
id: 2,
|
}, {
|
name: '医学学术流派',
|
id: 3,
|
}, {
|
name: '中国地域医谱',
|
id: 4,
|
}, {
|
name: '中国医事制度',
|
id: 5,
|
},
|
|
]
|
}
|
},
|
onLoad() {
|
uni.getSystemInfo({
|
success: function(info) {
|
// console.log('屏幕的宽度：' + info.windowWidth);
|
// console.log('屏幕的高度：' + info.windowHeight);
|
}
|
});
|
},
|
mounted() {
|
this.getElementWidth();
|
},
|
methods: {
|
// 忘记密码
|
forgetPass() {
|
this.isLogin = !this.isLogin
|
this.isResetPass = !this.isResetPass
|
console.log('忘记密码');
|
},
|
// 快速注册
|
quickRegister() {
|
this.isLogin = !this.isLogin
|
this.isRegister = !this.isRegister
|
console.log('快速注册');
|
},
|
// 验证码校验
|
validateVerificationCode(rule, value, callback) {
|
if (value !== '123456') {
|
callback(new Error('验证码错误'));
|
} else {
|
callback();
|
}
|
},
|
getElementWidth() {
|
|
this.$nextTick(() => {
|
var width = this.$refs.Rtop.$el.clientWidth;
|
this.Rtop1 = width + 50;
|
console.log('Element width:', width);
|
})
|
},
|
// 用户登录
|
Login(formName) {
|
console.log('用户登录的登录按钮');
|
this.isLogin=!this.isLogin
|
this.loginTrue=!this.loginTrue
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert('submit!成功');
|
} else {
|
console.log('error submit!!失败');
|
return false;
|
}
|
});
|
},
|
// 用户注册
|
Login1(formName) {
|
console.log('用户注册的登录按钮');
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert('submit!成功');
|
} else {
|
console.log('error submit!!失败');
|
return false;
|
}
|
});
|
},
|
// 忘记密码
|
Login2(formName) {
|
console.log('忘记密码的登录按钮');
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert('submit!成功');
|
} else {
|
console.log('error submit!!失败');
|
return false;
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.btn>>>.el-form-item__content {
|
margin-left: 0 !important;
|
}
|
|
::v-deep .el-form-item__label {
|
color: #244a7b;
|
}
|
|
::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;
|
}
|
|
.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;
|
|
.Ttop {
|
/* width: 500rpx; */
|
margin: -100px 0 40px 0;
|
}
|
|
.r-top {
|
font-size: 40rpx !important;
|
margin: 10rpx 0;
|
}
|
}
|
|
}
|
|
.login {
|
width: 102rpx;
|
height: 102rpx;
|
display: inline-block;
|
vertical-align: middle;
|
margin-right: 20rpx;
|
background: url(@/static/image/logo.png) no-repeat 0 0;
|
background-size: 100% 100%;
|
}
|
|
.rrr {
|
position: absolute;
|
right: 180rpx;
|
bottom: 120.5rpx;
|
width: 255rpx;
|
height: 350.5rpx;
|
opacity: 1;
|
background: url(@/static/image/bg4.png);
|
background-size: 100% 100%;
|
}
|
|
.hua {
|
width: 95%;
|
height: 60%;
|
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: 400rpx;
|
height: 600rpx;
|
position: fixed;
|
bottom: 130rpx;
|
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;
|
}
|
}
|
|
.BottomColumn {
|
position: fixed;
|
left: 0px;
|
bottom: 0px;
|
padding: 20rpx 0;
|
width: 100%;
|
background-color: #e6eff8;
|
font-size: 10px;
|
color: #000;
|
|
.Bbar {
|
img {
|
width: 60rpx;
|
height: 60rpx;
|
border-radius: 50%;
|
}
|
}
|
}
|
|
.Bbottom {
|
display: flex;
|
justify-content: center;
|
|
}
|
</style>
|
