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