14 changed files with 1979 additions and 62 deletions
Split View
Diff Options
-
+4 -2components/novel/newWorkItem.vue
-
+6 -1components/novel/novelItem.vue
-
+16 -2components/novel/workItem.vue
-
+18 -0pages.json
-
+160 -0pages/chapter/index.vue
-
+51 -43pages/index/bookshelf.vue
-
+6 -3pages/index/center.vue
-
+6 -11pages/index/index.vue
-
+137 -0pages_order/novel/Allannouncements.vue
-
+131 -0pages_order/novel/announcement.vue
-
+190 -0pages_order/novel/chapterList.vue
-
+344 -0pages_order/novel/createNovel.vue
-
+748 -0pages_order/novel/novelDetail.vue
-
+162 -0pages_order/novel/vote.vue
+ 4
- 2
components/novel/newWorkItem.vue
View File
+ 6
- 1
components/novel/novelItem.vue
View File
+ 16
- 2
components/novel/workItem.vue
View File
+ 18
- 0
pages.json
View File
+ 160
- 0
pages/chapter/index.vue
View File
| @ -0,0 +1,160 @@ | |||
| <template> | |||
| <view class="chapter-container"> | |||
| <view class="header"> | |||
| <view class="nav-bar"> | |||
| <view class="back" @click="goBack"> | |||
| <text class="iconfont icon-back"></text> | |||
| </view> | |||
| <view class="tabs"> | |||
| <view class="tab active">草稿箱</view> | |||
| <view class="tab">已发布</view> | |||
| </view> | |||
| <view class="more"> | |||
| <text class="iconfont"></text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="chapter-list"> | |||
| <view class="chapter-item" v-for="(chapter, index) in chapters" :key="index"> | |||
| <view class="chapter-info"> | |||
| <text class="chapter-title">章节名</text> | |||
| <text class="chapter-number">第{{index + 1}}章</text> | |||
| </view> | |||
| <text class="iconfont icon-arrow"></text> | |||
| </view> | |||
| </view> | |||
| <view class="bottom-actions"> | |||
| <button class="btn-settings">设置作品</button> | |||
| <button class="btn-new" @click="addNewChapter">新建章节</button> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| chapters: Array(8).fill({}) // 模拟8个章节数据 | |||
| } | |||
| }, | |||
| methods: { | |||
| goBack() { | |||
| uni.navigateBack() | |||
| }, | |||
| addNewChapter() { | |||
| // 添加新章节的逻辑 | |||
| uni.showToast({ | |||
| title: '新建章节', | |||
| icon: 'none' | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .chapter-container { | |||
| min-height: 100vh; | |||
| background-color: #fff; | |||
| .header { | |||
| background: #fff; | |||
| padding-top: var(--status-bar-height); | |||
| .nav-bar { | |||
| height: 44px; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| padding: 0 15px; | |||
| .back { | |||
| padding: 5px; | |||
| .icon-back { | |||
| font-size: 20px; | |||
| } | |||
| } | |||
| .tabs { | |||
| display: flex; | |||
| .tab { | |||
| padding: 0 15px; | |||
| font-size: 16px; | |||
| color: #666; | |||
| &.active { | |||
| color: #000; | |||
| font-weight: bold; | |||
| } | |||
| } | |||
| } | |||
| .more { | |||
| padding: 5px; | |||
| } | |||
| } | |||
| } | |||
| .chapter-list { | |||
| padding: 0 15px; | |||
| .chapter-item { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| padding: 15px 0; | |||
| border-bottom: 1px solid #eee; | |||
| .chapter-info { | |||
| .chapter-title { | |||
| font-size: 14px; | |||
| color: #999; | |||
| margin-bottom: 5px; | |||
| } | |||
| .chapter-number { | |||
| font-size: 16px; | |||
| color: #333; | |||
| } | |||
| } | |||
| .icon-arrow { | |||
| color: #999; | |||
| font-size: 16px; | |||
| } | |||
| } | |||
| } | |||
| .bottom-actions { | |||
| 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> | |||
+ 51
- 43
pages/index/bookshelf.vue
View File
+ 6
- 3
pages/index/center.vue
View File
+ 6
- 11
pages/index/index.vue
View File
+ 137
- 0
pages_order/novel/Allannouncements.vue
View File
| @ -0,0 +1,137 @@ | |||
| <template> | |||
| <view class="announcements-container"> | |||
| <uv-navbar | |||
| title="全部公告" | |||
| :autoBack="true" | |||
| fixed | |||
| placeholder | |||
| titleStyle="color: #333; font-weight: 500;" | |||
| :border="false" | |||
| ></uv-navbar> | |||
| <view class="announcements-list"> | |||
| <view | |||
| class="announcement-item" | |||
| v-for="(item, index) in announcements" | |||
| :key="index" | |||
| @click="viewAnnouncement(item)" | |||
| > | |||
| <view class="item-left"> | |||
| <text class="tag">通讯</text> | |||
| <text class="title">{{ item.title }}</text> | |||
| </view> | |||
| <view class="item-right"> | |||
| <uv-icon name="arrow-right" color="#C8C8C8" size="28rpx"></uv-icon> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| components: { | |||
| 'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue') | |||
| }, | |||
| data() { | |||
| return { | |||
| announcements: [ | |||
| { | |||
| id: 1, | |||
| title: '2025年2月平台福利活动拟获奖作品公示', | |||
| type: '通讯' | |||
| }, | |||
| { | |||
| id: 2, | |||
| title: '2025年2月平台福利活动拟获奖作品公示', | |||
| type: '通讯' | |||
| }, | |||
| { | |||
| id: 3, | |||
| title: '2025年2月平台福利活动拟获奖作品公示', | |||
| type: '通讯' | |||
| }, | |||
| { | |||
| id: 4, | |||
| title: '2025年2月平台福利活动拟获奖作品公示', | |||
| type: '通讯' | |||
| }, | |||
| { | |||
| id: 5, | |||
| title: '2025年2月平台福利活动拟获奖作品公示', | |||
| type: '通讯' | |||
| }, | |||
| { | |||
| id: 6, | |||
| title: '2025年2月平台福利活动拟获奖作品公示', | |||
| type: '通讯' | |||
| }, | |||
| { | |||
| id: 7, | |||
| title: '2025年2月平台福利活动拟获奖作品公示', | |||
| type: '通讯' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| methods: { | |||
| viewAnnouncement(item) { | |||
| uni.navigateTo({ | |||
| url: `/pages_order/novel/announcement?id=${item.id}` | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| .announcements-container { | |||
| min-height: 100vh; | |||
| background-color: #F8F8F8; | |||
| .announcements-list { | |||
| padding: 20rpx; | |||
| .announcement-item { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| background-color: #FFFFFF; | |||
| padding: 30rpx; | |||
| margin-bottom: 20rpx; | |||
| border-radius: 12rpx; | |||
| .item-left { | |||
| flex: 1; | |||
| margin-right: 20rpx; | |||
| .tag { | |||
| display: inline-block; | |||
| font-size: 24rpx; | |||
| color: #666666; | |||
| background-color: #F5F5F5; | |||
| padding: 4rpx 12rpx; | |||
| border-radius: 6rpx; | |||
| margin-bottom: 16rpx; | |||
| } | |||
| .title { | |||
| display: block; | |||
| font-size: 28rpx; | |||
| color: #333333; | |||
| line-height: 1.4; | |||
| } | |||
| } | |||
| .item-right { | |||
| display: flex; | |||
| align-items: center; | |||
| } | |||
| &:active { | |||
| background-color: #F9F9F9; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 131
- 0
pages_order/novel/announcement.vue
View File
| @ -0,0 +1,131 @@ | |||
| <template> | |||
| <view class="announcement-container"> | |||
| <uv-navbar | |||
| title="公告详情" | |||
| :autoBack="true" | |||
| fixed | |||
| placeholder | |||
| titleStyle="color: #333; font-weight: 500;" | |||
| :border="false" | |||
| ></uv-navbar> | |||
| <view class="header"> | |||
| <text class="title">2025年2月平台福利活动拟获奖作品公示</text> | |||
| <text class="date">岁序更替，华章日新。2025年，平台福利内容建设的实施进展，载誉前行。我们秉持"精品为本，重磅发布"的理念，现面向全体作者，重磅发布2025年度长篇网文作家福利，上线主新潮当中文网作家专属福利：全年奖、半年奖、季度奖、月度奖，总计奖金超过百万元。现将2025年2月，平台各项福利活动拟获奖作品公示如下：</text> | |||
| </view> | |||
| <view class="award-section"> | |||
| <view class="award-item"> | |||
| <text class="award-title">长篇网文</text> | |||
| <view class="award-content"> | |||
| <view class="sub-award"> | |||
| <text class="sub-title">• 优质加更奖：</text> | |||
| <text class="detail">拟获奖作品156本，共发放奖金41.5万元，查看拟获奖名单请点击：</text> | |||
| <text class="link">优质加更奖拟获奖名单</text> | |||
| </view> | |||
| <view class="sub-award"> | |||
| <text class="sub-title">• 新书扶更奖：</text> | |||
| <text class="detail">拟获奖作品5574本，共发放奖金20万元，查看拟获奖名单请点击：</text> | |||
| <text class="link">新书扶更奖拟获奖名单</text> | |||
| </view> | |||
| <view class="sub-award"> | |||
| <text class="sub-title">• 拉新激励奖：</text> | |||
| <text class="detail">拟获奖作品50部，总计奖金65万，查看拟获奖名单请点击：</text> | |||
| <text class="link">2月拉新激励奖</text> | |||
| </view> | |||
| <view class="sub-award"> | |||
| <text class="sub-title">• 星火计划奖励：</text> | |||
| <text class="detail">拟获奖作品4178部，总计奖金55万，查看拟获奖名单请点击：</text> | |||
| <text class="link">2月星火计划奖励名单</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="award-item"> | |||
| <text class="award-title">完结专场</text> | |||
| <view class="award-content"> | |||
| <view class="sub-award"> | |||
| <text class="sub-title">• 脱洞盛宴征文活动：</text> | |||
| <text class="detail">月度脱洞专题：拟获奖作品1260部，总计奖金45万，查看拟获奖名单请点击：</text> | |||
| <text class="link">2月完结专题奖励名单</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| components: { | |||
| 'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue') | |||
| }, | |||
| data() { | |||
| return {} | |||
| }, | |||
| methods: { | |||
| // 可以添加点击链接跳转等方法 | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| .announcement-container { | |||
| padding: 30rpx; | |||
| background: #fff; | |||
| .header { | |||
| margin-bottom: 40rpx; | |||
| .title { | |||
| font-size: 36rpx; | |||
| font-weight: bold; | |||
| color: #333; | |||
| margin-bottom: 20rpx; | |||
| display: block; | |||
| } | |||
| .date { | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| line-height: 1.6; | |||
| } | |||
| } | |||
| .award-section { | |||
| .award-item { | |||
| margin-bottom: 40rpx; | |||
| .award-title { | |||
| font-size: 32rpx; | |||
| font-weight: bold; | |||
| color: #333; | |||
| margin-bottom: 20rpx; | |||
| display: block; | |||
| } | |||
| .award-content { | |||
| .sub-award { | |||
| margin-bottom: 20rpx; | |||
| .sub-title { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| font-weight: 500; | |||
| } | |||
| .detail { | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| } | |||
| .link { | |||
| color: #007AFF; | |||
| text-decoration: underline; | |||
| font-size: 28rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 190
- 0
pages_order/novel/chapterList.vue
View File
| @ -0,0 +1,190 @@ | |||
| <template> | |||
| <view class="chapter-container"> | |||
| <view class="header"> | |||
| <view class="nav-bar"> | |||
| <view class="back" @click="goBack"> | |||
| <text class="iconfont icon-back"></text> | |||
| </view> | |||
| <view class="tabs"> | |||
| <view class="tab" :class="{ active: activeTab === 'draft' }" @click="switchTab('draft')">草稿箱</view> | |||
| <view class="tab" :class="{ active: activeTab === 'published' }" @click="switchTab('published')">已发布</view> | |||
| </view> | |||
| <view class="more"> | |||
| <text class="iconfont"></text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="chapter-list"> | |||
| <view class="chapter-item" v-for="(chapter, index) in chapters" :key="index" @click="editChapter(chapter)"> | |||
| <view class="chapter-info"> | |||
| <text class="chapter-title">章节名</text> | |||
| <text class="chapter-number">第{{index + 1}}章</text> | |||
| </view> | |||
| <text class="iconfont icon-arrow"></text> | |||
| </view> | |||
| </view> | |||
| <view class="bottom-actions"> | |||
| <button class="btn-settings" @click="handleSettings">设置作品</button> | |||
| <button class="btn-new" @click="addNewChapter">新建章节</button> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| activeTab: 'draft', | |||
| chapters: Array(8).fill({}) // 模拟8个章节数据 | |||
| } | |||
| }, | |||
| methods: { | |||
| goBack() { | |||
| uni.navigateBack() | |||
| }, | |||
| switchTab(tab) { | |||
| this.activeTab = tab | |||
| // 根据tab加载不同的章节列表 | |||
| }, | |||
| addNewChapter() { | |||
| uni.navigateTo({ | |||
| url: '/pages_order/author/editor' | |||
| }) | |||
| }, | |||
| editChapter(chapter) { | |||
| uni.navigateTo({ | |||
| url: '/pages_order/author/editor?id=' + chapter.id | |||
| }) | |||
| }, | |||
| handleSettings() { | |||
| uni.navigateTo({ | |||
| url: '/pages_order/novel/createNovel?type=edit' | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .chapter-container { | |||
| min-height: 100vh; | |||
| background-color: #fff; | |||
| padding-bottom: 70px; | |||
| .header { | |||
| background: #fff; | |||
| padding-top: var(--status-bar-height); | |||
| .nav-bar { | |||
| height: 44px; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| padding: 0 15px; | |||
| .back { | |||
| padding: 5px; | |||
| .icon-back { | |||
| font-size: 20px; | |||
| } | |||
| } | |||
| .tabs { | |||
| display: flex; | |||
| .tab { | |||
| padding: 0 15px; | |||
| font-size: 16px; | |||
| color: #666; | |||
| position: relative; | |||
| &.active { | |||
| color: #000; | |||
| font-weight: bold; | |||
| &::after { | |||
| content: ''; | |||
| position: absolute; | |||
| bottom: -4px; | |||
| left: 50%; | |||
| transform: translateX(-50%); | |||
| width: 20px; | |||
| height: 2px; | |||
| background: #2b4acb; | |||
| border-radius: 1px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .more { | |||
| padding: 5px; | |||
| } | |||
| } | |||
| } | |||
| .chapter-list { | |||
| padding: 0 15px; | |||
| .chapter-item { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| padding: 15px 0; | |||
| 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; | |||
| } | |||
| } | |||
| .icon-arrow { | |||
| color: #999; | |||
| font-size: 16px; | |||
| } | |||
| } | |||
| } | |||
| .bottom-actions { | |||
| 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> | |||
+ 344
- 0
pages_order/novel/createNovel.vue
View File
| @ -0,0 +1,344 @@ | |||
| <template> | |||
| <!-- 新建作品页面 --> | |||
| <view class="create-novel"> | |||
| <uv-navbar | |||
| title="新建作品" | |||
| :autoBack="true" | |||
| fixed | |||
| placeholder | |||
| titleStyle="color: #333; font-weight: 500;" | |||
| :border="false" | |||
| ></uv-navbar> | |||
| <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.cover" :src="formData.cover" 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"> | |||
| <text class="required">*</text> | |||
| <text class="label">作品名称</text> | |||
| <input | |||
| type="text" | |||
| v-model="formData.title" | |||
| placeholder="请输入" | |||
| placeholder-class="input-placeholder" | |||
| /> | |||
| </view> | |||
| <view class="form-item"> | |||
| <text class="required">*</text> | |||
| <text class="label">作品类型</text> | |||
| <input | |||
| type="text" | |||
| v-model="formData.type" | |||
| placeholder="请输入" | |||
| placeholder-class="input-placeholder" | |||
| /> | |||
| </view> | |||
| <view class="form-item"> | |||
| <text class="required">*</text> | |||
| <text class="label">作品简介</text> | |||
| <textarea | |||
| v-model="formData.description" | |||
| placeholder="请输入" | |||
| placeholder-class="input-placeholder" | |||
| :maxlength="500" | |||
| ></textarea> | |||
| </view> | |||
| <view class="form-item"> | |||
| <text class="required">*</text> | |||
| <text class="label">作品状态</text> | |||
| <view class="status-options"> | |||
| <view | |||
| class="status-item" | |||
| :class="{ active: formData.status === 'serial' }" | |||
| @click="formData.status = 'serial'" | |||
| > | |||
| <view class="radio-dot" :class="{ checked: formData.status === 'serial' }"></view> | |||
| <text>连载</text> | |||
| </view> | |||
| <view | |||
| class="status-item" | |||
| :class="{ active: formData.status === 'completed' }" | |||
| @click="formData.status = 'completed'" | |||
| > | |||
| <view class="radio-dot" :class="{ checked: formData.status === 'completed' }"></view> | |||
| <text>完结</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 书籍信息 --> | |||
| <view class="section"> | |||
| <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 { | |||
| components: { | |||
| 'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue') | |||
| }, | |||
| data() { | |||
| return { | |||
| formData: { | |||
| cover: '', | |||
| title: '', | |||
| type: '', | |||
| description: '', | |||
| status: 'serial' // 默认连载 | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| // 选择封面 | |||
| chooseCover() { | |||
| uni.chooseImage({ | |||
| count: 1, | |||
| success: (res) => { | |||
| this.formData.cover = res.tempFilePaths[0] | |||
| } | |||
| }) | |||
| }, | |||
| // 提交表单 | |||
| submitForm() { | |||
| if (!this.formData.title) { | |||
| uni.showToast({ | |||
| title: '请输入作品名称', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| if (!this.formData.type) { | |||
| uni.showToast({ | |||
| title: '请输入作品类型', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| if (!this.formData.description) { | |||
| uni.showToast({ | |||
| title: '请输入作品简介', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| // 构建作品数据 | |||
| const workData = { | |||
| id: Date.now().toString(), | |||
| title: this.formData.title, | |||
| cover: this.formData.cover || 'https://bookcover.yuewen.com/qdbimg/349573/1033014772/150.webp', | |||
| readers: '8721', | |||
| status: 'ongoing', | |||
| publishStatus: '发布审核中', | |||
| isOriginal: true | |||
| } | |||
| // 保存到全局状态 | |||
| getApp().globalData.submittedWork = workData | |||
| // 设置需要显示提交成功提示的标记 | |||
| getApp().globalData.showSubmitSuccess = true | |||
| // 延迟返回上一页 | |||
| 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> | |||
+ 748
- 0
pages_order/novel/novelDetail.vue
View File
| @ -0,0 +1,748 @@ | |||
| <template> | |||
| <!-- 小说详情页面 --> | |||
| <view class="novel-detail"> | |||
| <!-- 顶部返回导航 --> | |||
| <navber></navber> | |||
| <!-- 小说基本信息 --> | |||
| <view class="novel-info"> | |||
| <view class="novel-cover"> | |||
| <image :src="novelData.coverUrl" mode="aspectFill"></image> | |||
| </view> | |||
| <view class="novel-basic"> | |||
| <text class="title">{{ novelData.title }}</text> | |||
| <view class="author-line"> | |||
| <text class="label">作者：</text> | |||
| <text class="author">{{ novelData.author }}</text> | |||
| </view> | |||
| <view class="status-line"> | |||
| <text class="label">完结：</text> | |||
| <text class="status">{{ novelData.status }}</text> | |||
| </view> | |||
| <view class="score-line"> | |||
| <text class="score">{{ novelData.score || 2814}}</text> | |||
| <text class="score-label">作者累计亲密度值</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 推荐票数显示 --> | |||
| <view class="recommendation-section"> | |||
| <view class="rec-left"> | |||
| <text class="rec-count">2814</text> | |||
| <text class="rec-label">推荐票数</text> | |||
| </view> | |||
| <view class="rec-divider"></view> | |||
| <view class="rec-right"> | |||
| <button class="recommend-btn" @click="recommendNovel"> | |||
| <text class="btn-icon">📑</text> | |||
| 投推荐票 | |||
| </button> | |||
| </view> | |||
| </view> | |||
| <!-- 阅读和收藏按钮 --> | |||
| <!-- 我的等级 --> | |||
| <view class="user-level"> | |||
| <view class="level-left"> | |||
| <view class="level-title"> | |||
| <text class="title-icon">👑</text> | |||
| <text>我的等级</text> | |||
| </view> | |||
| <view class="level-info"> | |||
| <image class="user-avatar" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> | |||
| <view class="user-details"> | |||
| <text class="username">周海</text> | |||
| <view class="user-score"> | |||
| <text class="score-value">6785452</text> | |||
| <text class="score-label">亲密值</text> | |||
| </view> | |||
| <text class="user-role">护书使者 五级</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="level-right"> | |||
| <view class="rank-btn"> | |||
| <image class="rank-icon" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFit"></image> | |||
| <text>读者榜单</text> | |||
| <text class="check-text">点击查看</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 小说简介 --> | |||
| <view class="novel-intro"> | |||
| <view class="intro-title"> | |||
| <text>简介：</text> | |||
| </view> | |||
| <view class="intro-content"> | |||
| <text>这游戏也太真实了吧！</text> | |||
| <text>搬砖、跑腿、捡垃圾、送快递。......公司最多能让你体会到996的艰辛，在这里你能体会到超级加倍的007。</text> | |||
| <text>好了，不废话了，伟大的管理者大人嘛就去搬砖了。那位大人说了，只要我们努力献上自己的肝，下个月他又能换一套全新的动力甲，到时候候带我们开全新的地图，去广阔的废土捡更多的垃圾！</text> | |||
| <text>穿越到废土世界的基光发现，自己解锁了游戏所系统，能够从平行世界召唤名为"玩家"的生物。</text> | |||
| </view> | |||
| </view> | |||
| <!-- 目录 --> | |||
| <view class="novel-catalog"> | |||
| <view class="catalog-header"> | |||
| <view class="catalog-title"> | |||
| <text class="title-icon">📖</text> | |||
| <text>目录</text> | |||
| </view> | |||
| <view class="chapter-nav"> | |||
| <text class="current-chapter">第九集 - 高去与归来</text> | |||
| <text class="nav-arrow">></text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 书评区域 --> | |||
| <view class="comments-section"> | |||
| <view class="comments-header"> | |||
| <view class="header-left"> | |||
| <text class="title-icon">📝</text> | |||
| <text>书评</text> | |||
| </view> | |||
| <view class="header-right"> | |||
| <text @click="goToWriteReview">写书评</text> | |||
| </view> | |||
| </view> | |||
| <view class="comment-list"> | |||
| <view class="comment-item"> | |||
| <view class="comment-header"> | |||
| <image class="avatar" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> | |||
| <text class="username">方香橙</text> | |||
| </view> | |||
| <view class="comment-body"> | |||
| <text class="content-text">我是本书的作者方香橙，这是一本甜文爽文哒！请放心入坑，五星好评！女主又美有个性可爱，绝对不圣母，不傻白！男主身心干净深情独宠媳妇儿一个人...</text> | |||
| <view class="comment-footer"> | |||
| <text class="comment-time">2024.07.09</text> | |||
| <view class="comment-likes"> | |||
| <text class="like-icon">💬</text> | |||
| <text class="like-count">17</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="comment-item"> | |||
| <view class="comment-header"> | |||
| <image class="avatar" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> | |||
| <text class="username">战斗世界</text> | |||
| </view> | |||
| <view class="comment-body"> | |||
| <text class="content-text">这本小说了创意了雄天霸业奇新颖深刻以白色能量为主...</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 底部操作栏 --> | |||
| <view class="novel-bottom"> | |||
| <view class="bottom-left"> | |||
| <view class="action-btn" @click="addToBookshelf"> | |||
| <text class="btn-icon">📚</text> | |||
| <text>加入书架</text> | |||
| </view> | |||
| <view class="action-btn" @click="toggleInteractive"> | |||
| <text class="btn-icon">🎯</text> | |||
| <text>互动打赏</text> | |||
| </view> | |||
| </view> | |||
| <view class="bottom-right"> | |||
| <button class="read-now-btn" @click="startReading">立即阅读</button> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| novelData: { | |||
| id: '1', | |||
| title: '这游戏也太真实了', | |||
| author: '大宝鉴在在', | |||
| category: '玄幻', | |||
| wordCount: '2814', | |||
| coverUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain', | |||
| introduction: '这游戏也太真实了！\n模拟，模拟，模拟，这游戏……公空居然把自己做成了游戏的NPC？这是什么新型的套路啊！好了，不要慌了，作为的管理者人员都在忙碌着，都在工作人员中，只要我们努力就自己的事，下个月他又给一套全新的剧情开始，如何将模拟的开关全新的世界，去广阔的世界去探索吧！' | |||
| }, | |||
| userInfo: { | |||
| avatar: '/static/images/avatar.jpg', | |||
| level: '67级达人' | |||
| }, | |||
| isCollected: false, | |||
| chapterCount: 2814, | |||
| comments: [ | |||
| { | |||
| username: '方寒锋', | |||
| avatar: '/static/images/user1.jpg', | |||
| content: '我是全书中年龄最大的人，这是一本很好的文章！满满心头热，只要对你"安全"文案有兴趣的，都可以不虚，不害怕，不要想太多就去尝试阅读吧！', | |||
| time: '2024-07-09' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| methods: { | |||
| goBack() { | |||
| uni.navigateBack() | |||
| }, | |||
| startReading() { | |||
| uni.navigateTo({ | |||
| url: '/pages/reader/reader' | |||
| }) | |||
| }, | |||
| toggleCollect() { | |||
| this.isCollected = !this.isCollected | |||
| // TODO: 实现收藏功能 | |||
| }, | |||
| recommendNovel() { | |||
| if (!this.novelData.id) { | |||
| uni.showToast({ | |||
| title: '无效的小说ID', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| uni.navigateTo({ | |||
| url: `/pages_order/novel/vote?id=${this.novelData.id}` | |||
| }) | |||
| }, | |||
| goToWriteReview() { | |||
| // TODO: 实现写书评功能 | |||
| }, | |||
| addToBookshelf() { | |||
| // TODO: 实现加入书架功能 | |||
| uni.showToast({ | |||
| title: '已加入书架', | |||
| icon: 'success' | |||
| }) | |||
| }, | |||
| toggleInteractive() { | |||
| // TODO: 实现互动打赏功能 | |||
| uni.showToast({ | |||
| title: '打赏功能开发中', | |||
| icon: 'none' | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .novel-detail { | |||
| min-height: 100vh; | |||
| background-color: #f5f5f5; | |||
| padding-bottom: 30rpx; | |||
| } | |||
| .nav-header { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| padding: 20rpx 30rpx; | |||
| background-color: transparent; | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| right: 0; | |||
| z-index: 100; | |||
| } | |||
| .novel-info { | |||
| padding: 20rpx; | |||
| display: flex; | |||
| background: #fff; | |||
| } | |||
| .novel-cover { | |||
| width: 200rpx; | |||
| height: 280rpx; | |||
| margin-right: 20rpx; | |||
| } | |||
| .novel-cover image { | |||
| width: 100%; | |||
| height: 100%; | |||
| border-radius: 8rpx; | |||
| } | |||
| .novel-basic { | |||
| flex: 1; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| } | |||
| .title { | |||
| font-size: 36rpx; | |||
| font-weight: bold; | |||
| margin-bottom: 16rpx; | |||
| } | |||
| .author-line, .status-line { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-bottom: 12rpx; | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| } | |||
| .label { | |||
| color: #999; | |||
| margin-right: 8rpx; | |||
| } | |||
| .score-line { | |||
| margin-top: 16rpx; | |||
| } | |||
| .score { | |||
| font-size: 32rpx; | |||
| color: #333; | |||
| font-weight: bold; | |||
| } | |||
| .score-label { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| margin-left: 8rpx; | |||
| } | |||
| .recommendation-section { | |||
| padding: 24rpx 32rpx; | |||
| background: #fff; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| position: relative; | |||
| } | |||
| .rec-left { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: flex-start; | |||
| margin-left: 70rpx; | |||
| } | |||
| .rec-count { | |||
| font-size: 44rpx; | |||
| font-weight: 500; | |||
| color: #333; | |||
| line-height: 1.2; | |||
| } | |||
| .rec-label { | |||
| font-size: 26rpx; | |||
| color: #999; | |||
| margin-top: 4rpx; | |||
| } | |||
| .rec-divider { | |||
| position: absolute; | |||
| right: 160rpx; | |||
| top: 20rpx; | |||
| bottom: 20rpx; | |||
| width: 2rpx; | |||
| background: #eee; | |||
| } | |||
| .rec-right { | |||
| flex-shrink: 0; | |||
| } | |||
| .recommend-btn { | |||
| background: #fff; | |||
| color: #4a90e2; | |||
| border: 2rpx solid #4a90e2; | |||
| border-radius: 40rpx; | |||
| padding: 12rpx 32rpx; | |||
| font-size: 28rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| line-height: 1; | |||
| height: 64rpx; | |||
| } | |||
| .btn-icon { | |||
| margin-right: 8rpx; | |||
| font-size: 32rpx; | |||
| } | |||
| .action-buttons { | |||
| display: flex; | |||
| padding: 30rpx; | |||
| gap: 20rpx; | |||
| button { | |||
| flex: 1; | |||
| height: 80rpx; | |||
| border-radius: 40rpx; | |||
| font-size: 32rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| } | |||
| .read-btn { | |||
| background-color: #4a90e2; | |||
| color: #fff; | |||
| } | |||
| .collect-btn { | |||
| background-color: #f0f0f0; | |||
| color: #666; | |||
| } | |||
| } | |||
| .user-level { | |||
| margin: 20rpx 30rpx; | |||
| background-color: #fff; | |||
| border-radius: 12rpx; | |||
| padding: 24rpx 32rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: stretch; | |||
| } | |||
| .level-left { | |||
| flex: 1; | |||
| } | |||
| .level-title { | |||
| display: flex; | |||
| align-items: center; | |||
| gap: 8rpx; | |||
| margin-bottom: 20rpx; | |||
| margin-left: 20rpx; | |||
| .title-icon { | |||
| font-size: 36rpx; | |||
| color: #FFB800; | |||
| } | |||
| text { | |||
| font-size: 32rpx; | |||
| font-weight: 500; | |||
| color: #333; | |||
| } | |||
| } | |||
| .level-info { | |||
| display: flex; | |||
| align-items: flex-start; | |||
| gap: 20rpx; | |||
| } | |||
| .user-avatar { | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| border-radius: 50%; | |||
| border: 2rpx solid #f0f0f0; | |||
| } | |||
| .user-details { | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 8rpx; | |||
| } | |||
| .username { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| font-weight: 500; | |||
| } | |||
| .user-score { | |||
| display: flex; | |||
| align-items: center; | |||
| gap: 8rpx; | |||
| .score-value { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| } | |||
| .score-label { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| } | |||
| } | |||
| .user-role { | |||
| font-size: 24rpx; | |||
| color: #666; | |||
| background: #f5f5f5; | |||
| padding: 4rpx 12rpx; | |||
| border-radius: 4rpx; | |||
| display: inline-block; | |||
| } | |||
| .level-right { | |||
| display: flex; | |||
| align-items: center; | |||
| } | |||
| .rank-btn { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: center; | |||
| padding: 0 20rpx; | |||
| .rank-icon { | |||
| width: 200rpx; | |||
| height: 60rpx; | |||
| margin-bottom: 8rpx; | |||
| } | |||
| text { | |||
| font-size: 26rpx; | |||
| color: #333; | |||
| line-height: 1.4; | |||
| } | |||
| .check-text { | |||
| font-size: 22rpx; | |||
| color: #999; | |||
| } | |||
| } | |||
| .novel-intro { | |||
| margin: 20rpx 30rpx; | |||
| background-color: #fff; | |||
| border-radius: 12rpx; | |||
| padding: 24rpx; | |||
| } | |||
| .intro-title { | |||
| font-size: 32rpx; | |||
| font-weight: 500; | |||
| color: #333; | |||
| margin-bottom: 16rpx; | |||
| } | |||
| .intro-content { | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| line-height: 1.6; | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 16rpx; | |||
| text { | |||
| display: block; | |||
| } | |||
| } | |||
| .comments-section { | |||
| margin: 20rpx 30rpx; | |||
| background-color: #fff; | |||
| border-radius: 12rpx; | |||
| padding: 24rpx; | |||
| } | |||
| .comments-header { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| margin-bottom: 24rpx; | |||
| border-bottom: 2rpx solid #f5f5f5; | |||
| padding-bottom: 24rpx; | |||
| } | |||
| .header-left { | |||
| display: flex; | |||
| align-items: center; | |||
| gap: 8rpx; | |||
| .title-icon { | |||
| font-size: 32rpx; | |||
| } | |||
| text { | |||
| font-size: 32rpx; | |||
| font-weight: 500; | |||
| color: #333; | |||
| } | |||
| } | |||
| .header-right { | |||
| text { | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| } | |||
| } | |||
| .comment-list { | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 32rpx; | |||
| } | |||
| .comment-item { | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 16rpx; | |||
| } | |||
| .comment-header { | |||
| display: flex; | |||
| align-items: center; | |||
| gap: 12rpx; | |||
| } | |||
| .avatar { | |||
| width: 64rpx; | |||
| height: 64rpx; | |||
| border-radius: 50%; | |||
| } | |||
| .username { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| font-weight: 500; | |||
| } | |||
| .comment-body { | |||
| padding-left: 76rpx; | |||
| } | |||
| .content-text { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| line-height: 1.6; | |||
| } | |||
| .comment-footer { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| margin-top: 16rpx; | |||
| } | |||
| .comment-time { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| } | |||
| .comment-likes { | |||
| display: flex; | |||
| align-items: center; | |||
| gap: 4rpx; | |||
| } | |||
| .like-icon { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| } | |||
| .like-count { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| } | |||
| .novel-catalog { | |||
| margin: 20rpx 30rpx; | |||
| background-color: #fff; | |||
| border-radius: 12rpx; | |||
| padding: 24rpx; | |||
| } | |||
| .catalog-header { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| border-bottom: 2rpx solid #f5f5f5; | |||
| padding-bottom: 24rpx; | |||
| } | |||
| .catalog-title { | |||
| display: flex; | |||
| align-items: center; | |||
| gap: 8rpx; | |||
| .title-icon { | |||
| font-size: 32rpx; | |||
| } | |||
| text { | |||
| font-size: 32rpx; | |||
| font-weight: 500; | |||
| color: #333; | |||
| } | |||
| } | |||
| .chapter-nav { | |||
| display: flex; | |||
| align-items: center; | |||
| gap: 8rpx; | |||
| .current-chapter { | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| } | |||
| .nav-arrow { | |||
| font-size: 28rpx; | |||
| color: #999; | |||
| } | |||
| } | |||
| .novel-bottom { | |||
| position: fixed; | |||
| bottom: 0; | |||
| left: 0; | |||
| right: 0; | |||
| height: 100rpx; | |||
| background: #fff; | |||
| display: flex; | |||
| align-items: center; | |||
| padding: 0 30rpx; | |||
| box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); | |||
| } | |||
| .bottom-left { | |||
| flex: 1; | |||
| display: flex; | |||
| gap: 40rpx; | |||
| } | |||
| .action-btn { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| gap: 4rpx; | |||
| .btn-icon { | |||
| font-size: 40rpx; | |||
| line-height: 1; | |||
| } | |||
| text { | |||
| font-size: 24rpx; | |||
| color: #666; | |||
| } | |||
| } | |||
| .bottom-right { | |||
| flex-shrink: 0; | |||
| } | |||
| .read-now-btn { | |||
| background: #1a237e; | |||
| color: #fff; | |||
| font-size: 32rpx; | |||
| height: 80rpx; | |||
| line-height: 80rpx; | |||
| padding: 0 60rpx; | |||
| border-radius: 40rpx; | |||
| border: none; | |||
| } | |||
| </style> | |||
+ 162
- 0
pages_order/novel/vote.vue
View File
| @ -0,0 +1,162 @@ | |||
| <template> | |||
| <view class="vote-container"> | |||
| <!-- Empty space at the top --> | |||
| <view class="empty-space"></view> | |||
| <!-- Bottom sheet with voting interface --> | |||
| <view class="vote-sheet"> | |||
| <view class="sheet-header"> | |||
| <text class="sheet-title">投推荐票</text> | |||
| </view> | |||
| <view class="vote-options"> | |||
| <text class="option-label">推荐投票</text> | |||
| <view class="quick-options"> | |||
| <view class="option-btn" @click="setVotes(1)">1</view> | |||
| <view class="option-btn" @click="setVotes(5)">5</view> | |||
| <view class="option-btn" @click="setVotes(10)">10</view> | |||
| </view> | |||
| <text class="option-label">手动设置</text> | |||
| <view class="manual-input"> | |||
| <view class="minus-btn" @click="decreaseVotes">-</view> | |||
| <view class="vote-count"> | |||
| <text>x{{voteCount}}</text> | |||
| </view> | |||
| <view class="plus-btn" @click="increaseVotes">+</view> | |||
| </view> | |||
| </view> | |||
| <button class="submit-btn" @click="submitVote">投票</button> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| voteCount: 1 | |||
| } | |||
| }, | |||
| methods: { | |||
| setVotes(count) { | |||
| this.voteCount = count | |||
| }, | |||
| increaseVotes() { | |||
| this.voteCount++ | |||
| }, | |||
| decreaseVotes() { | |||
| if (this.voteCount > 1) { | |||
| this.voteCount-- | |||
| } | |||
| }, | |||
| submitVote() { | |||
| // TODO: Implement vote submission | |||
| uni.showToast({ | |||
| title: `已投${this.voteCount}票`, | |||
| icon: 'success' | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| .vote-container { | |||
| display: flex; | |||
| flex-direction: column; | |||
| height: 100vh; | |||
| background-color: rgba(0, 0, 0, 0.4); | |||
| } | |||
| .empty-space { | |||
| flex: 1; | |||
| } | |||
| .vote-sheet { | |||
| background-color: #fff; | |||
| border-radius: 20rpx 20rpx 0 0; | |||
| padding: 30rpx; | |||
| } | |||
| .sheet-header { | |||
| text-align: center; | |||
| margin-bottom: 40rpx; | |||
| } | |||
| .sheet-title { | |||
| font-size: 32rpx; | |||
| font-weight: 500; | |||
| } | |||
| .vote-options { | |||
| margin-bottom: 40rpx; | |||
| } | |||
| .option-label { | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .quick-options { | |||
| display: flex; | |||
| gap: 20rpx; | |||
| margin-top: 30rpx; | |||
| margin-bottom: 40rpx; | |||
| } | |||
| .option-btn { | |||
| flex: 1; | |||
| height: 80rpx; | |||
| background-color: #f5f5f5; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| border-radius: 8rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .manual-input { | |||
| margin-top: 30rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| gap: 20rpx; | |||
| } | |||
| .minus-btn, .plus-btn { | |||
| width: 220rpx; | |||
| height: 80rpx; | |||
| background-color: #f5f5f5; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| border-radius: 8rpx; | |||
| font-size: 32rpx; | |||
| } | |||
| .vote-count { | |||
| width: 220rpx; | |||
| height: 82rpx; | |||
| background-color: #f5f5f5; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| border-radius: 8rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .submit-btn { | |||
| width: 100%; | |||
| height: 88rpx; | |||
| background-color: #000033; | |||
| color: #fff; | |||
| border-radius: 8rpx; | |||
| font-size: 32rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| } | |||
| </style> | |||