novel-front-app/components/novel/workItem.vue

<template>
	<view class="work-item" @click="handleClick">
		<view class="cover-wrapper">
			<image class="cover" :src="work.cover || 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain'" mode="aspectFill"></image>
			<view class="tag original" v-if="work.isOriginal">原创</view>
		</view>

		<view class="info">
			<text class="title">{{work.title || '兽王进化：从被小萝莉召唤开始'}}</text>

			<view class="readers">
				<text class="readers-count">达成成就人：{{work.readers || '8721'}}</text>
			</view>

            <!-- 状态标签 -->
            <view class="status-wrapper">
                <view class="status-tag" :class="statusClass">
                    {{statusText}}
                </view>
                
                <!-- 发布状态标签 -->
                <view class="publish-status" v-if="work.publishStatus">
                    <text>{{work.publishStatus || '发布审核中'}}</text>
                </view>
            </view>
            
		</view>
		
		<!-- 添加右箭头图标 -->
		<!-- <text class="iconfont icon-arrow">&#xe65f;</text> -->
	</view>
</template>

<script>
	export default {
		props: {
			work: {
				type: Object,
				default: () => ({
					title: '兽王进化：从被小萝莉召唤开始',
					cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
					readers: '8721',
					status: 'ongoing',
					publishStatus: '发布审核中',
					isOriginal: true
				})
			},
			isManaging: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			statusClass() {
				const statusMap = {
					'draft': 'new',
					'ongoing': 'ongoing',
					'completed': 'completed'
				};
				return statusMap[this.work.status] || 'ongoing';
			},
			statusText() {
				const textMap = {
					'draft': '新建',
					'ongoing': '连载中',
					'completed': '已完结'
				};
				return textMap[this.work.status] || '连载中';
			}
		},
		methods: {
			handleClick() {
				if (this.isManaging) {
					this.$emit('click');
					return;
				}
				// 跳转到章节列表页面
				uni.navigateTo({
					url: '/pages_order/novel/chapterList'
				});
			},
			handleDelete() {
				this.$emit('delete');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-item {
		width: 100%;
		display: flex;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
		align-items: center;
		
		.cover-wrapper {
			position: relative;
			width: 170rpx;
			height: 230rpx;
			margin-right: 20rpx;
			border-radius: 6rpx;
			overflow: hidden;
			flex-shrink: 0;
			
			.cover {
				width: 100%;
				height: 100%;
			}
			
			.tag {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 20rpx;
				color: #fff;
				padding: 2rpx 8rpx;
				
				&.original {
					background-color: #ffa502;
				}
			}
		}
		
		.info {
			flex: 1;
            display: flex;
            flex-direction: column;
			
			.title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 10rpx;
				line-height: 1.3;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			
			.readers {
				margin-top: 20rpx;
				
				.readers-count {
					font-size: 24rpx;
					color: #999;
				}
			}

            .status-wrapper {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                margin-top: 20rpx;

                .status-tag {
                    font-size: 22rpx;
                    padding: 4rpx 16rpx;
                    border-radius: 20rpx;
                    text-align: center;
                    width: fit-content;
                    
                    &.new {
                        background-color: #e8f3ff;
                        color: #5cadff;
                    }
                    
                    &.ongoing {
                        background-color: #fff7e6;
                        color: #ff9900;
                    }
                    
                    &.completed {
                        background-color: #f0f9eb;
                        color: #67c23a;
                    }
                }
                
                .publish-status {
                    text {
                        font-size: 22rpx;
                        color: #666;
                        background-color: #f5f5f5;
                        padding: 4rpx 16rpx;
                        border-radius: 20rpx;
                        white-space: nowrap;
                    }
                }
            }
		}
		
		.icon-arrow {
			color: #999;
			font-size: 16px;
			margin-left: 10rpx;
		}
	}
</style>