294 lines
7.5 KiB
Vue
294 lines
7.5 KiB
Vue
<template>
|
|
<view class="bookCity_home_content">
|
|
<view class="my_x_skeleton" v-if="skeletonLoading">
|
|
<x-skeleton type="banner" :loading="skeletonLoading" class="step_swiper_skeleton"></x-skeleton>
|
|
<x-skeleton type="menu" :loading="skeletonLoading" class="step_operate_skeleton"
|
|
:configs="{'gridRows': 1,'gridColumns':4, 'textWidth': '40%'}"></x-skeleton>
|
|
<x-skeleton type="waterfall" :loading="skeletonLoading" class="step_explosive_skeleton"
|
|
:configs="{'gridRows': 1,'gridColumns':3, 'headWidth': '100%', 'headHeight':'266rpx','headBorderRadius':'8rpx','textRows':2 ,'textRowsGap':'20rpx','textWidth':['100%','80%']}"></x-skeleton>
|
|
<x-skeleton type="menu" :loading="skeletonLoading" class="step_ranking_skeleton"
|
|
:configs="{'gridRows': 1,'gridColumns':4, 'headWidth': '100%', 'headHeight':'70rpx','textShow':false,'headBorderRadius':'8rpx','gridColumnsGap':'20rpx','padding':'15px 15px 0 15px'}"></x-skeleton>
|
|
<x-skeleton type="menu" :loading="skeletonLoading" class="step_ranking_skeleton"
|
|
:configs="{'gridRows': 2,'gridColumns':2, 'headWidth': '130rpx', 'headHeight':'180rpx','headBorderRadius':'8rpx','gridColumnsGap':'20rpx','itemDirection':'row', 'textRows':3,'textWidth':['100%','80%','60%'],'textRowsGap':'20rpx','gridRowsGap':'32rpx'}"></x-skeleton>
|
|
<x-skeleton type="menu" :loading="skeletonLoading" class="step_ranking_skeleton"
|
|
:configs="{'gridRows': 1,'gridColumns':1, 'headWidth': '100%', 'headHeight':'82rpx','headBorderRadius':'8rpx','textShow':false,'padding':'0 15px 15px 15px'}"></x-skeleton>
|
|
</view>
|
|
<view class="home_content_box" v-if="!skeletonLoading">
|
|
<!-- 焦点图 -->
|
|
<view class="step_swiper">
|
|
<!-- style="height: 260rpx;" -->
|
|
<u-swiper :list="swiperList" keyName="cover" indicator indicatorMode="line" circular></u-swiper>
|
|
</view>
|
|
<!--九宫格操作列表 -->
|
|
<view class="step_operate">
|
|
<u-grid :border="false" col="4">
|
|
<u-grid-item v-for="(m,listIndex) in list" :key="listIndex" @click="toGridItemPath(m)">
|
|
<u-icon :name="m.name" :size="34" />
|
|
<text class="grid-text">{{m.title}}</text>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
<!-- 全网火爆 -->
|
|
<view class="step_explosive">
|
|
<ExplosiveList :dataList="explosiveDataList" />
|
|
</view>
|
|
<view style="width: 100%">
|
|
<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
|
|
</view>
|
|
<!-- 榜单 -->
|
|
<view class="step_ranking_list">
|
|
<RankingList :dataList="rankingDataList" @handelRankingList="handelRankingList"
|
|
:headerListActive="headerListActive" />
|
|
</view>
|
|
<view style="width: 100%">
|
|
<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
|
|
</view>
|
|
<!-- 人气作品 -->
|
|
<view class="step_popularity_list">
|
|
<PopularityList isTitle="人气作品" :dataList="popularityDataList" />
|
|
</view>
|
|
<view style="width: 100%">
|
|
<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
|
|
</view>
|
|
<!-- 原创优选 -->
|
|
<view class="step_original_list">
|
|
<OriginalList :dataList="originalDataList" />
|
|
</view>
|
|
<view style="width: 100%">
|
|
<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
|
|
</view>
|
|
<!-- 书友推荐 -->
|
|
<view class="step_recommend_list">
|
|
<RecommendList :dataList="recommendDataList" />
|
|
</view>
|
|
<view style="width: 100%">
|
|
<u-gap height="14rpx" bgColor="#F6F6F6"></u-gap>
|
|
</view>
|
|
<!-- 人气作品 -->
|
|
<view class="step_popularity_list step_more_list ">
|
|
<PopularityList isTitle="更多书籍" :dataList="moreBooksList" />
|
|
</view>
|
|
<!-- 底部 -->
|
|
<!-- <view class="step_footer">
|
|
<CommFooter />
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import complete from '@/static/images/bookCity/complete.png';
|
|
import new_book from '@/static/images/bookCity/new_book.png';
|
|
import recharge from '@/static/images/bookCity/recharge.png';
|
|
import the_charts from '@/static/images/bookCity/the_charts.png';
|
|
import RankingList from './rankingList.vue'
|
|
import PopularityList from './popularityList.vue'
|
|
import ExplosiveList from './explosiveList.vue'
|
|
import OriginalList from './originalList.vue'
|
|
import RecommendList from './recommendList.vue'
|
|
import CommFooter from '@/components/commFooter/index.vue'
|
|
import config from '@/config/index';
|
|
import {
|
|
baseUrlImage
|
|
} from '@/utils/utils'
|
|
import {
|
|
myGetStorage,
|
|
} from '@/utils/storage/index.js';
|
|
|
|
export default {
|
|
components: {
|
|
RankingList,
|
|
PopularityList,
|
|
ExplosiveList,
|
|
OriginalList,
|
|
RecommendList,
|
|
CommFooter,
|
|
},
|
|
props: {
|
|
explosiveDataList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
},
|
|
rankingDataList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
},
|
|
headerListActive: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
popularityDataList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
},
|
|
originalDataList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
},
|
|
recommendDataList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
},
|
|
moreBooksList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
},
|
|
swiperList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
},
|
|
skeletonLoading:{
|
|
type: Boolean,
|
|
default: () => {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
baseUrl: config.baseUrl,
|
|
list: [{
|
|
name: the_charts,
|
|
title: '榜单',
|
|
toPath: '/pages/booksTheCharts/index'
|
|
},
|
|
{
|
|
name: complete,
|
|
title: '完本',
|
|
toPath: '/pages/booksListAll/index',
|
|
type: 'complete'
|
|
},
|
|
{
|
|
name: new_book,
|
|
title: '新书',
|
|
toPath: '/pages/booksListAll/index',
|
|
type: 'new_book'
|
|
},
|
|
{
|
|
name: recharge,
|
|
title: '充值',
|
|
toPath: '/pages/voucherCenter/index',
|
|
type: 'recharge'
|
|
},
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
toGridItemPath(row) {
|
|
const token = myGetStorage('token');
|
|
if (row.type == 'recharge' && !token) {
|
|
uni.navigateTo({
|
|
url: `/pages/login/login?to=3`
|
|
})
|
|
} else if (row.toPath) {
|
|
uni.navigateTo({
|
|
url: `${row.toPath}?titleType=${row.type}`
|
|
})
|
|
}
|
|
},
|
|
handelRankingList(event) {
|
|
this.$emit('handelRankingList', event)
|
|
// const id = event.currentTarget.dataset.id;
|
|
// this.headerListActive = id;
|
|
// this.rankingDataList = this.rankingDataObj[id];
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bookCity_home_content {
|
|
// padding: 0 0 150rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.my_x_skeleton {
|
|
.step_swiper_skeleton {
|
|
/deep/.x-skeleton__wrapper__head {
|
|
height: 260rpx !important;
|
|
}
|
|
}
|
|
|
|
.step_operate_skeleton {
|
|
/deep/.x-skeleton__wrapper__text {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.home_content_box {
|
|
.step_swiper {
|
|
width: 100%;
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.step_operate {
|
|
width: 100%;
|
|
padding: 40rpx 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
.grid-text {
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
|
|
.step_explosive {
|
|
width: 100%;
|
|
padding: 0 32rpx 32rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.step_ranking_list {
|
|
width: 100%;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.step_popularity_list {
|
|
width: 100%;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.step_original_list {
|
|
width: 100%;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.step_recommend_list {
|
|
width: 100%;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.step_footer {
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.step_more_list {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |