feat: 价格计算

src/components/RefundPopup/index.vue

@@ -80,7 +80,8 @@ const refundTitle = computed(() => {
 });
 
 const commodityPurchaseInstruction = computed(() => {
-  if (props.orderData.commodityPurchaseInstruction) {
+  if (props.orderData.commodityPurchaseInstruction && 
+      props.orderData.commodityPurchaseInstruction.refundContent) {
     // 以换行符为分隔符，将字符串转换为数组
     return props.orderData.commodityPurchaseInstruction.refundContent.split(
       "\n"

src/main.js

@@ -16,7 +16,6 @@ app.$mount();
 import { createSSRApp } from "vue";
 import * as Pinia from "pinia";
 import { createUnistorage } from "pinia-plugin-unistorage";
-import noclick from "./utils/noclick";
 
 export function createApp() {
   const app = createSSRApp(App);
@@ -25,7 +24,6 @@ export function createApp() {
   pinia.use(createUnistorage());
   app.use(pinia);
   app.use(share);
-  app.use(noclick);
 
   return {
     app,

src/pages-booking/components/FooterSection/index.vue

@@ -21,7 +21,6 @@
       />
       <text
         class="font-size-16 font-500 color-white"
-        @click="$onMultipleClicks(() => emit('payClick', orderData))"
         >立即支付</text
       >
     </view>
@@ -29,7 +28,9 @@
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits } from "vue";
+import { computed, defineProps, defineEmits, ref, onMounted, watch } from "vue";
+import { DebounceUtils } from "@/utils";
+import { preOrder } from "@/request/api/OrderApi";
 
 const props = defineProps({
   modelValue: {
@@ -54,11 +55,39 @@ const count = computed({
   },
 });
 
-const totalAmt = computed(() => {
-  const { totalDays } = props.selectedDate;
-  const { specificationPrice } = props.orderData;
-  return count.value * Number(specificationPrice) * totalDays;
+watch(
+  () => count.value,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      preOrderPay();
+    }
+  }
+);
+
+onMounted(() => {
+  preOrderPay();
 });
+
+const totalAmt = ref(props.orderData.specificationPrice);
+
+const preOrderPay = async () => {
+  preOrder({
+    "commodityId": props.orderData.commodityId,
+    "purchaseAmount": count.value,
+    "checkInData": props.selectedDate.startDate,
+    "checkOutData": props.selectedDate.endDate,
+  }).then((res) => {
+    console.log("预支付金额计算结果:", res);
+    totalAmt.value = res.data.payAmt;
+  }).catch((err) => {
+    console.error("预支付金额计算失败:", err);
+  });
+}
+
+const handleBooking = DebounceUtils.createDebounce(() => {
+  emit("payClick", props.orderData);
+}, 1000); 
+
 </script>
 
 <style scoped lang="scss">

src/pages-booking/index.vue

@@ -79,6 +79,7 @@
 
     <!-- 底部 -->
     <FooterSection
+      v-if="Object.keys(orderData).length"
       v-model="quantity"
       :selectedDate="selectedDate"
       :orderData="orderData"

src/pages-order/order/components/FooterSection/index.vue

@@ -17,7 +17,7 @@
           'bg-2D91FF': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
         },
       ]"
-      @click="$onmultipleClicks(() => handleButtonClick(orderData))"
+      @click="handleButtonClick(orderData)"
     >
       {{ buttonText }}
     </button>
@@ -27,6 +27,7 @@
 <script setup>
 import { defineProps, defineEmits, computed } from "vue";
 import { orderPayNow } from "@/request/api/OrderApi";
+import { DebounceUtils } from "@/utils";
 
 const props = defineProps({
   orderData: {
@@ -64,7 +65,7 @@ const buttonText = computed(() => {
 const emit = defineEmits(["refund", "refresh"]);
 
 // 处理按钮点击事件
-const handleButtonClick = async (orderData) => {
+const handleButtonClick = DebounceUtils.createDebounce(async (orderData) => {
   try {
     // 再次预定跳转商品详情
     if (["1", "2", "3", "4", "5", "6"].includes(statusCode.value)) {
@@ -130,7 +131,7 @@ const handleButtonClick = async (orderData) => {
     console.error("操作失败:", error);
     uni.hideLoading();
   }
-};
+}, 1000);
 </script>
 
 <style lang="scss" scoped>

src/utils/noclick.js

@@ -1,28 +0,0 @@
-// 防止处理多次点击
-// methods是需要点击后需要执行的函数， info是点击需要传的参数
-export function noMultipleClicks(fn, info, delay = 2000) {
-  if (typeof fn !== 'function') return;
-  // this 会是组件实例（因为通过 globalProperties 调用时 Vue 会把组件实例作为上下文）
-  const ctx = this || {};
-  if (!ctx.__noClickMap) ctx.__noClickMap = new WeakMap();
-
-  const map = ctx.__noClickMap;
-  if (map.get(fn)) {
-    console.log('请勿重复点击:', fn.name);
-    return;
-  }
-
-  map.set(fn, true);
-  // 保留组件上下文调用方法
-  fn.call(ctx, info);
-
-  setTimeout(() => {
-    map.set(fn, false);
-  }, delay);
-}
-
-export default {
-  install(app) {
-    app.config.globalProperties.$noMultipleClicks = noMultipleClicks;
-  }
-}