duanshuwen/WonderQ-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make vehicle demand fields responsive

Browse Source
This commit is contained in:
duanshuwen
2026-08-27 12:03:40 +08:00
parent 5210a7385a
commit d0f04e3787
2 changed files with 47 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
WonderQ-MiniAPP/src/pages/vehicle-demand.vue
View File

@@ -39,7 +39,7 @@
</view>
</view>
<view class="rounded-[16px] border border-[#e3d9cf] bg-white p-4 shadow-[0_8px_24px_rgba(67,52,38,0.05)]">
<view class="overflow-hidden rounded-[16px] border border-[#e3d9cf] bg-white p-4 shadow-[0_8px_24px_rgba(67,52,38,0.05)]">
<view class="mb-4">
<text class="block text-[18px] font-semibold text-[#202629]">提交用车需求</text>
<text class="mt-1 block text-[12px] leading-5 text-[#77746e]">填写后由管家联系确认车型、服务安排和报价。</text>
@@ -53,70 +53,70 @@
</view>
</view>
<view class="grid gap-4">
<view class="grid min-w-0 gap-4">
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">联系人姓名</text>
<input v-model="form.contactName" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="请输入联系人姓名" maxlength="40" />
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">联系人姓名</text>
<input v-model="form.contactName" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="请输入联系人姓名" maxlength="40" />
</view>
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">联系电话</text>
<input v-model="form.phone" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="请输入手机号" maxlength="20" />
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">联系电话</text>
<input v-model="form.phone" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="请输入手机号" maxlength="20" />
</view>
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">服务类型</text>
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">服务类型</text>
<view class="grid grid-cols-2 gap-2">
<view v-for="option in serviceTypes" :key="option.value" class="flex h-11 items-center justify-center rounded-[10px] border text-[13px] font-medium transition-colors" :class="form.serviceType === option.value ? 'border-[#a45a3d] bg-[#fff1ea] text-[#a45a3d]' : 'border-[#e5ddd3] bg-[#fffdfb] text-[#6f6a64]'" @click="form.serviceType = option.value">
<view v-for="option in serviceTypes" :key="option.value" class="flex min-w-0 h-11 items-center justify-center rounded-[10px] border text-[13px] font-medium transition-colors" :class="form.serviceType === option.value ? 'border-[#a45a3d] bg-[#fff1ea] text-[#a45a3d]' : 'border-[#e5ddd3] bg-[#fffdfb] text-[#6f6a64]'" @click="form.serviceType = option.value">
<text>{{ option.label }}</text>
</view>
</view>
</view>
<view v-if="form.serviceType === 'charter'">
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">包车时长</text>
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">包车时长</text>
<view class="grid grid-cols-2 gap-2">
<view v-for="option in charterDurations" :key="option.value" class="flex h-11 items-center justify-center rounded-[10px] border text-[13px] font-medium transition-colors" :class="form.charterDuration === option.value ? 'border-[#a45a3d] bg-[#fff1ea] text-[#a45a3d]' : 'border-[#e5ddd3] bg-[#fffdfb] text-[#6f6a64]'" @click="form.charterDuration = option.value">
<view v-for="option in charterDurations" :key="option.value" class="flex min-w-0 h-11 items-center justify-center rounded-[10px] border text-[13px] font-medium transition-colors" :class="form.charterDuration === option.value ? 'border-[#a45a3d] bg-[#fff1ea] text-[#a45a3d]' : 'border-[#e5ddd3] bg-[#fffdfb] text-[#6f6a64]'" @click="form.charterDuration = option.value">
<text>{{ option.label }}</text>
</view>
</view>
</view>
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">出行日期</text>
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">出行日期</text>
<picker mode="date" :value="form.travelDate" @change="changeDate">
<view class="mt-2 flex h-11 items-center rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#6f6a64]">{{ form.travelDate || '请选择出行日期' }}</view>
<view class="mt-2 box-border flex h-11 w-full min-w-0 items-center rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#6f6a64]">{{ form.travelDate || '请选择出行日期' }}</view>
</picker>
</view>
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">预计出发时间（选填）</text>
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">预计出发时间（选填）</text>
<picker mode="time" :value="form.pickupTime" @change="changeTime">
<view class="mt-2 flex h-11 items-center rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#6f6a64]">{{ form.pickupTime || '请选择出发时间' }}</view>
<view class="mt-2 box-border flex h-11 w-full min-w-0 items-center rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#6f6a64]">{{ form.pickupTime || '请选择出发时间' }}</view>
</picker>
</view>
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">上车地点</text>
<input v-model="form.pickupLocation" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="例如：贵阳北站" maxlength="100" />
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">上车地点</text>
<input v-model="form.pickupLocation" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="例如：贵阳北站" maxlength="100" />
</view>
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">目的地/下车地点</text>
<input v-model="form.dropoffLocation" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="例如：黄果树景区" maxlength="100" />
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">目的地/下车地点</text>
<input v-model="form.dropoffLocation" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" placeholder="例如：黄果树景区" maxlength="100" />
</view>
<view class="grid grid-cols-2 gap-3">
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">出行人数</text>
<input v-model="form.peopleCount" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="人数" maxlength="4" />
<view class="grid min-w-0 grid-cols-2 gap-3">
<view class="min-w-0">
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">出行人数</text>
<input v-model="form.peopleCount" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="人数" maxlength="4" />
</view>
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">行李数量（选填）</text>
<input v-model="form.luggageCount" class="mt-2 h-11 w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="件数" maxlength="4" />
<view class="min-w-0">
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">行李数量（选填）</text>
<input v-model="form.luggageCount" class="mt-2 box-border h-11 w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] px-3 text-[13px] text-[#292d2f]" type="number" placeholder="件数" maxlength="4" />
</view>
</view>
<view>
<text class="block text-[12px] font-medium leading-5 text-[#5f5b56]">特殊要求（选填）</text>
<textarea v-model="form.specialRequirements" class="mt-2 min-h-[96px] w-full rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] p-3 text-[13px] leading-5 text-[#292d2f]" placeholder="儿童座椅、老人同行或其他需求" maxlength="1000" />
<text class="block text-[11px] font-medium tracking-[0.01em] leading-5 text-[#5f5b56]">特殊要求（选填）</text>
<textarea v-model="form.specialRequirements" class="mt-2 block box-border h-24 min-h-[96px] w-full min-w-0 rounded-[10px] border border-[#e5ddd3] bg-[#fffdfb] p-3 text-[13px] leading-5 text-[#292d2f]" placeholder="儿童座椅、老人同行或其他需求" maxlength="1000" />
</view>
</view>
<view v-if="errorMessage" class="mt-4 rounded-[10px] bg-[#fff0ed] px-3 py-2 text-[12px] leading-5 text-[#b44d3d]">{{ errorMessage }}</view>
<view v-if="submitted" class="mt-4 rounded-[10px] bg-[#eef7f1] px-3 py-3 text-[12px] leading-5 text-[#39724f]">需求已提交，管家会尽快联系你确认服务安排。</view>
<button class="tap-feedback mt-5 h-11 rounded-full border-0 bg-[#a45a3d] text-[14px] font-semibold text-white" :disabled="isSubmitting || submitted" @click="submit">
<button class="tap-feedback mt-5 box-border h-11 w-full rounded-full border-0 bg-[#a45a3d] text-[14px] font-semibold text-white" :disabled="isSubmitting || submitted" @click="submit">
{{ isSubmitting ? '提交中…' : submitted ? '已提交' : '提交需求' }}
</button>
</view>

19
WonderQ-MiniAPP/tests/vehicle-demand-layout.test.ts Normal file
View File

@@ -0,0 +1,19 @@
import { describe, expect, it } from "vitest";
import vehicleDemandSource from "@/pages/vehicle-demand.vue?raw";
describe("vehicle demand form layout", () => {
it("keeps native inputs and textarea inside their responsive parent width", () => {
const fieldClasses = [
...vehicleDemandSource.matchAll(/<(?:input|textarea)\b[^>]*\sclass="([^"]+)"/g),
].map((match) => match[1].split(/\s+/));
expect(fieldClasses).toHaveLength(7);
expect(fieldClasses.every((classes) => classes.includes("box-border"))).toBe(true);
expect(fieldClasses.every((classes) => classes.includes("min-w-0"))).toBe(true);
});
it("allows the two-column passenger fields to shrink within the form card", () => {
expect(vehicleDemandSource).toContain('class="grid min-w-0 grid-cols-2 gap-3"');
expect(vehicleDemandSource).toContain('class="min-w-0"');
});
});