<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>