designer-hub/packages/app/src/pages/home/mall/confirm-order/index.vue

<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'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { requestToast } from '../../../../core/utils/common'
import { orderPay } from '../../../../core/libs/requests'
import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'
import { useRouter } from '../../../../core/utils/router'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const products = ref([{}, {}, {}])
const show = ref(false)
const a = ref(1)
const data = ref()
const handlePay = async () => {
  const { code } = await requestToast(
    () =>
      orderPay({
        ...data.value,
      }),
    { success: true, successTitle: '兑换成功' },
  )
  if (code === 0) {
    router.push('/pages/home/mall/purchased/success/index')
  }
}
onLoad(async (query: { data: string }) => {
  data.value = JSON.parse(query.data)
})
</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 data.list" :key="i">
          <div class="flex gap-3">
            <div class="w-16 h-16 bg-[#f6f6f6] rounded-lg">
              <wd-img width="100%" height="100%" :src="it.orderImgUrl"></wd-img>
            </div>
            <div class="flex flex-col justify-between flex-1">
              <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
                {{ it.productName }}
              </div>
              <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
                {{ it.points }}积分
              </div>
            </div>
            <div>
              <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
                ×{{ it.nums }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </Card>
    <Card>
      <div class="flex flex-col gap-8">
        <SectionHeading title="总积分" :end-text="data.totalsPoints" size="sm"></SectionHeading>
        <!-- <div @click="show = true">
          <SectionHeading title="优惠券" end-text="已选2张" end-arrow size="sm"></SectionHeading>
        </div> -->
        <SectionHeading
          title="实付积分"
          :end-text="data.totalsCurrPoints"
          size="sm"
        ></SectionHeading>
      </div>
    </Card>
    <BottomAppBar fixed placeholder>
      <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">
            {{ data.totalsCurrPoints }}
          </div>
          <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
            积分
          </div>
        </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"
                @click="handlePay"
              >
                确认兑换
              </div>
            </div>
          </TrapeziumButton>
        </div>
      </div>
    </BottomAppBar>
    <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>