hookehuyr

✨ feat: 快捷进入组件调整排行榜入口功能

1 <template> 1 <template>
2 <div> 2 <div>
3 - <img v-if="isHome" @click="toHome" class="icon-home" referrerpolicy="no-referrer" :src="icon_home" /> 3 + <van-image v-if="isHome" class="icon-home" :src="icon_home" @click="toHome" />
4 - <img v-if="isMe" @click="toMe" class="icon-me" referrerpolicy="no-referrer" :src="icon_me" /> 4 + <van-image v-if="isMe" class="icon-me" :src="icon_me" @click="toMe" />
5 + <van-image v-if="isRank" class="icon-rank" :src="icon_rank" @click="toRank" />
5 </div> 6 </div>
6 </template> 7 </template>
7 8
8 <script setup> 9 <script setup>
9 import Cookies from 'js-cookie' 10 import Cookies from 'js-cookie'
10 - 11 +import { icon_me, icon_home, icon_rank } from '@/utils/generateIcons.js'
11 -import icon_me from '@images/icon-my@2x.png'
12 -import icon_home from '@images/icon-home@2x.png'
13 -
14 -import { ref, reactive, onMounted } from 'vue'
15 -// const props = defineProps({
16 -// type: String
17 -// })
18 -const emit = defineEmits(['on-click']);
19 -const handle = () => {
20 - emit('on-click', '')
21 -}
22 </script> 12 </script>
23 13
24 <script> 14 <script>
25 // FIXME: VUE2写法 15 // FIXME: VUE2写法
26 export default { 16 export default {
27 props: ['type', 'item'], 17 props: ['type', 'item'],
28 - data () { 18 + data() {
29 return { 19 return {
30 userType: Cookies.get('userType') ? Cookies.get('userType') : '' 20 userType: Cookies.get('userType') ? Cookies.get('userType') : ''
31 } 21 }
32 }, 22 },
33 computed: { 23 computed: {
34 - isHome () { 24 + isHome() {
35 return this.item.indexOf('home') !== -1 ? true : false 25 return this.item.indexOf('home') !== -1 ? true : false
36 }, 26 },
37 - isMe () { 27 + isMe() {
38 return this.item.indexOf('me') !== -1 ? true : false 28 return this.item.indexOf('me') !== -1 ? true : false
39 }, 29 },
30 + isRank() {
31 + return this.item.indexOf('rank') !== -1 ? true : false
32 + },
40 }, 33 },
41 - mounted () { 34 + mounted() {
42 }, 35 },
43 methods: { 36 methods: {
44 - toHome () { 37 + toHome() {
45 // 返回首页 38 // 返回首页
46 if (this.type === 'B') { // 服务端判断 39 if (this.type === 'B') { // 服务端判断
47 this.$router.push({ 40 this.$router.push({
...@@ -68,7 +61,7 @@ export default { ...@@ -68,7 +61,7 @@ export default {
68 } 61 }
69 } 62 }
70 }, 63 },
71 - toMe () { 64 + toMe() {
72 if (this.type === 'B') { // 服务端判断 65 if (this.type === 'B') { // 服务端判断
73 this.$router.push({ 66 this.$router.push({
74 path: '/business/me' 67 path: '/business/me'
...@@ -78,26 +71,41 @@ export default { ...@@ -78,26 +71,41 @@ export default {
78 path: '/me/index' 71 path: '/me/index'
79 }); 72 });
80 } 73 }
74 + },
75 + toRank () {
76 + this.$router.push({
77 + path: '/client/rankList'
78 + });
81 } 79 }
82 } 80 }
83 } 81 }
84 </script> 82 </script>
85 83
86 <style lang="less" scoped> 84 <style lang="less" scoped>
87 - .icon-home { 85 +.icon-home {
88 - z-index: 169; 86 + z-index: 169;
89 - position: fixed; 87 + position: fixed;
90 - right: 2rem; 88 + right: 2rem;
91 - bottom: 12rem; 89 + bottom: 14rem;
92 - width: 3rem; 90 + width: 3rem;
93 - height: 3rem; 91 + height: 3rem;
94 - } 92 +}
95 - .icon-me { 93 +
96 - z-index: 169; 94 +.icon-me {
97 - position: fixed; 95 + z-index: 169;
98 - right: 2rem; 96 + position: fixed;
99 - bottom: 8rem; 97 + right: 2rem;
100 - width: 3rem; 98 + bottom: 10rem;
101 - height: 3rem; 99 + width: 3rem;
102 - } 100 + height: 3rem;
101 +}
102 +
103 +.icon-rank {
104 + z-index: 169;
105 + position: fixed;
106 + right: 2rem;
107 + bottom: 6rem;
108 + width: 3rem;
109 + height: 3rem;
110 +}
103 </style> 111 </style>
......
...@@ -6,7 +6,7 @@ export const useShortcutBar = (item) => { ...@@ -6,7 +6,7 @@ export const useShortcutBar = (item) => {
6 const $route = useRoute(); 6 const $route = useRoute();
7 const path = $route.path; 7 const path = $route.path;
8 const isClient = Cookies.get('userType') === 'client' ? true : false; // 判断C端入口位置,访客/客户 8 const isClient = Cookies.get('userType') === 'client' ? true : false; // 判断C端入口位置,访客/客户
9 - const case1 = ['home', 'me']; 9 + const case1 = ['home', 'me', 'rank'];
10 const case2 = ['home']; 10 const case2 = ['home'];
11 const case3 = ['me']; 11 const case3 = ['me'];
12 const shortcutItem = ref([]); 12 const shortcutItem = ref([]);
......