novel-front-app/pages_order/author/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="box">
			<view class="chapter-list" >
				<view class="draft-header">
					<text class="draft-title">{{ activeTab === 0 ? '草稿箱章节' : '已发布章节' }}</text>
					<text class="delete-btn" @click="reverseList">{{ queryParams.reverse ? '正序' : '倒序' }}</text>
				</view>
				<view 
                class="chapter-item" 
                v-for="(chapter, index) in list" 
                :key="chapter.id" 
                @click="editChapter(chapter)">
					<view class="chapter-info">
						<text class="chapter-title">章节名</text>
						<text class="chapter-number">{{ chapter.title }}</text>
					</view>
					<uv-icon name="arrow-right" color="#999" size="28"></uv-icon>
				</view>
			</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 mixinsList from '@/mixins/list.js'
	export default {
        mixins: [mixinsList],
		components: {
		},
		data() {
			return {
				tabs : [
					{
						name : '草稿箱',
						index : 1
					},
					{
						name : '已发布',
						index : 0
					}
				],
				activeTab: 0,
                mixinsListApi : 'getMyShopNovelPage',
				id : 0,
			}
		},
		onLoad(options) {

			this.queryParams.reverse = 0

			// 根据tab参数决定初始tab
			if (options.activeTab) {
				this.activeTab = options.activeTab;
			}
			
			if(options.id){
				this.queryParams.bookId = options.id
				this.id = options.id
				this.queryParams.status = this.activeTab
			}
		},
		methods: {
			clickTabs(tab) {
				this.activeTab = tab.index;
				this.queryParams.status = this.activeTab
                this.list = []
				this.getData()
			},
            reverseList() {
                this.queryParams.reverse = [1, 0][this.queryParams.reverse]
                this.getData()
            },
			addNewChapter() {
				uni.navigateTo({
					url: '/pages_order/author/editor?id=' + this.id
				})
			},
			editChapter(chapter) {
				uni.navigateTo({
					url: '/pages_order/author/editor?cid=' + chapter.id + '&id=' + this.id
				})
			},
			handleSettings() {
				uni.navigateTo({
					url: '/pages_order/novel/createNovel?id=' + this.id
				})
			},
			deleteAll() {
				uni.showModal({
					title: '提示',
					content: '确定要删除所有草稿章节吗？',
					success: (res) => {
						if (res.confirm) {
							// 调用删除草稿API
							this.$api.deleteAllDrafts({bookId: this.id}).then(res => {
								if (res.code === 200) {
									this.$utils.showToast('删除成功')
									this.getData()
								}
							})
						}
					}
				})
			}
		}
	}
</script>

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

        .box{
			padding: 20rpx 40rpx;
			background-color: #fff;
			margin: 50rpx 40rpx;
			border-radius: 20rpx;
			
			.draft-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1px dashed #eee;
				margin-bottom: 10rpx;
				
				.draft-title {
					font-size: 30rpx;
					color: #000;
					font-weight: 900;
				}
				
				.delete-btn {
					font-size: 28rpx;
					color: #999;
				}
			}
			
            .chapter-list {
                .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>