123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- <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>
|