novel-front-app/pages_order/author/createNovel.vue

<template>
	<!-- 新建作品页面 -->
	<view class="create-novel">
		<navbar :title="id ? '设置作品' : '新建作品'" leftClick @leftClick="$utils.navigateBack" />

		<view class="form-container">
			<!-- 封面信息 -->
			<view class="section">
				<view class="section-title">封面信息</view>
				<view class="upload-cover">
					<view class="sub-title">上传封面</view>
					<view class="cover-box" @click="chooseCover">
						<image v-if="formData.image" :src="formData.image" mode="aspectFill" class="cover-image">
						</image>
						<view v-else class="upload-placeholder">
							<text class="plus">+</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 作品信息 -->
			<view class="section">
				<view class="section-title">作品信息</view>
				<view class="form-item">
					<view style="display: flex;">
						<text class="required">*</text>
						<text class="label">作品名称</text>
					</view>
					<input shopClass="text" v-model="formData.name" placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>

				<view class="form-item">
					<view style="display: flex;">
						<text class="required">*</text>
						<text class="label">作品分类</text>
					</view>
					<view class="">
						<!-- 原有的picker方案 -->
						<!-- <view class="category-select" @click="showCategoryPicker = true">
							<text v-if="formData.shopClass" class="selected-category">{{selectedCategoryName}}</text>
							<text v-else class="placeholder">请选择</text>
						</view>
						
						<uv-picker
							:show="showCategoryPicker"
							:columns="[categoryList]"
							@confirm="confirmCategory"
							@cancel="showCategoryPicker = false"
						></uv-picker> -->

						<!-- 新的标签选择方案 -->
						<view class="category-tags">
							<view 
								v-for="(item, index) in categoryList" 
								:key="index"
								class="category-tag"
								:class="{ active: classList.includes(item.id) }"
								@click="selectCategory(item)"
							>
								{{item.title}}
							</view>
						</view>
					</view>
				</view>

				<view class="form-item">
					<view style="display: flex;">
						<text class="required">*</text>
						<text class="label">作品简介</text>
					</view>
					<textarea v-model="formData.details" placeholder="请输入" placeholder-class="input-placeholder"
						:maxlength="500"></textarea>
				</view>

				<view class="form-item">
					<view style="display: flex;">
						<text class="required">*</text>
						<text class="label">作品状态</text>
					</view>
					<view class="status-options">
						<view class="status-item" :class="{ active: formData.status == '0' }"
							@click="formData.status = '0'">
							<view class="radio-dot" :class="{ checked: formData.status == '0' }"></view>
							<text>连载</text>
						</view>
						<view class="status-item" :class="{ active: formData.status == '1' }"
							@click="formData.status = '1'">
							<view class="radio-dot" :class="{ checked: formData.status == '1' }"></view>
							<text>完结</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 书籍信息 -->
			<view class="section">
				<view class="section-title">书籍信息</view>
				<view class="form-item">
					<text class="label">书号</text>
					<text class="value">{{ formData.id || '_' }}</text>
				</view>
				<view class="form-item">
					<text class="label">总字数</text>
					<text class="value">{{ formData.bookSum || '_' }}</text>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn" @click="submitForm">{{ id ? '保存' : "提交申请" }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					image: '',
					name: '',
					shopClass: '',
					details: '',
					status: '0' // 默认连载
				},
				classList : [],
				id: 0,
				// showCategoryPicker: false,
				categoryList: [],
				// selectedCategoryName: ''
			}
		},
        onLoad(options) {
            if (options.id) {
                this.id = options.id
                this.getBookInfo()
            }
        },
        onShow() {
            this.getCategoryList()
        },
		methods: {

            getBookInfo() {
                this.$fetch('getBookDetail', {
                    id : this.id
                }).then(res => {
                    this.formData = res
					
					this.classList = res.shopClass ? res.shopClass.split(',') : []
                })
            },

			// 选择封面
			chooseCover() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						
						this.$Oss.ossUpload(res.tempFilePaths[0])
						.then(url => {
							this.formData.image = url
						})
						
					}
				})
			},

			// 获取分类列表
			async getCategoryList() {
				const data = await this.$fetch('getCategoryList')
				this.categoryList = data
			},
			
			// 选择分类
			selectCategory(item) {
				let index = this.classList.indexOf(item.id)
				if(index != -1){
					this.classList.splice(index, 1)
				}else{
					this.classList.push(item.id)
				}
			},

			// 提交表单
			async submitForm() {
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入作品名称',
						icon: 'none'
					})
					return
				}
				if (!this.formData.shopClass) {
					uni.showToast({
						title: '请选择作品分类',
						icon: 'none'
					})
					return
				}
				if (!this.formData.details) {
					uni.showToast({
						title: '请输入作品简介',
						icon: 'none'
					})
					return
				}

				// 构建作品数据
				const workData = {
					name: this.formData.name,
					image: this.formData.image,
					shopClass: this.classList.join(','),
					details: this.formData.details,
					status: this.formData.status || 0,
				}
				
				if(this.id){
					workData.id = this.id
				}
				
				await this.$fetch('saveOrUpdateBook', workData)

				// 延迟返回上一页
				setTimeout(() => {
					// 先保存当前要显示的标签
					uni.setStorageSync('activeBookshelfTab', 'work')

					// 返回上一页
					uni.navigateBack({
						delta: 1
					})
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	.create-novel {
		min-height: 100vh;
		background-color: #F8F8F8;

		.form-container {
			padding: 20rpx;

			.section {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 30rpx;
				}

				.upload-cover {
					.sub-title {
						font-size: 28rpx;
						color: #666;
						margin-bottom: 20rpx;
					}

					.cover-box {
						width: 200rpx;
						height: 266rpx;
						background-color: #F5F5F5;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;

						.cover-image {
							width: 100%;
							height: 100%;
						}

						.upload-placeholder {
							.plus {
								font-size: 60rpx;
								color: #999;
							}
						}
					}
				}

				.form-item {
					margin-bottom: 30rpx;
					position: relative;
					border-bottom: 1rpx solid #00000012;
					padding-bottom: 10rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.required {
						color: #FF0000;
						margin-right: 4rpx;
					}

					.label {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 16rpx;
						display: block;
					}

					input,
					textarea {
						width: 100%;
						border-radius: 8rpx;
						padding: 20rpx;
						font-size: 28rpx;
						color: #333;
						position: relative;
						z-index: 1;
					}

					textarea {
						height: 200rpx;
					}

					.input-placeholder {
						color: #999;
					}

					.status-options {
						display: flex;
						gap: 40rpx;

						.status-item {
							display: flex;
							align-items: center;
							gap: 10rpx;

							.radio-dot {
								width: 32rpx;
								height: 32rpx;
								border: 2rpx solid #999;
								border-radius: 50%;
								position: relative;

								&.checked {
									border-color: #001351;

									&::after {
										content: '';
										position: absolute;
										width: 20rpx;
										height: 20rpx;
										background-color: #001351;
										border-radius: 50%;
										left: 50%;
										top: 50%;
										transform: translate(-50%, -50%);
									}
								}
							}

							text {
								font-size: 28rpx;
								color: #333;
							}
						}
					}

					.value {
						font-size: 28rpx;
						color: #999;
					}

					.category-tags {
						display: flex;
						gap: 10rpx;

						.category-tag {
							padding: 8rpx 16rpx;
							background-color: #F5F5F5;
							border-radius: 8rpx;

							&.active {
								background-color: #001351;
								color: #FFFFFF;
							}
						}
					}
				}
			}

			.submit-btn {
				background-color: #001351;
				color: #FFFFFF;
				font-size: 32rpx;
				text-align: center;
				padding: 24rpx 0;
				border-radius: 12rpx;
				margin-top: 40rpx;

				&:active {
					opacity: 0.9;
				}
			}
		}
	}
</style>