✨ feat(视频组件): 结构vue3，api请求模块化改造

+import axios from '@/utils/axios';
+import { fn } from '@/api/fn';
+
+const Api = {
+  PROD_ACTION: '/srv/?a=prod_action',
+  PROD_INFO: '/srv/?a=prod_info',
+}
+
+/**
+ * @description: 操作作品动作
+ * @param {String} type 动作类型：like, favor, play
+ * @param {String} prod_id 作品 ID
+ * @returns 
+ */
+export const prodActionAPI = (params) => fn(axios.post(Api.PROD_ACTION, params))
+
+/**
+ * @description: 查询作品详情
+ * @param {String} type 动作类型：like, favor, play
+ * @param {String} prod_id 作品 ID
+ * @returns 
+ */
+export const prodInfoAPI = (params) => fn(axios.get(Api.PROD_INFO, { params }))

@@ -9,7 +9,7 @@ export const fn = (api) => {
   return api
     .then(res => {
       if (res.data.code === 1) {
-        return res.data.data || true;
+        return res.data || true;
       } else {
         console.warn(res);
         if (!res.data.show) return false;

 <template>
   <div class="video-wrapper">
     <div class="video-div" :id="'mui-player-' + item.id"></div>
-    <div v-if="mp" class="normal-module">
+    <div class="normal-module">
       <div class="video-bar">
         <van-row>
           <van-col span="12" @click="goTo">
@@ -38,86 +38,90 @@
 /**
  * 视频组件通用模块
  */
-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_avatar from '@images/que-touxiang@2x.png'
-
+import { icon_dianzan1, icon_dianzan2, icon_liuyan, icon_avatar } from '@/utils/generateIcons.js'
 import { ref, reactive, onMounted } from 'vue'
+import { _, Toast } from '@/utils/generatePackage.js'
+import { useRoute, useRouter } from 'vue-router'
 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 { prodActionAPI, prodInfoAPI } from '@/api/C/prod.js'
 
-import { useRoute, useRouter } from 'vue-router'
 const $route = useRoute();
 const $router = useRouter();
 
-onMounted(() => {
+const props = defineProps({
+  item: Object
 })
 
-</script>
+// 作品用户操作
+async function handleAction(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('取消成功');
+    }
+  }
+  getProductDetail(action_type, prod_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>
-// FIXME: VUE2写法
-import mixin from 'common/mixin';
+let detail = ref({});
+
+onMounted(() => {
+  const mp = new MuiPlayer({
+    container: '#mui-player-' + props.item.id,
+    title: props.item.title,
+    src: props.item.video,
+    poster: props.item.cover,
+    autoFit: false,
+    videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
+      { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
+      { attrKey: 'playsinline', attrValue: 'playsinline' },
+      { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
+    ]
+  })
+  detail.value = _.cloneDeep(props.item);
+  const video = mp.video();
+  // 监听原生video事件
+  video && video.addEventListener('play', function (event) {
+    handleAction('play', props.item.id)
+  });
+});
 
-export default {
-  mixins: [mixin.likeFn],
-  props: ['item'],
-  data() {
-    return {
-      detail: {},
-      mp: ''
+const goTo = () => { // 跳转作品详情页
+  $router.push({
+    path: '/client/videoDetail',
+    query: {
+      prod_id: props.item.id,
+      book_id: props.item.book_id,
+      type: props.item.type // 特殊标识，判断入口 为keepAlive使用
     }
-  },
-  created() {
-  },
-  mounted() {
-    var mp = new MuiPlayer({
-      container: '#mui-player-' + this.item.id,
-      title: this.item.title,
-      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' },
-      ]
-    })
-    this.mp = mp;
-    this.detail = _.cloneDeep(this.item);
-    var video = mp.video();
-    // 监听原生video事件
-    var _this = this;
-    video && video.addEventListener('play', function (event) {
-      _this.handleAction('play', _this.item.id)
-    });
-  },
-  methods: {
-    goTo () { // 跳转作品详情页
-      this.$router.push({
-        path: '/client/videoDetail',
-        query: {
-          prod_id: this.item.id,
-          book_id: this.item.book_id,
-          type: this.item.type // 特殊标识，判断入口 为keepAlive使用
-        }
-      });
-    },
-    setComment() {
-      this.$router.push({
-        path: '/client/videoDetail/comment',
-        query: {
-          prod_id: this.item.id,
-          book_id: this.item.book_id
-        }
-      });
+  });
+}
+
+const setComment = () => {
+  $router.push({
+    path: '/client/videoDetail/comment',
+    query: {
+      prod_id: props.item.id,
+      book_id: props.item.book_id
     }
-  }
+  });
 }
+
 </script>
 
 <style lang="less" scoped>

@@ -5,6 +5,9 @@ import icon_subscribed from '@images/icon-dingyue01@2x.png'
 import icon_unsubscribe from '@images/icon-dingyue02@2x.png'
 import no_image from '@images/que-shuju@2x.png'
 import icon_avatar from '@images/que-logo@2x.png'
+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'
 
 export {
   icon_video,
@@ -13,5 +16,8 @@ export {
   icon_subscribed,
   icon_unsubscribe,
   no_image,
-  icon_avatar
+  icon_avatar,
+  icon_dianzan1,
+  icon_dianzan2,
+  icon_liuyan,
 }