✨ feat(作品详情页): 需求调整，留言需要放在tab标签后面，新增一个触发块，把评论模块从子路由变成了组件

@@ -20,7 +20,7 @@
     <div class="video-main">
       <van-row>
         <van-col span="24" style="padding-top: 0.2rem;">
-          <van-tabs v-model:active="active" sticky :color="styleColor.baseColor" background="#F7F7F7"
+          <van-tabs v-model:active="active" sticky shrink :color="styleColor.baseColor" background="#F7F7F7"
             title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab">
             <!-- <van-tab title="简介" :title-style="tabClass">
               <div class="intro">{{ videoInfo.note }}</div>
@@ -32,7 +32,9 @@
               <router-view />
             </van-tab> -->
             <van-tab :title="'留言 ' + comment_num" :title-style="tabClass">
-              <router-view />
+              <!-- <router-view ref="childRef" name="comment" /> -->
+              <video-detail-comment ref="childRef" />
+              <donate-bar donate-type="C">为TA助力</donate-bar>
             </van-tab>
           </van-tabs>
         </van-col>
@@ -42,7 +44,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, inject, provide } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { storeToRefs, mainStore } from '@/utils/generatePackage'
 import { VideoDetail, DonateBar } from '@/utils/generateModules'
@@ -50,6 +52,8 @@ import { icon_avatar } from '@/utils/generateIcons'
 import { styleColor } from '@/constant.js';
 import { prodInfoAPI } from '@/api/C/prod.js'
 import { sharePage } from '@/composables/useShare.js'
+import $ from 'jquery'
+import videoDetailComment from '@/views/client/videoDetailComment.vue'
 
 // TAG：微信分享
 sharePage({});
@@ -92,7 +96,8 @@ watch(() => $route.path, (v) => {
 })
 
 const tabClass = {
-  fontSize: '1rem'
+  fontSize: '1rem',
+  margin: '0 1rem'
 }
 
 // 处理主路由的留言数量问题
@@ -100,6 +105,7 @@ const store = mainStore();
 const { comment_num } = storeToRefs(store);
 
 const videoInfo = ref('');
+const childRef = ref(null);
 onMounted(async () => {
   // 检查$route.path判断tab默认值
   $route.path === '/client/videoDetail' ? active.value = 0 : active.value = 1;
@@ -110,6 +116,17 @@ onMounted(async () => {
   videoInfo.value = data;
   // 动态调整留言数量
   store.changeCommentNum(data.comment_num);
+  // 插入留言输入框
+  $('.van-tabs__nav').append(
+  `
+    <div id='setComment' style="font-size: 0.9rem; color: #B7B7B7; line-height: 2; text-align: center; width: 80%; background-color: #fff; margin: 0.5rem; border-radius: 17px;">
+      写下你友善的留言
+    </div>
+  `
+  )
+  $("#setComment").on("click", function() {
+    childRef.value?.setComment('', 'comment');
+  });
 })
 
 const onVideoDetail = (v) => {

@@ -70,7 +70,7 @@ import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
 import icon_avatar from '@images/que-touxiang@2x.png'
 import no_image from '@images/que-shuju@2x.png'
 
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, provide, inject, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import $ from 'jquery'
@@ -239,6 +239,11 @@ const setComment = (v, type) => {
   }
 }
 
+// 暴露留言方法，页面调整需求
+defineExpose({
+  setComment
+})
+
 /**
  * 提交留言回调
  * @param {*} note 留言内容