- <template>
- <view class="chapter-container">
-
- <navbar title="章节列表" leftClick @leftClick="$utils.navigateBack"/>
-
- <view class="tabs">
- <uv-tabs :list="tabs"
- :activeStyle="{color : '#0A2463', fontWeight : 600}"
- lineColor="#0A2463"
- :inactiveStyle="{color: '#0A2463'}"
- lineHeight="8rpx"
- lineWidth="50rpx"
- :scrollable="false"
- :current="activeTab"
- @click="clickTabs"></uv-tabs>
- </view>
-
- <view class="box">
- <view class="draft-header">
- <text class="draft-title">{{ activeTab === 0 ? '草稿箱章节' : '已发布章节' }}</text>
- <text class="delete-btn" @click="reverseList">{{ queryParams.reverse ? '正序' : '倒序' }}</text>
- </view>
- <view class="chapter-list">
-
- <!-- 章节列表 -->
- <uv-swipe-action>
- <uv-swipe-action-item
- v-for="(chapter, index) in list"
- :key="chapter.id"
- :options="swipeOptions"
- @click="deleteChapter(chapter, index)"
- >
- <view
- class="chapter-item"
- @click="editChapter(chapter)"
- >
- <view class="chapter-info">
- <text class="chapter-title">章节名</text>
- <text class="chapter-number">
-
- {{ chapter.title }}
-
- <text v-if="chapter.isPay == 'Y'" class="vip-tag theme-transition">付费</text>
- </text>
- </view>
- <uv-icon name="arrow-right" color="#999" size="28"></uv-icon>
- </view>
- </uv-swipe-action-item>
- </uv-swipe-action>
-
- <!-- 空状态 -->
- <view style="padding-bottom: 60rpx;"
- v-if="list.length === 0" >
- <uv-empty
- :text="activeTab === 0 ? '还没有草稿章节' : '还没有发布章节'"
- :icon="activeTab === 0 ? 'edit-pen' : 'list'"
- iconSize="60"
- iconColor="#ccc"
- textColor="#999"
- textSize="28"
- mode="data"
- />
- </view>
- </view>
- </view>
-
- <view class="bottom-actions">
- <button class="btn-settings" @click="handleSettings">设置作品</button>
- <button class="btn-new" @click="addNewChapter">新建章节</button>
- </view>
- </view>
- </template>
-
- <script>
- import mixinsList from '@/mixins/list.js'
- export default {
- mixins: [mixinsList],
- components: {
- },
- data() {
- return {
- tabs : [
- {
- name : '草稿箱',
- index : 1
- },
- {
- name : '已发布',
- index : 0
- }
- ],
- activeTab: 0,
- mixinsListApi : 'getMyShopNovelPage',
- id : 0,
- swipeOptions: [{
- text: '删除',
- style: {
- backgroundColor: '#f56c6c'
- }
- }]
- }
- },
- onLoad(options) {
-
- this.queryParams.reverse = 0
-
- // 根据tab参数决定初始tab
- if (options.activeTab) {
- this.activeTab = options.activeTab;
- }
-
- if(options.id){
- this.queryParams.bookId = options.id
- this.id = options.id
- this.queryParams.status = this.activeTab
- }
- },
- methods: {
- clickTabs(tab) {
- this.activeTab = tab.index;
- this.queryParams.status = this.activeTab
- this.list = []
- this.getData()
- },
- reverseList() {
- this.queryParams.reverse = [1, 0][this.queryParams.reverse]
- this.getData()
- },
- addNewChapter() {
- uni.navigateTo({
- url: '/pages_order/author/editor?id=' + this.id
- })
- },
- editChapter(chapter) {
- uni.navigateTo({
- url: '/pages_order/author/editor?cid=' + chapter.id + '&id=' + this.id
- })
- },
- handleSettings() {
- uni.navigateTo({
- url: '/pages_order/author/createNovel?id=' + this.id
- })
- },
- // 删除章节
- deleteChapter(chapter, index) {
- uni.showModal({
- title: '提示',
- content: `确定要删除章节"${chapter.title}"吗?`,
- success: async (res) => {
- if (res.confirm) {
- try {
- await this.$fetch('deleteMyNovel', {
- id: chapter.id
- })
-
- uni.showToast({
- title: '删除成功',
- icon: 'success'
- })
-
- // 重新获取列表数据
- this.getData()
- } catch (error) {
- uni.showToast({
- title: '删除失败',
- icon: 'none'
- })
- }
- }
- }
- })
- },
- deleteAll() {
- uni.showModal({
- title: '提示',
- content: '确定要删除所有草稿章节吗?',
- success: (res) => {
- if (res.confirm) {
- // 调用删除草稿API
- this.$api.deleteAllDrafts({bookId: this.id}).then(res => {
- if (res.code === 200) {
- this.$utils.showToast('删除成功')
- this.getData()
- }
- })
- }
- }
- })
- }
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .chapter-container {
- min-height: 100vh;
- background-color: #f7f7f7;
- padding-bottom: 70px;
-
- .tabs{
- background-color: #fff;
- }
-
- .box{
- background-color: #fff;
- margin: 50rpx 40rpx;
- border-radius: 20rpx;
-
- .draft-header {
- padding: 20rpx 40rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-bottom: 20rpx;
- border-bottom: 1px dashed #eee;
- margin-bottom: 10rpx;
-
- .draft-title {
- font-size: 30rpx;
- color: #000;
- font-weight: 900;
- }
-
- .delete-btn {
- font-size: 28rpx;
- color: #999;
- }
- }
-
- .chapter-list {
- .chapter-item {
- padding: 20rpx 40rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid #eee;
-
- .chapter-info {
- .chapter-title {
- font-size: 14px;
- color: #999;
- margin-bottom: 5px;
- display: block;
- }
-
- .chapter-number {
- font-size: 16px;
- color: #333;
- display: block;
- }
- .vip-tag {
- background: #ffe1b2;
- color: #ff9900;
- border-radius: 20rpx;
- font-size: 24rpx;
- padding: 2rpx 18rpx;
- margin-left: 16rpx;
- }
- }
-
- .icon-arrow {
- color: #999;
- font-size: 16px;
- }
- }
- }
- }
-
-
-
- .bottom-actions {
- padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- padding: 10px 15px;
- background: #fff;
- box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
-
- button {
- flex: 1;
- height: 40px;
- border-radius: 20px;
- font-size: 16px;
- margin: 0 5px;
-
- &.btn-settings {
- background: #fff;
- border: 1px solid #ddd;
- color: #333;
- }
-
- &.btn-new {
- background: #2b4acb;
- color: #fff;
- border: none;
- }
- }
- }
- }
- </style>
|