designer-hub/packages/app/src/pages/home/mall/detail/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 { useRouter } from '../../../../core/utils/router'
import { getProduct } from '../../../../core/libs/requests'

const router = useRouter()

const id = ref()
// const data = ref(['https://via.placeholder.com/347x128'])
const products = ref([{}, {}, {}])
const show = ref(false)
const a = ref(1)
const { data, run: setData } = useRequest(() => getProduct(id.value))
onLoad(async (query: { id: string }) => {
  id.value = query.id
  await setData()
})
</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="data?.productCoverImgUrl" />
      </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 -->
          {{ data?.points }}
        </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 -->
          ¥{{ data?.productPrice }}
        </div>
        <div class="flex-1"></div>
        <div class="text-[#999999] text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
          <!-- 已售5件 -->
          已售{{ data?.exchangeCount || 0 }}件
        </div>
      </div>
      <div
        class="w-[90px] h-4 text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]"
      >
        <!-- 阿芙佳朵 -->
        {{ data?.prodcutName }}
      </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>
      <wd-img width="100%" mode="widthFix" :src="data?.productDetailsImgUrl"></wd-img>
    </div>
    <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
      <div @click="show = true">
        <InvertedTrapezoidButton>
          <div
            class="w-20 h-[22px] text-black text-base font-normal font-['PingFang SC'] leading-tight"
          >
            加入购物车
          </div>
        </InvertedTrapezoidButton>
      </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 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>

<style scoped lang="scss"></style>