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

<template>
	<view class="chapter-popup-container" :class="{'dark-mode': isDarkMode}">
		<uv-popup ref="popup" :round="30" :customStyle="popupStyle">
			<view class="catalog-popup-fullscreen theme-transition">
				<view class="catalog-header theme-transition">
					<view class="header-left" @click.stop="close">
						<uv-icon name="arrow-down" size="46" :color="isDarkMode ? '#ccc' : '#333'"/>
					</view>
					<view class="header-title theme-transition">目录</view>
					<view class="header-right theme-transition" @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 theme-transition', {active: (orderAsc ? idx : chapterList.length - 1 - idx) === currentIndex}]">
						<view class="item-main">
							<text class="item-title theme-transition">{{ item.title }}</text>
							<text v-if="item.vip" class="vip-tag theme-transition">付费</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import themeMixin from '@/mixins/themeMode.js'
	
	export default {
		mixins: [themeMixin],
		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
					}
				]
			}
		},
		computed: {
			popupStyle() {
				return {
					height: '70vh',
					background: this.isDarkMode ? '#222' : '#fff'
				}
			}
		},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			selectChapter(idx) {
				this.currentIndex = idx
				this.showCatalog = false
				// TODO: 跳转到对应章节内容
			},
		}
	}
</script>

<style scoped lang="scss">
	.chapter-popup-container {
		.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;
			}
		}
	}
	
	/* 暗色主题样式 */
	.chapter-popup-container.dark-mode {
		.catalog-popup-fullscreen {
			background: $dark-bg-color-secondary;
			
			.catalog-header {
				background: $dark-bg-color-secondary;
				border-bottom: 1px solid $dark-border-color;
				
				.header-title {
					color: $dark-text-color-primary;
				}
				
				.header-right {
					color: $dark-accent-color;
				}
			}
			
			.catalog-list {
				.catalog-item {
					background: $dark-bg-color-secondary;
					color: $dark-text-color-secondary;
					border-bottom: 1px solid $dark-border-color;
					
					&.active {
						color: #ff5a5f;
						background: rgba(255, 90, 95, 0.1);
					}
					
					.item-title {
						color: $dark-text-color-secondary;
					}
					
					.vip-tag {
						background: rgba(255, 153, 0, 0.2);
						color: #ff9900;
					}
				}
			}
		}
	}
</style>