|
|
|
@ -1,451 +1,479 @@ |
|
|
|
<template> |
|
|
|
<!-- 小说文本页面 --> |
|
|
|
<view class="reader-container" @click.native="toggleFullScreen"> |
|
|
|
<uv-navbar title="这游戏也太真实了" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;" :border="false"> |
|
|
|
<template #left> |
|
|
|
<BackArrow :size="56" color="#333" @back="$emit('back')" /> |
|
|
|
</template> |
|
|
|
</uv-navbar> |
|
|
|
<view class="chapter-title">第1章 2004</view> |
|
|
|
<scroll-view scroll-y class="chapter-content" style="height: 70vh;" @touchend="handleTouchEnd" @scroll="handleScroll" @tap="handleContentClick"> |
|
|
|
<text> |
|
|
|
华星，华东地区某个省市区，不知名街后居民…… |
|
|
|
读朱自清的荷塘月色，品读鲁迅的从百草园到三味书屋，看梁实秋的雅舍!一篇篇经典散文，想起来就像藏在脑海里的动画，优雅唯美的画面，好像夜晚的微风，轻抚着凝望远方的脸颊!美文入心!感慨万千!下面是100篇名家经典散文摘抄，敬请你的欣赏! |
|
|
|
<!-- 小说文本页面 --> |
|
|
|
<view class="reader-container"> |
|
|
|
<view class="top-controls" :class="{'top-controls-hidden': isFullScreen}"> |
|
|
|
<view class="controls-inner"> |
|
|
|
<view class="left"> |
|
|
|
<uv-icon name="arrow-left" @click="$utils.navigateBack" color="#333" size="46rpx"></uv-icon> |
|
|
|
</view> |
|
|
|
<view class="center"> |
|
|
|
<text class="title">{{ novelTitle }}</text> |
|
|
|
<text class="chapter">{{ currentChapter }}</text> |
|
|
|
</view> |
|
|
|
<!-- <view class="right"> |
|
|
|
<uv-icon name="more-dot-fill" color="#333" size="46rpx"></uv-icon> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
<view class="progress-bar"> |
|
|
|
<view class="progress-inner" :style="{width: readProgress + '%'}"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<scroll-view scroll-y class="chapter-content" :class="{'full-content': isFullScreen}" |
|
|
|
@scroll="handleScroll" @tap="handleContentClick"> |
|
|
|
|
|
|
|
<view class="chapter-content-item"> |
|
|
|
<view class="chapter-title">第1章 重回2004</view> |
|
|
|
<view class="paragraph-content"> |
|
|
|
<view class="paragraph" v-for="(paragraph, index) in paragraphs" :key="index"> |
|
|
|
{{ paragraph }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
100篇名家经典散文摘抄 |
|
|
|
《叶圣陶散文》为"名家经典珍藏"丛书之一，收录了叶圣陶先生的散文精品数十篇。这些作品内容丰富，题材各异，构思精巧，文笔精巧、语言幽默、内蕴深厚、风格恬淡，充分显示了叶圣陶先生的文学功底及丰富的人生阅历，从一个侧面反映了作者的思想感情及创作风格，非常值得一读。叶圣陶是20世纪中国一位杰出的作家、教育家和出版家，又是中国现代儿童文学创作的先行者。作为散文家，他早期和周作人、朱自清共同成为文学研究会散文创作的中坚，后来又成为开明派散文的代表，其散文被一九三五年出版的《中国新文学大系》选录的篇数仅次于周作人、鲁迅和朱自清。 |
|
|
|
1、朱自清《荷塘月色》片段 |
|
|
|
路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。 |
|
|
|
|
|
|
|
曲曲折折的荷塘上面，弥望旳是田田的叶子。叶子出水很高，像亭亭旳舞女旳裙。层层的叶子中间，零星地点缀着些白花，有袅娜(niǎo,nuó)地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉(mò)的流水，遮住了，不能见一些颜色;而叶子却更见风致了。 |
|
|
|
|
|
|
|
月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照;但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律，如梵婀(ē)玲(英语violin小提琴的译音)上奏着的名曲。 |
|
|
|
|
|
|
|
荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁，漏着几段空隙，像是特为月光留下的。树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声;但热闹是它们的，我什么也没有。 |
|
|
|
2、鲁迅《从百草园到三味书屋》片段 |
|
|
|
100篇名家经典散文摘抄 |
|
|
|
《叶圣陶散文》为"名家经典珍藏"丛书之一，收录了叶圣陶先生的散文精品数十篇。这些作品内容丰富，题材各异，构思精巧，文笔精巧、语言幽默、内蕴深厚、风格恬淡，充分显示了叶圣陶先生的文学功底及丰富的人生阅历，从一个侧面反映了作者的思想感情及创作风格，非常值得一读。叶圣陶是20世纪中国一位杰出的作家、教育家和出版家，又是中国现代儿童文学创作的先行者。作为散文家，他早期和周作人、朱自清共同成为文学研究会散文创作的中坚，后来又成为开明派散文的代表，其散文被一九三五年出版的《中国新文学大系》选录的篇数仅次于周作人、鲁迅和朱自清。 |
|
|
|
1、朱自清《荷塘月色》片段 |
|
|
|
路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。 |
|
|
|
|
|
|
|
曲曲折折的荷塘上面，弥望旳是田田的叶子。叶子出水很高，像亭亭旳舞女旳裙。层层的叶子中间，零星地点缀着些白花，有袅娜(niǎo,nuó)地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉(mò)的流水，遮住了，不能见一些颜色;而叶子却更见风致了。 |
|
|
|
|
|
|
|
月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照;但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律，如梵婀(ē)玲(英语violin小提琴的译音)上奏着的名曲。 |
|
|
|
|
|
|
|
荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁，漏着几段空隙，像是特为月光留下的。树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声;但热闹是它们的，我什么也没有。 |
|
|
|
2、鲁迅《从百草园到三味书屋》片段 |
|
|
|
100篇名家经典散文摘抄 |
|
|
|
<!-- 这里填充章节内容，后续可通过props或API获取 --> |
|
|
|
</text> |
|
|
|
</scroll-view> |
|
|
|
<view class="bottom-bar" v-if="!isFullScreen"> |
|
|
|
<view class="bottom-left"> |
|
|
|
<view class="bar-item"> |
|
|
|
<view class="bar-icon"> <uv-icon name="plus"></uv-icon> </view> |
|
|
|
<text class="bar-label">加入书架</text> |
|
|
|
</view> |
|
|
|
<view class="bar-item"> |
|
|
|
<view class="bar-icon"> <uv-icon name="eye-fill"></uv-icon> </view> |
|
|
|
<text class="bar-label">夜间</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bottom-right"> |
|
|
|
<button class="outline-btn"><text class="btn-text">上一章</text></button> |
|
|
|
<button class="outline-btn" @click="showCatalog = true"><text class="btn-text">目录</text></button> |
|
|
|
<button class="outline-btn"><text class="btn-text">下一章</text></button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<uv-popup v-model="showPopup" mode="center" :closeOnClickOverlay="true"> |
|
|
|
<view style="padding: 48rpx 32rpx; text-align: center; background: #fff; border-radius: 24rpx; min-width: 500rpx;"> |
|
|
|
<view style="font-size: 32rpx; font-weight: bold; color: #222; margin-bottom: 24rpx;">这是付费章节 需要订阅后才能阅读</view> |
|
|
|
<view style="font-size: 26rpx; color: #999; margin-bottom: 40rpx;">订阅后可继续阅读本章内容</view> |
|
|
|
<view style="display: flex; justify-content: center; gap: 24rpx;"> |
|
|
|
<button style="background: #ff9800; color: #fff; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: none;" @click="goToSubscription">订阅本章</button> |
|
|
|
<button style="background: #fff3e0; color: #ff9800; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: 1px solid #ff9800;">观看视频解锁</button> |
|
|
|
<button style="background: #fff; color: #ff9800; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: 1px solid #ff9800;">批量订阅</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uv-popup> |
|
|
|
<!-- 目录弹窗（顶部196px边距，底部无边距，宽度100vw，高度自适应，顶部圆角，底部无圆角） --> |
|
|
|
<view v-if="showCatalog" class="catalog-popup-fullscreen" style="top:196px;bottom:0;height:auto;min-height:calc(100vh - 196px);"> |
|
|
|
<view class="catalog-header"> |
|
|
|
<view class="header-left" @click="showCatalog = false"> |
|
|
|
<uv-icon name="arrow-down" size="46" color="#333" @click="goBack" /> |
|
|
|
</view> |
|
|
|
<view class="header-title">目录</view> |
|
|
|
<view class="header-right" @click="reverseOrder">倒序</view> |
|
|
|
</view> |
|
|
|
<scroll-view scroll-y class="catalog-list" style="padding-bottom:0;margin-bottom:0;"> |
|
|
|
<view v-for="(item, idx) in displayList" :key="item.id" @click="selectChapter(idx)" |
|
|
|
:class="['catalog-item', {active: idx === currentIndex}]"> |
|
|
|
<view class="item-main"> |
|
|
|
<text class="item-title">{{ item.title }}</text> |
|
|
|
<text v-if="item.vip" class="vip-tag" @click.stop="showPayPopup = true">付费</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
<view v-if="showPayPopup" class="pay-popup-mask" @click="showPayPopup = false"> |
|
|
|
<view class="pay-popup" @click.stop> |
|
|
|
<view class="pay-title">这是付费章节 需要订阅后才能阅读</view> |
|
|
|
<view class="pay-desc">订阅后可继续阅读本章内容</view> |
|
|
|
<view class="pay-btns"> |
|
|
|
<button class="pay-btn" @click="goToSubscription">订阅本章</button> |
|
|
|
<button class="pay-btn pay-btn-video">观看视频解锁</button> |
|
|
|
<button class="pay-btn pay-btn-batch">批量订阅</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
<view class="bottom-bar" :class="{'bottom-bar-hidden': isFullScreen}"> |
|
|
|
<view class="bottom-left"> |
|
|
|
<view class="bar-item"> |
|
|
|
<view class="bar-icon"> <uv-icon name="plus"></uv-icon> </view> |
|
|
|
<text class="bar-label">加入书架</text> |
|
|
|
</view> |
|
|
|
<view class="bar-item"> |
|
|
|
<view class="bar-icon"> <uv-icon name="eye-fill"></uv-icon> </view> |
|
|
|
<text class="bar-label">夜间</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bottom-right"> |
|
|
|
<button class="outline-btn"><text class="btn-text">上一章</text></button> |
|
|
|
<button class="outline-btn" @click="$refs.chapterPopup.open()"><text class="btn-text">目录</text></button> |
|
|
|
<button class="outline-btn"><text class="btn-text">下一章</text></button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-popup v-model="showPopup" mode="center" :closeOnClickOverlay="true"> |
|
|
|
<view |
|
|
|
style="padding: 48rpx 32rpx; text-align: center; background: #fff; border-radius: 24rpx; min-width: 500rpx;"> |
|
|
|
<view style="font-size: 32rpx; font-weight: bold; color: #222; margin-bottom: 24rpx;">这是付费章节 需要订阅后才能阅读 |
|
|
|
</view> |
|
|
|
<view style="font-size: 26rpx; color: #999; margin-bottom: 40rpx;">订阅后可继续阅读本章内容</view> |
|
|
|
<view style="display: flex; justify-content: center; gap: 24rpx;"> |
|
|
|
<button |
|
|
|
style="background: #ff9800; color: #fff; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: none;" |
|
|
|
@click="goToSubscription">订阅本章</button> |
|
|
|
<button |
|
|
|
style="background: #fff3e0; color: #ff9800; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: 1px solid #ff9800;">观看视频解锁</button> |
|
|
|
<button |
|
|
|
style="background: #fff; color: #ff9800; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: 1px solid #ff9800;">批量订阅</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uv-popup> |
|
|
|
|
|
|
|
<view v-if="showPayPopup" class="pay-popup-mask" @click="showPayPopup = false"> |
|
|
|
<view class="pay-popup" @click.stop> |
|
|
|
<view class="pay-title">这是付费章节 需要订阅后才能阅读</view> |
|
|
|
<view class="pay-desc">订阅后可继续阅读本章内容</view> |
|
|
|
<view class="pay-btns"> |
|
|
|
<button class="pay-btn" @click="goToSubscription">订阅本章</button> |
|
|
|
<button class="pay-btn pay-btn-video">观看视频解锁</button> |
|
|
|
<button class="pay-btn pay-btn-batch">批量订阅</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<novelVotePopup ref="novelVotePopup"/> |
|
|
|
|
|
|
|
<chapterPopup ref="chapterPopup" /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import BackArrow from './components/BackArrow.vue'; |
|
|
|
import chapterPopup from '../components/novel/chapterPopup.vue' |
|
|
|
import novelVotePopup from '../components/novel/novelVotePopup.vue' |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
chapterPopup, |
|
|
|
novelVotePopup, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isFullScreen: false, |
|
|
|
showPopup: false, |
|
|
|
popupShown: false, // 只弹一次 |
|
|
|
showPayPopup: false, |
|
|
|
novelTitle: "这游戏也太真实了", |
|
|
|
currentChapter: "第1章 重回2004", |
|
|
|
readProgress: 15, // 阅读进度百分比 |
|
|
|
paragraphs: [ |
|
|
|
"华东地区某个不知名街区，2004年冬。", |
|
|
|
"天还没有亮，王明就起床了。他要去赶早市，今天是进货的日子，错过了就要等下周。他轻轻地穿好衣服，不想吵醒还在熟睡的妻子。", |
|
|
|
"天气比想象中冷，他裹紧了身上那件略显破旧的棉袄。出门前，他看了眼床头那个旧闹钟，四点半，还算准时。", |
|
|
|
"街上几乎没有人，只有零星的几辆三轮车和面包车正往市场方向驶去。王明加快了脚步，他知道好位置都是先到先得。", |
|
|
|
"这一年，互联网刚刚开始在中国普及，但对于像王明这样的小摊贩来说，生活并没有什么变化。每天起早贪黑，挣扎在温饱线上。", |
|
|
|
"然而就在今天，他的生活将迎来一场他从未预料到的变化。", |
|
|
|
"市场入口处，一个陌生人递给他一张名片，上面写着：\"电子产品批发，价格优惠\"。王明随手接过，塞进了口袋，继续往里走。", |
|
|
|
"他不知道的是，这张小小的名片，将成为改变他命运的第一步。", |
|
|
|
"几个小时后，当他收摊准备回家时，他偶然摸到了那张名片。出于好奇，他决定去看看。", |
|
|
|
"名片上的地址在城市的另一边，是一个他从未去过的工业区。坐了将近一个小时的公交车，他终于找到了那个地方。", |
|
|
|
"那是一个不起眼的仓库，门口停着几辆货车。王明犹豫了一下，还是推门走了进去。", |
|
|
|
"里面的景象让他震惊。货架上整齐地摆放着各种电子产品：MP3播放器、数码相机、U盘……这些在当时都是新奇而昂贵的物品。", |
|
|
|
"\"您是新顾客吧？\"一个中年男人走过来，热情地招呼道。", |
|
|
|
"\"是的，我看到了你的名片。\"王明有些拘谨地回答。", |
|
|
|
"\"那您来得正是时候，我们刚收到一批新货，价格特别优惠。\"", |
|
|
|
"王明被带到一个展示台前，上面摆着几个小巧的设备。\"这是最新款的MP3，容量大，音质好，在市场上很受欢迎。\"", |
|
|
|
"王明拿起一个仔细端详。他虽然没什么文化，但做生意的直觉告诉他，这东西可能有市场。", |
|
|
|
"\"多少钱一个？\"他问道。", |
|
|
|
"\"批发价150元，零售价可以卖到300元以上。\"", |
|
|
|
"王明心里快速计算着。他今天的存款只有3000元，如果全买这个，可以拿20个。要是真能卖出去，就是3000元的利润。", |
|
|
|
"但风险也很大。万一卖不出去，这可是他半年的积蓄啊。", |
|
|
|
"就在他犹豫的时候，旁边传来一个熟悉的声音：\"老王，你也来这进货啊？\"", |
|
|
|
"是他在市场上认识的李东。李东比他年轻，做生意也比他精明。", |
|
|
|
"\"你觉得这东西怎么样？\"王明问道。", |
|
|
|
"\"那必须相当不错啊。我上周进了一批，三天就卖光了。现在是过节嘛，年轻人喜欢这些新鲜玩意儿。\"李东拍了拍他的肩膀，\"要我说，你应该赶紧进一批，过了这个村可就没这个店了。\"", |
|
|
|
"看到李东的信心，王明心里的天平开始倾斜。", |
|
|
|
"\"那...好吧，给我来20个。\"他终于下定决心，从口袋里掏出了钱。", |
|
|
|
"这一决定，将彻底改变他的人生轨迹...", |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleContentClick() { |
|
|
|
this.toggleFullScreen(); |
|
|
|
}, |
|
|
|
handleScroll(e) { |
|
|
|
// 获取滚动位置 |
|
|
|
const scrollTop = e.detail.scrollTop; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
BackArrow, |
|
|
|
'uv-popup': () => import('@/uni_modules/uv-popup/components/uv-popup/uv-popup.vue') |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isFullScreen: false, |
|
|
|
lastTap: 0, |
|
|
|
showPopup: false, |
|
|
|
popupShown: false, // 只弹一次 |
|
|
|
showCatalog: false, |
|
|
|
orderAsc: true, |
|
|
|
currentIndex: 0, |
|
|
|
chapterList: [ |
|
|
|
{ id: 1, title: '第一章 重回2004', vip: false }, |
|
|
|
{ id: 2, title: '第二章 陈年旧恨', vip: false }, |
|
|
|
{ id: 3, title: '第三章 再相见', vip: false }, |
|
|
|
{ id: 4, title: '第四章 李东的邀请', vip: false }, |
|
|
|
{ id: 5, title: '第五章 小气的男', vip: false }, |
|
|
|
{ id: 6, title: '第六章 先送谁?', vip: false }, |
|
|
|
{ id: 7, title: '第七章 打听行情', vip: false }, |
|
|
|
{ id: 8, title: '第八章 省城探路', vip: false }, |
|
|
|
{ id: 9, title: '第九章 订货', vip: false }, |
|
|
|
{ id: 10, title: '第十章 第一桶金', vip: true }, |
|
|
|
{ id: 11, title: '第十一章 高富帅来袭', vip: true }, |
|
|
|
{ id: 12, title: '第十二章 故学后，挥场见！', vip: true }, |
|
|
|
{ id: 13, title: '第十三章 你来我往', vip: true }, |
|
|
|
{ id: 14, title: '第十四章 你来我往', vip: true }, |
|
|
|
{ id: 15, title: '第十五章 你来我往', vip: true }, |
|
|
|
{ id: 16, title: '第十六章 你来我往', vip: true }, |
|
|
|
{ id: 17, title: '第十七章 你来我往', vip: true }, |
|
|
|
{ id: 18, title: '第十八章 你来我往', vip: true }, |
|
|
|
|
|
|
|
], |
|
|
|
showPayPopup: false |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
displayList() { |
|
|
|
return this.orderAsc ? this.chapterList : [...this.chapterList].reverse() |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleContentClick() { |
|
|
|
this.toggleFullScreen(); |
|
|
|
}, |
|
|
|
handleTouchEnd(e) { |
|
|
|
this.toggleFullScreen(); |
|
|
|
}, |
|
|
|
handleScroll(e) { |
|
|
|
// 获取滚动位置 |
|
|
|
const scrollTop = e.detail.scrollTop; |
|
|
|
console.log('scrollTop:', scrollTop); |
|
|
|
|
|
|
|
// 当滚动超过50且弹窗未显示过时，显示弹窗 |
|
|
|
if (scrollTop > 50 && !this.popupShown) { |
|
|
|
this.showPopup = true; |
|
|
|
this.popupShown = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
toggleFullScreen() { |
|
|
|
this.isFullScreen = !this.isFullScreen |
|
|
|
}, |
|
|
|
reverseOrder() { |
|
|
|
this.orderAsc = !this.orderAsc |
|
|
|
}, |
|
|
|
selectChapter(idx) { |
|
|
|
this.currentIndex = this.orderAsc ? idx : this.chapterList.length - 1 - idx |
|
|
|
this.showCatalog = false |
|
|
|
// TODO: 跳转到对应章节内容 |
|
|
|
}, |
|
|
|
goToSubscription() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/novel/SubscriptionInformation' |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// #ifdef H5 |
|
|
|
if (typeof window !== 'undefined') { |
|
|
|
window.onscroll = () => { |
|
|
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; |
|
|
|
if (scrollTop > 50 && !this.popupShown) { |
|
|
|
this.showPopup = true; |
|
|
|
this.popupShown = true; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
// #endif |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
// #ifdef H5 |
|
|
|
if (typeof window !== 'undefined') { |
|
|
|
window.onscroll = null; |
|
|
|
} |
|
|
|
// #endif |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
// 可接收小说id、章节id等参数 |
|
|
|
// this.novelId = options.id |
|
|
|
} |
|
|
|
} |
|
|
|
// 滚动不触发导航栏显示，只处理付费章节弹窗 |
|
|
|
if (scrollTop > 50 && !this.popupShown) { |
|
|
|
this.showPopup = true; |
|
|
|
this.popupShown = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
toggleFullScreen() { |
|
|
|
this.isFullScreen = !this.isFullScreen |
|
|
|
}, |
|
|
|
goToSubscription() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/novel/SubscriptionInformation' |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// 初始设置为全屏模式 |
|
|
|
this.isFullScreen = true; |
|
|
|
|
|
|
|
// #ifdef H5 |
|
|
|
if (typeof window !== 'undefined') { |
|
|
|
window.onscroll = () => { |
|
|
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; |
|
|
|
if (scrollTop > 50 && !this.popupShown) { |
|
|
|
this.showPopup = true; |
|
|
|
this.popupShown = true; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
// #endif |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
// #ifdef H5 |
|
|
|
if (typeof window !== 'undefined') { |
|
|
|
window.onscroll = null; |
|
|
|
} |
|
|
|
// #endif |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
// 可接收小说id、章节id等参数 |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.reader-container { |
|
|
|
min-height: 100vh; |
|
|
|
background: #fff; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
.chapter-title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
margin: 40rpx 32rpx 24rpx 32rpx; |
|
|
|
} |
|
|
|
.chapter-content { |
|
|
|
flex: 1; |
|
|
|
padding: 0 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #222; |
|
|
|
line-height: 2.2; |
|
|
|
margin-bottom: 120rpx; |
|
|
|
} |
|
|
|
.bottom-bar { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: #fff; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 180rpx; |
|
|
|
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); |
|
|
|
z-index: 10; |
|
|
|
padding: 0 40rpx 10rpx 40rpx; |
|
|
|
} |
|
|
|
.bottom-left { |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
gap: 48rpx; |
|
|
|
|
|
|
|
} |
|
|
|
.bar-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
} |
|
|
|
.bar-icon { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
margin-bottom: 4rpx; |
|
|
|
margin-right: 1rpx; |
|
|
|
} |
|
|
|
.bar-label { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #b3b3b3; |
|
|
|
margin-top: 2rpx; |
|
|
|
} |
|
|
|
.bottom-right { |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
gap: 32rpx; |
|
|
|
margin-left: 40rpx; |
|
|
|
} |
|
|
|
.outline-btn { |
|
|
|
min-width: 110rpx; |
|
|
|
padding: 0 28rpx; |
|
|
|
height: 60rpx; |
|
|
|
line-height: 60rpx; |
|
|
|
background: #fff; |
|
|
|
color: #223a7a; |
|
|
|
border: 2rpx solid #223a7a; |
|
|
|
border-radius: 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: bold; |
|
|
|
margin: 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.btn-text { |
|
|
|
font-weight: bold; |
|
|
|
color: #223a7a; |
|
|
|
font-size: 28rpx; |
|
|
|
border-bottom: 2rpx solid #223a7a; |
|
|
|
padding-bottom: 2rpx; |
|
|
|
} |
|
|
|
.catalog-popup-fullscreen { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background: #fff; |
|
|
|
z-index: 9999; |
|
|
|
border-top-left-radius: 32rpx; |
|
|
|
border-top-right-radius: 32rpx; |
|
|
|
border-bottom-left-radius: 0; |
|
|
|
border-bottom-right-radius: 0; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
box-shadow: 0 8rpx 48rpx rgba(0,0,0,0.18); |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.catalog-header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 24rpx; |
|
|
|
height: 96rpx; |
|
|
|
border-bottom: 1px solid #eee; |
|
|
|
position: sticky; |
|
|
|
top: 0; |
|
|
|
background: #fff; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
.header-left { |
|
|
|
width: 60rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
.header-title { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #222; |
|
|
|
} |
|
|
|
.header-right { |
|
|
|
color: #223a7a; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 500; |
|
|
|
min-width: 80rpx; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
.catalog-list { |
|
|
|
flex: 1; |
|
|
|
overflow: auto; |
|
|
|
padding-bottom: 40rpx; |
|
|
|
} |
|
|
|
.catalog-item { |
|
|
|
padding: 0 32rpx; |
|
|
|
min-height: 80rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
border-bottom: 1px solid #f5f5f5; |
|
|
|
background: #fff; |
|
|
|
color: #222; |
|
|
|
font-size: 30rpx; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.catalog-item.active { |
|
|
|
color: #ff5a5f; |
|
|
|
background: #fff7f7; |
|
|
|
} |
|
|
|
.item-main { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 16rpx; |
|
|
|
} |
|
|
|
.item-title { |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
.vip-tag { |
|
|
|
background: #ffe1b2; |
|
|
|
color: #ff9900; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
padding: 2rpx 18rpx; |
|
|
|
margin-left: 16rpx; |
|
|
|
} |
|
|
|
.pay-popup-mask { |
|
|
|
position: fixed; |
|
|
|
left: 0; top: 0; right: 0; bottom: 0; |
|
|
|
background: rgba(0,0,0,0.5); |
|
|
|
z-index: 10000; |
|
|
|
} |
|
|
|
.pay-popup { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: #232323; |
|
|
|
border-top-left-radius: 24rpx; |
|
|
|
border-top-right-radius: 24rpx; |
|
|
|
border-bottom-left-radius: 0; |
|
|
|
border-bottom-right-radius: 0; |
|
|
|
min-width: 500rpx; |
|
|
|
width: 100%; |
|
|
|
padding: 48rpx 32rpx 32rpx 32rpx; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.pay-title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #fff; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
margin-right: 50rpx; |
|
|
|
} |
|
|
|
.pay-desc { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
margin-right: 50rpx; |
|
|
|
} |
|
|
|
.pay-btns { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
gap: 24rpx; |
|
|
|
margin-right: 50rpx; |
|
|
|
.reader-container { |
|
|
|
min-height: 100vh; |
|
|
|
background: #fff; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.top-controls { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
background: rgba(255, 255, 255, 0.98); |
|
|
|
padding-top: calc(var(--status-bar-height) + 10rpx); |
|
|
|
z-index: 100; |
|
|
|
transform: translateY(0); |
|
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; |
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
.controls-inner { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 20rpx 32rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.left { |
|
|
|
width: 100rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.center { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 4rpx; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
max-width: 320rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.chapter { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #666; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
max-width: 320rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
width: 100rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.progress-bar { |
|
|
|
height: 4rpx; |
|
|
|
background: #f0f0f0; |
|
|
|
width: 100%; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.progress-inner { |
|
|
|
height: 100%; |
|
|
|
background: #4a90e2; |
|
|
|
transition: width 0.3s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.top-controls-hidden { |
|
|
|
transform: translateY(-100%); |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.chapter-content { |
|
|
|
flex: 1; |
|
|
|
padding: 0 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #222; |
|
|
|
line-height: 2.2; |
|
|
|
padding-top: 160rpx; /* 为导航栏预留空间，不随状态变化 */ |
|
|
|
padding-bottom: 180rpx; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow-x: hidden; |
|
|
|
|
|
|
|
.chapter-content-item { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.chapter-title { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: bold; |
|
|
|
margin: 20rpx 0 40rpx 0; |
|
|
|
text-align: center; |
|
|
|
word-break: break-word; |
|
|
|
white-space: normal; |
|
|
|
} |
|
|
|
|
|
|
|
.paragraph-content { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.paragraph { |
|
|
|
text-indent: 2em; |
|
|
|
margin-bottom: 30rpx; |
|
|
|
line-height: 1.8; |
|
|
|
font-size: 30rpx; |
|
|
|
color: #333; |
|
|
|
word-wrap: break-word; |
|
|
|
word-break: normal; |
|
|
|
white-space: normal; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.full-content { |
|
|
|
/* 不再修改顶部padding，保持内容位置不变 */ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-bar { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: #fff; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 180rpx; |
|
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); |
|
|
|
z-index: 10; |
|
|
|
padding: 0 40rpx 10rpx 40rpx; |
|
|
|
transform: translateY(0); |
|
|
|
transition: transform 0.3s ease-in-out; |
|
|
|
|
|
|
|
&.bottom-bar-hidden { |
|
|
|
transform: translateY(100%); |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-left { |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
gap: 48rpx; |
|
|
|
|
|
|
|
.bar-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
|
|
|
|
.bar-icon { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
margin-bottom: 4rpx; |
|
|
|
margin-right: 1rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bar-label { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #b3b3b3; |
|
|
|
margin-top: 2rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-right { |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
gap: 32rpx; |
|
|
|
margin-left: 40rpx; |
|
|
|
|
|
|
|
.outline-btn { |
|
|
|
min-width: 110rpx; |
|
|
|
padding: 0 28rpx; |
|
|
|
height: 60rpx; |
|
|
|
line-height: 60rpx; |
|
|
|
background: #fff; |
|
|
|
color: #223a7a; |
|
|
|
border: 2rpx solid #223a7a; |
|
|
|
border-radius: 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: bold; |
|
|
|
margin: 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.btn-text { |
|
|
|
font-weight: bold; |
|
|
|
color: #223a7a; |
|
|
|
font-size: 28rpx; |
|
|
|
border-bottom: 2rpx solid #223a7a; |
|
|
|
padding-bottom: 2rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.pay-btn { |
|
|
|
background: #ff9800; |
|
|
|
color: #fff; |
|
|
|
border-radius: 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 0 32rpx; |
|
|
|
border: none; |
|
|
|
|
|
|
|
} |
|
|
|
.pay-btn-video { |
|
|
|
background: #ff9800; |
|
|
|
color: #fff; |
|
|
|
border-radius: 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 0 32rpx; |
|
|
|
border: none; |
|
|
|
|
|
|
|
} |
|
|
|
.pay-btn-batch { |
|
|
|
background: #ff9800; |
|
|
|
color: #fff; |
|
|
|
border-radius: 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 0 32rpx; |
|
|
|
border: none; |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
.pay-popup-mask { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
z-index: 10000; |
|
|
|
|
|
|
|
.pay-popup { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: #232323; |
|
|
|
border-top-left-radius: 24rpx; |
|
|
|
border-top-right-radius: 24rpx; |
|
|
|
min-width: 500rpx; |
|
|
|
width: 100%; |
|
|
|
padding: 48rpx 32rpx 32rpx 32rpx; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.pay-title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #fff; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
margin-right: 50rpx; |
|
|
|
word-wrap: break-word; |
|
|
|
white-space: normal; |
|
|
|
} |
|
|
|
|
|
|
|
.pay-desc { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
margin-right: 50rpx; |
|
|
|
word-wrap: break-word; |
|
|
|
white-space: normal; |
|
|
|
} |
|
|
|
|
|
|
|
.pay-btns { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: center; |
|
|
|
gap: 24rpx; |
|
|
|
margin-right: 50rpx; |
|
|
|
|
|
|
|
.pay-btn { |
|
|
|
background: #ff9800; |
|
|
|
color: #fff; |
|
|
|
border-radius: 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 0 32rpx; |
|
|
|
border: none; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
word-break: keep-all; |
|
|
|
|
|
|
|
&.pay-btn-video, |
|
|
|
&.pay-btn-batch { |
|
|
|
background: #ff9800; |
|
|
|
color: #fff; |
|
|
|
border-radius: 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 0 32rpx; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
