87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<template>
|
|
<!-- 选择数量 -->
|
|
<view
|
|
class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12"
|
|
>
|
|
<view class="flex-full">
|
|
<view class="font-size-16 font-500 color-000 line-height-24"
|
|
>选择数量</view
|
|
>
|
|
<view class="font-size-12 color-A3A3A3 line-height-16">
|
|
请选择套餐数量
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<Stepper v-model="count" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 使用日期 -->
|
|
<UseDateRange
|
|
v-if="orderData.reservationEnabled"
|
|
:openDateRangeList="orderData.openDateRangeList"
|
|
v-model:selectedDate="reservationDate"
|
|
/>
|
|
|
|
<!-- 联系方式 -->
|
|
<view class="bg-white rounded-12 overflow-hidden">
|
|
<view class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12">联系方式</view>
|
|
<view class="flex flex-items-center border-box p-12">
|
|
<view class="font-size-14 font-500 color-525866 mr-12"> 联系人姓名 </view>
|
|
<view class="right">
|
|
<input class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
|
|
v-model.trim="userFormList[0].visitorName" placeholder="请输入联系人" maxlength="20" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex flex-items-center border-box p-12">
|
|
<view class="font-size-14 font-500 color-525866 mr-12"> 手机号码 </view>
|
|
<view class="right">
|
|
<input class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
|
|
v-model.trim="userFormList[0].contactPhone" placeholder="请输入联系手机" maxlength="11" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, defineProps } from "vue";
|
|
import Stepper from "@/components/Stepper/index.vue";
|
|
import UseDateRange from "@/components/UseDateRange/index.vue";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
userFormList: {
|
|
type: Array,
|
|
default: () => [{ visitorName: "", contactPhone: "" }],
|
|
},
|
|
reservationDate: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
orderData: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue", "update:reservationDate"]);
|
|
const count = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => {
|
|
emit("update:modelValue", val);
|
|
},
|
|
});
|
|
const reservationDate = computed({
|
|
get: () => props.reservationDate,
|
|
set: (val) => {
|
|
emit("update:reservationDate", val);
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style></style>
|