feat(material): 新增材料详情页并更新导航逻辑

src/pages.json

@@ -199,6 +199,13 @@
       }
     },
     {
+      "path": "pages/material/detail/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/material/recommend/index",
       "type": "page",
       "style": {

src/pages/material/detail/index.vue

@@ -0,0 +1,63 @@
+<route lang="yaml">
+style:
+  navigationStyle: custom
+</route>
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+import SectionHeading from '@/components/section-heading.vue'
+import StartMenuButton from '@/components/start-menu-button.vue'
+</script>
+<template>
+  <view class="w-full">
+    <div class="w-full aspect-[1.16/1] bg-amber"><StartMenuButton></StartMenuButton></div>
+    <div class="relative top--8 px-3.5">
+      <Card>
+        <img
+          class="w-[78px] h-[78px] rounded-full border border-[#f2f2f2]"
+          src="https://via.placeholder.com/78x78"
+        />
+        <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
+          IMOLA瓷砖
+        </div>
+        <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
+          进口品牌 | 瓷砖
+        </div>
+        <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-normal">
+          自营品牌
+        </div>
+        <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-normal">
+          70％积分
+        </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
+          </span>
+        </div>
+      </Card>
+      <Card class="my-6">
+        <div class="my-6 text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
+          品牌介绍
+        </div>
+        <img class="w-[319px] h-[194px] rounded-xl" src="https://via.placeholder.com/319x194" />
+        <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
+          Imola瓷砖
+        </div>
+        <div
+          class="w-[319px] h-[186px] text-justify text-black/60 text-sm font-normal font-['PingFang SC'] leading-[25px]"
+        >
+          意大利“蜜蜂”瓷砖制造商—伊莫拉陶瓷股份公司，创建于1874年，意大利IMOLA市。历经百余年，凭借着对工作的执着，对美的追求和不断的创新意识，伊莫拉缔造出“蜜蜂”这一世界知名品牌。
+          <br />
+          “蜜蜂”是具有代表意大利风格及产品质量并极富艺术创造力的典型品牌，其生产始终沿着两条轨道运行，一是及时掌握体现时代趋势和审美品位的设计理念，二是不断提高产品科技含量和制作工艺。
+        </div>
+      </Card>
+      <SectionHeading title="产品展示" custom-class="my-6"></SectionHeading>
+      <img class="w-[347px] h-[209px] rounded-2xl" src="https://via.placeholder.com/347x209" />
+      <wd-button custom-class="w-full! rounded-lg!">下载所有素材包</wd-button>
+    </div>
+  </view>
+</template>

src/pages/material/index.vue

@@ -36,9 +36,14 @@ const pieces = ref([
     path: '/pages/material/recommend/index',
   },
 ])
-const handleMenuItemClick = ({ path }) => {
+const handleMenuItemClick = ({ path }: any) => {
   uni.navigateTo({ url: path })
 }
+const toDetail = () => {
+  uni.navigateTo({
+    url: '/pages/material/detail/index',
+  })
+}
 onMounted(() => {
   run()
 })
@@ -94,11 +99,7 @@ onMounted(() => {
       <SectionHeading title="自营品牌" custom-class="mx-3.5"></SectionHeading>
       <div class="my-6 flex px-1.75">
         <template v-for="(it, i) in data" :key="i">
-          <Card
-            custom-class="mx-1.75"
-            :style="{ width: 'calc(50vw - 96rpx)' }"
-            @click="dealerPanelState = true"
-          >
+          <Card custom-class="mx-1.75" :style="{ width: 'calc(50vw - 96rpx)' }" @click="toDetail">
             <div class="flex flex-col items-center">
               <wd-img
                 width="78"
@@ -116,7 +117,9 @@ onMounted(() => {
               >
                 进口品牌 | 瓷砖
               </div>
-              <wd-button size="small" custom-class="my-4">联系商家</wd-button>
+              <wd-button size="small" custom-class="my-4" @click="dealerPanelState = true">
+                联系商家
+              </wd-button>
               <div class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
                 {{ it.views }}次到店打卡
               </div>

src/types/uni-pages.d.ts

@@ -21,6 +21,7 @@ interface NavigateToOptions {
        "/pages/home/study-tour/detail" |
        "/pages/home/study-tour/index" |
        "/pages/home/study-tour/list" |
+       "/pages/material/detail/index" |
        "/pages/material/recommend/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}