feat(app): 商品详情+购物车

packages/app/src/components/inverted-trapezoid-button.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import invertedTrapezoid from '@designer-hub/assets/src/assets/svgs/invertedTrapezoid'
+</script>
+<template>
+  <div
+    class="bg-fill h-11 px-7 bg-[length:100%_100%] bg-no-repeat flex items-center"
+    :style="{ backgroundImage: `url(${invertedTrapezoid})` }"
+  >
+    <slot></slot>
+  </div>
+</template>

packages/app/src/components/trapezium-button.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import trapezium from '@designer-hub/assets/src/assets/svgs/trapezium'
+</script>
+<template>
+  <div
+    class="w-50 box-border h-11 px-7 bg-[length:100%_100%] bg-no-repeat flex items-center relative"
+  >
+    <div class="absolute top-0 left-0 right-0 bottom-0">
+      <wd-img width="100%" height="100%" :src="trapezium"></wd-img>
+    </div>
+    <div class="w-full relative flex items-center justify-center">
+      <div><slot></slot></div>
+    </div>
+  </div>
+</template>

packages/app/src/pages.json

@@ -329,6 +329,22 @@
       }
     },
     {
+      "path": "pages/home/mall/detail/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "品质商城",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
+      "path": "pages/home/mall/shopping-cart/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "购物车",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/home/offline-activity/cycling-rankings/index",
       "type": "page",
       "style": {

packages/app/src/pages/home/mall/components/product.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import { publish } from '../../../../core/libs/svgs'
 import { addBlack } from '@designer-hub/assets/src/assets/svgs'
+import { useRouter } from '../../../../core/utils/router'
+
+const router = useRouter()
 </script>
 <template>
-  <div class="w-full flex flex-col gap-2.5">
+  <div class="w-full flex flex-col gap-2.5" @click="router.push('/pages/home/mall/detail/index')">
     <div class="bg-[#f6f6f6] rounded-2xl w-full aspect-square overflow-hidden">
       <wd-img
         width="100%"

packages/app/src/pages/home/mall/detail/index.vue

@@ -0,0 +1,102 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '品质商城',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script setup lang="ts">
+import TiltedButton from '@/components/tilted-button.vue'
+import Product from '../components/product.vue'
+import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
+import InvertedTrapezoidButton from '@/components/inverted-trapezoid-button.vue'
+import TrapeziumButton from '@/components/trapezium-button.vue'
+
+const data = ref(['https://via.placeholder.com/347x128'])
+const products = ref([{}, {}, {}])
+</script>
+
+<template>
+  <view class="flex-grow flex flex-col">
+    <div class="aspect-[1.34/1] relative">
+      <div class="absolute aspect-[1.26/1] top-0 w-full">
+        <wd-img width="100%" height="100%" src="https://via.placeholder.com/375x297" />
+      </div>
+    </div>
+    <div class="relative flex-1 bg-white p-4 flex flex-col gap-4 rounded-tl-2xl rounded-tr-2xl">
+      <div class="flex items-center gap-1">
+        <div class="text-[#ef4343] text-[26px] font-normal font-['D-DIN Exp'] leading-normal">
+          1000
+        </div>
+        <div class="text-black/60 text-base font-normal font-['PingFang SC'] leading-[34px]">
+          积分
+        </div>
+        <div
+          class="w-[66px] text-black/30 text-xs font-normal font-['PingFang SC'] line-through leading-normal"
+        >
+          ¥60
+        </div>
+        <div class="flex-1"></div>
+        <div class="text-[#999999] text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
+          已售5件
+        </div>
+      </div>
+      <div
+        class="w-[90px] h-4 text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]"
+      >
+        阿芙佳朵
+      </div>
+      <div class="h-0.25 bg-[#f6f6f6]"></div>
+      <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-normal">
+        积分兑换说明：
+      </div>
+      <div
+        class="w-[346px] h-[95px] text-black/40 text-xs font-normal font-['PingFang SC'] leading-[23px]"
+      >
+        · 不限制兑换个数
+        <br />
+        · 兑换后不支持退换货,如有问题可联系官方客户
+        <br />
+        · 规格：件
+        <br />
+        · 配送方式：到店自取
+      </div>
+      <div class="mx--4 h-2.5 bg-neutral-100"></div>
+      <wd-divider>
+        <div
+          class="text-center text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
+        >
+          商品详情
+        </div>
+      </wd-divider>
+    </div>
+    <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
+      <div>
+        <InvertedTrapezoidButton>
+          <div
+            class="w-20 h-[22px] text-black text-base font-normal font-['PingFang SC'] leading-tight"
+          >
+            加入购物车
+          </div>
+        </InvertedTrapezoidButton>
+      </div>
+      <div class="">
+        <TrapeziumButton size="large">
+          <div
+            class="w-[49px] h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
+          >
+            <div
+              class="w-[65px] h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
+            >
+              立即兑换
+            </div>
+          </div>
+        </TrapeziumButton>
+      </div>
+    </div>
+  </view>
+</template>
+
+<style scoped lang="scss"></style>

packages/app/src/pages/home/mall/index.vue

@@ -11,6 +11,9 @@
 import TiltedButton from '@/components/tilted-button.vue'
 import Product from './components/product.vue'
 import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
+import { useRouter } from '../../../core/utils/router'
+
+const router = useRouter()
 
 const data = ref(['https://via.placeholder.com/347x128'])
 const products = ref([{}, {}, {}])
@@ -41,7 +44,7 @@ const products = ref([{}, {}, {}])
             <wd-img :round="false" width="32" height="32" :src="shoppingBag"></wd-img>
             <!-- </wd-button> -->
           </div>
-          <div>
+          <div @click="router.push('/pages/home/mall/shopping-cart/index')">
             <TiltedButton custom-class="text-center! items-center">
               <span
                 class="h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"

packages/app/src/pages/home/mall/shopping-cart/index.vue

@@ -0,0 +1,72 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '购物车',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script setup lang="ts">
+import TiltedButton from '@/components/tilted-button.vue'
+import Product from '../components/product.vue'
+import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
+import InvertedTrapezoidButton from '@/components/inverted-trapezoid-button.vue'
+import TrapeziumButton from '@/components/trapezium-button.vue'
+
+const data = ref([{}, {}, {}])
+const a = ref(1)
+</script>
+
+<template>
+  <view class="flex-grow flex flex-col gap-14 bg-white px-3.5">
+    <template v-for="(it, i) in data" :key="i">
+      <div class="flex gap-3">
+        <div class="flex items-center">
+          <div class="w-4 h-4 rounded-full border border-black/60 border-solid"></div>
+        </div>
+        <div class="w-[110px] h-[110px] bg-[#f6f6f6] rounded-2xl"></div>
+        <div class="flex flex-col justify-between flex-1">
+          <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-normal">
+            阿芙佳朵
+          </div>
+          <div class="flex items-center">
+            <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
+              1000
+            </div>
+            <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
+              积分
+            </div>
+            <div class="flex-1"></div>
+            <wd-input-number v-model="a" />
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
+      <div class="flex">
+        <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">
+          1360
+        </div>
+        <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-[34px]">
+          积分
+        </div>
+      </div>
+      <div class="">
+        <TiltedButton size="large">
+          <div
+            class="w-[49px] h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
+          >
+            <div
+              class="w-[65px] h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
+            >
+              去结算
+            </div>
+          </div>
+        </TiltedButton>
+      </div>
+    </div>
+  </view>
+</template>
+
+<style scoped lang="scss"></style>

packages/app/src/types/uni-pages.d.ts

@@ -37,6 +37,8 @@ interface NavigateToOptions {
        "/pages/mine/setting/index" |
        "/pages/publish/moment/index" |
        "/pages/publish/tags/index" |
+       "/pages/home/mall/detail/index" |
+       "/pages/home/mall/shopping-cart/index" |
        "/pages/home/offline-activity/cycling-rankings/index" |
        "/pages/home/offline-activity/list/index" |
        "/pages/home/spread/case-shooting/index" |

packages/assets/src/assets/svgs/index.ts

@@ -7,6 +7,8 @@ import shoppingBag from "./shoppingBag";
 import addBlack from "./addBlack";
 import notify from "./notify";
 import map from "./map";
+import invertedTrapezoid from "./invertedTrapezoid";
+import trapezium from "./trapezium";
 
 export {
   addBlack,
@@ -18,4 +20,6 @@ export {
   shoppingBag,
   notify,
   map,
+  invertedTrapezoid,
+  trapezium,
 };

packages/assets/src/assets/svgs/invertedTrapezoid.ts

@@ -0,0 +1,2 @@
+import invertedTrapezoid from "./inverted_trapezoid.svg";
+export default invertedTrapezoid;

packages/assets/src/assets/svgs/inverted_trapezoid.svg

@@ -0,0 +1,3 @@
+<svg width="145" height="44" viewBox="0 0 145 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M131.214 38.1006C129.635 41.4 126.302 43.5 122.644 43.5H10C4.7533 43.5 0.5 39.2467 0.5 34V10C0.5 4.7533 4.7533 0.5 10 0.5H135.716C141.971 0.5 146.083 7.02712 143.383 12.669L131.214 38.1006Z" stroke="#B6B6B6" stroke-opacity="0.45"/>
+</svg>

packages/assets/src/assets/svgs/trapezium.svg

@@ -0,0 +1,3 @@
+<svg width="195" height="44" viewBox="0 0 195 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3351 5.68356C14.997 2.21048 18.5053 0 22.3555 0H185C190.523 0 195 4.47715 195 10V34C195 39.5228 190.523 44 185 44H9.28399C2.66155 44 -1.69293 37.0889 1.1656 31.1152L13.3351 5.68356Z" fill="black" fill-opacity="0.85"/>
+</svg>

packages/assets/src/assets/svgs/trapezium.ts

@@ -0,0 +1,2 @@
+import trapezium from "./trapezium.svg";
+export default trapezium;