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

<template>
	<view class="page">
		<navbar title="新建章节" leftClick @leftClick="$utils.navigateBack" />
		<view class="form-box top-fixed">
			<view class="form-item">
				<text class="required">*</text>
				<text class="label">章节名称</text>
				<input class="input" type="text" placeholder='请输入章节号与章节名。例如："第十章天降奇缘"' v-model="form.title" />
			</view>
			<view class="form-item">
				<text class="required">*</text>
				<text class="label">章节内容</text>
				<textarea class="textarea" placeholder="请输入章节内容" v-model="form.content" />
			</view>
		</view>
		<view class="footer-btns">
			<button class="btn save-btn" @click="onSave">保存</button>
			<button class="btn publish-btn" @click="onPublish">发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formats: {},
				form: {
					title: '',
					content: '',
				},
			}
		},
		onLoad() {
		},
		methods: {
			onInput(e){
				console.log(e.detail);
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				uni.showModal({
					title: '清空编辑器',
					content: '确定清空编辑器全部内容？',
					success: res => {
						if (res.confirm) {
							this.editorCtx.clear({
								success: function(res) {
									console.log("clear success")
								}
							})
						}
					}
				})
			},
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			insertDate() {
				const date = new Date()
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				this.editorCtx.insertText({
					text: formatDate
				})
			},
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			},
			onSave() {
				// 保存逻辑
				const newChapter = {
					title: this.form.title,
					content: this.form.content
				};
				// 获取原有章节
				let chapters = uni.getStorageSync('chapters') || [];
				chapters.push(newChapter);
				uni.setStorageSync('chapters', chapters);
				// 跳转并传递参数
				uni.redirectTo({
					url: '/pages_order/novel/chapterList?fromSave=1'
				});
			},
			onPublish() {
				// 发布逻辑
				const newChapter = {
					title: this.form.title,
					content: this.form.content,
					time: Date.now()
				};
				// 保存到已发布章节
				let publishedChapters = uni.getStorageSync('publishedChapters') || [];
				publishedChapters.push(newChapter);
				uni.setStorageSync('publishedChapters', publishedChapters);
				// 跳转到bookshelf作品tab并弹窗
				uni.redirectTo({
					url: '/pages/index/bookshelf?fromPublish=1'
				});
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	margin-top: -920rpx;
    margin-left: 30rpx;
	margin-right: 30rpx;
	min-height: 100vh;
	background: #f7f8fa;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.form-box {
	background: #fff;
	margin: 0;
	padding: 0 32rpx 0 32rpx;
	border-radius: 0;
	position: relative;
}
.top-fixed {
	margin-top: 0;
}
.form-item {
	display: flex;
	flex-direction: column;
	margin-top: 32rpx;
	position: relative;
}
.label {
	font-size: 28rpx;
	color: #222;
	margin-bottom: 12rpx;
	margin-left: 32rpx;
}
.required {
	color: #f44;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 32rpx;
}
.input {
	border: none;
	border-bottom: 1rpx solid #eee;
	font-size: 28rpx;
	padding: 16rpx 0;
	background: transparent;
}
.textarea {
	min-height: 180rpx;
	border: none;
	border-bottom: 1rpx solid #eee;
	font-size: 28rpx;
	padding: 16rpx 0;
	background: transparent;
	resize: none;
}
.footer-btns {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	background: #fff;
	display: flex;
	justify-content: space-between;
	padding: 24rpx 48rpx 32rpx 48rpx;
	box-sizing: border-box;
	z-index: 10;
	box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.03);
}
.btn {
	flex: 1;
	height: 80rpx;
	font-size: 32rpx;
	border-radius: 40rpx;
	margin: 0 12rpx;
	font-weight: 500;
}
.save-btn {
	background: #fff;
	color: #0a225f;
	border: 2rpx solid #0a225f;
}
.publish-btn {
	background: #0a225f;
	color: #fff;
	border: none;
}
</style>