xyy-m/src/pages/car/submit-order.client.vue

<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]">{{ carInfo.unit }}{{ 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 authStore = useAuthStore();
const { token } = storeToRefs(authStore);

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 (!token.value) {
    navigateTo({
      path: "/login",
      query: {
        redirect: route.path,
        ...route.query,
      },
      replace: true,
    });
    return;
  }

  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>