fix(app): 优化材料详情页面并添加首页数据获取

packages/app/src/components/data-form.vue

@@ -2,7 +2,7 @@
 import WdButton from 'wot-design-uni/components/wd-button/wd-button.vue'
 import WdInput from 'wot-design-uni/components/wd-input/wd-input.vue'
 import WdPicker from 'wot-design-uni/components/wd-picker/wd-picker.vue'
-import {ref} from 'vue'
+import { ref } from 'vue'
 
 const modelValue = defineModel({
   type: Object,

packages/app/src/core/libs/requests.ts

@@ -5,10 +5,12 @@ import {
   DictType,
   MaterialDealer,
   MaterialDealerDetail,
+  MaterialDealerHomePage,
   MaterialDealerRes,
   Moment,
 } from '../models/moment'
 import dayjs from 'dayjs'
+import { getMaterialDealers } from '../../../../merchant/src/core/libs/requests'
 
 export const getUserInfo = () =>
   httpGetMock<any>({
@@ -276,6 +278,10 @@ export const getAppMaterials = () =>
   httpGet<MaterialDealerRes[]>('/app-api/member/materials/appMaterialsList')
 export const getAppMaterial = (id: number) =>
   httpGet<MaterialDealerDetail>('/app-api/member/materials/queryHomePage', { materialsId: id })
+export const getMaterialHomePage = (id: number) =>
+  httpGet<Partial<MaterialDealerHomePage>>('/app-api/member/materials/queryHomePage', {
+    materialsId: id,
+  })
 export const getMaterialDetail = (query: { id: string }) =>
   httpGet<MaterialDealerDetail>('/app-api/member/materials/getDetail', query)
 export const createMaterialsReferrer = (data) =>

packages/app/src/core/models/moment.ts

@@ -134,6 +134,14 @@ export interface ProductDolist {
 export interface MaterialDealerDetail extends MaterialDealer {
   shopList: ShopList[]
 }
+export interface MaterialDealerHomePage {
+  materialsId: any
+  bannerUrl: string
+  brandAdvantageUrl: string
+  brandAdvantageDesc: string
+  fodderList: FodderList[]
+  productDOList: ProductDolist[]
+}
 export interface Content {
   id: number
   /**

packages/app/src/core/utils/common.ts

@@ -0,0 +1,3 @@
+export const handleCall = (phone: string) => {
+  uni.makePhoneCall({ phoneNumber: phone })
+}

packages/app/src/pages/material/detail/index.vue

@@ -4,12 +4,19 @@
 <script setup lang="ts">
 import Card from '@/components/card.vue'
 import SectionHeading from '@/components/section-heading.vue'
-import { getMaterialDetail, getByDictType } from '../../../core/libs/requests'
+import { getMaterialDetail, getByDictType, getMaterialHomePage } from '../../../core/libs/requests'
 import NavbarEvo from '@/components/navbar-evo.vue'
 import { DictType } from '../../../core/models/moment'
+import { materialDealers, close, phone } from '../../../core/libs/svgs'
+import { handleCall } 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: [] },
@@ -29,6 +36,7 @@ const { data: materialsManageBrands, run: setMaterialsManageBrands } = useReques
 onLoad(async (query: { id: number }) => {
   id.value = query.id
   await setData()
+  await setMaterialHomePageData()
   console.log(data.value)
   await Promise.all([
     setMaterialBrandLevels(),
@@ -42,65 +50,124 @@ onLoad(async (query: { id: number }) => {
   <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(${data?.bannerUrl})` }"
+      :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 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 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="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">
-                  <!-- 自营品牌 -->
+              <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 -->
                   {{
-                    materialBrandLevels.find(({ value }) => value === String(data.materialsType))
+                    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 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]"
+          </div>
+          <template
+            v-for="({ shopAddr, shopName, shopContactPhone }, 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">
+                <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)"
               >
-                <!-- imola / chedit -->
-                {{
-                  materialsManageBrands.find(({ value }) => value === String(data?.manageBrand))
-                    ?.label
-                }}
-              </span>
+                <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">
+                <wd-img width="28" height="28" :src="router"></wd-img>
+              </wd-button>
             </div>
-          </div>
+          </template>
         </div>
       </Card>
-      <!-- <Card>
+      <Card>
         <div class="my-6 text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
           品牌介绍
         </div>
@@ -115,9 +182,14 @@ onLoad(async (query: { id: number }) => {
           <br />
           “蜜蜂”是具有代表意大利风格及产品质量并极富艺术创造力的典型品牌，其生产始终沿着两条轨道运行，一是及时掌握体现时代趋势和审美品位的设计理念，二是不断提高产品科技含量和制作工艺。
         </div>
-      </Card> -->
+      </Card>
       <SectionHeading title="产品展示"></SectionHeading>
-      <!-- <img class="w-[347px] h-[209px] rounded-2xl" src="https://via.placeholder.com/347x209" /> -->
+      <template v-for="(it, index) in materialHomePageData.productDOList" :key="index">
+        <div class="aspect-[1.66/1]">
+          <wd-img width="100%" height="100%" class="rounded-2xl" :src="it?.productImgUrl" />
+        </div>
+      </template>
+
       <wd-button custom-class="w-full! rounded-lg!">下载所有素材包</wd-button>
     </div>
   </view>