Bladeren bron

feat(app): 确认订单

EvilDragon 4 maanden geleden
bovenliggende
commit
42efd054db

+ 8 - 0
packages/app/src/pages.json

@@ -329,6 +329,14 @@
       }
     },
     {
+      "path": "pages/home/mall/confirm-order/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "确认订单",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/home/mall/detail/index",
       "type": "page",
       "style": {

+ 112 - 0
packages/app/src/pages/home/mall/confirm-order/index.vue

@@ -0,0 +1,112 @@
+<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'
+import Card from '@/components/card.vue'
+import SectionHeading from '@/components/section-heading.vue'
+
+const data = ref(['https://via.placeholder.com/347x128'])
+const products = ref([{}, {}, {}])
+const show = ref(true)
+const a = ref(1)
+</script>
+
+<template>
+  <view class="flex-grow flex flex-col px-3.5 py-5.5 gap-6">
+    <Card>
+      <div class="flex flex-col gap-6">
+        <template v-for="(it, i) in products" :key="i">
+          <div class="flex gap-3">
+            <div class="w-16 h-16 bg-[#f6f6f6] rounded-lg"></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="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
+                1000积分
+              </div>
+            </div>
+            <div>
+              <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
+                ×1
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </Card>
+    <Card>
+      <div class="flex flex-col gap-8">
+        <SectionHeading title="总积分" end-text="1360" size="sm"></SectionHeading>
+        <div @click="show = true">
+          <SectionHeading title="优惠券" end-text="已选2张" end-arrow size="sm"></SectionHeading>
+        </div>
+        <SectionHeading title="实付积分" end-text="1360" size="sm"></SectionHeading>
+      </div>
+    </Card>
+    <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">
+          1280
+        </div>
+        <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-[34px]">
+          积分
+        </div>
+      </div>
+      <div class="" @click="show = true">
+        <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>
+    <wd-action-sheet title="优惠券" v-model="show">
+      <view class="">
+        <wd-tabs>
+          <wd-tab title="可用优惠券"></wd-tab>
+          <wd-tab title="不可用优惠券"></wd-tab>
+        </wd-tabs>
+        <div class="bg-[#f6f6f6] p-3.5">
+          <div class="bg-white rounded-2xl p-3.5 flex gap-2.5">
+            <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-[10px]"></div>
+            <div class="flex flex-col justify-around flex-1">
+              <div class="text-black text-sm font-normal font-['PingFang SC'] leading-normal">
+                GELATO咖啡兑换券
+              </div>
+              <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
+                2024/04/01-2024/05/30
+              </div>
+              <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
+                使用说明
+              </div>
+            </div>
+            <div class="flex items-center">
+              <div class="w-4 h-4 rounded-full border border-black/60 border-solid"></div>
+            </div>
+          </div>
+        </div>
+        <!-- <wd-button block :round="false">确认</wd-button> -->
+      </view>
+    </wd-action-sheet>
+  </view>
+</template>
+
+<style scoped lang="scss"></style>

+ 36 - 2
packages/app/src/pages/home/mall/detail/index.vue

@@ -13,9 +13,14 @@ 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'
+import { useRouter } from '../../../../core/utils/router'
+
+const router = useRouter()
 
 const data = ref(['https://via.placeholder.com/347x128'])
 const products = ref([{}, {}, {}])
+const show = ref(false)
+const a = ref(1)
 </script>
 
 <template>
@@ -73,7 +78,7 @@ const products = ref([{}, {}, {}])
       </wd-divider>
     </div>
     <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
-      <div>
+      <div @click="show = true">
         <InvertedTrapezoidButton>
           <div
             class="w-20 h-[22px] text-black text-base font-normal font-['PingFang SC'] leading-tight"
@@ -82,7 +87,7 @@ const products = ref([{}, {}, {}])
           </div>
         </InvertedTrapezoidButton>
       </div>
-      <div class="">
+      <div class="" @click="show = true">
         <TrapeziumButton size="large">
           <div
             class="w-[49px] h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
@@ -96,6 +101,35 @@ const products = ref([{}, {}, {}])
         </TrapeziumButton>
       </div>
     </div>
+    <wd-action-sheet v-model="show">
+      <view class="px-7 py-11">
+        <div class="flex gap-3 mb-13.5">
+          <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>
+        <wd-button
+          block
+          :round="false"
+          @click="router.push('/pages/home/mall/confirm-order/index')"
+        >
+          确认
+        </wd-button>
+      </view>
+    </wd-action-sheet>
   </view>
 </template>
 

+ 1 - 0
packages/app/src/types/uni-pages.d.ts

@@ -37,6 +37,7 @@ interface NavigateToOptions {
        "/pages/mine/setting/index" |
        "/pages/publish/moment/index" |
        "/pages/publish/tags/index" |
+       "/pages/home/mall/confirm-order/index" |
        "/pages/home/mall/detail/index" |
        "/pages/home/mall/shopping-cart/index" |
        "/pages/home/offline-activity/cycling-rankings/index" |