Browse Source

美食模块列表没有美食图时展示店铺logo

Reviewed-on: #14
master v1.1.3
朱志育 7 months ago
parent
commit
1ded893879
  1. 15
      src/components/HotRecommend/HotRecommend.vue
  2. 5
      src/components/ShopDetail/LeftInfo.vue
  3. 9
      src/views/Foods/Foods.vue
  4. 4
      src/views/Index/Index.vue

15
src/components/HotRecommend/HotRecommend.vue

@ -14,7 +14,20 @@
<SwiperSlide v-for="item of list" :key="item.shopCode"> <SwiperSlide v-for="item of list" :key="item.shopCode">
<div class="relative overflow-hidden rounded-xl bg-white"> <div class="relative overflow-hidden rounded-xl bg-white">
<div class="h-[180px] w-80"> <div class="h-[180px] w-80">
<img v-lazy="item.doorMaterialList?.[0]" :data-code="item.shopCode" class="cover" alt="" />
<img
v-show="item.doorMaterialList?.length"
:src="item.doorMaterialList?.[0]"
:data-code="item.shopCode"
class="cover"
alt=""
/>
<img
v-show="!item.doorMaterialList?.length"
:src="mapShopListByCode[item.shopCode]?.[0]?.logoUrl"
:data-code="item.shopCode"
class="cover"
alt=""
/>
</div> </div>
<div class="absolute inset-x-0 bottom-0 flex h-10.5 items-center justify-between bg-black/20 px-3 backdrop-blur-xl"> <div class="absolute inset-x-0 bottom-0 flex h-10.5 items-center justify-between bg-black/20 px-3 backdrop-blur-xl">
<div class="font-700 text-14 text-white">{{ i18n(item, 'shopName') }}</div> <div class="font-700 text-14 text-white">{{ i18n(item, 'shopName') }}</div>

5
src/components/ShopDetail/LeftInfo.vue

@ -1,13 +1,16 @@
<template> <template>
<div class="info rounded-xl bg-white"> <div class="info rounded-xl bg-white">
<div class="relative h-[486px] w-[864px] rounded-xl bg-gray-100"> <div class="relative h-[486px] w-[864px] rounded-xl bg-gray-100">
<EffectFade pagination :list="shop.doorMaterialList ?? []">
<EffectFade v-if="shop.doorMaterialList?.length" pagination :list="shop.doorMaterialList ?? []">
<template v-slot="{ item }"> <template v-slot="{ item }">
<div class="h-[486px] w-[864px] rounded-xl bg-gray-50"> <div class="h-[486px] w-[864px] rounded-xl bg-gray-50">
<img :src="item" class="rounded-xl cover" alt="" /> <img :src="item" class="rounded-xl cover" alt="" />
</div> </div>
</template> </template>
</EffectFade> </EffectFade>
<div v-else class="h-[486px] w-[864px] rounded-xl bg-gray-50">
<img :src="shop.logoUrl" class="rounded-xl contain" alt="" />
</div>
</div> </div>
<div class="relative z-10 ml-12 mr-6.5 flex"> <div class="relative z-10 ml-12 mr-6.5 flex">
<div class="-mt-15.5 mr-10.5 size-40 overflow-hidden rounded-xl bg-white shadow-default"> <div class="-mt-15.5 mr-10.5 size-40 overflow-hidden rounded-xl bg-white shadow-default">

9
src/views/Foods/Foods.vue

@ -20,7 +20,14 @@
@click="handleShop(shop)" @click="handleShop(shop)"
> >
<div class="relative z-10 size-[174px] overflow-hidden rounded-full bg-white"> <div class="relative z-10 size-[174px] overflow-hidden rounded-full bg-white">
<img v-lazy="shop.foodMaterialList?.[0]" :data-code="shop.shopCode" class="cover" alt="" />
<img
v-show="shop.foodMaterialList?.length"
v-lazy="shop.foodMaterialList?.[0]"
:data-code="shop.shopCode"
class="cover"
alt=""
/>
<img v-show="!shop.foodMaterialList?.length" v-lazy="shop.logoUrl" :data-code="shop.shopCode" class="cover" alt="" />
</div> </div>
<div class="-mt-[140px] h-54 w-full rounded-xl bg-gradient-to-b from-white/0 to-white"></div> <div class="-mt-[140px] h-54 w-full rounded-xl bg-gradient-to-b from-white/0 to-white"></div>
<div class="relative z-10 -mt-26 mb-3 size-12 rounded-full border border-solid border-orange-default bg-white p-2"> <div class="relative z-10 -mt-26 mb-3 size-12 rounded-full border border-solid border-orange-default bg-white p-2">

4
src/views/Index/Index.vue

@ -16,9 +16,9 @@
:style="{ backgroundImage: `url(${menuList[1].moduleActivateLogo})` }" :style="{ backgroundImage: `url(${menuList[1].moduleActivateLogo})` }"
@pointerdown="goPage(menuList[1])" @pointerdown="goPage(menuList[1])"
> >
<p class="flex items-center justify-between px-8 pt-8">
<p class="flex items-center justify-between pl-8 pr-1 pt-8">
<span class="font-700 text-28 leading-9 text-black/80">{{ menuList[1].moduleName }}</span> <span class="font-700 text-28 leading-9 text-black/80">{{ menuList[1].moduleName }}</span>
<span class="font-700 text-20 leading-7 text-black/50">{{ device.building }}-{{ device.floor }}</span>
<span class="font-700 text-14 leading-7 text-black/50">{{ device.building }}-{{ device.floor }}</span>
</p> </p>
<div class="px-8 text-18 uppercase leading-7 text-black/40">{{ menuList[1].moduleNameEn }}</div> <div class="px-8 text-18 uppercase leading-7 text-black/40">{{ menuList[1].moduleNameEn }}</div>
</div> </div>

Loading…
Cancel
Save