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

hookehuyr
Commit 41a41ba4caa079ab585c97c6b03ba8d1f7e4539d 41a41ba4 1 parent b3786608
Showing 2 changed files with 63 additions and 59 deletions
src/components/AuditVideoCard/index.vue
src/views/me/videoList.vue
--- a/src/components/AuditVideoCard/index.vue
View file @41a41ba
+++ b/src/components/AuditVideoCard/index.vue
View file @41a41ba
@@ -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 class="video-div" :id="'mui-player-' + item.id"></div>
-    </div>
+    <div v-if="item.status === 'ENABLE'" class="normal-module">
-    <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;"
+            <van-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar" />&nbsp;
-              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
+            <span style="font-size: 1.05rem;vertical-align: middle;">{{ item.name }}</span>
-            <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
+                {{ item.comment_num }}
               </span>
               &nbsp;&nbsp;&nbsp;
-              <span @click="setLike()">
+              <span @click="handleAction('like', detail.id)">
-                <van-icon v-if="!detail.liked" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
+                <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 v-else class="audit-module" style="margin-top: 1rem;">
-      <div style="color: #222222; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div>
+      <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,
+        src: this.item.video,
-        poster: this.item.cover.url,
+        poster: this.item.cover,
         autoFit: false,
         videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
-          {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
+          { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
-          {attrKey:'playsinline',attrValue:'playsinline'},
+          { attrKey: 'playsinline', attrValue: 'playsinline' },
-          {attrKey:'x5-video-player-type',attrValue:'h5-page'},
+          { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
         ]
       })
-      this.detail = _.cloneDeep(this.item)
+      this.detail = _.cloneDeep(this.item);
     }, 500);
   },
   methods: {
-    setLike() {
+    goTo () { // 跳转作品详情页
-      this.detail.liked = !this.detail.liked
+      this.$router.push({
+        path: '/client/videoDetail',
+        query: {
+          prod_id: this.item.id
+        }
+      });
     },
     setComment() {
-      console.warn('跳转详情页，移动到留言页');
+      this.$router.push({
-      console.warn(this.detail.case_id);
+        path: '/client/videoDetail/comment',
+        query: {
+          prod_id: this.item.id
+        }
+      });
     }
   }
 }
@@ -126,10 +136,12 @@ export default {
     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
--- a/src/views/me/videoList.vue
View file @41a41ba
+++ b/src/views/me/videoList.vue
View file @41a41ba
 <template>
   <div class="book-video-list">
-    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+    <template v-for="item in prodList" :key="item" style="height: 3rem;">
-      <template v-for="item in dataList" :key="item" style="height: 3rem;">
       <audit-video-card :item="item"></audit-video-card>
     </template>
-    </van-list>
+    <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 prodList = ref([])
-const loading = ref(false);
+axios.get('/srv/?a=my_prod')
-const finished = ref(false);
+.then(res => {
-
+  if (res.data.code === 1) {
-const onLoad = () => {
+    res.data.data.prod.forEach(v => {
-  // 异步更新数据
+      v.status = v.status.toUpperCase()
-  // 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(() => {
-    
     })
+    prodList.value = res.data.data.prod;
+  } else {
+    console.warn(res);
+    Toast({
+      icon: 'close',
+      message: res.data.msg
+    });
+  }
+})
+.catch(err => {
+  console.error(err); 
+})
 </script>
 <script>