designer-hub/packages/app/src/pages/material/detail/index.vue

<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<script setup lang="ts">
import Card from '@/components/card.vue'
import SectionHeading from '@/components/section-heading.vue'
import { getMaterialDetail, getByDictType, getMaterialHomePage } from '../../../core/libs/requests'
import NavbarEvo from '@/components/navbar-evo.vue'
import { DictType } from '../../../core/libs/models'
import { phone } from '../../../core/libs/svgs'
import { handleCall, openLocation } from '../../../core/utils/common'
import router from '@designer-hub/assets/src/assets/svgs/router'

const id = ref()
const { data, run: setData } = useRequest(() => getMaterialDetail({ id: id.value }))
const { data: materialHomePageData, run: setMaterialHomePageData } = useRequest(
  () => getMaterialHomePage(id.value),
  { initialData: {} },
)
const { data: materialBrandLevels, run: setMaterialBrandLevels } = useRequest(
  () => getByDictType(DictType.memberMaterialsBrandLevel),
  { initialData: [] },
)
const { data: materialOperationTypes, run: setMaterialOperationTypes } = useRequest(
  () => getByDictType(DictType.memberMaterialsOperationType),
  { initialData: [] },
)
const { data: materialBrandTypes, run: setMaterialBrandTypes } = useRequest(
  () => getByDictType(DictType.memberMaterialsBrandType),
  { initialData: [] },
)
const { data: materialsManageBrands, run: setMaterialsManageBrands } = useRequest(
  () => getByDictType(DictType.materialsManageBrand),
  { initialData: [] },
)
onLoad(async (query: { id: number }) => {
  id.value = query.id
  await setData()
  await setMaterialHomePageData()
  console.log(data.value)
  await Promise.all([
    setMaterialBrandLevels(),
    setMaterialBrandTypes(),
    setMaterialOperationTypes(),
    setMaterialsManageBrands(),
  ])
})
</script>
<template>
  <view class="flex-grow flex flex-col">
    <div
      class="w-full aspect-[1.16/1] bg-[url(https://image.zhuchaohui.com/zhucaohui/9da274c73312f5ff828b60457bf4a469e631c001a4bf1c1f355338887b19f035.png)] bg-[length:100%]"
      :style="{ backgroundImage: `url(${materialHomePageData?.bannerUrl})` }"
    ></div>
    <NavbarEvo transparent></NavbarEvo>
    <div class="flex flex-col gap-6 relative top--14 px-3.5">
      <Card>
        <div class="flex flex-col gap-4">
          <div class="flex gap-5">
            <wd-img
              round
              width="78"
              height="78"
              custom-class="border border-[#f2f2f2] border-solid"
              :src="data?.logoUrl"
            ></wd-img>
            <div class="flex flex-col gap-2.5">
              <div class="flex gap-2 items-center">
                <div
                  class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px]"
                >
                  <!-- IMOLA瓷砖 -->
                  {{ data?.materialsName }}
                </div>
                <div
                  class="w-[52px] h-[17px] px-2 bg-[#ef4343] rounded-[3px] justify-center items-center gap-2.5 inline-flex"
                >
                  <div
                    class="text-white text-[10px] font-normal font-['PingFang_SC'] leading-normal"
                  >
                    <!-- 自营品牌 -->
                    {{
                      materialBrandLevels.find(({ value }) => value === String(data.materialsType))
                        ?.label
                    }}
                  </div>
                </div>
              </div>
              <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]">
                {{
                  materialBrandTypes.find(({ value }) => value === String(data?.brandType))?.label
                }}
                |
                {{
                  materialOperationTypes.find(({ value }) => value === String(data?.manageType))
                    ?.label
                }}
              </div>
              <div>
                <span
                  class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]"
                >
                  经营品牌：
                </span>
                <span
                  class="text-black/40 text-xs font-normal font-['PingFang_SC'] uppercase leading-[10.18px]"
                >
                  <!-- imola / chedit -->
                  {{
                    materialsManageBrands.find(({ value }) => value === String(data?.manageBrand))
                      ?.label
                  }}
                </span>
              </div>
              <div class="flex gap-2.5">
                <div
                  class="w-[77px] h-5 px-2 py-px bg-neutral-100 rounded-[3px] justify-center items-center gap-2.5 inline-flex"
                >
                  <div
                    class="text-black/60 text-[10px] font-normal font-['PingFang_SC'] leading-normal"
                  >
                    积分比例:{{ data?.pointsExchangeRate }}%
                  </div>
                </div>
                <div
                  class="w-[92px] h-5 px-2 py-px bg-neutral-100 rounded-[3px] justify-center items-center gap-2.5 inline-flex"
                >
                  <div
                    class="text-black/60 text-[10px] font-normal font-['PingFang_SC'] leading-normal"
                  >
                    门店打卡:{{ data?.clockPoints }}积分
                  </div>
                </div>
              </div>
            </div>
          </div>
          <template
            v-for="({ shopAddr, shopName, shopContactPhone, ...shop }, i) in data?.shopList"
            :key="i"
          >
            <div class="bg-neutral-50 rounded-2.5 p-3.5 flex items-center">
              <div class="text-black/40 flex-1 border-r-2 border-r-[#f6f6f6] border-r-solid pr-4">
                <div class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-normal">
                  {{ shopName }}
                </div>
                <div>
                  <wd-icon name="location" size="15"></wd-icon>
                  <span
                    class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
                  >
                    {{ shopAddr }}
                  </span>
                </div>
              </div>
              <wd-button
                type="text"
                size="small"
                custom-class=" bg-[#f2f2f2]! p-0! ml-4"
                @click="handleCall(shopContactPhone)"
              >
                <wd-img width="28" height="28" :src="phone"></wd-img>
              </wd-button>
              <wd-button
                type="text"
                size="small"
                custom-class=" bg-[#f2f2f2]! p-0! ml-4"
                @click="
                  openLocation({
                    latitude: shop.latitude,
                    longitude: shop.longitude,
                    name: shopName,
                    address: shopAddr,
                  })
                "
              >
                <wd-img width="28" height="28" :src="router"></wd-img>
              </wd-button>
            </div>
          </template>
        </div>
      </Card>
      <Card>
        <div class="flex flex-col gap-4">
          <div
            class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px] pt-4"
          >
            品牌介绍
          </div>
          <div
            v-if="(materialHomePageData.brandAdvantageUrl ?? '') !== ''"
            class="rounded-2xl overflow-hidden aspect-[1.72/1]"
          >
            <!-- <wd-img
              width="100%"
              height="100%"
              :src="materialHomePageData.brandAdvantageUrl"
              mode="aspectFill"
              custom-class=""
            ></wd-img> -->
            <video class="w-full h-full"></video>
          </div>
          <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]">
            <!-- {{ materialHomePageData. }} -->
            {{
              materialsManageBrands.find(({ value }) => value === String(data?.manageBrand))?.label
            }}
          </div>
          <div
            class="text-justify text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[25px]"
          >
            {{ materialHomePageData.brandAdvantageDesc }}
          </div>
        </div>
      </Card>
      <template v-if="materialHomePageData.productDOList?.length">
        <SectionHeading title="产品展示"></SectionHeading>
      </template>
      <template v-for="(it, index) in materialHomePageData.productDOList" :key="index">
        <div class="aspect-[1.66/1] rounded-2xl overflow-hidden">
          <swiper class="h-[55.7vw]">
            <template v-for="img of it?.productImgUrl?.split(',')" :key="img">
              <swiper-item class="h-full">
                <wd-img width="100%" height="100%" class="" :src="img" mode="aspectFill" />
              </swiper-item>
            </template>
          </swiper>
        </div>
      </template>

      <wd-button custom-class="w-full! rounded-lg!">下载所有素材包</wd-button>
    </div>
  </view>
</template>