app_ancientSayings/pages/bookRecommendList/bookRecommendList.vue

<template>
	<view class="bookRecommendList_content">
		<view class="bookRecommendList_header">
			<view class="_header_chapter_num">
				已完结 共{{directoryCount}}章
			</view>
			<view class="_header_chapter_all_list" @tap="handelChapterShow">
				{{columnsLabel}}
				<u-icon name="arrow-down" color="#666666" size="28rpx"></u-icon>
			</view>
		</view>
		<view class="bookRecommendList_body">
			<view class="chapter_list_box">
				<view :class="[`_list_item`,]" v-for="m in directory" :key="m.id" @tap="handelDirectoryItem(m)">
					<view :class="[`_item_name`,chapterorder == m.chapterorder ?'active':'']">
						{{m.chaptername}}
					</view>
					<view v-if="m.isvip" class="_item_chapter_lock">
						<image class="is_image" src="/static/images/chapter_lock.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="commFooter_box" v-if="commFooterFlag">
			<CommFooter />
		</view>
		<u-picker :show="chapterShow" :columns="columns" @confirm="confirmChapterPicker" @cancel="cancelChapterPicker"
			keyName="label"></u-picker>
	</view>
</template>

<script>
	import CommFooter from '@/components/commFooter/index.vue'
	export default {
		components: {
			CommFooter
		},
		data() {
			return {
				columns: [],
				chapterShow: false,
				bookSid: '',
				pageNum: 1,
				startOrder: '',
				directory: [],
				directoryCount: 0,
				columnsLabel: '',
				commFooterFlag: false,
				barTitle: '',
				chapterorder: ''
			}
		},
		onLoad(options) {
			this.bookSid = options.sid;
			this.barTitle = options.t;
			this.chapterorder = options.c;
		},
		onShow() {
			const bookSid = this.bookSid;
			const pageNum = this.pageNum;
			const barTitle = this.barTitle;
			uni.setNavigationBarTitle({
				title: barTitle,
			});
			this.isGetDirectory(bookSid, pageNum)
		},
		onReachBottom() {
			const bookSid = this.bookSid;
			const pageNum = this.pageNum + 1;
			this.pageNum = pageNum;
			this.isGetDirectory(bookSid, pageNum)
		},
		methods: {
			handelChapterShow() {
				this.chapterShow = true;
			},
			handelDirectoryItem(row){
				uni.navigateTo({
					url: `/pages/novelReading/novelReading?sid=${this.bookSid}&n=${this.barTitle}&id=${row.id}`
				})
			},
			confirmChapterPicker(data) {
				this.chapterShow = false;
				const bookSid = this.bookSid;
				const pageNum = 1;
				this.startOrder = data.value[0].start;
				this.columnsLabel = data.value[0].label;
				this.pageNum = pageNum;
				this.isGetDirectory(bookSid, pageNum)
			},
			cancelChapterPicker() {
				this.chapterShow = false;
			},
			isGetDirectory(sid, page, startOrder) {
				uni.showLoading({
					title: '加载中...'
				});
				const data = {
					sid,
					page,
					startOrder,
				}
				uni.$u.http.post('/getDirectory', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						const directory = res.data.directory;
						const stage = res.data.stage;
						const directoryCount = res.data.directory_count;
						let columnsLabel = ''
						const columns = stage.map((m, idx) => {
							if (idx === 0 && !startOrder) {
								columnsLabel = `${m.start}-${m.end}`
							}
							return {
								...m,
								id: idx,
								label: `${m.start}-${m.end}`
							}
						})
						if (page == 1) {
							this.directory = directory;
						} else {
							this.directory = [...this.directory, ...directory];
						}
						this.commFooterFlag = directory.length ? false : true;
						this.columns = [columns];
						this.directoryCount = directoryCount;
						this.columnsLabel = columnsLabel;
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, "========")
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.is_image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.bookRecommendList_content {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;

		.bookRecommendList_header {
			display: flex;
			justify-content: space-between;

			._header_chapter_num {
				font-size: 30rpx;
				color: #666666;
				line-height: 1;
			}

			._header_chapter_all_list {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #666666;
				line-height: 1;
			}
		}

		.bookRecommendList_body {
			width: 100%;
			margin-top: 20rpx;

			.chapter_list_box {
				width: 100%;

				._list_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 120rpx;
					border-bottom: 1rpx solid #F2F2F2;

					._item_name {
						font-size: 32rpx;
						color: #333333;
						line-height: 1;
					}

					._item_name.active {
						color: #FF728F;
					}

					._item_chapter_lock {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		.commFooter_box {
			padding: 32rpx 0;
		}
	}
</style>