✨ feat(作品详情页): 新增视频播放控件

+<template>
+  <div class="video-wrapper">
+    <div class="video-div" :id="'mui-player-' + item.case_id"></div>
+    <div class="video-bar">
+      <van-row style="text-align: center;">
+        <van-col span="7">
+          <span style="color: #777777;">
+            3068次播放
+          </span>
+        </van-col>
+        <van-col span="1" style="color: #EEEDED;">
+          |
+        </van-col>
+        <van-col span="8">
+          <span @click="setCollect">
+            <van-icon v-if="!detail.collected" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" />
+            <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" />
+            10086
+          </span>
+        </van-col>
+        <van-col span="1" style="color: #EEEDED;">
+          |
+        </van-col>
+        <van-col span="7">
+          <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>
+        </van-col>
+      </van-row>
+    </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_shoucang1 from '@images/icon-shoucang01@2x.png'
+import icon_shoucang2 from '@images/icon-shoucang02@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: {
+    setCollect() {
+      this.detail.collected = !this.detail.collected
+    },
+    setLike() {
+      this.detail.liked = !this.detail.liked
+    },
+    setCommit() {
+      console.warn('跳转详情页，移动到留言页');
+      console.warn(this.detail.case_id);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.video-wrapper {
+  .video-bar {
+    color: #713610; 
+    padding: 1rem; 
+    padding-bottom: 0.5rem;
+  }
+}
+</style>
\ No newline at end of file