143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<template>
|
|
<div class="bookinfo">
|
|
<!-- background: url('infoData.imgurl'); -->
|
|
<div class="info-title">
|
|
<div class="title-background" :style="{ background: 'url('+infoData.imgurl+')' }"></div>
|
|
<div class="title-top">
|
|
<img :src="infoData.imgurl"/>
|
|
<div class="title-top-right">
|
|
<h3>{{ infoData.title }}</h3>
|
|
<p><span class="author">{{ infoData.author }}</span> | {{ infoData.type }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-message">
|
|
<ul>
|
|
<li>
|
|
<h3 class="readNum">{{ infoData.readNum }}</h3>
|
|
<p class="readP">阅读次数</p>
|
|
</li>
|
|
<li>
|
|
<h3 class="readNum">{{ infoData.wordNum }}</h3>
|
|
<p class="readP">已更字数</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="info-desc">
|
|
<h4>简介</h4>
|
|
<p class="descCont">{{ infoData.desc }}</p>
|
|
</div>
|
|
<!-- 章节目录 -->
|
|
<view class="chapter">
|
|
<h4 class="chapterTitle">章节目录</h4>
|
|
<ul class="chapterList">
|
|
<li class="chapterTxt" v-for="(item,index) in infoData.zjList" :key="index">{{ item.text }}</li>
|
|
</ul>
|
|
</view>
|
|
|
|
<!-- 推荐 -->
|
|
<view class="recommend">
|
|
<view class="recommendTitle">喜欢过 {{ infoData.title }} 的人还喜欢 ...</view>
|
|
<ul class="recommendUl">
|
|
<li class="recommendList" v-for="(items,index) in GET_HOTLIST.list"
|
|
:key="index" @click="$utils.enterInfo(items.id)">
|
|
<image :src="items.imgUrl" mode="aspectFit"></image>
|
|
<view class="bookMsg">
|
|
<p class="bookName">{{items.title}}</p>
|
|
<p class="bookType">{{items.class}}</p>
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
</view>
|
|
|
|
<view class="action">
|
|
<view class="action-read" @click="startRead()">
|
|
开始阅读
|
|
</view>
|
|
<view :class="[ isdouleClick ? 'red action-like' : 'blak action-like']" @click="isdouleClick ? addLike() : '' ">
|
|
加入收藏
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
isdouleClick: true,
|
|
bookid: null,
|
|
infoData: {}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.bookid = option.id
|
|
this.checkBook()
|
|
},
|
|
onReady () {
|
|
this.getIndexData();
|
|
},
|
|
methods: {
|
|
async startRead() {
|
|
uni.navigateTo({
|
|
url: `/pages/bookinfo/read?bookid=${this.bookid}&chapterId=${this.infoData.zjList[0].zid}`
|
|
});
|
|
},
|
|
async checkBook() {
|
|
let data = await this.$http.checkBook({
|
|
data: {
|
|
bookid: this.bookid,
|
|
id: (JSON.parse(localStorage.getItem("LoginStatus"))).id
|
|
}
|
|
});
|
|
if(data != "没有收藏本书") {
|
|
this.isdouleClick = false
|
|
}
|
|
},
|
|
async addLike () {
|
|
if(this.$utils.checkLogin()) {
|
|
let data = await this.$http.addLike({
|
|
data: {
|
|
bookid: this.bookid,
|
|
id: (JSON.parse(localStorage.getItem("LoginStatus"))).id
|
|
}
|
|
});
|
|
this.isdouleClick = false
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/my/login'
|
|
});
|
|
}
|
|
},
|
|
async getIndexData() {
|
|
let data = await this.$http.getBookInfo({
|
|
data: {
|
|
bookid: this.bookid
|
|
}
|
|
});
|
|
this.infoData = data;
|
|
uni.setNavigationBarTitle({
|
|
title: data.title
|
|
});
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'GET_HOTLIST'
|
|
])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.red{
|
|
background: red;
|
|
}
|
|
.blak {
|
|
background: #8d8d8d !important;
|
|
}
|
|
@import "./../../common/less/page/bookinfo.less";
|
|
</style>
|