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

<template>
	<view class="book-status"
	:class="statusClass">
		{{ statusText }}
	</view>
</template>

<script>
	export default {
		props : ['status'],
		computed: {
			statusClass() {
				const statusMap = {
					'0': 'ongoing',
					'1': 'completed'
				};
				return statusMap[this.status] || 'ongoing';
			},
			statusText() {
				const textMap = {
					// '0': '新建',
					'0': '连载中',
					'1': '已完结'
				};
				return textMap[this.status] || '连载中';
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.book-status {
		font-size: 20rpx;
		color: #67C23A;
		background-color: rgba(103, 194, 58, 0.1);
		border-radius: 20rpx;
		padding: 4rpx 12rpx;
		&.ongoing{
			color: #ffa502;
			background-color: #ffa50223;
		}
	}
</style>