8312273696
Standardize Tailwind CSS usage across the codebase: replace legacy shorthand utilities with modern syntax, update color classes to use bracket notation, fix margin/padding units, delete unused CreateServiceOrder SCSS stylesheet and image asset, and resolve minor style inconsistencies.
80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<template>
|
|
<!-- 选择数量 -->
|
|
<div class=" bg-white p-[12px] rounded-[12px] flex items-center mb-[12px]">
|
|
<div class="flex-1">
|
|
<div class="text-[16px] font-medium text-black leading-[24px]">选择数量</div>
|
|
<div class="text-[12px] color-A3A3A3 leading-[16px]">请选择套餐数量</div>
|
|
</div>
|
|
<div class="right">
|
|
<Stepper v-model="count" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 使用日期 -->
|
|
<UseDateRange v-if="orderData.reservationEnabled" :openDateRangeList="orderData.openDateRangeList"
|
|
v-model:selectedDate="reservationDate" />
|
|
|
|
<!-- 联系方式 -->
|
|
<div class="bg-white rounded-[12px] overflow-hidden">
|
|
<div class=" border-bottom text-[16px] font-medium text-black leading-[24px] p-[12px]">
|
|
联系方式
|
|
</div>
|
|
<div class="flex items-center p-[12px]">
|
|
<div class="text-[14px] font-medium text-ink-600 mr-[12px]">联系人姓名</div>
|
|
<div class="right">
|
|
<input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].visitorName"
|
|
placeholder="请输入联系人" maxlength="20" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center p-[12px]">
|
|
<div class="text-[14px] font-medium text-ink-600 mr-[12px]">手机号码</div>
|
|
<div class="right">
|
|
<input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].contactPhone"
|
|
placeholder="请输入联系手机" maxlength="11" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|