75 lines
3.9 KiB
Vue
75 lines
3.9 KiB
Vue
<template>
|
|
<view class="h-screen overflow-hidden bg-slate-50 flex flex-col">
|
|
<TopNavBar
|
|
title="商品详情"
|
|
subtitle="费用说明与购买须知"
|
|
title-align="left"
|
|
background="#ffffff"
|
|
@back="emit('back')"
|
|
/>
|
|
|
|
<scroll-view class="min-h-0 flex-1" scroll-y>
|
|
<image class="h-[280px] w-full bg-slate-200" :src="product.images && product.images[0]" mode="aspectFill" />
|
|
|
|
<view class="mx-[12px] -mt-[14px] rounded-[16px] bg-white p-[16px]">
|
|
<text v-if="product.shortTitle" class="block text-[13px] text-slate-500">{{ product.shortTitle }}</text>
|
|
<text class="mt-[4px] block text-[20px] font-bold leading-[28px] text-slate-900">{{ product.name }}</text>
|
|
<view class="mt-[10px] flex flex-wrap gap-[6px]">
|
|
<text v-for="highlight in product.highlights || []" :key="highlight" class="rounded-[5px] bg-violet-50 px-[7px] py-[3px] text-[11px] text-violet-700">{{ highlight }}</text>
|
|
</view>
|
|
<view class="mt-[14px] flex items-end justify-between">
|
|
<text class="text-[12px] text-slate-400">已售 {{ product.sold || 0 }}</text>
|
|
<view class="flex items-end">
|
|
<text v-if="product.marketPrice" class="mr-[8px] text-[12px] text-slate-400 line-through">¥{{ product.marketPrice }}</text>
|
|
<text class="text-[14px] font-medium text-[#f26b32]">¥<text class="text-[28px] font-bold">{{ product.salePrice }}</text></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
|
|
<text class="block text-[16px] font-semibold text-slate-800">费用包含</text>
|
|
<text v-for="item in product.included || []" :key="item" class="mt-[10px] block text-[14px] leading-[20px] text-slate-600">· {{ item }}</text>
|
|
<text v-if="!(product.included || []).length" class="mt-[10px] block text-[14px] text-slate-400">以商品说明为准</text>
|
|
</view>
|
|
|
|
<view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
|
|
<text class="block text-[16px] font-semibold text-slate-800">费用不含</text>
|
|
<text v-for="item in product.excluded || []" :key="item" class="mt-[10px] block text-[14px] leading-[20px] text-slate-600">· {{ item }}</text>
|
|
<text v-if="!(product.excluded || []).length" class="mt-[10px] block text-[14px] text-slate-400">无</text>
|
|
</view>
|
|
|
|
<view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
|
|
<text class="block text-[16px] font-semibold text-slate-800">商品详情</text>
|
|
<text class="mt-[10px] block text-[14px] leading-[22px] text-slate-600">{{ product.detail || product.description || '暂无商品详情' }}</text>
|
|
</view>
|
|
|
|
<view class="mx-[12px] mb-[20px] mt-[12px] rounded-[16px] bg-white p-[16px]">
|
|
<text class="block text-[16px] font-semibold text-slate-800">购买须知</text>
|
|
<text class="mt-[10px] block text-[14px] leading-[22px] text-slate-600">{{ product.purchaseNotice || '请以实际预约规则为准。' }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="shrink-0 border-t border-slate-100 bg-white px-[16px] pb-[calc(env(safe-area-inset-bottom)+10px)] pt-[10px]">
|
|
<view class="flex items-center justify-between">
|
|
<view>
|
|
<text class="text-[12px] text-slate-500">优惠价</text>
|
|
<text class="ml-[4px] text-[14px] font-medium text-[#f26b32]">¥<text class="text-[25px] font-bold">{{ product.salePrice }}</text>起</text>
|
|
</view>
|
|
<view class="rounded-full bg-[#f26b32] px-[28px] py-[11px]" @click="emit('buy', product.id)">
|
|
<text class="text-[15px] font-semibold text-white">去预订</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import TopNavBar from "@/components/TopNavBar/index.vue"
|
|
|
|
defineProps({
|
|
product: { type: Object, required: true },
|
|
})
|
|
|
|
const emit = defineEmits(['back', 'buy'])
|
|
</script>
|