eb69f6c48e
This commit establishes the initial structure of the Nuxt application, centered around a new event order form. Key changes include: - Setting up the main app layout with a header, footer, and color mode support using @nuxt/ui. - Creating a multi-part event order form on the index page. - Introducing a `useEventOrder` composable to manage form state and validation with Zod. - Adding modular form components under `app/components/eventOrder`. - Including project configuration files for pnpm, VSCode, and global CSS.
55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<template>
|
||
<UCard>
|
||
<template #header>
|
||
<h2 class="text-xl font-bold">{{ secIdx }}. 宴会竞标大屏</h2>
|
||
<p class="text-muted text-sm">
|
||
自研竞标展示系统，全马首创，适用于宴会、活动、庆典等场合，具备实时竞标显示功能。
|
||
</p>
|
||
</template>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
|
||
<UCheckbox
|
||
v-model="orderState.biddingSystem"
|
||
label="订阅服务"
|
||
description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
|
||
/>
|
||
|
||
<UCheckbox
|
||
v-model="orderState.biddingSystemProvideImage"
|
||
label="提供照片？"
|
||
description="活动方将发送标品图片给予本工作室"
|
||
:class="[orderState.biddingSystem ? '' : 'opacity-0']"
|
||
:disabled="!orderState.biddingSystem"
|
||
/>
|
||
|
||
<UFormField
|
||
name="estimatedBidItemCount"
|
||
label="标品数量预估"
|
||
:class="[orderState.biddingSystem ? '' : 'opacity-0']"
|
||
>
|
||
<USelect
|
||
v-model="orderState.estimatedBidItemCount"
|
||
:items="itemCountRanges"
|
||
placeholder="请选择预估数量区间"
|
||
:class="['w-full']"
|
||
:disabled="!orderState.biddingSystem"
|
||
/>
|
||
</UFormField>
|
||
</div>
|
||
</UCard>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const { sectionIndex, orderState } = useEventOrder();
|
||
|
||
const secIdx = ref(++sectionIndex.value);
|
||
|
||
const itemCountRanges = Array.from({ length: 4 }, (_, i) => {
|
||
const start = 10 + i * 10;
|
||
const end = start + 10;
|
||
return { label: `${start} ~ ${end}`, value: `${start}-${end}` };
|
||
});
|
||
</script>
|
||
|
||
<style></style>
|