feat: 获取商品类型列表

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

@@ -1,20 +1,20 @@
 <template>
   <view class="tab-container relative">
     <view class="tab-wrapper flex flex-items-center">
-      <view v-for="(item, index) in tabList" :key="index" :class="[
+      <view v-for="(item, index) in tabList" :key="item.id" :class="[
         'tab-item flex flex-items-center flex-justify-center relative',
         activeIndex === index && 'tab-item-active',
       ]" @click="handleTabClick(index)">
         <view class="tab-item-inner flex flex-items-center">
           <uni-icons :class="['icon mr-4', activeIndex === index && 'icon-active']"  fontFamily="znicons" size="20" color="opacity">
-            {{ zniconsMap[item.icon] }}
+            {{ zniconsMap[item.iconCode] }}
           </uni-icons>
 
           <text :class="[
             'font-size-16 font-500 color-525866 ',
             activeIndex === index && 'tab-text-active',
           ]">
-            {{ item.label }}
+            {{ item.iconTitle }}
           </text>
         </view>
 
@@ -26,19 +26,20 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { zniconsMap } from "@/static/fonts/znicons";
+import { commodityTypePageList } from "@/request/api/GoodsApi";
 
 // Props
 const props = defineProps({
   tabs: {
     type: Array,
     default: () => [
-      { label: "客房", value: "0", icon: "zn-nav-room" },
+      { iconTitle: "客房", typeCode: "0", iconCode: "zn-nav-room" },
-      { label: "门票", value: "1", icon: "zn-nav-ticket" },
+      { iconTitle: "门票", typeCode: "1", iconCode: "zn-nav-ticket" },
-      { label: "餐食", value: "2", icon: "zn-nav-meal" },
+      { iconTitle: "餐食", typeCode: "2", iconCode: "zn-nav-meal" },
-      { label: "套餐", value: "3", icon: "zn-package" },
+      { iconTitle: "套餐", typeCode: "3", iconCode: "zn-package" },
-      { label: "文创", value: "4", icon: "zn-package" },
+      { iconTitle: "文创", typeCode: "4", iconCode: "zn-package" },
     ],
   },
   defaultActive: {
@@ -56,7 +57,7 @@ const emit = defineEmits(["change", "update:modelValue"]);
 
 // 响应式数据
 const activeIndex = ref(props.defaultActive);
-const tabList = ref(props.tabs);
+const tabList = ref([]);
 
 // 处理Tab点击
 const handleTabClick = (index) => {
@@ -100,6 +101,21 @@ defineExpose({
   getActiveIndex: () => activeIndex.value,
   getActiveItem: () => tabList.value[activeIndex.value],
 });
+
+onMounted(() => {
+  getCommodityTypePageList();
+});
+
+// 获取商品类型列表（示例方法，实际使用时根据需要调用）
+const getCommodityTypePageList = async () => {
+  const res = await commodityTypePageList({size: 20, current: 1});
+  if (res && res.data && res.data.records) {
+    tabList.value = res.data.records;
+  } else {
+    tabList.value = props.tabs;
+  }
+};
+
 </script>
 <style lang="scss" scoped>
 @import "./styles/index.scss";

src/pages-quick/list.vue

@@ -92,8 +92,8 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
 };
 
 const handleTabChange = ({ item }) => {
-  console.log("item", item.value);
+  console.log("item typeCode: ", item.typeCode);
-  currentType.value = item.value;
+  currentType.value = item.typeCode;
 
   if (currentType.value === "0") {
   }

src/request/api/GoodsApi.js

@@ -14,9 +14,14 @@ const commodityDailyPriceList = (args) => {
   return request.post("/hotelBiz/commodity/commodityDailyPriceList", args);
 };
 
+// 分页查询商品分类列表 
+const commodityTypePageList = (args) => {
+  return request.post("/hotelBiz/commodity/commodityTypePageList", args);
+};
+
 // 快速预定分页列表
 const quickBookingList = (args) => {
   return request.post("/hotelBiz/mainScene/quickBookingList", args);
 };
 
-export { goodsDetail, commodityDailyPriceList, orderPay, quickBookingList };
+export { goodsDetail, commodityDailyPriceList, orderPay, quickBookingList, commodityTypePageList };