feat: 日历组件|复选框组件优化

components/Calender/index.vue

@@ -46,9 +46,9 @@
                 @tap="handleDateClick(dateInfo)"
               >
                 <template v-if="dateInfo">
-                  <text class="date-label" v-if="dateInfo.label">{{
-                    dateInfo.label
-                  }}</text>
+                  <text class="date-label" v-if="dateInfo.label">
+                    {{ dateInfo.label }}
+                  </text>
                   <text class="date-number">{{ dateInfo.day }}</text>
                   <text class="date-price" v-if="dateInfo.price"
                     >¥{{ dateInfo.price }}</text
@@ -90,10 +90,12 @@ const props = defineProps({
     required: true,
   },
 
-  // 价格数据对象
+  // 价格数据数组
   priceData: {
-    type: Object,
-    default: () => ({}),
+    type: Array,
+    default: () => [
+      {date: '', price: '-', stock: '0'}
+    ],
   },
 
   // 默认选中日期
@@ -202,6 +204,16 @@ const getFirstDayOfMonth = (year, month) => {
   return day === 0 ? 6 : day - 1; // 转换为周一开始 (0=周一, 6=周日)
 };
 
+// 获取指定日期的价格
+const getPriceForDate = (dateStr) => {
+  if (!props.priceData || !Array.isArray(props.priceData)) {
+    return null;
+  }
+  
+  const priceItem = props.priceData.find(item => item.date === dateStr);
+  return priceItem ? priceItem.price : null;
+};
+
 // 生成日历网格数据
 const generateCalendarGrid = (year, month) => {
   const daysInMonth = getDaysInMonth(year, month);
@@ -221,7 +233,7 @@ const generateCalendarGrid = (year, month) => {
     grid.push({
       date: dateStr,
       day: day,
-      price: props.priceData[dateStr] || null,
+      price: getPriceForDate(dateStr),
       disabled: isDateDisabled(dateStr),
       selected: isDateSelected(dateStr),
       inRange: isDateInRange(dateStr),
@@ -378,8 +390,8 @@ const handleRangeSelection = (dateInfo) => {
     emit("range-select", {
       startDate: rangeStart.value,
       endDate: rangeEnd.value,
-      startPrice: props.priceData[rangeStart.value],
-      endPrice: props.priceData[rangeEnd.value],
+      startPrice: getPriceForDate(rangeStart.value),
+      endPrice: getPriceForDate(rangeEnd.value),
       totalDays: daysBetween,
     });
   }

components/CheckBox/index.vue

@@ -1,14 +1,18 @@
 <template>
   <view class="checkbox-wrapper" @click="onChange">
-    <image class="checkbox-icon" :src="isChecked" mode="aspectFit" />
+    <uni-icons
+      class="checkbox-icon"
+      :type="isChecked"
+      :checked="isChecked"
+      :color="iconColor"
+      size="24"
+    />
     <slot></slot>
   </view>
 </template>
 
 <script setup>
 import { computed, defineEmits } from "vue";
-import uncheckedIcon from "./images/unchecked.png";
-import checkedIcon from "./images/checked.png";
 
 const props = defineProps({
   modelValue: {
@@ -21,7 +25,12 @@ const emit = defineEmits(["update:modelValue"]);
 
 // 计算属性，确定当前是否选中
 const isChecked = computed(() => {
-  return props.modelValue ? checkedIcon : uncheckedIcon;
+  return props.modelValue ? "checkbox-filled" : "circle";
+});
+
+// 计算图标颜色
+const iconColor = computed(() => {
+  return props.modelValue ? "#1890FF" : "#00A6FF";
 });
 
 // 切换选中状态

components/CheckBox/styles/index.scss

@@ -3,8 +3,6 @@
   align-items: center;
 
   .checkbox-icon {
-    width: 20px;
-    height: 20px;
-    margin-right: 8px;
+    margin-right: 6px;
   }
 }

pages/goods/components/GoodConfirm/index.vue

@@ -147,7 +147,7 @@ const isDeleting = ref(false); // 标志位，防止删除时watch冲突
 
 // 计算属性
 const totalPrice = computed(() => {
-  const price = props.goodsData.price || 399;
+  const price = props.goodsData.specificationPrice || 399;
   return (price * quantity.value).toFixed(0);
 });
 

pages/goods/index.vue

@@ -40,6 +40,7 @@
     <!-- 日历组件 -->
     <Calender
       :visible="calendarVisible"
+      :price-data="priceData"
       mode="range"
       @close="handleCalendarClose"
       @range-select="handleDateSelect"
@@ -50,7 +51,11 @@
 <script setup>
 import { ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
-import { goodsDetail, orderPay } from "@/request/api/GoodsApi";
+import {
+  goodsDetail,
+  commodityDailyPriceList,
+  orderPay,
+} from "@/request/api/GoodsApi";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
 import GoodInfo from "./components/GoodInfo/index.vue";
@@ -62,12 +67,27 @@ const calendarVisible = ref(false);
 const goodsData = ref({});
 const goodConfirmRef = ref(null);
 const selectedDate = ref("");
+const priceData = ref([]);
 
 // 获取商品详情数据
 const goodsInfo = async (params) => {
   const res = await goodsDetail(params);
 
   goodsData.value = res.data;
+
+  // 判断是酒店类型订单再获取获取商品日价格及库存
+  if (goodsData.value.commodityTypeCode === "0") {
+    getGoodsDailyPrice({
+      commodityId: goodsData.value.commodityId,
+    });
+  }
+};
+
+// 获取商品日价格及库存
+const getGoodsDailyPrice = async (params) => {
+  const res = await commodityDailyPriceList(params);
+
+  priceData.value = res.data;
 };
 
 // 显示确认弹窗

request/api/GoodsApi.js

@@ -9,4 +9,9 @@ const orderPay = (args) => {
   return request.post("/hotelBiz/trade/order", args);
 };
 
-export { goodsDetail, orderPay };
+// 获取商品日价格及库存
+const commodityDailyPriceList = (args) => {
+  return request.post("/hotelBiz/commodity/commodityDailyPriceList", args);
+};
+
+export { goodsDetail, commodityDailyPriceList, orderPay };