shop-web/src/pages/cabinet/storage-horizontal.vue

<template>
  <div class="storage-horizontal-page">
    <!-- 地址选择面板 -->
    <div v-if="showAddressPanel" class="panel address-panel horizontal-mode">
      <AddressSelectionPanel
        :shop-list="shopList"
        :loading="loading"
        @select="handleShopSelect"
      />
    </div>

    <!-- 格口信息面板 -->
    <div v-else class="panel cells-panel horizontal-mode">
      <!-- <div class="panel-header">
        <van-button
          icon="arrow-left"
          type="default"
          @click="showAddressPanel = true"
          class="panel-switch-btn"
        >
          切换地址
        </van-button>

        <div class="panel-title">
          <van-icon name="shop-o" />
          <span>{{ selectedShop?.shopName }}</span>
        </div>
      </div> -->

      <StorageCellsSummary
        :shop-id="shopId"
        :show-buttons="true"
        @backToAddressSelect="showAddressPanel = true"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getShopListApi } from '@/common/apis/shop'
import type { ShopEntity } from '@/common/apis/shop/type'
import { useWxStore } from '@/pinia/stores/wx'
import AddressSelectionPanel from './components/AddressSelectionPanel.vue'
import StorageCellsSummary from './components/StorageCellsSummary.vue'

const wxStore = useWxStore()

const appElement = document.getElementById('app')
console.log('appElement', appElement)
if (appElement) {
  appElement.style.setProperty('max-width', '100%', 'important')
}

// 核心状态
const showAddressPanel = ref(true) // 控制地址选择面板显示
const shopList = ref<ShopEntity[]>([])
const shopId = ref<number>(0)
const selectedShop = ref<ShopEntity | null>(null)
const loading = ref(false)


// 初始化
const init = async () => {
  await loadShopList()
}

// 加载店铺列表
const loadShopList = async () => {
  loading.value = true
  try {
    const res = await getShopListApi({ corpid: wxStore.corpid || 'wpZ1ZrEgAA2QTxIRcB4cMtY7hQbTcPAw', mode: -1 })
    if (res?.code === 0 && res?.data?.length > 0) {
      shopList.value = res.data.filter(shop => shop.mode === 5)
    }
  } catch (error) {
    console.error('获取商店列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 选择店铺
const handleShopSelect = (selectedShopId: number) => {
  const shop = shopList.value.find(s => s.shopId === selectedShopId)
  if (shop) {
    selectedShop.value = shop
    shopId.value = selectedShopId
    showAddressPanel.value = false
  }
}


onMounted(() => {
  init()
})
</script>

<style scoped>
.storage-horizontal-page {
  width: 100%;
  height: 100vh;
  background: #f8f8f8;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.panel {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* 面板切换按钮 */
.panel-switch-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &:active {
    background: rgba(255, 255, 255, 0.8);
  }
}

/* 面板标题 */
.panel-title {
  text-align: center;
  padding: 16px;
  font-size: 20px;
  font-weight: 500;
  color: #333;

  .van-icon {
    margin-right: 8px;
    color: #2979ff;
  }
}


/* 地址选择面板专用样式 */
.address-panel {
  overflow-y: auto;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 格口信息面板专用样式 */
.cells-panel {
  overflow-y: auto;
  padding: 0px;
  background: #ffffff;
  flex: 1;
}

</style>