Showing
2 changed files
with
45 additions
and
37 deletions
| 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([]); | ... | ... |
-
Please register or login to post a comment