app_ancientSayings/pages/bookCity/components/home/index.vue

<template>
	<view class="content">
		<!-- 焦点图 -->
		<view class="step_swiper">
			<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>
</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'

	export default {
		components: {
			RankingList,
			PopularityList,
			ExplosiveList,
			OriginalList,
			RecommendList,
			CommFooter,
		},
		data() {
			return {
				baseUrl: config.baseUrl,
				swiperList: [],
				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'
					},
				],
				// 全网火爆
				explosiveDataList: [],
				// 榜单
				rankingDataList: [],
				rankingDataObj: {},
				headerListActive: '1',
				// 人气作品
				popularityDataList: [],
				// 原创优选
				originalDataList: [],
				// 书友推荐
				recommendDataList: [],
				// 跟多书籍
				moreBooksList: []
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载中...'
			});
			// 也可以直接通过uni.$u.post发出请求，注意此处需要写上接口地址
			const parameter = {
				custom: {
					token: true
				}
			}
			uni.$u.http.post('/Index', {}, parameter).then((res) => {
				uni.hideLoading();
				if (res.status == 1) {
					const {
						ads,
						module1,
						charts1,
						charts2,
						charts3,
						charts4,
						module3,
						module4,
						module5,
						module6
					} = res.data;

					this.swiperList = baseUrlImage(ads);
					this.explosiveDataList = baseUrlImage(module1);
					this.explosiveDataList = baseUrlImage(module1);
					const rankingDataObj = {
						'1': baseUrlImage(charts1),
						'2': baseUrlImage(charts2),
						'3': baseUrlImage(charts3),
						'4': baseUrlImage(charts4)
					}
					this.rankingDataList = rankingDataObj[this.headerListActive];
					this.rankingDataObj = rankingDataObj;
					this.popularityDataList = baseUrlImage(module3);
					this.originalDataList = baseUrlImage(module4);
					this.recommendDataList = baseUrlImage(module5);
					this.moreBooksList = baseUrlImage(module6);
				}
			}).catch((err) => {
				uni.hideLoading();
				console.log(err, "========")
			})
		},
		methods: {
			toGridItemPath(row) {
				if (row.toPath) {
					uni.navigateTo({
						url: `${row.toPath}?titleType=${row.type}`
					})
				}
			},
			handelRankingList(event) {
				const id = event.currentTarget.dataset.id;
				this.headerListActive = id;
				this.rankingDataList = this.rankingDataObj[id];
			}
		}
	}
</script>

<style lang="scss">
	.content {
		// padding: 0 0 150rpx;
		width: 100%;
		box-sizing: border-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>