novel-front-app/pages_order/novel/readnovels.vue

<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>
        <uv-icon name="arrow-left" size="46" color="#333" @click="$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篇名家经典散文摘抄，敬请你的欣赏!

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>
</template>

<script>
export default {
  components: {
    '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
  }
}
</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;

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