You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
231 lines
4.5 KiB
231 lines
4.5 KiB
<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"
|
|
style="justify-content: space-between;align-items: center;flex-direction: row;">
|
|
<view class="">
|
|
<text class="required">*</text>
|
|
<text class="label">是否付费</text>
|
|
</view>
|
|
<uv-switch v-model="value" size="70rpx"></uv-switch>
|
|
</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,
|
|
value : false,
|
|
}
|
|
},
|
|
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
|
|
|
|
this.value = res.isPay == 'Y'
|
|
})
|
|
},
|
|
async onPublish(status) {
|
|
|
|
let data = {
|
|
bookId : this.id,
|
|
num : this.form.details.length,
|
|
title : this.form.title,
|
|
details : this.form.details,
|
|
isPay : this.value ? 'Y' : 'N'
|
|
}
|
|
|
|
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;
|
|
padding-bottom: 200rpx;
|
|
/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>
|