mirror of
https://gitee.com/JJ_JJ-JJ/tianlang-novel
synced 2026-07-21 10:34:44 +08:00
552 lines
13 KiB
Vue
552 lines
13 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref, computed,onActivated } from "vue";
|
||
import { Api } from "../../assets/api/api";
|
||
import { useRouter, onBeforeRouteUpdate } from "vue-router";
|
||
import {useStoriesStore} from "@/stores/index"
|
||
import {storeToRefs }from 'pinia'
|
||
//控制书本类型
|
||
const conIndex = ref(0);
|
||
//控制登录前后，页面样式
|
||
const loginStatus = ref(false);
|
||
//收藏书本
|
||
const booksData = ref([]);
|
||
const booksDataFlag = ref(false);
|
||
|
||
// vue3自带方法
|
||
const router = useRouter();
|
||
|
||
//跳转上一页
|
||
const goBack = () => {
|
||
router.push("/");
|
||
};
|
||
//跳转首页
|
||
const goPage = () => {
|
||
router.push("/");
|
||
};
|
||
//跳转登录页
|
||
const goLoginView = () => {
|
||
router.push("/login");
|
||
};
|
||
//跳转vip页
|
||
const goVip = () => {
|
||
router.push("/vip");
|
||
};
|
||
//获取登录状态
|
||
const getLoginStatus = () => {
|
||
if (localStorage.getItem("LoginStatus")) {
|
||
loginStatus.value = JSON.parse(localStorage.getItem("LoginStatus")!);
|
||
}
|
||
};
|
||
const monitorLoginStatus = computed(() => {
|
||
return loginStatus.value;
|
||
});
|
||
//获取余额
|
||
const price = computed(() => {
|
||
return JSON.parse(localStorage.getItem("price") as any);
|
||
});
|
||
//获取vip状态 pinia 相关操作
|
||
// const vipStart = computed(() => {
|
||
// return JSON.parse(localStorage.getItem("vip") as any);
|
||
// });
|
||
const {vip} = storeToRefs(useStoriesStore());
|
||
|
||
//获取收藏书本
|
||
const getBooks = () => {
|
||
if (localStorage.getItem("LoginStatus")) {
|
||
if (JSON.parse(localStorage.getItem("LoginStatus")!)) {
|
||
if (localStorage.getItem("collect")) {
|
||
booksData.value = JSON.parse(localStorage.getItem("collect") as any);
|
||
booksDataFlag.value = true;
|
||
} else {
|
||
booksDataFlag.value = false;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
//跳转详情页
|
||
const goDetailView = (id:String) =>{
|
||
let newId = id;
|
||
router.push({
|
||
name:"detail",
|
||
params:{
|
||
id:newId as any
|
||
}
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
getLoginStatus();
|
||
getBooks();
|
||
|
||
});
|
||
onActivated(()=>{
|
||
getLoginStatus();
|
||
getBooks();
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="bookshelf">
|
||
<nav>
|
||
<div class="app" @click="goBack"></div>
|
||
<h1>我的书架</h1>
|
||
<div class="sourch">
|
||
<p @click="goPage">首页</p>
|
||
</div>
|
||
</nav>
|
||
<main>
|
||
<!-- 登录 -->
|
||
<div
|
||
class="login"
|
||
:class="{ before: !monitorLoginStatus, after: monitorLoginStatus }"
|
||
>
|
||
<div class="head_phtot">
|
||
<div class="img">
|
||
<div class="van_image_box">
|
||
<van-image width="60" height="60" src="/img/home/headPhoto.png" />
|
||
</div>
|
||
<!-- 登录后 -->
|
||
<div class="info" v-if="monitorLoginStatus">
|
||
<h6>
|
||
<span>134****2984</span>
|
||
<van-image width="18" height="13" src="/img/home/vip.png" />
|
||
<a href="javascript:;" @click="goVip">{{
|
||
vip == true ? "已开通" : "开通"
|
||
}}</a>
|
||
</h6>
|
||
<p style="margin-bottom: 3px">
|
||
余额：<span>{{ price }}</span
|
||
><a href="javascript:;">书币</a>
|
||
</p>
|
||
<p>
|
||
vip：<a href="">{{ vip == true ? "已购买" : "未购买" }}</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 登录前 -->
|
||
<div class="info" v-if="!monitorLoginStatus">
|
||
<h1>未登录</h1>
|
||
<p>登录账号同步书架</p>
|
||
</div>
|
||
<!-- 登录后 -->
|
||
<button v-if="monitorLoginStatus">切换帐号</button>
|
||
</div>
|
||
<!-- 登录前 -->
|
||
<button v-if="!monitorLoginStatus" @click="goLoginView">登录</button>
|
||
<!-- 登录后 -->
|
||
<div v-if="monitorLoginStatus" class="btns">
|
||
<button @click="router.push('/personalCenter')">个人中心</button>
|
||
<button @click="router.push('/voucherCenter')">快速充值</button>
|
||
</div>
|
||
</div>
|
||
<!-- 功能 -->
|
||
<div class="function">
|
||
<ul class="function_ul1">
|
||
<li
|
||
class="function_li1"
|
||
:class="{ con: conIndex == 0 }"
|
||
@click="conIndex = 0"
|
||
>
|
||
最近阅读
|
||
</li>
|
||
<li
|
||
class="function_li1"
|
||
:class="{ con: conIndex == 1 }"
|
||
@click="conIndex = 1"
|
||
>
|
||
收藏
|
||
</li>
|
||
<li
|
||
class="function_li1"
|
||
:class="{ con: conIndex == 2 }"
|
||
@click="conIndex = 2"
|
||
>
|
||
购买
|
||
</li>
|
||
<li
|
||
class="function_li1"
|
||
:class="{ con: conIndex == 3 }"
|
||
@click="conIndex = 3"
|
||
>
|
||
追书
|
||
</li>
|
||
</ul>
|
||
<!-- 最近阅读 -->
|
||
<div class="record" v-if="conIndex == 0">
|
||
<div class="existence">
|
||
<div class="img">
|
||
<van-image
|
||
width="44"
|
||
height="58"
|
||
src="/img/home/notBookHistory.png"
|
||
/>
|
||
</div>
|
||
<h1>您还没有阅读历史</h1>
|
||
<p>最近阅读过的图书可以来这里继续阅读哦！~</p>
|
||
</div>
|
||
<div v-if="false" class="potential_history">
|
||
<ul>
|
||
<li>
|
||
<van-image
|
||
width="100%"
|
||
height="80"
|
||
src="https://easyreadfs.nosdn.127.net/kLIz2uuOpyk5tJbZMLLbPw==/8796093025009675084"
|
||
/>
|
||
<p>34123412</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 收藏历史 -->
|
||
<div class="record" v-if="conIndex == 1">
|
||
<div class="existence">
|
||
<div class="img" v-if="!booksDataFlag">
|
||
<van-image
|
||
width="44"
|
||
height="58"
|
||
src="/img/home/notBookHistory.png"
|
||
/>
|
||
</div>
|
||
<h1 v-if="!booksDataFlag">您还没有收藏历史</h1>
|
||
<p v-if="!booksDataFlag">登录后收藏记录才会显示在这里哦~</p>
|
||
</div>
|
||
<div v-if="booksDataFlag" class="potential_history">
|
||
<ul>
|
||
<li
|
||
@click="goDetailView(item.id)"
|
||
v-for="(item, index) in booksData"
|
||
:key="index">
|
||
<van-image width="100%" height="142" :src="item.img" />
|
||
<p>{{ item.author }}</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 购买 -->
|
||
<div class="record" v-if="conIndex == 2">
|
||
<div class="existence">
|
||
<div class="img">
|
||
<van-image
|
||
width="44"
|
||
height="58"
|
||
src="/img/home/notBookHistory.png"
|
||
/>
|
||
</div>
|
||
<h1>您还没有购买历史</h1>
|
||
<p>登录后购买记录才会显示在这里哦~</p>
|
||
</div>
|
||
<div v-if="false" class="potential_history">
|
||
<ul>
|
||
<li>
|
||
<van-image
|
||
width="100%"
|
||
height="80"
|
||
src="https://easyreadfs.nosdn.127.net/kLIz2uuOpyk5tJbZMLLbPw==/8796093025009675084"
|
||
/>
|
||
<p>34123412</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 追书 -->
|
||
<div class="record" v-if="conIndex == 3">
|
||
<div class="existence">
|
||
<div class="img">
|
||
<van-image
|
||
width="44"
|
||
height="58"
|
||
src="/img/home/notBookHistory.png"
|
||
/>
|
||
</div>
|
||
<h1>您还没有追书历史</h1>
|
||
<p>登录后追书记录才会显示在这里哦~</p>
|
||
</div>
|
||
<div v-if="false" class="potential_history">
|
||
<ul>
|
||
<li>
|
||
<van-image
|
||
width="100%"
|
||
height="80"
|
||
src="https://easyreadfs.nosdn.127.net/kLIz2uuOpyk5tJbZMLLbPw==/8796093025009675084"
|
||
/>
|
||
<p>34123412</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<br /><br />
|
||
|
||
<footer>
|
||
<p>©2022天浪小说</p>
|
||
<!-- <p>京ICP备 11009265号-5</p> -->
|
||
</footer>
|
||
<br />
|
||
</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(https://img.xmkanshu.com/operateimg/img/img/18697/18697.png)
|
||
no-repeat center center;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
}
|
||
.login {
|
||
&.before {
|
||
display: flex;
|
||
padding-top: 15px;
|
||
padding-bottom: 19px;
|
||
background-color: #fff;
|
||
justify-content: space-between;
|
||
padding-right: 10px;
|
||
margin-bottom: 10px;
|
||
.img {
|
||
width: 60px;
|
||
height: 60px;
|
||
padding: 0 10px;
|
||
}
|
||
.info {
|
||
h1 {
|
||
font-size: 14px;
|
||
color: #000000;
|
||
font-weight: normal;
|
||
margin-top: 1px;
|
||
margin-bottom: 5px;
|
||
}
|
||
p {
|
||
font-size: 12px;
|
||
color: #9f9f9f;
|
||
}
|
||
}
|
||
button {
|
||
width: 65px;
|
||
height: 35px;
|
||
color: #fff;
|
||
background-color: #d3270f;
|
||
border-radius: 2px;
|
||
border: none;
|
||
}
|
||
}
|
||
&.after {
|
||
padding-top: 15px;
|
||
padding-bottom: 15px;
|
||
background-color: #fff;
|
||
margin-bottom: 10px;
|
||
.img {
|
||
display: flex;
|
||
& > img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
.van_image_box {
|
||
padding: 0 10px;
|
||
}
|
||
.info {
|
||
h6 {
|
||
font-size: 14px;
|
||
width: 145px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 3px;
|
||
a {
|
||
color: #d3270f;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
& > p {
|
||
font-size: 14px;
|
||
color: #000000;
|
||
span {
|
||
color: #db270f;
|
||
}
|
||
a {
|
||
color: #9f9f9f;
|
||
}
|
||
}
|
||
}
|
||
.head_phtot {
|
||
& > button {
|
||
width: 60px;
|
||
height: 34px;
|
||
border: 1px solid #e3e3e3;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
background-color: #f7f7f7;
|
||
margin-top: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
margin-top: 12px;
|
||
justify-content: space-evenly;
|
||
button {
|
||
&:nth-of-type(1) {
|
||
width: 174px;
|
||
height: 36px;
|
||
border: 1px solid #aaaaaa;
|
||
background-color: #f7f7f7;
|
||
border-radius: 2px;
|
||
font-size: 14px;
|
||
color: #555555;
|
||
}
|
||
&:nth-of-type(2) {
|
||
width: 171px;
|
||
height: 36px;
|
||
background-color: #f54b41;
|
||
color: #ffffff;
|
||
border-radius: 2px;
|
||
font-size: 14px;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.head_phtot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.function {
|
||
background-color: #fff;
|
||
padding-top: 10px;
|
||
padding-bottom: 14px;
|
||
.function_ul1 {
|
||
display: flex;
|
||
width: 94%;
|
||
margin: 0 auto;
|
||
border: 1px solid #bbbbbb;
|
||
border-radius: 2px;
|
||
margin-bottom: 21px;
|
||
.function_li1 {
|
||
height: 35px;
|
||
border-right: 1px solid #bbbbbb;
|
||
background-color: #f1f1f1;
|
||
font-size: 15px;
|
||
text-align: center;
|
||
line-height: 35px;
|
||
color: #666666;
|
||
flex: 1;
|
||
&.con {
|
||
color: #ff0020;
|
||
background-color: #fff;
|
||
}
|
||
&:nth-last-of-type(1) {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
.img {
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
border-radius: 1px;
|
||
overflow: hidden;
|
||
}
|
||
.record {
|
||
h1 {
|
||
font-size: 15px;
|
||
text-align: center;
|
||
color: #000000;
|
||
margin-bottom: 7px;
|
||
font-weight: normal;
|
||
}
|
||
p {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.potential_history {
|
||
background-color: #fff;
|
||
ul {
|
||
width: 93.6%;
|
||
padding-top: 20px;
|
||
padding-bottom: 20px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
border: none;
|
||
}
|
||
li {
|
||
width: 30.484%;
|
||
margin-bottom: 20px;
|
||
margin-right: 15px;
|
||
&:nth-of-type(3n) {
|
||
margin-right: 0;
|
||
}
|
||
p {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 12px;
|
||
color: #000000;
|
||
text-align: center;
|
||
}
|
||
}
|
||
h2 {
|
||
height: 44px;
|
||
line-height: 44px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
font-weight: normal;
|
||
background-color: #fff;
|
||
margin-bottom: 10px;
|
||
& > span {
|
||
display: inline-block;
|
||
width: 5px;
|
||
height: 10px;
|
||
background: url(https://img.xmkanshu.com/operateimg/img/img/15000/15000.png);
|
||
background-size: cover;
|
||
}
|
||
}
|
||
}
|
||
footer {
|
||
p {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
</style> |