0d243daf42
Replaces the 'copy to clipboard' action with a direct 'Request a Quote' via WhatsApp. This streamlines the process for users to submit their event order details. - The 'Request a Quote' button now opens a pre-filled WhatsApp message to a designated contact number. - A new `buildMessage` computed property is created in the `eventOrder` composable to generate a detailed quote request message. - Adds support for tracking referrers via a `?referer` URL query parameter, which is included in the final message.
74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<template>
|
|
<UCard class="lg:sticky lg:top-24">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-bold">预算估算</h2>
|
|
<UBadge color="primary" variant="soft">实时</UBadge>
|
|
</div>
|
|
<p class="text-muted text-sm">基于所选服务动态计算</p>
|
|
</template>
|
|
|
|
<div class="space-y-3">
|
|
<div v-if="items.length === 0" class="text-muted text-sm">
|
|
当前未选择任何可计价项目。
|
|
</div>
|
|
<div v-else class="space-y-3">
|
|
<div
|
|
v-for="(it, idx) in items"
|
|
:key="idx"
|
|
class="flex items-start justify-between gap-3 border-b border-[--ui-border] pb-2"
|
|
>
|
|
<div>
|
|
<div class="font-medium">{{ it.label }}</div>
|
|
<div v-if="it.note" class="text-muted text-xs">{{ it.note }}</div>
|
|
</div>
|
|
<div class="font-semibold">{{ money.format(it.amount) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-lg font-bold">合计</div>
|
|
<div class="text-2xl font-extrabold tracking-tight">
|
|
{{ money.format(total) }}
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 flex items-center gap-2">
|
|
<UButton
|
|
color="primary"
|
|
size="lg"
|
|
block
|
|
:disabled="total === 0"
|
|
icon="lucide:send"
|
|
@click="onRequestQuote"
|
|
>
|
|
获取详细报价
|
|
</UButton>
|
|
</div>
|
|
<UAlert
|
|
class="mt-3"
|
|
title="说明"
|
|
color="neutral"
|
|
variant="subtle"
|
|
description="该预算为参考价，具体以需求细化及工期排期为准。"
|
|
/>
|
|
</template>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { priceBreakdown, estimatedTotal, buildMessage, money } = useEventOrder();
|
|
|
|
const items = computed(() => priceBreakdown.value);
|
|
const total = computed(() => estimatedTotal.value);
|
|
|
|
function onRequestQuote() {
|
|
const text = encodeURIComponent(buildMessage.value);
|
|
const url = `http://api.whatsapp.com/send?phone=+601157753558&text=${text}`;
|
|
window.open(url, "_blank");
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|