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>
				<view class="textarea-container">
					<!-- <textarea class="textarea" 
					placeholder="请输入章节内容" 
					:maxlength="100000"
					v-model="form.details" /> -->
					<!-- <view class="toolbar">
						<view class="indent-btn" @tap="addIndent">缩进</view>
					</view> -->
					
					<uv-textarea v-model="form.details" 
					:maxlength="-1" 
					autoHeight 
					class="textarea"
					placeholder="请输入章节内容"></uv-textarea>
				</view>
			</view>
		</view>
		<view class="footer-btns">
			<button class="btn save-btn" @click="onPublish(0)">保存</button>
			<button class="btn publish-btn" @click="onPublish(1)">发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					title: '',
					details: '',
				},
				id : 0,
				cid : 0,
			}
		},
		onLoad({id, cid}) {
			this.id = id
			this.cid = cid || 0
            if(this.cid){
                this.getChapterDetail()
            }
		},
		methods: {
            getChapterDetail(){
                this.$fetch('getBookCatalogDetail', {
                    id: this.cid
                }).then(res => {
                    this.form.title = res.title
                    this.form.details = res.details
                })
            },
			async onPublish(status) {
				
				let data = {
					bookId : this.id,
					num : this.form.details.length,
					title : this.form.title,
					details : this.form.details,
				}
				
				if(this.cid){
					data.id = this.cid
				}
				
				data.status = status
				
				await this.$fetch('saveOrUpdateCatalog', data)
				
				uni.showToast({
					title: status ? '发布成功' : '保存成功'
				})
				
				setTimeout(uni.navigateBack, 800, -1)
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background: #f7f8fa;
		display: flex;
		flex-direction: column;
	}

	.form-box {
		background: #fff;
		margin: 0;
		padding: 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-container {
		position: relative;
        line-height: 50rpx;
		/deep/ .uv-textarea{
			min-height: 70vh;
			border: none !important;
			font-size: 28rpx;
			padding: 16rpx 0;
			background: transparent;
			resize: none;
			width: 100%;
		}
	}

	.textarea {
		min-height: 70vh;
		border: none;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		padding: 16rpx 0;
		background: transparent;
		resize: none;
		width: 100%;
	}
	
	.toolbar {
		display: flex;
		padding: 10rpx 0;
		margin-top: 10rpx;
	}
	
	.indent-btn {
		background: #eaeaea;
		color: #333;
		padding: 8rpx 20rpx;
		border-radius: 6rpx;
		font-size: 26rpx;
	}

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