diff --git a/src/pages/index/components/renting-cabinet-container.vue b/src/pages/index/components/renting-cabinet-container.vue
index f0f3e9a..2a86d26 100644
--- a/src/pages/index/components/renting-cabinet-container.vue
+++ b/src/pages/index/components/renting-cabinet-container.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 
 // 状态管理
 const rentingCabinetStore = useRentingCabinetStore();
-const { rentingCabinets, rentingCartItems, rentingCartTotalQuantity } = storeToRefs(rentingCabinetStore);
+const { rentingCabinets, rentingCartItems, rentingCartTotalQuantity, rentingCartTotalPrice } = storeToRefs(rentingCabinetStore);
 
 // 从props接收的数据
 const activeCategory = ref(0); // 这里的分类可以根据 cabinetName 来划分，也可以简化为所有可租用格口
@@ -57,14 +57,22 @@ function getRentingCartItemCount(cellId: number) {
 // 过滤格口列表，搜索框功能
 const filteredRentingCells = computed(() => {
   let cells: any[] = [];
-  // 如果有分类，则按分类过滤
+
+  // 根据当前选中的分类获取对应的柜机格口
   if (rentingCabinets.value.length > 0) {
-    // Flattern all cells from all cabinets
-    cells = rentingCabinets.value.flatMap(cabinet => cabinet.cells);
+    if (activeCategory.value >= 0 && activeCategory.value < rentingCabinets.value.length) {
+      // 只显示当前选中柜机的格口
+      cells = rentingCabinets.value[activeCategory.value].cells || [];
+    } else {
+      // 显示所有柜机的格口
+      cells = rentingCabinets.value.flatMap(cabinet => cabinet.cells || []);
+    }
   }
 
-  // 过滤掉已租用 (isRented = 1) 和已占用 (usageStatus = 2) 的格口
-  const availableCells = cells.filter(cell => cell.isRented === 0 && cell.usageStatus === 1);
+  // 过滤掉已租用 (isRented = 1)、已占用 (usageStatus = 2) 或不可用 (availableStatus = 2) 的格口
+  const availableCells = cells.filter(cell =>
+    cell.isRented === 0 && cell.usageStatus === 1 && cell.availableStatus === 1
+  );
 
   // 搜索过滤
   if (!searchQuery.value) {
@@ -155,17 +163,16 @@ function showCartDetail() {
     <!-- 底部购物车栏 -->
     <view v-if="rentingCartItems.length" class="shopping-cart-bar" @click="showCartDetail">
       <view class="cart-info">
-        <view class="badge-wrapper">
-          <text class="cart-icon">🛒</text>
-          <view class="badge">{{ rentingCartTotalQuantity }}</view>
-        </view>
-        <view class="total-price">
-          已选格口数：{{ rentingCartTotalQuantity }}
-        </view>
+        <wd-badge :model-value="rentingCartTotalQuantity" right="0" top="0">
+          <wd-icon name="cart" size="24px"></wd-icon>
+        </wd-badge>
+        <text class="total-price">
+          合计{{ rentingCartTotalQuantity }}格 ¥{{ rentingCartTotalPrice.toFixed(2) }}
+        </text>
       </view>
-      <button type="primary" size="default" @click.stop="handleCheckout" class="checkout-btn">
+      <view class="checkout-btn" @click.stop="handleCheckout">
         去结算
-      </button>
+      </view>
     </view>
   </view>
 </template>
@@ -173,7 +180,7 @@ function showCartDetail() {
 <style scoped lang="scss">
 .product-container {
   display: flex;
-  height: 100vh;
+  height: calc(100vh - 150px);
   background: #f7f8fa;
   position: relative;
   overflow: hidden;
@@ -222,6 +229,7 @@ function showCartDetail() {
   display: flex;
   flex-direction: column;
   background: #ffffff;
+  position: relative;
 }
 
 .search-wrapper {
@@ -243,6 +251,7 @@ function showCartDetail() {
   flex: 1;
   overflow-y: auto;
   padding: 10px;
+  padding-bottom: 55px;
 }
 
 .product-item {
@@ -372,7 +381,6 @@ function showCartDetail() {
   opacity: 0.6;
 }
 
-/* 修改购物车栏样式 */
 .shopping-cart-bar {
   position: absolute;
   bottom: 0;
@@ -394,28 +402,6 @@ function showCartDetail() {
   gap: 12px;
 }
 
-.badge-wrapper {
-  position: relative;
-}
-
-.cart-icon {
-  font-size: 24px;
-}
-
-.badge {
-  position: absolute;
-  top: -6px;
-  right: -8px;
-  background: #e95d5d;
-  color: #fff;
-  border-radius: 10px;
-  padding: 0 6px;
-  font-size: 10px;
-  line-height: 18px;
-  min-width: 18px;
-  text-align: center;
-}
-
 .total-price {
   font-size: 14px;
   color: #333;
@@ -423,13 +409,13 @@ function showCartDetail() {
 }
 
 .checkout-btn {
-  background-color: #e95d5d;
+  background-color: #F56C6C;
   border: none;
   border-radius: 16px;
   padding: 0 24px;
-  height: 32px;
-  line-height: 32px;
-  font-size: 14px;
+  height: 36px;
+  line-height: 36px;
   color: #fff;
+  font-size: 14px;
 }
 </style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 94281c6..56145d2 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useWxStore } from '@/pinia/stores/wx'
 import { useProductStore } from '@/pinia/stores/product'
 import { useCartStore } from '@/pinia/stores/cart'
+import { useRentingCabinetStore } from '@/pinia/stores/rentingCabinet'
 import { getShopListApi } from '@/api/shop'
 import type { ShopEntity } from '@/api/shop/types'
 import ProductContainer from './components/product-container.vue';
+import RentingCabinetContainer from './components/renting-cabinet-container.vue';
 import { generateDynamicCode, getWxUserByOpenid, mpCodeToOpenId } from '@/api/users'
 import { toHttpsUrl, uniLogin } from '@/utils'
 import { useAb98UserStore } from '@/pinia/stores/ab98-user'
@@ -22,6 +24,7 @@ definePage({
 const wxStore = useWxStore()
 const productStore = useProductStore()
 const cartStore = useCartStore()
+const rentingCabinetStore = useRentingCabinetStore()
 const ab98UserStore = useAb98UserStore()
 
 // 显示选择商店列表
@@ -29,6 +32,16 @@ const showShopList = ref<boolean>(true)
 const shopList = ref<ShopEntity[]>([])
 const shopId = ref<number>(0)
 
+// 计算当前选中的店铺模式
+const selectedShopMode = computed(() => {
+  if (!shopId.value) return 0
+  const shop = shopList.value.find(s => s.shopId === shopId.value)
+  return shop?.mode || 0
+})
+
+// 是否为租用模式
+const isRentingMode = computed(() => selectedShopMode.value === 3)
+
 
 
 // 页面加载
@@ -44,11 +57,12 @@ function handleShopSelect(selectedShopId: number) {
     productStore.setSelectedShop(selectedShop)
     if (selectedShop.mode == 3) {
       // 租用模式
-      // rentingCabinetStore.fetchRentingCabinetDetail(selectedShopId)
+      rentingCabinetStore.fetchRentingCabinetDetail(selectedShopId)
     } else {
       productStore.getGoods(selectedShopId)
     }
     cartStore.clearCart()
+    rentingCabinetStore.clearRentingCart()
   }
 }
 
@@ -58,6 +72,7 @@ function backToShopList() {
   shopId.value = 0
   productStore.categories = []
   cartStore.clearCart()
+  rentingCabinetStore.clearRentingCart()
 }
 
 // 结算方法
@@ -67,6 +82,13 @@ function handleCheckout() {
   })
 }
 
+// 租用结算方法
+function handleCheckoutRenting() {
+  uni.navigateTo({
+    url: '/pages/index/checkout'
+  })
+}
+
 onLoad(async (query) => {
   const wxParamsStore = useWxParamsStore();
   const { wxUserDTO } = storeToRefs(wxStore);
@@ -171,9 +193,16 @@ onShow(async () => {
       </view>
     </view>
 
+    <!-- 租用格口列表 -->
+    <RentingCabinetContainer
+      v-if="!showShopList && isRentingMode"
+      :shop-id="shopId"
+      @backToShopList="backToShopList"
+      @checkoutRenting="handleCheckoutRenting"
+    />
     <!-- 商品列表 -->
     <ProductContainer
-      v-if="!showShopList"
+      v-else-if="!showShopList && !isRentingMode"
       @backToShopList="backToShopList"
       @checkout="handleCheckout"
     />
diff --git a/src/pages/rental/index.vue b/src/pages/rental/index.vue
index b1a32a0..7b6e8cd 100644
--- a/src/pages/rental/index.vue
+++ b/src/pages/rental/index.vue
@@ -219,7 +219,7 @@ const handleOpenLocker = async (locker: LockerItem) => {
  */
 const handleRefund = (orderId: number, orderGoodsId: number) => {
   uni.navigateTo({
-    url: `/pages/approval/submit?orderGoodsId=${orderId}&orderId=${orderGoodsId}`,
+    url: `/pages/approval/submit?orderGoodsId=${orderGoodsId}&orderId=${orderId}`,
     fail: (err) => {
       console.error('页面跳转失败:', err)
       uni.showToast({