综合视频组件测试

+<template>
+  <div 
+    @click="goToDetail(item, $router)" 
+    class="banner">
+    {{ item.kg_name }} ｜ {{ item.localism_type }}
+  </div>
+</template>
+
+<script setup>
+import { goToDetail } from './methods'
+const props = defineProps({
+  item: Object,
+});
+</script>
+
+<style lang="less" scoped>
+  .banner {
+    color: #999999; 
+    padding: 0.5rem 1rem
+  }
+</style>

 <template>
 <template>
   <div class="video-wrapper">
   <div class="video-wrapper">
-    <div
-      class="video-div"
-      :id="'mui-player-' + item.id"
-    ></div>
+    <status :item="item"></status>
+    <div class="video-div" :id="'mui-player-' + item.id"></div>
+    <video-bar :item="item" :barType="1"></video-bar>
+    <banner v-if="type === 'bookDetail'" :item="item"></banner>
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-  /**
+/**
  * 视频组件通用模块
  * 视频组件通用模块
  */
  */
-  import 'mui-player/dist/mui-player.min.css';
-  import MuiPlayer from 'mui-player';
-  import { onMounted } from 'vue';
-  // 视频基础属性
-  const props = defineProps({
+import 'mui-player/dist/mui-player.min.css';
+import MuiPlayer from 'mui-player';
+import { onMounted } from 'vue';
+import banner from './banner';
+import videoBar from './videoBar';
+import status from './status';
+// 视频基础属性
+const props = defineProps({
   item: Object,
   item: Object,
-  });
-  // 视频播放事件回调
-  const emit = defineEmits(['on-play']);
+  type: String,
+});
+// 视频播放事件回调
+const emit = defineEmits(['on-play']);
 
 
-  onMounted(() => {
+onMounted(() => {
   const mp = new MuiPlayer({
   const mp = new MuiPlayer({
     container: '#mui-player-' + props.item.id,
     container: '#mui-player-' + props.item.id,
     title: props.item.title,
     title: props.item.title,
@@ -44,11 +48,12 @@
         props: props.item,
         props: props.item,
       });
       });
     });
     });
-  });
+});
 </script>
 </script>
 
 
-<style lang="less" scoped>
-  .video-wrapper {
+<style lang="less" scoped >
+.video-wrapper {
+  position: relative;
   margin: 1rem;
   margin: 1rem;
   border-bottom-left-radius: 5px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   border-bottom-right-radius: 5px;
@@ -58,5 +63,12 @@
     border-top-left-radius: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-top-right-radius: 5px;
   }
   }
+
+  .video-bar {
+    color: #713610;
+    padding: 1rem;
+    padding-bottom: 0.5rem;
+
   }
   }
+}
 </style>
 </style>

+import { prodActionAPI } from '@/api/C/prod.js'
+import { Toast } from 'vant';
+
+export const goToDetail = ({ id, book_id, type }, $router) => {
+  $router.push({
+    path: '/client/videoDetail',
+    query: {
+      prod_id: id,
+      book_id,
+      type // 特殊标识，判断入口 为keepAlive使用
+    }
+  });
+}
+
+export const setComment = ({ id, book_id }, $router) => {
+  $router.push({
+    path: '/client/videoDetail/comment',
+    query: {
+      prod_id: id,
+      book_id
+    }
+  });
+}
+
+export const prodAction = async (action_type, prod_id) => {
+  const { msg } = await prodActionAPI({ action_type, prod_id });
+  if (msg === `${action_type}-add-OK`) { // 动作操作成功
+    if (action_type === 'favor') {
+      Toast('收藏成功');
+    }
+    if (action_type === 'like') {
+      Toast('点赞成功');
+    }
+  } else { // 取消操作
+    if (action_type !== 'play') {
+      Toast('取消成功');
+    }
+  }
+  return true;
+}

+<template>
+  <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 === 'disable'" 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>
+</template>
+
+<script setup>
+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'
+
+const props = defineProps({
+  item: Object,
+});
+</script>
+
+<style lang="less" scoped>
+.status {
+  position: absolute; 
+  top: 0; 
+  right: 0; 
+  z-index: 999;
+}
+</style>

+<template>
+  <div v-if="barType === 1" class="video-bar">
+    <van-row>
+      <van-col span="12" @click="goToDetail(item, $router)">
+        <van-image v-if="item.avatar" round width="2rem" height="2rem" style="vertical-align: middle;"
+          :src="item.avatar" />&nbsp;
+        <van-image v-else round width="2rem" height="2rem" style="vertical-align: middle;" :src="icon_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(item, $router)">
+            <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
+            {{ item.comment_num }}
+          </span>
+          &nbsp;&nbsp;&nbsp;
+          <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;" />
+            {{ detail.like_num }}
+          </span>
+        </div>
+      </van-col>
+    </van-row>
+  </div>
+  <div v-if="barType === 2" class="video-bar">
+    <van-row style="text-align: center;">
+      <van-col span="7">
+        <span style="color: #777777;">
+          {{ item.play_num }}次播放
+        </span>
+      </van-col>
+      <van-col span="1" style="color: #EEEDED;">
+        |
+      </van-col>
+      <van-col span="8">
+        <span @click="handleAction('favor', detail.id)">
+          <van-icon v-if="!detail.is_favor" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" />
+          <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" />
+          {{ detail.favor_num }}
+        </span>
+      </van-col>
+      <van-col span="1" style="color: #EEEDED;">
+        |
+      </van-col>
+      <van-col span="7">
+        <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;" />
+          {{ detail.like_num }}
+        </span>
+      </van-col>
+    </van-row>
+  </div>
+</template>
+
+<script setup>
+import { icon_shoucang1, icon_shoucang2, icon_dianzan1, icon_dianzan2, icon_liuyan, icon_avatar } from '@/utils/generateIcons.js'
+
+import { ref } from 'vue';
+import { goToDetail, setComment, prodAction } from './methods';
+import _ from 'lodash';
+import { prodInfoAPI } from '@/api/C/prod.js'
+
+const props = defineProps({
+  item: Object,
+  barType: Number
+});
+
+const detail = ref({});
+detail.value = _.cloneDeep(props.item);
+
+const handleAction = async (type, id) => {
+  if (await prodAction(type, id)) {
+    getProductDetail(type, id)
+  }
+}
+
+// 查询作品详情
+async function getProductDetail(action_type, prod_id) {
+  const { data } = await prodInfoAPI({ prod_id });
+  // 更新详情显示
+  detail.value[`is_${action_type}`] = data[`is_${action_type}`];
+  detail.value[`${action_type}_num`] = data[`${action_type}_num`];
+}
+
+</script>
+
+<style lang="less" scoped>
+.video-bar {
+  color: #713610; 
+  padding: 1rem; 
+  padding-bottom: 0.5rem;
+}
+</style>

@@ -7,6 +7,8 @@ import no_image from '@images/que-shuju@2x.png'
 import icon_avatar from '@images/que-logo@2x.png'
 import icon_avatar from '@images/que-logo@2x.png'
 import icon_dianzan1 from '@images/icon-dianzan01@2x.png'
 import icon_dianzan1 from '@images/icon-dianzan01@2x.png'
 import icon_dianzan2 from '@images/icon-dianzan02@2x.png'
 import icon_dianzan2 from '@images/icon-dianzan02@2x.png'
+import icon_shoucang1 from '@images/icon-shoucang01@2x.png'
+import icon_shoucang2 from '@images/icon-shoucang02@2x.png'
 import icon_liuyan from '@images/icon-liuyan@2x.png'
 import icon_liuyan from '@images/icon-liuyan@2x.png'
 
 
 export {
 export {
@@ -20,4 +22,6 @@ export {
   icon_dianzan1,
   icon_dianzan1,
   icon_dianzan2,
   icon_dianzan2,
   icon_liuyan,
   icon_liuyan,
+  icon_shoucang1,
+  icon_shoucang2,
 }
 }