|
@@ -0,0 +1,203 @@
|
|
|
+<template>
|
|
|
+ <div class="bg-[#f8f8f8] min-h-screen pb-60 px-15 pt-15 text-black-3">
|
|
|
+ <div class="flex space-x-15 rounded-xl bg-white p-10">
|
|
|
+ <img
|
|
|
+ :src="carInfo.image"
|
|
|
+ class="h-110 w-110 shrink-0 rounded-xl object-cover"
|
|
|
+ />
|
|
|
+ <div class="flex-1 flex flex-col space-y-5">
|
|
|
+ <div class="flex items-center space-x-20 text-xl">
|
|
|
+ <span class="font-bold">{{ carInfo.name }}</span>
|
|
|
+ <span class="text-xl text-black-6">
|
|
|
+ {{ carInfo.seatNumber }}座.{{ carInfo.luggageNumber }}行李</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="text-sm">出发时间:{{ startTime }}</div>
|
|
|
+ <div class="text-sm">用车天数:{{ days }}天</div>
|
|
|
+ <div class="text-sm">起点:{{ driverInfo.belongTabDictMap.name }}</div>
|
|
|
+ <div class="text-sm">行程中可根据您的需求随时停</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mt-15 flex space-x-15 rounded-xl bg-white p-10">
|
|
|
+ <img
|
|
|
+ :src="driverInfo.image"
|
|
|
+ class="h-110 w-110 shrink-0 rounded-xl object-cover"
|
|
|
+ />
|
|
|
+ <div class="flex-1 text-sm flex flex-col space-y-5">
|
|
|
+ <div class="flex items-center space-x-20 text-xl font-semibold">
|
|
|
+ {{ driverInfo.name }}
|
|
|
+ </div>
|
|
|
+ <div>性别:{{ driverInfo.sexDictMap.name }}</div>
|
|
|
+ <div>年龄:{{ driverInfo.age }}</div>
|
|
|
+ <div>驾龄:{{ driverInfo.drivingYears }}年</div>
|
|
|
+ <div class="flex items-center space-x-10 text-sm text-black-6">
|
|
|
+ <span>好评度</span>
|
|
|
+ <van-rate size="14" disabled v-model="driverInfo.score" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mt-15 rounded-xl bg-white p-10">
|
|
|
+ <div>
|
|
|
+ <span class="text-2xl font-semibold text-black-3">乘车信息</span>
|
|
|
+ <span class="mt-5 text-sm text-black-6"
|
|
|
+ >(司机将提前联系顾客确定行程)</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <van-form label-width="50" class="mt-10">
|
|
|
+ <van-field
|
|
|
+ v-model="formData.connectPhone"
|
|
|
+ name="手机号"
|
|
|
+ type="tel"
|
|
|
+ label="手机号"
|
|
|
+ maxlength="20"
|
|
|
+ placeholder="手机号"
|
|
|
+ :rules="[{ required: true, message: '请填写手机号' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.connectName"
|
|
|
+ name="姓名"
|
|
|
+ label="姓名"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="姓名"
|
|
|
+ :rules="[{ required: true, message: '请填写姓名' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.connectWechat"
|
|
|
+ name="微信"
|
|
|
+ label="微信"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="微信"
|
|
|
+ :rules="[]"
|
|
|
+ />
|
|
|
+ <van-field name="radio" label="性别">
|
|
|
+ <template #input>
|
|
|
+ <van-radio-group
|
|
|
+ v-model="formData.connectSex"
|
|
|
+ direction="horizontal"
|
|
|
+ >
|
|
|
+ <van-radio name="1">先生</van-radio>
|
|
|
+ <van-radio name="2">女士</van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="formData.remark"
|
|
|
+ rows="3"
|
|
|
+ label="备注"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="200"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="选填,请将你的特殊需求告诉我们"
|
|
|
+ />
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="fixed bottom-0 left-0 right-0 shadow-[0px_3px_12px_1px_rgba(0,0,0,0.11);] bg-white h-60 text-base font-semibold flex items-center px-30"
|
|
|
+ >
|
|
|
+ <span class="">订单金额:</span>
|
|
|
+ <span class="text-[#FF1D1D]">¥{{ orderPrice }}</span>
|
|
|
+ <van-button
|
|
|
+ class="flex-1"
|
|
|
+ style="font-size: 16px; margin-left: 50px"
|
|
|
+ type="primary"
|
|
|
+ color="#FD9A00"
|
|
|
+ @click="handleSubmit"
|
|
|
+ >提交</van-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+const useUserInfo = useUserInfoStore();
|
|
|
+const { userInfo } = storeToRefs(useUserInfo);
|
|
|
+
|
|
|
+const startTime = computed(() => route.query.startDate ?? "");
|
|
|
+
|
|
|
+const days = computed(() => route.query.days ?? 0);
|
|
|
+
|
|
|
+const startPlace = computed(() => route.query.startPlace ?? 0);
|
|
|
+
|
|
|
+const carInfo = computed(() => {
|
|
|
+ try {
|
|
|
+ return JSON.parse(route.query.carInfo);
|
|
|
+ } catch (error) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const driverInfo = computed(() => {
|
|
|
+ try {
|
|
|
+ return JSON.parse(route.query.driverInfo);
|
|
|
+ } catch (error) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const formData = reactive({
|
|
|
+ categoryId: carInfo.value.id,
|
|
|
+ driverId: driverInfo.value.id,
|
|
|
+ startTime: startTime.value,
|
|
|
+ days: days.value,
|
|
|
+ startPlaceId: startPlace.value,
|
|
|
+ connectPhone: null,
|
|
|
+ connectName: null,
|
|
|
+ connectSex: null,
|
|
|
+ connectWechat: null,
|
|
|
+ remark: null,
|
|
|
+});
|
|
|
+
|
|
|
+const orderPrice = computed(() => {
|
|
|
+ return (days.value || 1) * (carInfo.value.price || 0);
|
|
|
+});
|
|
|
+
|
|
|
+watchEffect(() => {
|
|
|
+ formData.connectPhone = userInfo.value.mobile;
|
|
|
+});
|
|
|
+
|
|
|
+function onSubmit(val) {
|
|
|
+ console.log(val);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 提交订单
|
|
|
+ * @async
|
|
|
+ * @returns {Promise<void>}
|
|
|
+ * @example
|
|
|
+ * handleSubmit()
|
|
|
+ */
|
|
|
+async function handleSubmit() {
|
|
|
+ if (!formData.connectPhone) {
|
|
|
+ showToast("请填写手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!formData.connectName) {
|
|
|
+ showToast("请填写姓名");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ await request("/website/app/tourCarOrder/add", {
|
|
|
+ method: "post",
|
|
|
+ body: formData,
|
|
|
+ });
|
|
|
+ showConfirmDialog({
|
|
|
+ title: "温馨提示",
|
|
|
+ message: "提交成功,您可在个人中心-包车订单中查询进度",
|
|
|
+ confirmButtonText: "去查看",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ navigateTo({
|
|
|
+ path: "/profile/car-orders",
|
|
|
+ replace: true,
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ } catch (error) {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|