|
@@ -0,0 +1,229 @@
|
|
|
+<template>
|
|
|
+ <div class="flex items-end bg-[#FD9A001A] px-20 py-20">
|
|
|
+ <div v-if="pinTuanInfo" class="">
|
|
|
+ <div class="flex space-x-40">
|
|
|
+ <div class="flex flex-col space-y-10 text-base text-black-3">
|
|
|
+ <div>出发时间</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="pinTuanInfo.travelStartTime"
|
|
|
+ disabled
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择出发时间"
|
|
|
+ size="large"
|
|
|
+ style="width: 240px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="flex flex-col space-y-10 text-base text-black-3">
|
|
|
+ <div>团购</div>
|
|
|
+ <el-input
|
|
|
+ disabled
|
|
|
+ :value="`${pinTuanInfo.maxCount}人团`"
|
|
|
+ size="large"
|
|
|
+ style="width: 240px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="flex flex-col space-y-10 text-base text-black-3">
|
|
|
+ <div class="flex items-end space-x-10">
|
|
|
+ <span>成人</span>
|
|
|
+ <span class="text-sm text-black-9">12周岁及以上</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-model="bookInfo.adultNumber"
|
|
|
+ placeholder="选择成人数量"
|
|
|
+ style="width: 240px"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in adultCountOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="`${item}人`"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="flex flex-col space-y-10 text-base text-black-3">
|
|
|
+ <div class="flex items-end space-x-10">
|
|
|
+ <span>儿童</span>
|
|
|
+ <span class="text-sm text-black-9"
|
|
|
+ >3周岁至未满12周岁(3周岁以下免费)</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-model="bookInfo.childrenNumber"
|
|
|
+ placeholder="选择儿童数量"
|
|
|
+ style="width: 240px"
|
|
|
+ size="large"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in childrenCountOptions"
|
|
|
+ :key="item"
|
|
|
+ :label="`${item}人`"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-20 flex items-center justify-end space-x-15">
|
|
|
+ <div class="text-sm text-black-6">
|
|
|
+ <span>总价 </span>
|
|
|
+ <span>¥</span>
|
|
|
+ <span class="text-3xl text-[#FF2525]">{{
|
|
|
+ priceToArray(totalPrice)[0]
|
|
|
+ }}</span>
|
|
|
+ <span class="text-[#FF2525]">.{{ priceToArray(totalPrice)[1] }}</span>
|
|
|
+ <span>/人起 </span>
|
|
|
+ <el-popover placement="top-start" :width="260" trigger="hover">
|
|
|
+ <template #reference>
|
|
|
+ <span
|
|
|
+ class="iconfont icon-info-circle cursor-pointer text-primary"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <div class="text-base text-black-3">
|
|
|
+ <div class="text-xl font-semibold">价格详情</div>
|
|
|
+ <div
|
|
|
+ class="mt-15 flex items-center justify-between font-semibold"
|
|
|
+ >
|
|
|
+ <span class=" ">基本团费</span>
|
|
|
+ <span>¥{{ totalPrice }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="my-15 h-1 bg-[#F0F0F0]"></div>
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <span class="text-base">成人</span>
|
|
|
+ <span>¥{{ adultTotalPrice }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 flex items-center justify-between">
|
|
|
+ <span class="text-base">儿童</span>
|
|
|
+ <span>¥{{ childTotalPrice }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="my-15 h-1 bg-[#F0F0F0]"></div>
|
|
|
+ <div class="flex items-center justify-end space-x-10">
|
|
|
+ <span class="text-xl font-semibold">总价</span>
|
|
|
+ <span class="text-4xl font-semibold text-[#FF0000]"
|
|
|
+ >{{ data.priceUnit }}{{ totalPrice }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ class="ml-10"
|
|
|
+ type="primary"
|
|
|
+ size="large"
|
|
|
+ @click="pintuanFormModalOptions.show = true"
|
|
|
+ >立即参团</el-button
|
|
|
+ >
|
|
|
+ <NuxtLink
|
|
|
+ target="_blank"
|
|
|
+ class="flex h-40 w-96 items-center justify-center rounded border border-current text-primary"
|
|
|
+ :to="`/t/${id}`"
|
|
|
+ >查看更多</NuxtLink
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <TravelDetailPinTuanBookModal
|
|
|
+ v-model:show="pintuanFormModalOptions.show"
|
|
|
+ :pin-tuan-info="pinTuanInfo"
|
|
|
+ :adult-number="bookInfo.adultNumber"
|
|
|
+ :children-number="bookInfo.childrenNumber"
|
|
|
+ @on-success="handlePintuanSuccess"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+const props = defineProps({
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ }
|
|
|
+})
|
|
|
+const id = useRouteParam('id')
|
|
|
+
|
|
|
+const pinTuanId = useRouteQuery('pinTuanId')
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
+const pinTuanInfo = ref()
|
|
|
+
|
|
|
+const adultCountOptions = computed(() =>
|
|
|
+ Array.from(
|
|
|
+ {
|
|
|
+ length:
|
|
|
+ (pinTuanInfo.value.maxCount ?? 0) - (pinTuanInfo.value.nowCount ?? 0)
|
|
|
+ },
|
|
|
+ (_, i) => i + 1
|
|
|
+ )
|
|
|
+)
|
|
|
+const childrenCountOptions = computed(() =>
|
|
|
+ Array.from(
|
|
|
+ {
|
|
|
+ length:
|
|
|
+ (pinTuanInfo.value.maxCount ?? 0) - (pinTuanInfo.value.nowCount ?? 0)
|
|
|
+ },
|
|
|
+ (_, i) => i + 1
|
|
|
+ )
|
|
|
+)
|
|
|
+
|
|
|
+const bookInfo = reactive({
|
|
|
+ adultNumber: 1,
|
|
|
+ childrenNumber: null
|
|
|
+})
|
|
|
+
|
|
|
+const totalPrice = ref(0)
|
|
|
+const adultTotalPrice = ref(0)
|
|
|
+const childTotalPrice = ref(0)
|
|
|
+async function calcTotalPrice() {
|
|
|
+ try {
|
|
|
+ loading.value = true
|
|
|
+ const { data } = await request(
|
|
|
+ '/website/app/tourProjectGroupPurchase/calcTotalAmount',
|
|
|
+ {
|
|
|
+ query: {
|
|
|
+ id: pinTuanId.value,
|
|
|
+ adultCount: bookInfo.adultNumber ?? 0,
|
|
|
+ childrenCount: bookInfo.childrenNumber ?? 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ totalPrice.value = data.totalPrice ?? 0
|
|
|
+ adultTotalPrice.value = data.adultTotalPrice ?? 0
|
|
|
+ childTotalPrice.value = data.childTotalPrice ?? 0
|
|
|
+ } catch (error) {}
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ [() => bookInfo.adultNumber, () => bookInfo.childrenNumber],
|
|
|
+ () => {
|
|
|
+ calcTotalPrice()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+async function getPinTuanBaseInfo() {
|
|
|
+ loading.value = true
|
|
|
+ const { data } = await request(
|
|
|
+ `/website/app/tourProjectGroupPurchase/view?id=${pinTuanId.value}`
|
|
|
+ )
|
|
|
+ loading.value = false
|
|
|
+ pinTuanInfo.value = data
|
|
|
+}
|
|
|
+
|
|
|
+const pintuanFormModalOptions = reactive({
|
|
|
+ show: false
|
|
|
+})
|
|
|
+
|
|
|
+function handlePintuanSuccess() {}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getPinTuanBaseInfo()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|