mirror of
https://gitee.com/JJ_JJ-JJ/tianlang-novel
synced 2026-07-21 10:34:44 +08:00
486 lines
12 KiB
Vue
486 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { Api } from "../../assets/api/api";
|
|
import { useRouter } from "vue-router";
|
|
import { showToast } from "vant";
|
|
|
|
//手机号
|
|
const phoneNum = ref("");
|
|
const phoneNum2 = ref("");
|
|
//密码
|
|
const password = ref("");
|
|
//控制验证码点击时间间隔
|
|
const flag = ref(true);
|
|
const time = ref(60);
|
|
//密码显示隐藏控制
|
|
const changePassword1 = ref("password");
|
|
const flag1 = ref(false);
|
|
//信息验证码
|
|
const verification = ref("");
|
|
|
|
//vue3自带方法
|
|
const router = useRouter();
|
|
|
|
// 登录方式控制
|
|
const lConindex = ref(0);
|
|
//控制密码显示隐藏
|
|
const passwordOneChange = () => {
|
|
if (flag1.value) {
|
|
changePassword1.value = "password";
|
|
flag1.value = false;
|
|
} else {
|
|
changePassword1.value = "text";
|
|
flag1.value = true;
|
|
}
|
|
};
|
|
//短信验证码
|
|
const getCode = async () => {
|
|
let timer: any = null;
|
|
// 手机号检测
|
|
let numGetcode =
|
|
/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
|
|
// 检测手机号码是否填写正确
|
|
if (flag.value) {
|
|
flag.value = false;
|
|
if (numGetcode.test(phoneNum.value)) {
|
|
//检测是否有用户数据
|
|
if (JSON.parse(localStorage.getItem("user_information") as any)) {
|
|
//检测手机号码是否注册过
|
|
for (
|
|
let i = 0;
|
|
i <
|
|
JSON.parse(localStorage.getItem("user_information") as any).length;
|
|
i++
|
|
) {
|
|
if (
|
|
JSON.parse(localStorage.getItem("user_information") as any)[i]
|
|
.account == phoneNum.value
|
|
) {
|
|
timer = setInterval(() => {
|
|
time.value--;
|
|
if (time.value == 0) {
|
|
window.clearInterval(timer);
|
|
timer = null;
|
|
flag.value = true;
|
|
time.value = 60;
|
|
}
|
|
}, 1000);
|
|
await Api.requesRegisterGetCode(phoneNum.value);
|
|
} else {
|
|
showToast("此手机号暂无注册过帐号");
|
|
flag.value = true;
|
|
}
|
|
}
|
|
} else {
|
|
showToast("暂无用户数据，请注册账号");
|
|
flag.value = true;
|
|
}
|
|
} else {
|
|
showToast("请检查手机号码");
|
|
flag.value = true;
|
|
}
|
|
} else {
|
|
showToast("请等候");
|
|
}
|
|
};
|
|
//跳转注册页
|
|
const goRegisterView = () => {
|
|
router.push("/register");
|
|
};
|
|
//设置登录状态
|
|
const SetLoginStatus = () => {
|
|
localStorage.setItem("LoginStatus", "true");
|
|
};
|
|
//手机号登录
|
|
const PhoneNumberLogin = async () => {
|
|
if (JSON.parse(localStorage.getItem("user_information") as any)) {
|
|
for (
|
|
let i = 0;
|
|
i < JSON.parse(localStorage.getItem("user_information") as any).length;
|
|
i++
|
|
) {
|
|
//检测手机号有没有注册
|
|
if (
|
|
JSON.parse(localStorage.getItem("user_information") as any)[i]
|
|
.account == phoneNum.value
|
|
) {
|
|
let { data } = await Api.RegisterVerificationCode(
|
|
phoneNum.value,
|
|
verification.value
|
|
);
|
|
// 检测验证码与图文验证码是否正确
|
|
// 验证码为空
|
|
if (verification.value.trim() == "") {
|
|
showToast("请检查手机号/验证码");
|
|
}
|
|
// 验证码错误
|
|
else if (!data) {
|
|
showToast("验证码错误");
|
|
}
|
|
// 正确，跳转到个人页面
|
|
else if (data) {
|
|
showToast("登录成功");
|
|
SetLoginStatus();
|
|
router.push("/bookshelfv");
|
|
}
|
|
}
|
|
//检测手机号码有没有填写
|
|
else if (phoneNum.value.trim() == "") {
|
|
showToast("请填写手机号码");
|
|
}
|
|
//检测此手机号有没有注册
|
|
else {
|
|
showToast("此手机号暂无注册过帐号");
|
|
}
|
|
}
|
|
} else {
|
|
showToast("暂无用户数据，请注册账号");
|
|
}
|
|
};
|
|
//账号密码登录
|
|
const AccountPasswordLogin = () => {
|
|
// 检测数据
|
|
if (JSON.parse(localStorage.getItem("user_information") as any)) {
|
|
//检测手机号码是否注册过
|
|
for (
|
|
let i = 0;
|
|
i < JSON.parse(localStorage.getItem("user_information") as any).length;
|
|
i++
|
|
) {
|
|
if (
|
|
JSON.parse(localStorage.getItem("user_information") as any)[i]
|
|
.account == phoneNum2.value
|
|
) {
|
|
// 密码为空
|
|
if (password.value.trim() == "") {
|
|
showToast("请填写密码");
|
|
}
|
|
//密码错误
|
|
else if (
|
|
password.value !=
|
|
JSON.parse(localStorage.getItem("user_information") as any)[i]
|
|
.password
|
|
) {
|
|
showToast("密码错误");
|
|
}
|
|
// 正确，跳转到个人页面
|
|
else if (
|
|
password.value ==
|
|
JSON.parse(localStorage.getItem("user_information") as any)[i]
|
|
.password
|
|
) {
|
|
showToast("登录成功");
|
|
SetLoginStatus();
|
|
router.push("/bookshelfv");
|
|
}
|
|
}
|
|
//检测手机号码有没有填写
|
|
else if (phoneNum2.value.trim() == "") {
|
|
showToast("请填写手机号码");
|
|
}
|
|
//检测此手机号有没有注册
|
|
else {
|
|
showToast("此手机号暂无注册过帐号");
|
|
}
|
|
}
|
|
} else {
|
|
showToast("暂无用户数据，请注册账号");
|
|
}
|
|
};
|
|
//登录
|
|
const login = () => {
|
|
if (lConindex.value == 0) {
|
|
PhoneNumberLogin();
|
|
} else {
|
|
AccountPasswordLogin();
|
|
password.value = "";
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login_view">
|
|
<nav>
|
|
<div class="app" @click="router.push('/bookshelfv')"></div>
|
|
<h1>登录</h1>
|
|
<div class="sourch">
|
|
<p @click="goRegisterView">注册</p>
|
|
</div>
|
|
</nav>
|
|
<!-- 登录方式选择 -->
|
|
<ul class="login_mode">
|
|
<li @click="lConindex = 0" :class="{ con: lConindex == 0 }">
|
|
<div class="img" v-if="lConindex == 0">
|
|
<van-image width="13" height="18" src="/img/home/phoneTrue.png" />
|
|
</div>
|
|
<div class="img" v-if="lConindex == 1">
|
|
<van-image width="13" height="18" src="/img/home/phoneFalse.png" />
|
|
</div>
|
|
<span>手机号登录</span>
|
|
</li>
|
|
<li @click="lConindex = 1" :class="{ con: lConindex == 1 }">
|
|
<div class="img" v-if="lConindex == 0">
|
|
<van-image width="13" height="18" src="/img/home/password.png" />
|
|
</div>
|
|
<span :class="{ con: lConindex == 1 }">密码登录</span>
|
|
</li>
|
|
</ul>
|
|
<!-- 手机号登陆 -->
|
|
<div class="input_box" v-if="lConindex == 0">
|
|
<input type="text" placeholder="输入手机号" v-model="phoneNum" />
|
|
<p>
|
|
<input type="text" placeholder="输入验证码" v-model="verification" />
|
|
<button :class="{ con: time != 60 }" @click="getCode">
|
|
{{ time == 60 ? "获取验证码" : time + "S" }}
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<!-- 密码登录 -->
|
|
<div class="input_box con" v-if="lConindex == 1">
|
|
<input type="text" placeholder="输入手机号" v-model="phoneNum2" />
|
|
<div class="look_input">
|
|
<input
|
|
:type="changePassword1"
|
|
placeholder="输入密码"
|
|
v-model="password"
|
|
/>
|
|
<img
|
|
@click="passwordOneChange"
|
|
src="https://img.xmkanshu.com/operateimg/novel/1a/1a7b44e2cb6821c8aa501913194dd3ed.png"
|
|
alt="look"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- 登录按钮 -->
|
|
<div class="btn">
|
|
<button @click="login">登录</button>
|
|
</div>
|
|
<!-- 分割线 -->
|
|
<div class="separate_box">
|
|
<div class="separate">
|
|
<span>其他登陆方式</span>
|
|
</div>
|
|
</div>
|
|
<!-- 其他登录方式 -->
|
|
<div class="other">
|
|
<van-image width="40" height="40" src="/img/home/qq.png" />
|
|
<van-image width="40" height="40" src="/img/home/wb.png" />
|
|
<van-image width="40" height="40" src="/img/home/bd.png" />
|
|
</div>
|
|
<!-- 介绍 -->
|
|
<div class="information">
|
|
<p>客服 400-628-9988</p>
|
|
<p>极速版 | <span>触屏版</span> | 客户端</p>
|
|
<p>© 2023 天浪小说</p>
|
|
<!-- <p>京ICP备 11009265号-5</p> -->
|
|
</div>
|
|
<div class="legislation">
|
|
登录代表您同意天浪小说<span>用户协议</span>和<span>隐私策略</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #f7f7f7;
|
|
border-bottom: 1px solid #cbcbcb;
|
|
.app {
|
|
width: 17px;
|
|
height: 17px;
|
|
background: url("/public/img/home/left.png") no-repeat 12px 0px;
|
|
background-size: 8px 13px;
|
|
margin-top: 13px;
|
|
padding-left: 11px;
|
|
padding-right: 44px;
|
|
}
|
|
h1 {
|
|
font-size: 17px;
|
|
color: #333333;
|
|
padding-top: 12px;
|
|
padding-bottom: 10px;
|
|
font-weight: normal;
|
|
}
|
|
.sourch {
|
|
display: flex;
|
|
width: 60px;
|
|
padding-right: 12px;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
p {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
.img {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url("/public/img/home/search.png") no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
.login_mode {
|
|
padding: 0 10px;
|
|
display: flex;
|
|
height: 53px;
|
|
background-color: #fff;
|
|
li {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999;
|
|
font-size: 15px;
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: #e4e4e4;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
&.con::after {
|
|
background-color: #f54b41;
|
|
}
|
|
&.con span {
|
|
color: #f54b41;
|
|
}
|
|
}
|
|
.img {
|
|
margin-left: 25px;
|
|
margin-right: 23px;
|
|
}
|
|
span.con {
|
|
display: inline-block;
|
|
margin-left: 61px;
|
|
}
|
|
}
|
|
.input_box {
|
|
padding-top: 18px;
|
|
background-color: #fff;
|
|
padding-left: 10px;
|
|
&.con {
|
|
padding-bottom: 18px;
|
|
}
|
|
input {
|
|
width: 89.3%;
|
|
height: 36px;
|
|
outline: none;
|
|
margin-bottom: 18px;
|
|
padding-left: 18px;
|
|
color: #757575;
|
|
border: 1px solid #999999;
|
|
font-size: 14px;
|
|
}
|
|
p {
|
|
input {
|
|
width: 54.7%;
|
|
margin-right: 8px;
|
|
}
|
|
button {
|
|
width: 118px;
|
|
height: 35px;
|
|
border: 1px solid #f54b41;
|
|
font-size: 12px;
|
|
color: #f54b41;
|
|
background-color: #fff;
|
|
&.con {
|
|
background-color: #b5b5b5;
|
|
border-color: #b5b5b5;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.look_input {
|
|
width: 89.3%;
|
|
height: 36px;
|
|
padding-left: 18px;
|
|
color: #757575;
|
|
border: 1px solid #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
input {
|
|
border: none;
|
|
width: 90%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
img {
|
|
width: 25px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
}
|
|
.btn {
|
|
padding: 0 10px;
|
|
background-color: #fff;
|
|
button {
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
background-color: #f54b41;
|
|
height: 36px;
|
|
border: none;
|
|
}
|
|
}
|
|
.separate_box {
|
|
background-color: #fff;
|
|
padding-bottom: 18px;
|
|
.separate {
|
|
width: 94.7%;
|
|
position: relative;
|
|
border-bottom: 1px solid #d4d4d5;
|
|
margin: 0 auto;
|
|
padding-top: 40px;
|
|
background-color: #fff;
|
|
span {
|
|
position: absolute;
|
|
font-size: 13px;
|
|
color: #5f5f5f;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 0 10px;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.other {
|
|
padding: 0 56px;
|
|
padding-bottom: 49px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #fff;
|
|
}
|
|
.information {
|
|
background-color: #fbfbfb;
|
|
padding-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-bottom: 11px;
|
|
p {
|
|
font-size: 13px;
|
|
color: #999999;
|
|
margin-bottom: 14px;
|
|
&:nth-of-type(1) {
|
|
color: #c1c1c1;
|
|
}
|
|
span {
|
|
font-size: 14px;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
.legislation {
|
|
padding: 42px 0;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #bcbcbc;
|
|
span {
|
|
color: #9bc2ef;
|
|
}
|
|
}
|
|
</style> |