zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 快速预定交互调整

Browse Source
This commit is contained in:
duanshuwen
2025-10-27 21:19:09 +08:00
parent 895aa166dd
commit 4bd151d6d1
11 changed files with 235 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages-booking/components/ConactSection/index.vue
View File

@@ -12,7 +12,7 @@
</view>
</view>
<view class="right">
<Stepper v-model="quantity" />
<Stepper v-model="count" />
</view>
</view>
@@ -27,6 +27,7 @@
<view class="right">
<input
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
v-model="userFormList[0].contactPhone"
placeholder="请输入联系手机"
maxlength="11"
/>
@@ -36,10 +37,27 @@
</template>
<script setup>
import { ref } from "vue";
import { computed, defineProps } from "vue";
import Stepper from "@/components/Stepper/index.vue";
const quantity = ref(1);
const props = defineProps({
modelValue: {
type: Number,
default: 1,
},
userFormList: {
type: Array,
default: () => [{ contactPhone: "" }],
},
});
const emit = defineEmits(["update:modelValue"]);
const count = computed({
get: () => props.modelValue,
set: (val) => {
emit("update:modelValue", val);
},
});
</script>
<style></style>

73
src/pages-booking/components/DateRangeSection/index.vue
View File

@@ -1,73 +0,0 @@
<template>
<view class="border-box flex flex-items-center flex-justify-between mb-12">
<view class="left flex flex-items-center">
<text class="font-size-12 color-99A0AE mr-4">入住</text>
<text class="font-size-12 color-171717 mr-16">
{{ selectedDate.startDate }}
</text>
<text
class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative"
>1晚</text
>
<text class="font-size-12 color-99A0AE ml-16">离店</text>
<text class="font-size-12 color-171717 ml-4">
{{ selectedDate.endDate }}
</text>
</view>
<view class="flex flex-items-center" @click="emit('click')">
<text class="font-size-12 color-2D91FF line-height-16">房间详情</text>
<uni-icons type="right" size="15" color="#99A0AE" />
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
// Props
const props = defineProps({
selectedDate: {
type: Object,
default: () => {
return {
startDate: "",
endDate: "",
};
},
},
});
const emit = defineEmits(["click"]);
</script>
<style scoped lang="scss">
.total {
border: 1px solid #43669a;
padding: 3px 6px;
&::after,
&::before {
content: "";
width: 8px;
height: 1px;
position: absolute;
}
&::before {
background: linear-gradient(
270deg,
rgba(67, 102, 154, 1),
rgba(67, 102, 154, 0)
);
left: -9px;
}
&::after {
background: linear-gradient(
270deg,
rgba(67, 102, 154, 0),
rgba(67, 102, 154, 1)
);
right: -9px;
}
}
</style>

42
src/pages-booking/components/FooterSection/index.vue
View File

@@ -2,11 +2,11 @@
<view
class="booking-footer border-box bg-white flex flex-items-center font-family-misans-vf"
>
<text class="font-size-14 font-500 color-525866 mr-4"> 在线付 </text>
<text
class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
>88</text
>
{{ totalAmt }}
</text>
<!-- <view class="flex flex-items-center" @click="emit('detailClick')">
<text class="font-size-12 color-A3A3A3 mr-4">明细</text>
<uni-icons type="up" size="16" color="#A3A3A3" />
@@ -19,15 +19,47 @@
class="icon"
src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
/>
<text class="font-size-16 font-500 color-white">立即预定</text>
<text
class="font-size-16 font-500 color-white"
@click="emit('payClick', orderData)"
>立即支付</text
>
</view>
</view>
</template>
<script setup>
import { defineEmits } from "vue";
import { computed, defineProps, defineEmits } from "vue";
const emit = defineEmits(["detailClick"]);
const props = defineProps({
modelValue: {
type: Number,
default: 0,
},
orderData: {
type: Object,
default: () => {},
},
selectedDate: {
type: Object,
default: () => {},
},
});
const emit = defineEmits(["detailClick", "payClick"]);
const count = computed({
get: () => props.modelValue,
set: (val) => {
emit("update:modelValue", val);
},
});
const totalAmt = computed(() => {
const { totalDays } = props.selectedDate;
const { specificationPrice } = props.orderData;
return count.value * Number(specificationPrice) * totalDays;
});
</script>
<style scoped lang="scss">

30
src/pages-booking/components/UserSection/index.vue
View File

@@ -5,20 +5,21 @@
>入住信息</view
>
<view class="right">
<Stepper v-model="quantity" unit="间" />
<Stepper v-model="count" unit="间" />
</view>
</view>
<view class="border-box pl-12 pr-12">
<view
class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
v-for="item in quantity"
v-for="item in count"
:key="item"
>
<view class="font-size-14 font-500 color-525866 mr-12"> 住客姓名 </view>
<view class="right">
<input
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
v-model="userFormList.visitorName"
placeholder="请输入姓名"
maxlength="11"
/>
@@ -30,6 +31,7 @@
<view class="right">
<input
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
v-model="userFormList[0].contactPhone"
placeholder="请输入联系手机"
maxlength="11"
/>
@@ -40,10 +42,30 @@
</template>
<script setup>
import { ref } from "vue";
import { computed, defineProps, defineEmits } from "vue";
import Stepper from "@/components/Stepper/index.vue";
const quantity = ref(1);
const props = defineProps({
modelValue: {
type: Number,
default: 1,
},
userFormList: {
type: Object,
default: () => ({
visitorName: "",
contactPhone: "",
}),
},
});
const emit = defineEmits(["update:modelValue"]);
const count = computed({
get: () => props.modelValue,
set: (val) => {
emit("update:modelValue", val);
},
});
</script>
<style></style>