✨ 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);
 
 

@@ -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(() => {
   // 判断是否显示简介的展开图标
   // 判断是否显示简介的展开图标
-  hasToggle.value = tools.hasEllipsis('book-intro');
+  nextTick(() => {
+    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