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(item, idx)"
						:class="['catalog-item theme-transition', {active: idx == currentIndex}]">
						<view class="item-main">
							<text class="item-title theme-transition">{{ item.title }}</text>
							<text v-if="item.vip == 'Y'" class="vip-tag theme-transition">付费</text>
						</view>
					</view>
					<uv-empty mode="list" v-if="chapterList.length == 0"></uv-empty>
				</scroll-view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import themeMixin from '@/mixins/themeMode.js'
	
	export default {
		props : {
			'bookId' : {
				default : 0
			}, 
			'currentIndex' : {
				// default : 0
			}, 
			'chapterList' : {
				default : []
			}
		},
		mixins: [themeMixin],
		data() {
			return {
				chapterCount: 2814,
				orderAsc : true,
				// chapterList: [],
			}
		},
		computed: {
			popupStyle() {
				return {
					height: '70vh',
					background: this.isDarkMode ? '#222' : '#fff'
				}
			}
		},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
				// 获取章节
				// this.$fetch('getBookCatalogList', {
				// 	bookId : this.bookId,
				// 	pageNo : 1,
				// 	pageSize : 9999999,
				// 	reverse : this.orderAsc ? 1 : 0,
				// }).then(res => {
				// 	this.chapterList = res.records
				// })
			},
			close() {
				this.$refs.popup.close()
			},
			selectChapter(item, index) {
				this.close()
				this.$emit('selectChapter', {item, index})
			},
		}
	}
</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>