✨ feat(服务端): 视频审核页面，我的视频页面新增

+<template>
+  <div class="video-wrapper" style="position: relative;">
+    <div v-if="status === 'PROCESS'" class="status">
+      <van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
+        :src="icon_enable" />
+      <van-image v-if="item.status === 'REFUSE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
+        :src="icon_refuse" />
+      <van-image v-if="item.status === 'APPLY'" round width="6rem" height="6rem" style="vertical-align: bottom;"
+        :src="icon_apply" />
+    </div>
+    <div class="video-div" :id="'mui-player-' + item.case_id">
+    </div>
+    <div>
+      <div class="video-bar">
+        <van-row align="center">
+          <van-col span="8">
+            <van-image round width="2rem" height="2rem" style="vertical-align: middle;"
+              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
+            <span style="font-size: 1.05rem; vertical-align: middle;">王忆慈</span>
+          </van-col>
+          <van-col span="16">
+            <div style="color: #999999; text-align: right;">杨浦民办科技幼稚园 ｜ 藏语</div>
+          </van-col>
+        </van-row>
+      </div>
+    </div>
+    <div v-if="status === 'PROCESS'" style="margin-top: 1rem;">
+      <div v-if="item.status === 'REFUSE'" style="padding: 0 1rem 1rem 1rem; font-size: 0.85rem;">
+        <p style="color: #999999; margin-bottom: 0.25rem;">老师留言：</p>
+        <p>下次我们继续加油，争取有更好的表现哦～</p>
+      </div>
+    </div>
+    <div class="book-intro">
+      <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">
+        从前有一只小兔子，总是想要离家出走。有一天他对妈妈说：“我要跑走啦！”“如果你跑走了我就去追你，因为你是我的小宝贝呀！”妈妈说。
+        一场爱的捉迷藏就此展开了
+      </div>
+      <div v-if="hasToggle">
+        <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;
+          <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
+        </div>
+        <div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;
+          <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
+        </div>
+      </div>
+    </div>
+    <div v-if="status === 'PENDING'" class="van-hairline--top" style="padding: 0 1rem;">
+      <van-row>
+        <van-col offset="3" style="padding: 1rem;" @click="onRefuse()">
+          <div style="background: #B4B4B3; border-radius: 15px; color: #FFFFFF; padding: 0.25rem 0.8rem;">
+            <van-icon name="close" />&nbsp;不通过
+          </div>
+        </van-col>
+        <van-col style="padding: 1rem;" @click="onPass()">
+          <div style="background: #F9D95C; border-radius: 15px; color: #713610; padding: 0.25rem 1.5rem;">
+            <van-icon name="passed" />&nbsp;通过
+          </div>
+        </van-col>
+      </van-row>
+    </div>
+  </div>
+
+  <van-overlay :show="showNotice" z-index="1000">
+    <div class="wrapper" @click.stop>
+      <div class="block">
+        <div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;"><van-icon name="close" color="#FFFFFF" @click="closeNotice" /></div>
+        <div class="van-hairline--bottom" style="color: #222222; font-size: 1.25rem; font-weight: bold; text-align: center; padding-bottom: 1rem;">作品审核建议</div>
+        <div>
+          <van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200" placeholder="请填写您对小朋友的温馨鼓励" show-word-limit />
+        </div>
+        <div style="margin: 3rem 0;">
+          <my-button @on-click="onConfirm" type="primary">确定</my-button>
+        </div>
+      </div>
+    </div>
+  </van-overlay>
+
+  <van-dialog v-model:show="show" title="温馨提示" show-cancel-button confirmButtonColor="#F9D95C" @confirm="onPassConfirm">
+    <div style="padding: 1rem; text-align: center;">是否确认审核通过该视频 ？</div>
+  </van-dialog>
+</template>
+
+<script setup>
+import icon_up from '@images/icon-guanbi@2x.png'
+import icon_down from '@images/icon-zhankai@2x.png'
+
+import icon_refuse from '@images/icon-jujue@2x.png'
+import icon_apply from '@images/icon-shenhe@2x.png'
+import icon_enable from '@images/icon-tongguo@2x.png'
+
+import MyButton from '@/components/MyButton/index.vue'
+import { ref, reactive, onMounted, nextTick, watch, onUpdated } from 'vue'
+import 'mui-player/dist/mui-player.min.css'
+import MuiPlayer from 'mui-player'
+import _ from 'lodash';
+import tools from '@/common/tool'
+
+import { useRoute, useRouter } from 'vue-router'
+const $route = useRoute();
+const $router = useRouter();
+
+// 判断是否显示简介的展开图标
+const hasToggle = ref(false); // 判断是否有展开文字，默认没有
+const isToggle = ref(true); // 判断展开状态，默认展开
+
+const onToggle = (v) => { // 展开/折叠
+  isToggle.value = v
+}
+
+const showNotice = ref(false)
+const onConfirm = () => {
+  showNotice.value = false;
+}
+const closeNotice = () => {
+  showNotice.value = false;
+}
+
+const show = ref(false);
+
+const onRefuse = () => {
+  showNotice.value = true;
+}
+const onPass = () => {
+  show.value = true;
+}
+const onPassConfirm = () => { // 审核通过视频
+    console.warn('审核通过视频');
+}
+const message = ref('')
+
+const props = defineProps({
+  item: Object,
+  status: String
+})
+
+onMounted(() => {
+  // 判断是否显示简介的展开图标
+  nextTick(() => {
+    hasToggle.value = tools.hasEllipsis('book-intro');
+  })
+})
+
+</script>
+
+<script>
+export default {
+  // props: ['item', 'status'],
+  data() {
+    return {
+      detail: {}
+    }
+  },
+  created() {
+  },
+  mounted() {
+    var mp = new MuiPlayer({
+      container: '#mui-player-' + this.item.case_id,
+      title: this.item.title,
+      src: this.item.video.url,
+      poster: this.item.cover.url,
+      autoFit: false,
+      videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
+        { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
+        { attrKey: 'playsinline', attrValue: 'playsinline' },
+        { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
+      ]
+    })
+    this.detail = _.cloneDeep(this.item)
+  },
+  methods: {
+    setLike() {
+      this.detail.liked = !this.detail.liked
+    },
+    setComment() {
+      console.warn('跳转详情页，移动到留言页');
+      console.warn(this.detail.case_id);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.video-wrapper {
+  margin: 1rem;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
+
+  .status {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 999;
+  }
+
+  .video-div {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+
+  .video-bar {
+    color: #713610;
+    padding: 1rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .book-intro {
+    padding: 1rem;
+    padding-top: 0;
+
+    .book-post {
+      color: #222222;
+      font-size: 1.25rem;
+      font-weight: bold;
+    }
+
+    #book-intro {
+      color: #333333;
+      margin-top: 0.25rem;
+    }
+
+    .book-toggle-icon {
+      text-align: right;
+      color: #713610;
+      font-size: 1rem;
+    }
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: auto;
+  text-align: center;
+}
+
+.block {
+  width: 80%;
+  // height: 25rem;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 1rem;
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 5rem;
+}
+</style>
\ No newline at end of file

@@ -12,7 +12,7 @@
         <div class="sub">
         <div class="sub">
           <van-icon :name="icon_video" />&nbsp;&nbsp;<span>54个作品</span>
           <van-icon :name="icon_video" />&nbsp;&nbsp;<span>54个作品</span>
         </div>
         </div>
-        <div v-if="type === 'B'" class="upload" @click="onUpload(item)"> 上传视频 </div>
+        <div v-if="type === 'B'" class="upload" @click="onUpload(item)">上传视频</div>
       </van-col>
       </van-col>
     </van-row>
     </van-row>
   </div>
   </div>

 import { createApp } from 'vue';
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog } from 'vant';
 import router from './router';
 import router from './router';
 import App from './App.vue';
 import App from './App.vue';
 import axios from './utils/axios';
 import axios from './utils/axios';
@@ -35,6 +35,7 @@ app.use(Stepper);
 app.use(Tag);
 app.use(Tag);
 app.use(Swipe);
 app.use(Swipe);
 app.use(SwipeItem);
 app.use(SwipeItem);
+app.use(Dialog);
 
 
 app.use(ConfigProvider);
 app.use(ConfigProvider);
 
 

+const data = [
+    {
+      "case_id": "4245898071640719361",
+      "code": "N06",
+      "title": "复旦管理学奖励基金会",
+      "detail": "我国自古就有优秀的管理思想和实践，但中国现代管理科学则是在改革开放之后才逐步发展起来的。为进一步推动我国现代管理科学发展，原中共中央政治局常委、国务院副总理李岚清同志于2005年发起成立了复旦管理学奖励基金会，这也是中国人自己设立的管理学界第一个奖励基金会。\r\n“要真正解决好中国的管理问题，最终还是要依靠中国人自己。”这句话道出了“管理”必须根植于一个国家的社会组织和民族文化。管理科学，是兴国之道，也是一个国家软实力的重要组成部分。\r\n十六年来，基金会各项管理逐步完善，2020年首次参加社会组织等级评估即被授予“5A级社会组织”荣誉称号；FTI透明指数排名连获最优等级。基金会的评奖工作，及其开展的一系列公益项目，获得了来自各界人士的一致认可；同时借助媒体之力，不断拓宽公众对中国管理学的认识边界，受益人数不断增加。如今，基金会已逐渐发展成为中国管理学界最具影响力、最具公信力的基金会。\r\n作为一个“奖励性”的基金会，我们希望打造中国管理学界的“诺贝尔奖”。基金会目前设立了“复旦管理学杰出贡献奖”“复旦管理学终身成就奖”“复旦企业管理杰出贡献奖”三大奖项，已成为我国管理学界享有崇高声誉、具有广泛影响力的重要奖项。截至2020年，已评选出57位获奖人，他们中不乏成思危、苏东水等矢志推动中国特色的管理学及其研究走向世界的杰出专家学者，亦有张瑞敏、任正非等对中国管理学不断实践、探索的优秀民族企业家。\r\n评奖之外，基金会还积极开展了丰富多样的公益活动。自2013年起，面向我国高等学府，面向青年师生，面向中西部地区举办了“校园公益”系列讲座活动，辐射师生5000余人。\r\n联合我国管理学一级学会，举办了一系列具有国际影响力的管理学学术盛会。其中，“中国管理学年会”是中国管理学领域规模最大、层次最高的综合性学术会议。另外，基金会通过支持“中国管理学青年论坛”，为有潜力的优秀青年架起了跨学科、跨层次的学习交流平台，旨在培养中国管理学的中青年力量。\r\n为加强学术界和实业界的合作，基金会充分发挥“桥梁·引领·赋能”作用，做到将“管理学带出去”，“管理领进来”，邀请获奖人、专家学者与企业家共话“管理”。\r\n基金会还与复旦大学东方管理研究院、第一财经合作开展了“中国杰出企业家管理思想访谈录”项目，已通过42集电视专题片、6部《改变世界》、14本研究丛书等形式对外发布，另有10多个优秀案例走进了高校课堂，收益人数达10亿多人。\r\n基金会积极响应习近平总书记“把论文写在祖国大地上”的号召，与《管理学报》合作，举办专题学术研讨会，开辟“中国企业家管理思想”专栏；与知名企业合作开展“海尔生态雨林计划”等专项研究。\r\n2020年新冠疫情的突发，对全国各地的公共卫生治理都是前所未有的考验。为总结出应对疫情的科学、高效的经验，提供疫情应对经验给相关部门，基金会资助了“新冠疫情防控防治的中国特色管理理论与方法”系列专著及案例研究。于基金会而言，这件事意义非常。\r\n作为一个扎根于中国管理学领域发展的公益组织，基金会在各级领导的亲切关怀下不断发展。获奖人所提出管理思想、管理理论和实践的创新、各项公益活动等，对于上海乃至全国各地的社会治理、公共管理与企业管理都发挥了重要的作用。在每年的颁奖典礼上，历任上海市领导均受邀出席并致辞。当今世界正面临百年未有的大变局，发展中国特色的管理学、并让中国特色管理学发挥更大的影响力，这比任何时候都更加迫切。在未来的公益发展事业中，基金会将继续助力中国特色管理学的探索和创新，为增强上海自主创新能力，提高城市国际竞争力，做出新的重大的贡献！",
+      "cover": {
+        "name": "N06.jpg",
+        "url": "http://gyzs.onwall.cn/2021gyzs/N06.jpg",
+        "uid": 1564543218846,
+        "status": "success"
+      },
+      "video": {
+        "name": "N06.mp4",
+        "url": "http://gyzs.onwall.cn/2021gyzs/N06.mp4",
+        "uid": 1564543218846,
+        "status": "success"
+      },
+      "status": "ENABLE",
+      "public_vote": 3406,
+      "score": 0,
+      "award": null,
+      "optr_date": "2021-12-31T15:50:00.547Z",
+      "corp": {
+        "name": "复旦管理学奖励基金会"
+      },
+      "voted": false,
+      "liked": false
+    },
+    {
+      "case_id": "419178326515888128",
+      "code": "N14",
+      "title": "上海市普陀区长寿社会组织联合会",
+      "detail": "近年来，各类社区社会组织数量增长，规模扩大，社会组织日趋成为服务社区发展，提升社区治理水平的重要力量。所以以服务中心传统的点对点形式来去服务社会组织，已经不符合形势的发展，亟待搭建新的平台。在这种情势下，2016年长寿社会组织联合会孕育而生。长寿社会组织联合会是全市首家街道层面社会组织联合会。联合会以党建为引领，创新构建社区、社会组织、社会组织联合会的联动机制，这种全新模式不仅为社区与社会组织之间搭建了交流对接平台，也为促进社会组织自律自治、资源共享、健康发展创造了良好的条件。\n联合会运行以来，正式会员近百家。目前，长寿社会组织联合会成员中已有区党代表、区人大代表、区政协委员，充分激发社会组织领军人物的参与度，发挥社会组织自我管理、自我服务的能效。\n创新党建引领社会组织参与社区治理是我们的工作特色之一。2016年我们同步成立联合会党总支，党总支通过“价值引领、服务凝聚、同心共治”凝聚党员力量，提升基层组织活力。目前，党总支下设20个党组织、6个联合支部，14个独立支部。联合会自成立以来开展了一系列凝聚力建设活动，包括开展情景党课、建立学习教育体验站等等，我们还努力将公益理念引入党建活动，例如开展垃圾分类主题党日活动。通过这些活动和服务，不仅会员们的凝聚力日益增强，更是聚拢到了一批原先游离在边缘的社会组织。\n搭建公益服务平台也是我们最大的工作特色。我们通过公益秀、公益项目菜单、公益集市等形式将社会服务和项目精准化地投放到我们两新组织、楼宇和居民区，政府购买社会组织服务项目的数量及社区参与面都有了一个较大幅度的提升。\n在新媒体时代，为了更加方便项目对接，社联会依托微信公众号平台，于18年9月正式上线了长寿公e家网站。公e家的推出填补了20万以下政府采购服务对接渠道的空白。居民区科室可以进行社区需求发布，社会组织发布服务内容，这样以来加快了信息传递速率，实现了项目精准对接。例如，我们会在学生的暑假开展暑期班公益项目，让公益项目走进社区、走进百姓生活中。项目结项后，我们会举办成果展，把项目的成果进行公示，并在公E家上给承接方打分，能够让购买方一目了然地了解社会组织的服务能力。通过这样一个平台，我们让长寿的社会组织能真正了解到社区的需求，因地制宜地研发适合长寿、服务长寿的公益项目。尤其在疫情的冲击下，公E家的优势更加得到了肯定。2016年以来我们通过线上线下的渠道共举办了115个公益项目、300余场活动，有效实现社会组织与居民需求的“无缝对接”。\n我们在实践中摸索，完善中创新。展望未来，长寿社会组织联合会也将不断探索，下一步的计划是“请进来、走出去”，长寿社会组织联合会将联合其他街镇乃至其他区县的社会组织共同协作，打破社会组织属地化壁垒，提升他们视野和竞争力，因地制宜的研发出服务社区的公益项目，让公益的力量势如破竹，为打造精彩长寿、善美普陀和公益上海添砖加瓦。",
+      "cover": {
+        "name": "N14.jpg",
+        "url": "http://gyzs.onwall.cn/2021gyzs/N14.jpg",
+        "uid": 1564543218846,
+        "status": "success"
+      },
+      "video": {
+        "name": "N14.mp4",
+        "url": "http://gyzs.onwall.cn/2021gyzs/N14.mp4",
+        "uid": 1564543218846,
+        "status": "success"
+      },
+      "status": "APPLY",
+      "public_vote": 3346,
+      "score": 0,
+      "award": null,
+      "optr_date": "2021-12-31T15:50:00.547Z",
+      "corp": {
+        "name": "上海市普陀区长寿社会组织联合会"
+      },
+      "voted": false
+    },
+    {
+      "case_id": "419527762110595072",
+      "code": "N04",
+      "title": "上海震旦教育发展基金会",
+      "detail": "上海震旦教育发展基金会成立于2015年，秉持弘扬公益精神，积极回报社会的办会宗旨，努力汇集各方力量、传递正能量。\r\n基金会主要以四项特色工作为主:\r\n(一)携手各方力量，关爱特殊人群\r\n震旦教育基金会已成功主办、协办多项全国性、市级助残公益活动。关爱自闭症特殊群体活动，主题鲜明、内容丰富、参与者众、受益面广。\r\n（二)共襄慈善良业，回报社区民众\r\n震旦教育基金会为社区建设作贡献。为黄浦社区加装电梯工程中做配套绿化改建项目，为居民提供了优美的绿化环境。\r\n基金会每年中国传统节日前向街道、镇、村老人、残疾人送去温暖与爱心。\r\n2020年疫情期间，震旦教育基金会为黄浦区各大医院、派出所等总共58家单位，送去价值28万余元的哈根达斯蛋糕，向日夜坚守在疫情防控第一线的工作人员送去慰问与祝福，为抗击疫情助力加油!\r\n（三)引领环保时尚，共倡整洁家园\r\n震旦教育基金会联合公益机构举办了多场大型环保艺术展，在浦东科技馆的“艺起减塑”历时90天，共接待观众逾13万人次，使参与者对环保、减塑、有了感性的认识，也认识到环保是我们全人类的职责与使命。\r\n（四)共同奉献爱心，基金奖励优秀\r\n震旦师生积极为抗疫捐款，把参与慈善公益事业作为每个人的社会责任与使命。在疫情之中，基金会表彰震旦职业学院17名驰援武汉的毕业生，给予每人2万元的奖励，鼓励和表彰他们无私无畏，挺身而出把人民生命安全放在首位的大无畏精神。\r\n震旦教育基金会近年来开展了50多项公益项目活动，受益人数16万余人次。震旦教育基金会将不忘初心，凝心聚力，坚毅前行，吸纳更多热心于慈善事业的有识之士参与，做更多造福于社会的公益活动。",
+      "cover": {
+        "name": "N04.jpg",
+        "url": "http://gyzs.onwall.cn/2021gyzs/N04.jpg",
+        "uid": 1564543218846,
+        "status": "success"
+      },
+      "video": {
+        "name": "N04.mp4",
+        "url": "http://gyzs.onwall.cn/2021gyzs/N04.mp4",
+        "uid": 1564543218846,
+        "status": "success"
+      },
+      "status": "REFUSE",
+      "public_vote": 4125,
+      "score": 0,
+      "award": null,
+      "optr_date": "2021-12-31T15:50:00.547Z",
+      "corp": {
+        "name": "上海震旦教育发展基金会"
+      },
+      "voted": false
+    },
+  ]
+
+export default data
\ No newline at end of file

@@ -238,10 +238,10 @@ export default [{
   children: []
   children: []
 }, {
 }, {
   path: '/business/myVideo',
   path: '/business/myVideo',
-  name: '视频审核',
+  name: '我的视频',
   component: () => import('./views/business/myVideo.vue'),
   component: () => import('./views/business/myVideo.vue'),
   meta: {
   meta: {
-    title: '视频审核'
+    title: '我的视频'
   },
   },
   children: []
   children: []
 }, {
 }, {

 <template>
 <template>
-  <div class=""></div>
+  <div class="">
+    <van-tabs v-model:active="active" sticky @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7"
+    title-active-color="#222222" title-inactive-color="#777777">
+      <van-tab title="待审核" badge="24" :title-style="titleStyle">
+        <template v-if="!active">
+          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+            <template v-for="item in dataList" :key="item" style="height: 3rem;">
+              <b-video-card :item="item" status="PENDING"></b-video-card>
+            </template>
+          </van-list>
+        </template>
+      </van-tab>
+      <van-tab title="已审核" :title-style="titleStyle">
+        <template v-if="active">
+          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+            <template v-for="item in dataList1" :key="item" style="height: 3rem;">
+              <b-video-card :item="item" status="PROCESS"></b-video-card>
+            </template>
+          </van-list>
+        </template>
+      </van-tab>
+    </van-tabs>
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import dataList from '@/mock/video_list'
+import dataList1 from '@/mock/video_list1'
+import BVideoCard from '@/components/BVideoCard/index.vue'
+
 import { ref, reactive, onMounted } from 'vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
@@ -11,6 +37,39 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
+const titleStyle = {
+  fontSize: '1rem'
+}
+
+const active = ref(0)
+let tabStatus = ref('PENDING')
+const onClickTab = () => {
+    console.warn(0);
+}
+
+// 处理书籍下作品列表
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 20; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 100) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
   onMounted(() => {
   onMounted(() => {
     
     
   })
   })
@@ -36,5 +95,10 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-
+:global(.van-badge--top-right) {
+  right: -10px;
+}
+:global(.van-sticky--fixed) {
+  z-index: 1000;
+}
 </style>
 </style>
\ No newline at end of file

 <template>
 <template>
-  <div class=""></div>
+  <div class="">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <template v-for="item in dataList" :key="item" style="height: 3rem;">
+        <b-video-card :item="item"></b-video-card>
+      </template>
+    </van-list>
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import dataList from '@/mock/video_list'
+import BVideoCard from '@/components/BVideoCard/index.vue'
+
 import { ref, reactive, onMounted } from 'vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
@@ -11,6 +20,29 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
+// 处理书籍下作品列表
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 20; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 100) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
   onMounted(() => {
   onMounted(() => {
     
     
   })
   })

@@ -92,6 +92,7 @@
   <van-overlay :show="showNotice" z-index="1000">
   <van-overlay :show="showNotice" z-index="1000">
     <div class="wrapper" @click.stop>
     <div class="wrapper" @click.stop>
       <div class="block">
       <div class="block">
+        <div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;"><van-icon name="close" color="#FFFFFF" @click="closeNotice" /></div>
         <div>
         <div>
           <van-image width="100" height="100" :src="icon_notice" />
           <van-image width="100" height="100" :src="icon_notice" />
           <p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p>
           <p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p>
@@ -125,7 +126,7 @@ import icon_notice from '@images/que-tishi@2x.png'
 
 
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 import tools from '@/common/tool'
 import tools from '@/common/tool'
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
 import $ from 'jquery'
 import $ from 'jquery'
@@ -181,7 +182,9 @@ const onConfirm = ({ selectedOptions }) => {
 
 
 onMounted(() => {
 onMounted(() => {
   // 判断是否显示简介的展开图标
   // 判断是否显示简介的展开图标
+  nextTick(() => {
     hasToggle.value = tools.hasEllipsis('book-intro');
     hasToggle.value = tools.hasEllipsis('book-intro');
+  })
   for (let index = 0; index < 20; index++) {
   for (let index = 0; index < 20; index++) {
     items.push({
     items.push({
       id: index,
       id: index,
@@ -402,5 +405,8 @@ export default {
   background-color: #fff;
   background-color: #fff;
   border-radius: 10px;
   border-radius: 10px;
   padding: 1rem;
   padding: 1rem;
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 5rem;
 }
 }
 </style>
 </style>
\ No newline at end of file