hookehuyr

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

...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 <div class="video-main"> 20 <div class="video-main">
21 <van-row> 21 <van-row>
22 <van-col span="24" style="padding-top: 0.2rem;"> 22 <van-col span="24" style="padding-top: 0.2rem;">
23 - <van-tabs v-model:active="active" sticky :color="styleColor.baseColor" background="#F7F7F7" 23 + <van-tabs v-model:active="active" sticky shrink :color="styleColor.baseColor" background="#F7F7F7"
24 title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab"> 24 title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab">
25 <!-- <van-tab title="简介" :title-style="tabClass"> 25 <!-- <van-tab title="简介" :title-style="tabClass">
26 <div class="intro">{{ videoInfo.note }}</div> 26 <div class="intro">{{ videoInfo.note }}</div>
...@@ -32,7 +32,9 @@ ...@@ -32,7 +32,9 @@
32 <router-view /> 32 <router-view />
33 </van-tab> --> 33 </van-tab> -->
34 <van-tab :title="'留言 ' + comment_num" :title-style="tabClass"> 34 <van-tab :title="'留言 ' + comment_num" :title-style="tabClass">
35 - <router-view /> 35 + <!-- <router-view ref="childRef" name="comment" /> -->
36 + <video-detail-comment ref="childRef" />
37 + <donate-bar donate-type="C">为TA助力</donate-bar>
36 </van-tab> 38 </van-tab>
37 </van-tabs> 39 </van-tabs>
38 </van-col> 40 </van-col>
...@@ -42,7 +44,7 @@ ...@@ -42,7 +44,7 @@
42 </template> 44 </template>
43 45
44 <script setup> 46 <script setup>
45 -import { ref, onMounted, watch } from 'vue' 47 +import { ref, onMounted, watch, inject, provide } from 'vue'
46 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router' 48 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
47 import { storeToRefs, mainStore } from '@/utils/generatePackage' 49 import { storeToRefs, mainStore } from '@/utils/generatePackage'
48 import { VideoDetail, DonateBar } from '@/utils/generateModules' 50 import { VideoDetail, DonateBar } from '@/utils/generateModules'
...@@ -50,6 +52,8 @@ import { icon_avatar } from '@/utils/generateIcons' ...@@ -50,6 +52,8 @@ import { icon_avatar } from '@/utils/generateIcons'
50 import { styleColor } from '@/constant.js'; 52 import { styleColor } from '@/constant.js';
51 import { prodInfoAPI } from '@/api/C/prod.js' 53 import { prodInfoAPI } from '@/api/C/prod.js'
52 import { sharePage } from '@/composables/useShare.js' 54 import { sharePage } from '@/composables/useShare.js'
55 +import $ from 'jquery'
56 +import videoDetailComment from '@/views/client/videoDetailComment.vue'
53 57
54 // TAG:微信分享 58 // TAG:微信分享
55 sharePage({}); 59 sharePage({});
...@@ -92,7 +96,8 @@ watch(() => $route.path, (v) => { ...@@ -92,7 +96,8 @@ watch(() => $route.path, (v) => {
92 }) 96 })
93 97
94 const tabClass = { 98 const tabClass = {
95 - fontSize: '1rem' 99 + fontSize: '1rem',
100 + margin: '0 1rem'
96 } 101 }
97 102
98 // 处理主路由的留言数量问题 103 // 处理主路由的留言数量问题
...@@ -100,6 +105,7 @@ const store = mainStore(); ...@@ -100,6 +105,7 @@ const store = mainStore();
100 const { comment_num } = storeToRefs(store); 105 const { comment_num } = storeToRefs(store);
101 106
102 const videoInfo = ref(''); 107 const videoInfo = ref('');
108 +const childRef = ref(null);
103 onMounted(async () => { 109 onMounted(async () => {
104 // 检查$route.path判断tab默认值 110 // 检查$route.path判断tab默认值
105 $route.path === '/client/videoDetail' ? active.value = 0 : active.value = 1; 111 $route.path === '/client/videoDetail' ? active.value = 0 : active.value = 1;
...@@ -110,6 +116,17 @@ onMounted(async () => { ...@@ -110,6 +116,17 @@ onMounted(async () => {
110 videoInfo.value = data; 116 videoInfo.value = data;
111 // 动态调整留言数量 117 // 动态调整留言数量
112 store.changeCommentNum(data.comment_num); 118 store.changeCommentNum(data.comment_num);
119 + // 插入留言输入框
120 + $('.van-tabs__nav').append(
121 + `
122 + <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;">
123 + 写下你友善的留言
124 + </div>
125 + `
126 + )
127 + $("#setComment").on("click", function() {
128 + childRef.value?.setComment('', 'comment');
129 + });
113 }) 130 })
114 131
115 const onVideoDetail = (v) => { 132 const onVideoDetail = (v) => {
......
...@@ -70,7 +70,7 @@ import NoticeOverlay from '@/components/NoticeOverlay/index.vue' ...@@ -70,7 +70,7 @@ import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
70 import icon_avatar from '@images/que-touxiang@2x.png' 70 import icon_avatar from '@images/que-touxiang@2x.png'
71 import no_image from '@images/que-shuju@2x.png' 71 import no_image from '@images/que-shuju@2x.png'
72 72
73 -import { ref, reactive, onMounted } from 'vue' 73 +import { ref, reactive, onMounted, provide, inject, nextTick } from 'vue'
74 import { useRoute, useRouter } from 'vue-router' 74 import { useRoute, useRouter } from 'vue-router'
75 import axios from '@/utils/axios'; 75 import axios from '@/utils/axios';
76 import $ from 'jquery' 76 import $ from 'jquery'
...@@ -239,6 +239,11 @@ const setComment = (v, type) => { ...@@ -239,6 +239,11 @@ const setComment = (v, type) => {
239 } 239 }
240 } 240 }
241 241
242 +// 暴露留言方法,页面调整需求
243 +defineExpose({
244 + setComment
245 +})
246 +
242 /** 247 /**
243 * 提交留言回调 248 * 提交留言回调
244 * @param {*} note 留言内容 249 * @param {*} note 留言内容
......