✨ feat(我的视频): API接口联调

@@ -5,45 +5,47 @@
       <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-div" :id="'mui-player-' + item.id"></div>
+    <div v-if="item.status === 'ENABLE'" class="normal-module">
       <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-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar" />&nbsp;
+            <span style="font-size: 1.05rem;vertical-align: middle;">{{ item.name }}</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
+                {{ item.comment_num }}
               </span>
               &nbsp;&nbsp;&nbsp;
-              <span @click="setLike()">
-                <van-icon v-if="!detail.liked" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
+              <span @click="handleAction('like', detail.id)">
+                <van-icon v-if="!detail.is_like" :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
+                {{ detail.like_num }}
               </span>
             </div>
           </van-col>
         </van-row>
       </div>
-      <div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
+      <div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }}
+      </div>
     </div>
-    <div v-else style="margin-top: 1rem;">
-      <div style="color: #222222; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
+    <div v-else class="audit-module" style="margin-top: 1rem;">
+      <div style="color: #222222; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }}</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>
+        <p>{{ item.check_note }}</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'
@@ -55,24 +57,23 @@ import { ref, reactive, onMounted } from 'vue'
 import 'mui-player/dist/mui-player.min.css'
 import MuiPlayer from 'mui-player'
 import _ from 'lodash';
+import axios from 'axios';
+import { Toast } from 'vant';
 
 import { useRoute, useRouter } from 'vue-router'
 const $route = useRoute();
 const $router = useRouter();
 
-const goTo = () => { // 跳转作品详情页
-  $router.push({
-    path: '/client/videoDetail'
-  });
-}
-
 onMounted(() => {
 })
 
 </script>
 
 <script>
+import mixin from 'common/mixin';
+
 export default {
+  mixins: [mixin.likeFn],
   props: ['item'],
   data() {
     return {
@@ -84,27 +85,36 @@ export default {
   mounted() {
     setTimeout(() => {
       var mp = new MuiPlayer({
-        container: '#mui-player-' + this.item.case_id,
+        container: '#mui-player-' + this.item.id,
         title: this.item.title,
-        src: this.item.video.url,
-        poster: this.item.cover.url,
+        src: this.item.video,
+        poster: this.item.cover,
         autoFit: false,
         videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
-          {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
-          {attrKey:'playsinline',attrValue:'playsinline'},
-          {attrKey:'x5-video-player-type',attrValue:'h5-page'},
+          { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
+          { attrKey: 'playsinline', attrValue: 'playsinline' },
+          { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
         ]
       })
-      this.detail = _.cloneDeep(this.item)
+      this.detail = _.cloneDeep(this.item);
     }, 500);
   },
   methods: {
-    setLike() {
-      this.detail.liked = !this.detail.liked
+    goTo () { // 跳转作品详情页
+      this.$router.push({
+        path: '/client/videoDetail',
+        query: {
+          prod_id: this.item.id
+        }
+      });
     },
     setComment() {
-      console.warn('跳转详情页，移动到留言页');
-      console.warn(this.detail.case_id);
+      this.$router.push({
+        path: '/client/videoDetail/comment',
+        query: {
+          prod_id: this.item.id
+        }
+      });
     }
   }
 }
@@ -112,9 +122,9 @@ export default {
 
 <style lang="less" scoped>
 .video-wrapper {
-  margin: 1rem; 
-  border-bottom-left-radius: 5px; 
-  border-bottom-right-radius: 5px; 
+  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; 
@@ -123,13 +133,15 @@ export default {
     z-index: 999;
   }
   .video-div {
-    border-top-left-radius: 5px; 
+    border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }
+
   .video-bar {
-    color: #713610; 
-    padding: 1rem; 
+    color: #713610;
+    padding: 1rem;
     padding-bottom: 0.5rem;
+ 
   }
 }
 </style>
\ No newline at end of file

 <template>
   <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>
+    <template v-for="item in prodList" :key="item" style="height: 3rem;">
+      <audit-video-card :item="item"></audit-video-card>
+    </template>
+    <div style="height: 2rem;"></div>
   </div>
 </template>
 
 <script setup>
-import dataList from '@/mock/video_list'
 import AuditVideoCard from '@/components/AuditVideoCard/index.vue'
 
 import { ref, reactive, onMounted } from 'vue'
@@ -21,31 +19,25 @@ const $route = useRoute();
 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(() => {
-    
-  })
+const prodList = ref([])
+axios.get('/srv/?a=my_prod')
+.then(res => {
+  if (res.data.code === 1) {
+    res.data.data.prod.forEach(v => {
+      v.status = v.status.toUpperCase()
+    })
+    prodList.value = res.data.data.prod;
+  } else {
+    console.warn(res);
+    Toast({
+      icon: 'close',
+      message: res.data.msg
+    });
+  }
+})
+.catch(err => {
+  console.error(err); 
+})
 </script>
 
 <script>