Browse Source

feat(app): 商家详情

EvilDragon 5 months ago
parent
commit
2e55116b22

File diff suppressed because it is too large
+ 6 - 8
packages/app/src/assets/svgs/material-dealers.svg


+ 3 - 0
packages/app/src/core/utils/router.ts

@@ -0,0 +1,3 @@
+export const back = () => {
+  uni.navigateBack()
+}

+ 18 - 8
packages/app/src/pages/material/calculator/index.vue

@@ -1,24 +1,34 @@
-<route lang="yaml">
-style:
-  navigationStyle: 'custom'
-#   navigationBarColor: 'transparent'
+<route lang="json">
+{ "style": { "navigationStyle": "custom" } }
 </route>
 <script setup lang="ts">
 import Card from '@/components/card.vue'
-import { calculatorBg, linkBuckle } from '@/core/libs/pngs'
+import { calculatorBg, linkBuckle } from '../../../core/libs/pngs'
+import { back } from '../../../core/utils/router'
 </script>
 <template>
   <div class="flex-grow px-3.5" :style="{ background: `url(${calculatorBg}) 100% 100%` }">
+    <wd-navbar
+      left-arrow
+      safe-area-inset-top
+      custom-class="bg-transparent! color-white!"
+      :bordered="false"
+      @click-left="back()"
+    ></wd-navbar>
     <div
-      class="text-center text-[#e7d2c6] text-[34px] font-bold font-['Alimama ShuHeiTi'] leading-relaxed"
+      class="mx-4.5 text-start text-[#e7d2c6] text-[34px] font-bold font-['Alimama ShuHeiTi'] leading-relaxed"
     >
       积分计算器
     </div>
-    <div class="text-center text-white text-base font-normal font-['PingFang SC'] leading-relaxed">
+    <div
+      class="mx-4.5 mb-3 text-start text-white text-base font-normal font-['PingFang SC'] leading-relaxed"
+    >
       获取积分小帮手
     </div>
     <Card>
-      <div class="text-[#ef4343] text-[40px] font-normal font-['D-DIN Exp'] leading-normal">
+      <div
+        class="text-center text-[#ef4343] text-[40px] font-normal font-['D-DIN Exp'] leading-normal"
+      >
         16000
       </div>
       <div

+ 43 - 34
packages/app/src/pages/material/detail/index.vue

@@ -1,6 +1,5 @@
-<route lang="yaml">
-style:
-  navigationStyle: custom
+<route lang="json">
+{ "style": { "navigationStyle": "custom" } }
 </route>
 <script setup lang="ts">
 import Card from '@/components/card.vue'
@@ -20,46 +19,56 @@ onLoad(async (query: { id: number }) => {
 </script>
 <template>
   <view class="">
-    <div class="w-full aspect-[1.16/1] bg-amber">
-      <!-- <StartMenuButton></StartMenuButton> -->
-    </div>
+    <div
+      class="w-full aspect-[1.16/1] bg-[url(https://image.zhuchaohui.com/zhucaohui/9da274c73312f5ff828b60457bf4a469e631c001a4bf1c1f355338887b19f035.png)] bg-contain"
+    ></div>
     <wd-navbar
       fixed
       left-arrow
       safe-area-inset-top
       custom-class="bg-transparent!"
+      :bordered="false"
       @click-left="handleBackClick"
     ></wd-navbar>
-    <div class="relative top--8 px-3.5">
+    <div class="flex flex-col gap-6 relative top--14 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 class="flex">
+          <wd-img
+            round
+            width="78"
+            height="78"
+            custom-class="border border-[#f2f2f2] border-solid"
+            src="https://via.placeholder.com/78x78"
+          ></wd-img>
+          <div>
+            <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>
+          </div>
         </div>
       </Card>
-      <Card class="my-6">
+      <Card>
         <div class="my-6 text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
           品牌介绍
         </div>
@@ -75,7 +84,7 @@ onLoad(async (query: { id: number }) => {
           “蜜蜂”是具有代表意大利风格及产品质量并极富艺术创造力的典型品牌,其生产始终沿着两条轨道运行,一是及时掌握体现时代趋势和审美品位的设计理念,二是不断提高产品科技含量和制作工艺。
         </div>
       </Card>
-      <SectionHeading title="产品展示" custom-class="my-6"></SectionHeading>
+      <SectionHeading title="产品展示"></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>

+ 9 - 5
packages/app/src/pages/material/index.vue

@@ -6,7 +6,7 @@
 import Card from '@/components/card.vue'
 import SectionHeading from '@/components/section-heading.vue'
 import { abc, calculator } from '../../core/libs/pngs'
-import { getAppMaterials, getByDictType, getMaterials } from '../../core/libs/requests'
+import { getAppMaterials, getByDictType } from '../../core/libs/requests'
 import { materialDealers, close, phone } from '../../core/libs/svgs'
 import { DictType, MaterialDealer, MaterialsList } from '../../core/models/moment'
 import router from '@designer-hub/assets/src/assets/svgs/router'
@@ -74,7 +74,11 @@ onMounted(async () => {
 <template>
   <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" />
+      <wd-img
+        width="100%"
+        height="100%"
+        src="https://image.zhuchaohui.com/zhucaohui/f866f4f72392e8f4627d8f5d6628739ad7f0907d3703139e7cdbcb999b803dfe.jpg"
+      />
       <!-- <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"
       >
@@ -86,10 +90,10 @@ onMounted(async () => {
       </div> -->
     </view>
     <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
-      <div class="my-6 grid grid-cols-2 grid-gap-2.5 mx-3.5">
+      <div class="my-6 grid grid-cols-2 grid-gap-3.5 mx-3.5">
         <template v-for="it of pieces" :key="it.title">
           <div :class="it.gridItemClass" @click="handleMenuItemClick(it)">
-            <card custom-class="flex justify-between items-center">
+            <card custom-class="flex justify-between items-center gap-2">
               <view class="flex items-end justify-end">
                 <wd-img :src="it.icon" :width="42" :height="42"></wd-img>
               </view>
@@ -128,7 +132,7 @@ onMounted(async () => {
                   <wd-img
                     width="78"
                     height="78"
-                    custom-class="border border-[#f2f2f2] rounded-full overflow-hidden"
+                    custom-class="border border-[#f2f2f2] border-solid rounded-full overflow-hidden"
                     :src="it.logoUrl"
                   ></wd-img>
                   <div

Some files were not shown because too many files changed in this diff