✨ feat(我的作品): 完善列表状态显示

+<template>
+  <div class="video-wrapper" style="position: relative;">
+    <div 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 v-if="item.status === 'ENABLE'" >
+      <div class="video-bar">
+        <van-row>
+          <van-col span="12" @click="goTo">
+            <van-image round width="2rem" height="2rem" style="vertical-align: bottom;"
+              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
+            <span style="font-size: 1.05rem;">王忆慈</span>
+          </van-col>
+          <van-col span="12">
+            <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
+              <span @click="setComment">
+                <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
+                67
+              </span>
+              &nbsp;&nbsp;&nbsp;
+              <span @click="setLike()">
+                <van-icon v-if="!detail.liked" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
+                <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
+                10086
+              </span>
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+      <div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
+    </div>
+    <div v-else style="margin-top: 1rem;">
+      <div style="color: #222222; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
+      <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>
+</template>
+
+<script setup>
+import icon_dianzan1 from '@images/icon-dianzan01@2x.png'
+import icon_dianzan2 from '@images/icon-dianzan02@2x.png'
+import icon_liuyan from '@images/icon-liuyan@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 { ref, reactive, onMounted } from 'vue'
+import 'mui-player/dist/mui-player.min.css'
+import MuiPlayer from 'mui-player'
+import _ from 'lodash';
+
+import { useRoute, useRouter } from 'vue-router'
+const $route = useRoute();
+const $router = useRouter();
+
+const goTo = () => { // 跳转作品详情页
+  $router.push({
+    path: '/client/videoDetail'
+  });
+}
+
+onMounted(() => {
+})
+
+</script>
+
+<script>
+export default {
+  props: ['item'],
+  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;
+  }
+}
+</style>
\ No newline at end of file

@@ -44,7 +44,7 @@ const data = [
         "uid": 1564543218846,
         "uid": 1564543218846,
         "status": "success"
         "status": "success"
       },
       },
-      "status": "ENABLE",
+      "status": "APPLY",
       "public_vote": 3346,
       "public_vote": 3346,
       "score": 0,
       "score": 0,
       "award": null,
       "award": null,
@@ -71,7 +71,7 @@ const data = [
         "uid": 1564543218846,
         "uid": 1564543218846,
         "status": "success"
         "status": "success"
       },
       },
-      "status": "ENABLE",
+      "status": "REFUSE",
       "public_vote": 4125,
       "public_vote": 4125,
       "score": 0,
       "score": 0,
       "award": null,
       "award": null,

 <template>
 <template>
-  <div class=""></div>
+  <div class="book-video-list">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <template v-for="item in dataList" :key="item" style="height: 3rem;">
+        <audit-video-card :item="item"></audit-video-card>
+      </template>
+    </van-list>
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import dataList from '@/mock/video_list'
+import AuditVideoCard from '@/components/AuditVideoCard/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(() => {
     
     
   })
   })