hookehuyr

路由跳转方式调整优化

1 import { useRouter } from 'vue-router'; 1 import { useRouter } from 'vue-router';
2 2
3 +/**
4 + * 封装路由跳转方便行内调用
5 + * @returns
6 + */
3 export function useGo () { 7 export function useGo () {
4 let router = useRouter() 8 let router = useRouter()
5 function go (path, query) { 9 function go (path, query) {
......
...@@ -11,3 +11,9 @@ export const styleObject2 = ref({ ...@@ -11,3 +11,9 @@ export const styleObject2 = ref({
11 color: '#0B3A72', 11 color: '#0B3A72',
12 borderColor: '#F9D95C' 12 borderColor: '#F9D95C'
13 }) 13 })
14 +
15 +export const styleObject3 = ref({
16 + backgroundColor: '#F4675A',
17 + color: '#FFFFFF',
18 + borderColor: '#F4675A'
19 +})
......
...@@ -66,7 +66,8 @@ ...@@ -66,7 +66,8 @@
66 <template v-for="item in prod_list" :key="item" style="height: 3rem;"> 66 <template v-for="item in prod_list" :key="item" style="height: 3rem;">
67 <video-card :item="item"> 67 <video-card :item="item">
68 <template #bookDetailSub> 68 <template #bookDetailSub>
69 - <div @click="goToDetail(item.id, item.book_id, item.type)" style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} | {{ item.localism_type }} </div> 69 + <div @click="goToDetail(item.id, item.book_id, item.type)"
70 + style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} | {{ item.localism_type }} </div>
70 </template> 71 </template>
71 </video-card> 72 </video-card>
72 </template> 73 </template>
...@@ -94,7 +95,7 @@ ...@@ -94,7 +95,7 @@
94 <my-button @on-click="toDonate" type="plain">爱心捐书</my-button> 95 <my-button @on-click="toDonate" type="plain">爱心捐书</my-button>
95 </div> 96 </div>
96 </div> 97 </div>
97 - <shortcut-fixed type="C" :item="['home', 'me']"></shortcut-fixed> 98 + <shortcut-fixed type="C" :item="shortcutItem"></shortcut-fixed>
98 </div> 99 </div>
99 100
100 <!-- 上传时,如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 --> 101 <!-- 上传时,如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
...@@ -124,7 +125,9 @@ import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_i ...@@ -124,7 +125,9 @@ import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_i
124 import { JSJ_FORM_C } from '@/constant' 125 import { JSJ_FORM_C } from '@/constant'
125 126
126 import { useVideoList, useDefaultPerf } from '@/composables'; 127 import { useVideoList, useDefaultPerf } from '@/composables';
128 +import { useShortcutBar } from '@/composables';
127 129
130 +const { shortcutItem } = useShortcutBar(['home', 'me']); // 配置快捷跳转条
128 const $route = useRoute(); 131 const $route = useRoute();
129 const $router = useRouter(); 132 const $router = useRouter();
130 133
...@@ -352,6 +355,7 @@ const goToDetail = (prod_id, book_id, type) => { // 跳转作品详情页 ...@@ -352,6 +355,7 @@ const goToDetail = (prod_id, book_id, type) => { // 跳转作品详情页
352 .book-video-title { 355 .book-video-title {
353 background-color: #F7F7F7; 356 background-color: #F7F7F7;
354 padding: 1rem 1.5rem; 357 padding: 1rem 1.5rem;
358 +
355 .bg-gradient { 359 .bg-gradient {
356 background: linear-gradient(@base-color, @base-color) no-repeat; 360 background: linear-gradient(@base-color, @base-color) no-repeat;
357 /*调整下划线的宽度占百分之百 高度是3px */ 361 /*调整下划线的宽度占百分之百 高度是3px */
......
1 <template> 1 <template>
2 <div class="book-list"> 2 <div class="book-list">
3 <template v-for="(item, key) in items" :key="key"> 3 <template v-for="(item, key) in items" :key="key">
4 - <book-card type="C" :item="item" @on-click="onClick(item)"></book-card> 4 + <book-card type="C" :item="item" @on-click="go('/client/bookDetail', { id: item.id })"></book-card>
5 </template> 5 </template>
6 </div> 6 </div>
7 <van-empty v-if="emptyStatus" 7 <van-empty v-if="emptyStatus"
...@@ -14,14 +14,11 @@ ...@@ -14,14 +14,11 @@
14 <script setup> 14 <script setup>
15 import no_image from '@images/que-shuju@2x.png' 15 import no_image from '@images/que-shuju@2x.png'
16 import BookCard from '@/components/BookCard/index.vue' 16 import BookCard from '@/components/BookCard/index.vue'
17 -import { ref, reactive, onMounted } from 'vue' 17 +import { ref } from 'vue'
18 -import { useRoute, useRouter } from 'vue-router'
19 import axios from '@/utils/axios'; 18 import axios from '@/utils/axios';
20 -import $ from 'jquery' 19 +import { useGo } from '@/hooks/useGo'
21 -import { Toast } from 'vant';
22 -const $route = useRoute();
23 -const $router = useRouter();
24 20
21 +const go = useGo()
25 // 因为不能让空图标提前出来的写法 22 // 因为不能让空图标提前出来的写法
26 const emptyStatus = ref(false); 23 const emptyStatus = ref(false);
27 24
...@@ -45,15 +42,6 @@ axios.get('/srv/?a=my_subscribe') ...@@ -45,15 +42,6 @@ axios.get('/srv/?a=my_subscribe')
45 .catch(err => { 42 .catch(err => {
46 console.error(err); 43 console.error(err);
47 }); 44 });
48 -
49 -const onClick = (item) => {
50 - $router.push({
51 - path: '/client/bookDetail',
52 - query: {
53 - id: item.id
54 - }
55 - });
56 -}
57 </script> 45 </script>
58 46
59 <script> 47 <script>
......