hookehuyr

✨ feat(作品详情页): 返回逻辑调整

...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
19 <div class="video-main"> 19 <div class="video-main">
20 <van-row> 20 <van-row>
21 <van-col span="24" style="padding-top: 0.2rem;"> 21 <van-col span="24" style="padding-top: 0.2rem;">
22 - <van-tabs sticky v-model:active="active" @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7" title-active-color="#222222" title-inactive-color="#777777"> 22 + <van-tabs sticky v-model:active="active" @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7"
23 + title-active-color="#222222" title-inactive-color="#777777">
23 <van-tab title="简介" :title-style="tabClass"> 24 <van-tab title="简介" :title-style="tabClass">
24 <div class="intro"> 瑟日古娜小朋友是一名来自呼和浩特市新城区蒙古族幼儿园,六岁的蒙古族小姑娘,小姑娘用纯正的蒙古族语言生动形象的演绎了逃家小兔的活泼机灵,以及兔子妈妈的深情。 </div> 25 <div class="intro"> 瑟日古娜小朋友是一名来自呼和浩特市新城区蒙古族幼儿园,六岁的蒙古族小姑娘,小姑娘用纯正的蒙古族语言生动形象的演绎了逃家小兔的活泼机灵,以及兔子妈妈的深情。 </div>
25 </van-tab> 26 </van-tab>
...@@ -30,14 +31,14 @@ ...@@ -30,14 +31,14 @@
30 </van-col> 31 </van-col>
31 </van-row> 32 </van-row>
32 </div> 33 </div>
33 - 34 +
34 - 35 +
35 </div> 36 </div>
36 </template> 37 </template>
37 38
38 <script setup> 39 <script setup>
39 import VideoDetail from '@/components/VideoDetail/index.vue' 40 import VideoDetail from '@/components/VideoDetail/index.vue'
40 -import { ref, reactive, onMounted } from 'vue' 41 +import { ref, reactive, onMounted, watch } from 'vue'
41 import { useRoute, useRouter } from 'vue-router' 42 import { useRoute, useRouter } from 'vue-router'
42 import axios from '@/utils/axios'; 43 import axios from '@/utils/axios';
43 import $ from 'jquery' 44 import $ from 'jquery'
...@@ -79,6 +80,12 @@ const active = ref(0); // index 0 为简介,1 为留言 ...@@ -79,6 +80,12 @@ const active = ref(0); // index 0 为简介,1 为留言
79 const onClickTab = ({ title }) => { 80 const onClickTab = ({ title }) => {
80 console.warn(title); 81 console.warn(title);
81 }; 82 };
83 +// 监听路由变化
84 +watch(() => $route.path, (v) => {
85 + if (v === '/client/videoDetail') { // 返回详情主页面的时候激活第一个选中项
86 + active.value = 0;
87 + }
88 +})
82 89
83 const tabClass = { 90 const tabClass = {
84 fontSize: '1rem' 91 fontSize: '1rem'
...@@ -113,23 +120,30 @@ export default { ...@@ -113,23 +120,30 @@ export default {
113 <style lang="less" scoped> 120 <style lang="less" scoped>
114 .video-detail-page { 121 .video-detail-page {
115 background-color: #FFFFFF; 122 background-color: #FFFFFF;
123 +
116 .detail-header { 124 .detail-header {
117 padding: 1rem; 125 padding: 1rem;
126 +
118 .name-info { 127 .name-info {
119 - color: #222222; 128 + color: #222222;
120 font-size: 1.15rem; 129 font-size: 1.15rem;
121 } 130 }
131 +
122 .other-info { 132 .other-info {
123 color: #999999; 133 color: #999999;
124 } 134 }
125 } 135 }
136 +
126 .video-player { 137 .video-player {
127 height: auto; 138 height: auto;
128 } 139 }
140 +
129 .video-main { 141 .video-main {
130 height: auto; 142 height: auto;
143 +
131 .intro { 144 .intro {
132 - padding: 1rem; color: #333333; 145 + padding: 1rem;
146 + color: #333333;
133 } 147 }
134 } 148 }
135 } 149 }
......
...@@ -125,7 +125,7 @@ const closeNotice = () => { // 关闭提示框回调 ...@@ -125,7 +125,7 @@ const closeNotice = () => { // 关闭提示框回调
125 path: '/client/bookDetail' 125 path: '/client/bookDetail'
126 }); 126 });
127 } 127 }
128 -const flag = false; // 后台接口判断是否上传过作品 128 +const flag = true; // 后台接口判断是否上传过作品
129 // 实际调试时,点击回复需要判断是否上传过作品 129 // 实际调试时,点击回复需要判断是否上传过作品
130 const setComment = (v, type) => { // 回复/评论 130 const setComment = (v, type) => { // 回复/评论
131 if (flag) { 131 if (flag) {
......