novel-front-app/pages_order/components/novel/chapterPopup.vue

<template>
	<uv-popup ref="popup" :round="30" :customStyle="{height: '70vh'}">
		<view class="catalog-popup-fullscreen">
			<view class="catalog-header">
				<view class="header-left" @click.stop="close">
					<uv-icon name="arrow-down" size="46" color="#333"/>
				</view>
				<view class="header-title">目录</view>
				<view class="header-right" @click.stop="orderAsc = !orderAsc">倒序</view>
			</view>
			<scroll-view scroll-y class="catalog-list">
				<view v-for="(item, idx) in (orderAsc ? chapterList : [...chapterList].reverse())" :key="item.id"
					@click="selectChapter(orderAsc ? idx : chapterList.length - 1 - idx)"
					:class="['catalog-item', {active: (orderAsc ? idx : chapterList.length - 1 - idx) === currentIndex}]">
					<view class="item-main">
						<text class="item-title">{{ item.title }}</text>
						<text v-if="item.vip" class="vip-tag">付费</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</uv-popup>
</template>

<script>
	export default {
		data() {
			return {
				chapterCount: 2814,
				orderAsc : true,
				currentIndex : 0,
				chapterList: [{
						id: 1,
						title: '第一章 重回2004',
						vip: false
					},
					{
						id: 2,
						title: '第二章 陈年旧恨',
						vip: false
					},
					{
						id: 3,
						title: '第三章 再相见',
						vip: false
					},
					{
						id: 4,
						title: '第四章 李东的邀请',
						vip: false
					},
					{
						id: 5,
						title: '第五章 小气的男',
						vip: false
					},
					{
						id: 6,
						title: '第六章 先送谁?',
						vip: false
					},
					{
						id: 7,
						title: '第七章 打听行情',
						vip: false
					},
					{
						id: 8,
						title: '第八章 省城探路',
						vip: false
					},
					{
						id: 9,
						title: '第九章 订货',
						vip: false
					},
					{
						id: 10,
						title: '第十章 第一桶金',
						vip: true
					},
					{
						id: 11,
						title: '第十一章 高富帅来袭',
						vip: true
					},
					{
						id: 12,
						title: '第十二章 故学后，挥场见！',
						vip: true
					},
					{
						id: 13,
						title: '第十三章 你来我往',
						vip: true
					},
					{
						id: 14,
						title: '第十四章 你来我往',
						vip: true
					},
					{
						id: 15,
						title: '第十五章 你来我往',
						vip: true
					},
					{
						id: 16,
						title: '第十六章 你来我往',
						vip: true
					},
					{
						id: 17,
						title: '第十七章 你来我往',
						vip: true
					},
					{
						id: 18,
						title: '第十八章 你来我往',
						vip: true
					}
				]
			}
		},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			selectChapter(){
				
			},
			selectChapter(idx) {
				this.currentIndex = idx
				this.showCatalog = false
				// TODO: 跳转到对应章节内容
			},
		}
	}
</script>

<style scoped lang="scss">
	.catalog-popup-fullscreen {
		position: relative;
		height: 100%;
		width: 100vw;
		background: #fff;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.catalog-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			height: 96rpx;
			border-bottom: 1px solid #eee;
			position: sticky;
			top: 0;
			background: #fff;
			z-index: 2;
		}


		.header-left {
			width: 60rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.header-title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #222;
		}

		.header-right {
			color: #223a7a;
			font-size: 28rpx;
			font-weight: 500;
			min-width: 80rpx;
			text-align: right;
		}

		.catalog-list {
			height: calc(100% - 180rpx);
			overflow: auto;
			padding-bottom: 40rpx;
		}

		.catalog-item {
			padding: 0 32rpx;
			min-height: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-bottom: 1px solid #f5f5f5;
			background: #fff;
			color: #222;
			font-size: 30rpx;
			position: relative;
		}

		.catalog-item.active {
			color: #ff5a5f;
			background: #fff7f7;
		}

		.item-main {
			display: flex;
			align-items: center;
			gap: 16rpx;
		}

		.item-title {
			font-size: 30rpx;
		}

		.vip-tag {
			background: #ffe1b2;
			color: #ff9900;
			border-radius: 20rpx;
			font-size: 24rpx;
			padding: 2rpx 18rpx;
			margin-left: 16rpx;
		}

	}
</style>