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="draft-header">
                <text class="draft-title">{{ activeTab === 0 ? '草稿箱章节' : '已发布章节' }}</text>
                <text class="delete-btn" @click="reverseList">{{ queryParams.reverse ? '正序' : '倒序' }}</text>
            </view>
			<view class="chapter-list">
				
				<!-- 章节列表 -->
				<uv-swipe-action>
					<uv-swipe-action-item 
						v-for="(chapter, index) in list" 
						:key="chapter.id"
						:options="swipeOptions"
						@click="deleteChapter(chapter, index)"
					>
						<view 
							class="chapter-item" 
							@click="editChapter(chapter)"
						>
							<view class="chapter-info">
								<text class="chapter-title">章节名</text>
								<text class="chapter-number">
									{{ chapter.title }}
									<text v-if="chapter.isPay == 'Y'" class="vip-tag theme-transition">付费</text>
									<text v-if="activeTab == 1 && chapter.state != null" 
                                    class="status-tag" 
                                    :class="'status-' + (chapter.state == 0 ? 'pending' : chapter.state == 1 ? 'approved' : chapter.state == 2 ? 'rejected' : '')">
                                    {{ chapter.state == 0 ? '审核中' : chapter.state == 1 ? '已发布' : chapter.state == 2 ? '已驳回' : '' }}</text>
								</text>
							</view>
							<uv-icon name="arrow-right" color="#999" size="28"></uv-icon>
						</view>
					</uv-swipe-action-item>
				</uv-swipe-action>
				
				<!-- 空状态 -->
				<view style="padding-bottom: 60rpx;"
                v-if="list.length == 0" >
                    <uv-empty 
                        :text="activeTab == 0 ? '还没有发布章节' : '还没有草稿章节'"
                        :icon="activeTab == 0 ? 'list' : 'edit-pen'"
                        iconSize="60"
                        iconColor="#ccc"
                        textColor="#999"
                        textSize="28"
                        mode="data"
                    />
                </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,
				swipeOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			}
		},
		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/author/createNovel?id=' + this.id
				})
			},
			// 删除章节
			deleteChapter(chapter, index) {
				uni.showModal({
					title: '提示',
					content: `确定要删除章节"${chapter.title}"吗？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								await this.$fetch('deleteMyNovel', {
									id: chapter.id
								})
								
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								
								// 重新获取列表数据
								this.getData()
							} catch (error) {
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			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{
			background-color: #fff;
			margin: 50rpx 40rpx;
			border-radius: 20rpx;
			
			.draft-header {
                padding: 20rpx 40rpx;
				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 {
                    padding: 20rpx 40rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    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;
                        }
						.vip-tag {
							background: #ffe1b2;
							color: #ff9900;
							border-radius: 20rpx;
							font-size: 24rpx;
							padding: 2rpx 18rpx;
							margin-left: 16rpx;
						}
						.status-tag {
							border-radius: 20rpx;
							font-size: 24rpx;
							padding: 2rpx 18rpx;
							margin-left: 16rpx;
						}
						.status-pending {
							background: #ff9500;
							color: #fff;
						}
						.status-approved {
							background: #07c160;
							color: #fff;
						}
						.status-rejected {
							background: #e23d3d;
							color: #fff;
						}
                    }

                    .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>