182 lines
3.9 KiB
Vue
182 lines
3.9 KiB
Vue
<template>
|
|
<div class="book">
|
|
<view class="uni-margin-wrap">
|
|
<swiper class="swiper" :indicator-dots="indicatorDots"
|
|
:autoplay="autoplay" :interval="interval" :duration="duration">
|
|
<swiper-item v-for="(item,index) in BannerList" :key="index">
|
|
<a :href="item.href">
|
|
<image :src="item.imgUrl" mode="widthFix"/>
|
|
</a>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<div class="main" v-for="(item,index) in BookList" :key="index">
|
|
|
|
<view class="item-list" v-if="item.hasOwnProperty('top')">
|
|
<view class="item-title">
|
|
{{ item.title }}
|
|
</view>
|
|
<div class="item-content" @click="enterInfo(item.top.id)">
|
|
<image class="hot" mode="scaleToFill" :src="item.top.imgUrl" />
|
|
<div class="content-right">
|
|
<h3 class="content-title">{{ item.top.title }}</h3>
|
|
<p class="content-desc">{{ item.top.desc }}</p>
|
|
<div class="content-class"></div>
|
|
</div>
|
|
</div>
|
|
<uni-list class="book-list">
|
|
<uni-list-item v-for="(t, inx) in item.list" :title="t.title"
|
|
:key="inx" @click="enterInfo(t.id)"/>
|
|
</uni-list>
|
|
</view>
|
|
|
|
<view class="item-list" v-else-if="item.title == '编辑力荐' ">
|
|
<view class="item-title">
|
|
{{ item.title }}
|
|
</view>
|
|
<div class="item-content" v-for="(o,p) in item.list" :key="p"
|
|
@click="enterInfo(o.id)">
|
|
<image class="hot" mode="scaleToFill" :src="o.imgUrl" />
|
|
<div class="content-right">
|
|
<h3 class="content-title">{{ o.title }}</h3>
|
|
<p class="content-desc">{{ o.desc }}</p>
|
|
<div class="content-class"></div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
|
|
<view class="item-list" v-else>
|
|
<view class="item-title">
|
|
{{ item.title }}
|
|
</view>
|
|
<div class="item-content">
|
|
<ul>
|
|
<li v-for="(a,y) in item.list" :key="y" @click="enterInfo(a.id)">
|
|
<img mode="scaleToFill" :src="a.imgUrl"/>
|
|
<p>{{ a.title }}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</view>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations } from "vuex";
|
|
import uniList from '@/components/uni-list/uni-list.vue'
|
|
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
BannerList: [],
|
|
BookList: [],
|
|
indicatorDots: true,
|
|
autoplay: true,
|
|
interval: 3000,
|
|
duration: 500
|
|
}
|
|
},
|
|
created() {
|
|
this.getIndexData()
|
|
},
|
|
onLoad() {
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
'SET_HOTLIST'
|
|
]),
|
|
async getIndexData() {
|
|
let indexData = await this.$http.getIndexData({ data: {}, header:{} });
|
|
this.SET_HOTLIST(indexData.booklist[0])
|
|
this.BannerList = indexData.banner
|
|
this.BookList = indexData.booklist
|
|
},
|
|
enterInfo(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/bookinfo/bookinfo?id=${id}`
|
|
});
|
|
}
|
|
},
|
|
components: {
|
|
uniList,
|
|
uniListItem
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.book {
|
|
|
|
swiper-item {
|
|
image {
|
|
height: 171px !important;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.item-list {
|
|
padding: 20rpx;
|
|
.item-title {
|
|
border-left: 10upx solid #e95e56;
|
|
padding-left: 20upx;
|
|
font-size: 32upx;
|
|
}
|
|
.book-list {
|
|
margin-top: 5px;
|
|
}
|
|
.item-content {
|
|
ul {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
flex-flow: wrap;
|
|
li {
|
|
width: 30%;
|
|
margin-right: 5%;
|
|
margin-bottom: 5%;
|
|
img {
|
|
width: 100%;
|
|
height: 320upx;
|
|
}
|
|
p {
|
|
|
|
}
|
|
&:nth-child(3n) {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 10px;
|
|
.hot {
|
|
width: 114px;
|
|
height: 85px;
|
|
}
|
|
.content-right {
|
|
margin-left: 17px;
|
|
.content-title {
|
|
font-size: 17px;
|
|
color: #333;
|
|
}
|
|
.content-desc {
|
|
font-size: 13px;
|
|
color: #888;
|
|
line-height: 20px;
|
|
}
|
|
.content-class {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|