zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add ticket storefront views

Browse Source
This commit is contained in:
zoujing
2026-07-30 16:45:04 +08:00
parent 80cbf49812
commit fa9a1500d2
2 changed files with 217 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages-service/tickets/components/ProductDetail.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<view class="h-screen overflow-hidden bg-slate-50 flex flex-col">
<view class="shrink-0 bg-white px-[16px] pb-[12px] pt-[calc(env(safe-area-inset-top)+12px)]">
<view class="flex h-[32px] items-center justify-between">
<view class="flex h-[32px] w-[32px] items-center justify-center" @click="emit('back')">
<uni-icons type="left" size="22" color="#1f2937" />
</view>
<text class="text-[17px] font-semibold text-slate-800">商品详情</text>
<view class="h-[32px] w-[32px]" />
</view>
</view>
<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>
defineProps({
product: { type: Object, required: true },
})
const emit = defineEmits(['back', 'buy'])
</script>