submit-order.client.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <div class="bg-[#f8f8f8] min-h-screen pb-60 px-15 pt-15 text-black-3">
  3. <div class="flex space-x-15 rounded-xl bg-white p-10">
  4. <img
  5. :src="carInfo.image"
  6. class="h-110 w-110 shrink-0 rounded-xl object-cover"
  7. />
  8. <div class="flex-1 flex flex-col space-y-5">
  9. <div class="flex items-center space-x-20 text-xl">
  10. <span class="font-bold">{{ carInfo.name }}</span>
  11. <span class="text-xl text-black-6">
  12. {{ carInfo.seatNumber }}座.{{ carInfo.luggageNumber }}行李</span
  13. >
  14. </div>
  15. <div class="text-sm">出发时间:{{ startTime }}</div>
  16. <div class="text-sm">用车天数:{{ days }}天</div>
  17. <div class="text-sm">起点:{{ driverInfo.belongTabDictMap.name }}</div>
  18. <div class="text-sm">行程中可根据您的需求随时停</div>
  19. </div>
  20. </div>
  21. <div class="mt-15 flex space-x-15 rounded-xl bg-white p-10">
  22. <img
  23. :src="driverInfo.image"
  24. class="h-110 w-110 shrink-0 rounded-xl object-cover"
  25. />
  26. <div class="flex-1 text-sm flex flex-col space-y-5">
  27. <div class="flex items-center space-x-20 text-xl font-semibold">
  28. {{ driverInfo.name }}
  29. </div>
  30. <div>性别:{{ driverInfo.sexDictMap.name }}</div>
  31. <div>年龄:{{ driverInfo.age }}</div>
  32. <div>驾龄:{{ driverInfo.drivingYears }}年</div>
  33. <div class="flex items-center space-x-10 text-sm text-black-6">
  34. <span>好评度</span>
  35. <van-rate size="14" disabled v-model="driverInfo.score" />
  36. </div>
  37. </div>
  38. </div>
  39. <div class="mt-15 rounded-xl bg-white p-10">
  40. <div>
  41. <span class="text-2xl font-semibold text-black-3">乘车信息</span>
  42. <span class="mt-5 text-sm text-black-6"
  43. >(司机将提前联系顾客确定行程)</span
  44. >
  45. </div>
  46. <van-form label-width="50" class="mt-10">
  47. <van-field
  48. v-model="formData.connectPhone"
  49. name="手机号"
  50. type="tel"
  51. label="手机号"
  52. maxlength="20"
  53. placeholder="手机号"
  54. :rules="[{ required: true, message: '请填写手机号' }]"
  55. />
  56. <van-field
  57. v-model="formData.connectName"
  58. name="姓名"
  59. label="姓名"
  60. maxlength="50"
  61. placeholder="姓名"
  62. :rules="[{ required: true, message: '请填写姓名' }]"
  63. />
  64. <van-field
  65. v-model="formData.connectWechat"
  66. name="微信"
  67. label="微信"
  68. maxlength="50"
  69. placeholder="微信"
  70. :rules="[]"
  71. />
  72. <van-field name="radio" label="性别">
  73. <template #input>
  74. <van-radio-group
  75. v-model="formData.connectSex"
  76. direction="horizontal"
  77. >
  78. <van-radio name="1">先生</van-radio>
  79. <van-radio name="2">女士</van-radio>
  80. </van-radio-group>
  81. </template>
  82. </van-field>
  83. <van-field
  84. v-model="formData.remark"
  85. rows="3"
  86. label="备注"
  87. type="textarea"
  88. maxlength="200"
  89. show-word-limit
  90. placeholder="选填,请将你的特殊需求告诉我们"
  91. />
  92. </van-form>
  93. </div>
  94. <div
  95. 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"
  96. >
  97. <span class="">订单金额:</span>
  98. <span class="text-[#FF1D1D]">{{ carInfo.unit }}{{ orderPrice }}</span>
  99. <van-button
  100. class="flex-1"
  101. style="font-size: 16px; margin-left: 50px"
  102. type="primary"
  103. color="#FD9A00"
  104. @click="handleSubmit"
  105. >提交</van-button
  106. >
  107. </div>
  108. </div>
  109. </template>
  110. <script setup>
  111. const route = useRoute();
  112. const authStore = useAuthStore();
  113. const { token } = storeToRefs(authStore);
  114. const useUserInfo = useUserInfoStore();
  115. const { userInfo } = storeToRefs(useUserInfo);
  116. const startTime = computed(() => route.query.startDate ?? "");
  117. const days = computed(() => route.query.days ?? 0);
  118. const startPlace = computed(() => route.query.startPlace ?? 0);
  119. const carInfo = computed(() => {
  120. try {
  121. return JSON.parse(route.query.carInfo);
  122. } catch (error) {
  123. return {};
  124. }
  125. });
  126. const driverInfo = computed(() => {
  127. try {
  128. return JSON.parse(route.query.driverInfo);
  129. } catch (error) {
  130. return {};
  131. }
  132. });
  133. const formData = reactive({
  134. categoryId: carInfo.value.id,
  135. driverId: driverInfo.value.id,
  136. startTime: startTime.value,
  137. days: days.value,
  138. startPlaceId: startPlace.value,
  139. connectPhone: null,
  140. connectName: null,
  141. connectSex: null,
  142. connectWechat: null,
  143. remark: null,
  144. });
  145. const orderPrice = computed(() => {
  146. return (days.value || 1) * (carInfo.value.price || 0);
  147. });
  148. watchEffect(() => {
  149. formData.connectPhone = userInfo.value.mobile;
  150. });
  151. function onSubmit(val) {
  152. console.log(val);
  153. }
  154. /**
  155. * 提交订单
  156. * @async
  157. * @returns {Promise<void>}
  158. * @example
  159. * handleSubmit()
  160. */
  161. async function handleSubmit() {
  162. if (!token.value) {
  163. navigateTo({
  164. path: "/login",
  165. query: {
  166. redirect: route.path,
  167. ...route.query,
  168. },
  169. replace: true,
  170. });
  171. return;
  172. }
  173. if (!formData.connectPhone) {
  174. showToast("请填写手机号");
  175. return;
  176. }
  177. if (!formData.connectName) {
  178. showToast("请填写姓名");
  179. return;
  180. }
  181. try {
  182. await request("/website/app/tourCarOrder/add", {
  183. method: "post",
  184. body: formData,
  185. });
  186. showConfirmDialog({
  187. title: "温馨提示",
  188. message: "提交成功,您可在个人中心-包车订单中查询进度",
  189. confirmButtonText: "去查看",
  190. })
  191. .then(() => {
  192. navigateTo({
  193. path: "/profile/car-orders",
  194. replace: true,
  195. });
  196. })
  197. .catch(() => {});
  198. } catch (error) {}
  199. }
  200. </script>
  201. <style lang="scss" scoped></style>