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

<template>
	<!-- 新建作品页面 -->
	<view class="create-novel">
		<navbar title="新建作品" 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 type="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>
					<input type="text" 
					disabled
					v-model="formData.type" placeholder="请输入"
					placeholder-class="input-placeholder" />
				</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" v-if="formData.id">
				<view class="section-title">书籍信息</view>
				<view class="form-item">
					<text class="label">书号</text>
					<text class="value">9999993339393</text>
				</view>
				<view class="form-item">
					<text class="label">总字数</text>
					<text class="value">99999999</text>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn" @click="submitForm">提交申请</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					Image: '',
					title: '',
					type: '1',
					details: '',
					status: '0' // 默认连载
				}
			}
		},
		methods: {
			// 选择封面
			chooseCover() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						
						this.$Oss.ossUpload(res.tempFilePaths[0])
						.then(url => {
							this.formData.Image = url
						})
						
					}
				})
			},

			// 提交表单
			async submitForm() {
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入作品名称',
						icon: 'none'
					})
					return
				}
				if (!this.formData.type) {
					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,
					type: this.formData.type,
					details: this.formData.details,
					status: this.formData.status,
				}
				
				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;

					&: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%;
						height: 80rpx;
						background-color: #F5F5F5;
						border-radius: 8rpx;
						padding: 20rpx;
						font-size: 28rpx;
						color: #333;
						box-sizing: border-box;
						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;
					}
				}
			}

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