novel-front-app/pages_order/novel/chapterList.vue

<template>
	<view class="chapter-container">
		
		<navbar title="章节列表" leftClick @leftClick="$utils.navigateBack"/>
		
		<view class="tabs">
			<uv-tabs :list="tabs" 
			:activeStyle="{color : '#0A2463', fontWeight : 600}" 
			lineColor="#0A2463"
			:inactiveStyle="{color: '#0A2463'}" 
			lineHeight="8rpx" 
			lineWidth="50rpx" 
			:scrollable="false"
			:current="activeTab"
			@click="clickTabs"></uv-tabs>
		</view>

		<view class="chapter-list">
			<view class="chapter-item" v-for="(chapter, index) in chapters" :key="index" @click="editChapter(chapter)">
				<view class="chapter-info">
					<text class="chapter-title">章节名</text>
					<text class="chapter-number">第{{index + 1}}章</text>
				</view>
				<uv-icon name="arrow-right" color="#999" size="28"></uv-icon>
			</view>
		</view>

		<view class="bottom-actions">
			<button class="btn-settings" @click="handleSettings">设置作品</button>
			<button class="btn-new" @click="addNewChapter">新建章节</button>
		</view>
	</view>
</template>

<script>
	import BackArrow from './components/BackArrow.vue';

	export default {
		components: {
			BackArrow,
		},
		data() {
			return {
				tabs : [
					{
						name : '已发布',
					},
					{
						name : '草稿箱',
					}
				],
				activeTab: 0,
				chapters: [] // 真实章节数据
			}
		},
		onLoad(options) {
			// 根据tab参数决定初始tab
			if (options.activeTab) {
				this.activeTab = options.activeTab;
			}
			this.loadChapters();
			// 判断是否需要弹窗
			if (options && options.fromSave === '1') {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
			}
			if (options && options.fromPublish === '1') {
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				});
			}
		},
		methods: {
			loadChapters() {
				if (this.activeTab === 'published') {
					this.chapters = uni.getStorageSync('publishedChapters') || [];
				} else {
					this.chapters = uni.getStorageSync('chapters') || [];
				}
			},
			goBack() {
				uni.navigateBack()
			},
			clickTabs(tab) {
				this.activeTab = tab.index;
			},
			addNewChapter() {
				uni.navigateTo({
					url: '/pages_order/author/editor'
				})
			},
			editChapter(chapter) {
				uni.navigateTo({
					url: '/pages_order/author/editor?id=' + chapter.id
				})
			},
			handleSettings() {
				uni.navigateTo({
					url: '/pages_order/novel/createNovel?type=edit'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chapter-container {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 70px;

		.chapter-list {
			padding: 20rpx 40rpx;
			background-color: rgb(255, 254, 254);
			margin: 50rpx 40rpx;
			border-radius: 3%;

			.chapter-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15px 0;
				border-bottom: 1px solid #eee;

				.chapter-info {
					.chapter-title {
						font-size: 14px;
						color: #999;
						margin-bottom: 5px;
						display: block;
					}

					.chapter-number {
						font-size: 16px;
						color: #333;
						display: block;
					}
				}

				.icon-arrow {
					color: #999;
					font-size: 16px;
				}
			}
		}

		.bottom-actions {
			padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			padding: 10px 15px;
			background: #fff;
			box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);

			button {
				flex: 1;
				height: 40px;
				border-radius: 20px;
				font-size: 16px;
				margin: 0 5px;

				&.btn-settings {
					background: #fff;
					border: 1px solid #ddd;
					color: #333;
				}

				&.btn-new {
					background: #2b4acb;
					color: #fff;
					border: none;
				}
			}
		}
	}
</style>