feat: 提交订单页面搭建

src/pages-quick/components/Card/index.vue

@@ -1,19 +1,22 @@
 <template>
   <view
     class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
-    @click="handleClick(item)"
+    @click.stop="handleClick(item)"
   >
     <image
       class="left rounded-10"
-      :src="item.commodityIcon"
+      :src="item.commodityPhoto"
       mode="aspectFill"
     />
     <view class="right border-box flex-full pl-12">
       <view class="font-size-16 line-height-24 color-171717 mb-4">
         {{ item.commodityName }}
       </view>
-      <view class="font-size-12 line-height-16 color-99A0AE mb-4">
-        1 张 1.8 米大床
+      <view
+        v-if="item.commodityFacility"
+        class="font-size-12 line-height-16 color-99A0AE mb-4"
+      >
+        {{ item.commodityFacility.join(" ") }}
       </view>
       <view class="font-size-12 line-height-18 color-43669A">
         {{ item.commodityTradeRuleList.join(" / ") }}
@@ -23,12 +26,16 @@
         <text
           class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
         >
-          {{ item.commodityPrice }}
+          {{ item.specificationPrice }}
         </text>
         <text class="font-size-12 line-height-16 color-99A0AE">
           /{{ item.stockUnitLabel }}
         </text>
-        <text class="btn border-box rounded-10 color-white ml-16">订</text>
+        <text
+          class="btn border-box rounded-10 color-white ml-16"
+          @click.stop="handleBooking(item)"
+          >订</text
+        >
       </view>
     </view>
   </view>
@@ -43,10 +50,10 @@ const props = defineProps({
     type: Object,
     required: true,
     default: () => ({
-      commodityIcon: "",
+      commodityPhoto: "",
       commodityId: "",
       commodityName: "",
-      commodityPrice: "",
+      specificationPrice: "",
       commodityServices: [],
       commodityTags: [], // 商品标签
       commodityTradeRuleList: [], // 交易规则列表
@@ -59,6 +66,10 @@ const props = defineProps({
 const handleClick = ({ commodityId }) => {
   uni.navigateTo({ url: `/pages/goods/index?commodityId=${commodityId}` });
 };
+
+const handleBooking = ({ commodityId }) => {
+  uni.navigateTo({ url: `/pages/booking/index?commodityId=${commodityId}` });
+};
 </script>
 
 <style scoped lang="scss">

src/pages-quick/list.vue

@@ -79,22 +79,27 @@ const selectedDate = ref({
   totalDays: 1,
 });
 const dataList = ref([]);
-const commodityGroupDTOList = ref([]);
 const paging = ref(null);
 const currentType = ref("0"); // 当前选中类型
 
 const queryList = async (pageNum = 1, pageSize = 10) => {
   try {
-    const res = await quickBookingList({
+    const params = {
       commodityTypeCode: currentType.value,
       size: pageSize,
       current: pageNum,
-    });
-    console.log("API响应:", res.data.commodityGroupDTOList);
+    };
 
-    if (res && res.data && res.data.commodityGroupDTOList) {
-      commodityGroupDTOList.value = res.data.commodityGroupDTOList;
-      const records = res.data.commodityGroupDTOList[0].commodityList;
+    if (currentType.value === "0") {
+      params.checkInDate = selectedDate.value.startDate;
+      params.checkOutDate = selectedDate.value.endDate;
+    }
+
+    const res = await quickBookingList(params);
+    console.log("API响应:", res.data.records);
+
+    if (res && res.data && res.data.records) {
+      const records = res.data.records;
 
       // 完成数据加载，第二个参数表示是否还有更多数据
       paging.value.complete(records);
@@ -112,13 +117,11 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
 const handleTabChange = ({ item }) => {
   console.log("item", item.value);
   currentType.value = item.value;
-  // 从列表中找到对应的商品列表
-  const { commodityList } =
-    commodityGroupDTOList.value.find(
-      (i) => i.commodityTypeCode === item.value
-    ) || {};
-  dataList.value = commodityList || [];
-  paging.value.complete(commodityList);
+
+  if (currentType.value === "0") {
+  }
+
+  paging.value.reload();
 };
 
 // 处理日历关闭
@@ -131,6 +134,7 @@ const handleDateSelect = (data) => {
   selectedDate.value = data;
   calendarVisible.value = false;
   console.log("选择的日期:", data);
+  paging.value.reload();
 };
 </script>