|
|
@ -1,5 +1,6 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="item" @click="handleShop"> |
|
|
<div class="item" @click="handleShop"> |
|
|
|
|
|
<img v-if="pics" src="./pictag.png" class="pictag" alt="" /> |
|
|
<div class="icon-wrapper"> |
|
|
<div class="icon-wrapper"> |
|
|
<img :src="'./static/offline' + shop.logoUrl" class="icon" alt="" /> |
|
|
<img :src="'./static/offline' + shop.logoUrl" class="icon" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
@ -12,6 +13,12 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup> |
|
|
<script setup> |
|
|
|
|
|
import { useStore } from '@/store/root' |
|
|
|
|
|
import { storeToRefs } from 'pinia' |
|
|
|
|
|
import { computed } from 'vue' |
|
|
|
|
|
const store = useStore() |
|
|
|
|
|
const { shopPicsMap } = storeToRefs(store) |
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
const props = defineProps({ |
|
|
shop: { |
|
|
shop: { |
|
|
type: Object, |
|
|
type: Object, |
|
|
@ -22,7 +29,7 @@ const props = defineProps({ |
|
|
default: () => ({}) |
|
|
default: () => ({}) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const pics = computed(() => shopPicsMap.value[props.shop.shopCode]) |
|
|
const emits = defineEmits(['click']) |
|
|
const emits = defineEmits(['click']) |
|
|
function handleShop() { |
|
|
function handleShop() { |
|
|
emits('click', props.shop) |
|
|
emits('click', props.shop) |
|
|
@ -31,6 +38,7 @@ function handleShop() { |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.item { |
|
|
.item { |
|
|
|
|
|
position: relative; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
@ -40,6 +48,13 @@ function handleShop() { |
|
|
border-radius: var(--global-radius, 8px); |
|
|
border-radius: var(--global-radius, 8px); |
|
|
margin-right: 8px; |
|
|
margin-right: 8px; |
|
|
margin-top: 24px; |
|
|
margin-top: 24px; |
|
|
|
|
|
.pictag { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 4px; |
|
|
|
|
|
top: 4px; |
|
|
|
|
|
width: 24px; |
|
|
|
|
|
height: 24px; |
|
|
|
|
|
} |
|
|
.icon-wrapper { |
|
|
.icon-wrapper { |
|
|
display: flex; |
|
|
display: flex; |
|
|
width: 210px; |
|
|
width: 210px; |
|
|
|