|
@@ -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>
|