feat(material): 添加材料模块和自营品牌展示

src/core/libs/requests.ts

@@ -123,6 +123,25 @@ export const getStudyTours = () =>
       amount: 16000,
     },
   ])
+export const getMaterialDealers = () =>
+  httpGetMock<any[]>([
+    {
+      name: 'IMOLA瓷砖',
+      icon: 'https://via.placeholder.com/78x78',
+      brandType: '进口品牌',
+      type: '瓷砖',
+      views: 1000,
+      createdAt: dayjs('2024-07-15').toDate(),
+    },
+    {
+      name: 'IMOLA瓷砖',
+      icon: 'https://via.placeholder.com/78x78',
+      brandType: '进口品牌',
+      type: '瓷砖',
+      views: 1000,
+      createdAt: dayjs('2024-07-15').toDate(),
+    },
+  ])
 export const weixinMiniAppLogin = (phoneCode: string, loginCode: string, state: string) =>
   httpPost<any>('/app-api/member/auth/weixin-mini-app-login', {
     phoneCode,

src/pages.json

@@ -87,7 +87,8 @@
       "type": "page",
       "layout": "tabbar",
       "style": {
-        "navigationBarTitleText": "材料"
+        "navigationBarTitleText": "材料",
+        "navigationStyle": "custom"
       }
     },
     {

src/pages/material/index.vue

@@ -1,11 +1,118 @@
 <route lang="json5">
-{ layout: 'tabbar', style: { navigationBarTitleText: '材料' } }
+{ layout: 'tabbar', style: { navigationBarTitleText: '材料', navigationStyle: 'custom' } }
 </route>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+import SectionHeading from '@/components/section-heading.vue'
+import { designer, settled, treaty } from '@/core/libs/pngs'
+import { getMaterialDealers } from '@/core/libs/requests'
 
+const { data, run } = useRequest(getMaterialDealers)
+const pieces = ref([
+  {
+    title: '材料小课堂',
+    desc: '全方位了解',
+    icon: designer,
+    class: 'col-start-1 row-start-1',
+    // iconSize: 102,
+  },
+  {
+    title: '积分计算机',
+    desc: '积分小帮手',
+    icon: settled,
+    class: 'col-start-2 row-start-1',
+    // iconSize: 68,
+  },
+  {
+    title: '推荐材料商',
+    desc: '我们将优先洽谈大家推荐的材料商',
+    icon: treaty,
+    class: 'col-start-1 row-start-2 col-end-3',
+    // iconSize: 44,
+    isMore: true,
+  },
+])
+onMounted(() => {
+  run()
+})
+</script>
 <template>
-  <view></view>
+  <view class="">
+    <view class="bg-black w-full pos-relative aspect-[1.26/1]">
+      <wd-img custom-class="w-[375px] h-[297px]" src="https://via.placeholder.com/375x297" />
+      <!-- <div
+        class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
+      >
+        <view class="mx-7">
+          <wd-button plain custom-class="bg-transparent! border-white! text-white!">
+            02:30
+          </wd-button>
+        </view>
+      </div> -->
+    </view>
+
+    <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
+      <div class="my-6 grid grid-gap-2.5 mx-3.5">
+        <template v-for="it of pieces" :key="it.title">
+          <card :custom-class="[it.class, 'flex justify-between items-center'].join(' ')">
+            <view class="flex items-end justify-end">
+              <wd-img :src="it.icon" :width="42" :height="42"></wd-img>
+            </view>
+            <div class="flex-1 flex flex-col justify-around h-full">
+              <div
+                class="text-black/80 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
+              >
+                {{ it.title }}
+              </div>
+              <div
+                class="mt-1 text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
+              >
+                {{ it.desc }}
+              </div>
+            </div>
+            <div v-if="it.isMore" class="mr--4">
+              <wd-button
+                custom-class="text-black/40!"
+                type="icon"
+                icon="arrow-right"
+                icon-color=""
+              ></wd-button>
+            </div>
+          </card>
+        </template>
+      </div>
+      <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)' }">
+            <div class="flex flex-col items-center">
+              <wd-img
+                width="78"
+                height="78"
+                custom-class="border border-[#f2f2f2] rounded-full overflow-hidden"
+                :src="it.icon"
+              ></wd-img>
+              <div
+                class="my-4 text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
+              >
+                IMOLA瓷砖
+              </div>
+              <div
+                class="mb-4 text-black/60 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
+              >
+                进口品牌 | 瓷砖
+              </div>
+              <wd-button size="small" custom-class="my-4">联系商家</wd-button>
+              <div class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
+                {{ it.views }}次到店打卡
+              </div>
+            </div>
+          </Card>
+        </template>
+      </div>
+    </view>
+  </view>
 </template>
 
 <style scoped lang="scss"></style>