index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <route lang="json">
  2. { "style": { "navigationStyle": "custom" } }
  3. </route>
  4. <script setup lang="ts">
  5. import Card from '@/components/card.vue'
  6. import SectionHeading from '@/components/section-heading.vue'
  7. import { getMaterialDetail, getByDictType, getMaterialHomePage } from '../../../core/libs/requests'
  8. import NavbarEvo from '@/components/navbar-evo.vue'
  9. import { DictType } from '../../../core/libs/models'
  10. import { phone } from '../../../core/libs/svgs'
  11. import { handleCall, openLocation } from '../../../core/utils/common'
  12. import router from '@designer-hub/assets/src/assets/svgs/router'
  13. const id = ref()
  14. const { data, run: setData } = useRequest(() => getMaterialDetail({ id: id.value }))
  15. const { data: materialHomePageData, run: setMaterialHomePageData } = useRequest(
  16. () => getMaterialHomePage(id.value),
  17. { initialData: {} },
  18. )
  19. const { data: materialBrandLevels, run: setMaterialBrandLevels } = useRequest(
  20. () => getByDictType(DictType.memberMaterialsBrandLevel),
  21. { initialData: [] },
  22. )
  23. const { data: materialOperationTypes, run: setMaterialOperationTypes } = useRequest(
  24. () => getByDictType(DictType.memberMaterialsOperationType),
  25. { initialData: [] },
  26. )
  27. const { data: materialBrandTypes, run: setMaterialBrandTypes } = useRequest(
  28. () => getByDictType(DictType.memberMaterialsBrandType),
  29. { initialData: [] },
  30. )
  31. const { data: materialsManageBrands, run: setMaterialsManageBrands } = useRequest(
  32. () => getByDictType(DictType.materialsManageBrand),
  33. { initialData: [] },
  34. )
  35. onLoad(async (query: { id: number }) => {
  36. id.value = query.id
  37. await setData()
  38. await setMaterialHomePageData()
  39. console.log(data.value)
  40. await Promise.all([
  41. setMaterialBrandLevels(),
  42. setMaterialBrandTypes(),
  43. setMaterialOperationTypes(),
  44. setMaterialsManageBrands(),
  45. ])
  46. })
  47. </script>
  48. <template>
  49. <view class="flex-grow flex flex-col">
  50. <div
  51. class="w-full aspect-[1.16/1] bg-[url(https://image.zhuchaohui.com/zhucaohui/9da274c73312f5ff828b60457bf4a469e631c001a4bf1c1f355338887b19f035.png)] bg-[length:100%]"
  52. :style="{ backgroundImage: `url(${materialHomePageData?.bannerUrl})` }"
  53. ></div>
  54. <NavbarEvo transparent></NavbarEvo>
  55. <div class="flex flex-col gap-6 relative top--14 px-3.5">
  56. <Card>
  57. <div class="flex flex-col gap-4">
  58. <div class="flex gap-5">
  59. <wd-img
  60. round
  61. width="78"
  62. height="78"
  63. custom-class="border border-[#f2f2f2] border-solid"
  64. :src="data?.logoUrl"
  65. ></wd-img>
  66. <div class="flex flex-col gap-2.5">
  67. <div class="flex gap-2 items-center">
  68. <div
  69. class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px]"
  70. >
  71. <!-- IMOLA瓷砖 -->
  72. {{ data?.materialsName }}
  73. </div>
  74. <div
  75. class="w-[52px] h-[17px] px-2 bg-[#ef4343] rounded-[3px] justify-center items-center gap-2.5 inline-flex"
  76. >
  77. <div
  78. class="text-white text-[10px] font-normal font-['PingFang_SC'] leading-normal"
  79. >
  80. <!-- 自营品牌 -->
  81. {{
  82. materialBrandLevels.find(({ value }) => value === String(data.materialsType))
  83. ?.label
  84. }}
  85. </div>
  86. </div>
  87. </div>
  88. <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]">
  89. {{
  90. materialBrandTypes.find(({ value }) => value === String(data?.brandType))?.label
  91. }}
  92. |
  93. {{
  94. materialOperationTypes.find(({ value }) => value === String(data?.manageType))
  95. ?.label
  96. }}
  97. </div>
  98. <div>
  99. <span
  100. class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]"
  101. >
  102. 经营品牌:
  103. </span>
  104. <span
  105. class="text-black/40 text-xs font-normal font-['PingFang_SC'] uppercase leading-[10.18px]"
  106. >
  107. <!-- imola / chedit -->
  108. {{
  109. materialsManageBrands.find(({ value }) => value === String(data?.manageBrand))
  110. ?.label
  111. }}
  112. </span>
  113. </div>
  114. <div class="flex gap-2.5">
  115. <div
  116. class="w-[77px] h-5 px-2 py-px bg-neutral-100 rounded-[3px] justify-center items-center gap-2.5 inline-flex"
  117. >
  118. <div
  119. class="text-black/60 text-[10px] font-normal font-['PingFang_SC'] leading-normal"
  120. >
  121. 积分比例:{{ data?.pointsExchangeRate }}%
  122. </div>
  123. </div>
  124. <div
  125. class="w-[92px] h-5 px-2 py-px bg-neutral-100 rounded-[3px] justify-center items-center gap-2.5 inline-flex"
  126. >
  127. <div
  128. class="text-black/60 text-[10px] font-normal font-['PingFang_SC'] leading-normal"
  129. >
  130. 门店打卡:{{ data?.clockPoints }}积分
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. <template
  137. v-for="({ shopAddr, shopName, shopContactPhone, ...shop }, i) in data?.shopList"
  138. :key="i"
  139. >
  140. <div class="bg-neutral-50 rounded-2.5 p-3.5 flex items-center">
  141. <div class="text-black/40 flex-1 border-r-2 border-r-[#f6f6f6] border-r-solid pr-4">
  142. <div class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-normal">
  143. {{ shopName }}
  144. </div>
  145. <div>
  146. <wd-icon name="location" size="15"></wd-icon>
  147. <span
  148. class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
  149. >
  150. {{ shopAddr }}
  151. </span>
  152. </div>
  153. </div>
  154. <wd-button
  155. type="text"
  156. size="small"
  157. custom-class=" bg-[#f2f2f2]! p-0! ml-4"
  158. @click="handleCall(shopContactPhone)"
  159. >
  160. <wd-img width="28" height="28" :src="phone"></wd-img>
  161. </wd-button>
  162. <wd-button
  163. type="text"
  164. size="small"
  165. custom-class=" bg-[#f2f2f2]! p-0! ml-4"
  166. @click="
  167. openLocation({
  168. latitude: shop.latitude,
  169. longitude: shop.longitude,
  170. name: shopName,
  171. address: shopAddr,
  172. })
  173. "
  174. >
  175. <wd-img width="28" height="28" :src="router"></wd-img>
  176. </wd-button>
  177. </div>
  178. </template>
  179. </div>
  180. </Card>
  181. <Card>
  182. <div class="flex flex-col gap-4">
  183. <div
  184. class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-[10.18px] pt-4"
  185. >
  186. 品牌介绍
  187. </div>
  188. <div
  189. v-if="(materialHomePageData.brandAdvantageUrl ?? '') !== ''"
  190. class="rounded-2xl overflow-hidden aspect-[1.72/1]"
  191. >
  192. <!-- <wd-img
  193. width="100%"
  194. height="100%"
  195. :src="materialHomePageData.brandAdvantageUrl"
  196. mode="aspectFill"
  197. custom-class=""
  198. ></wd-img> -->
  199. <video class="w-full h-full"></video>
  200. </div>
  201. <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]">
  202. <!-- {{ materialHomePageData. }} -->
  203. {{
  204. materialsManageBrands.find(({ value }) => value === String(data?.manageBrand))?.label
  205. }}
  206. </div>
  207. <div
  208. class="text-justify text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[25px]"
  209. >
  210. {{ materialHomePageData.brandAdvantageDesc }}
  211. </div>
  212. </div>
  213. </Card>
  214. <template v-if="materialHomePageData.productDOList?.length">
  215. <SectionHeading title="产品展示"></SectionHeading>
  216. </template>
  217. <template v-for="(it, index) in materialHomePageData.productDOList" :key="index">
  218. <div class="aspect-[1.66/1] rounded-2xl overflow-hidden">
  219. <swiper class="h-[55.7vw]">
  220. <template v-for="img of it?.productImgUrl?.split(',')" :key="img">
  221. <swiper-item class="h-full">
  222. <wd-img width="100%" height="100%" class="" :src="img" mode="aspectFill" />
  223. </swiper-item>
  224. </template>
  225. </swiper>
  226. </div>
  227. </template>
  228. <wd-button custom-class="w-full! rounded-lg!">下载所有素材包</wd-button>
  229. </div>
  230. </view>
  231. </template>