shop-wx/src/pages/index/index.vue

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useWxStore } from '@/pinia/stores/wx'
import { useProductStore } from '@/pinia/stores/product'
import { useCartStore } from '@/pinia/stores/cart'
import { getShopListApi } from '@/api/shop'
import type { ShopEntity } from '@/api/shop/types'
import ProductContainer from './components/product-container.vue'

definePage({
  style: {
    navigationBarTitleText: '首页',
  },
})

// 状态管理
const wxStore = useWxStore()
const productStore = useProductStore()
const cartStore = useCartStore()

// 显示选择商店列表
const showShopList = ref<boolean>(true)
const shopList = ref<ShopEntity[]>([])
const shopId = ref<number>(0)

// 页面加载
onMounted(async () => {
  if (showShopList.value) {
    try {
      // 等待 handleWxCallback 完成
      await wxStore.waitForHandleWxCallbackComplete();
      const res = await getShopListApi(wxStore.corpid || '')
      if (res && res.length > 0) {
        shopList.value = res
      }
    } catch (error) {
      console.error('获取店铺列表失败:', error)
    }
  }
})

// 点击分类导航
function handleShopSelect(selectedShopId: number) {
  shopId.value = selectedShopId
  showShopList.value = false
  const selectedShop = shopList.value.find(shop => shop.shopId === selectedShopId)
  if (selectedShop) {
    productStore.setSelectedShop(selectedShop)
    if (selectedShop.mode == 3) {
      // 租用模式
      // rentingCabinetStore.fetchRentingCabinetDetail(selectedShopId)
    } else {
      productStore.getGoods(selectedShopId)
    }
    cartStore.clearCart()
  }
}

// 返回店铺列表
function backToShopList() {
  showShopList.value = true
  shopId.value = 0
  productStore.categories = []
  cartStore.clearCart()
}

// 结算方法
function handleCheckout() {
  uni.navigateTo({
    url: '/pages/index/shopping-cart/index'
  })
}
</script>

<template>
  <view class="shop-container">
    <!-- 店铺选择列表 -->
    <view v-if="showShopList" class="shop-list">
      <view class="shop-header">
        <wd-img
          src="/static/cover.png"
          width="100%"
          height="150"
          mode="aspectFill"
        ></wd-img>
      </view>

      <view class="shop-prompt">
        <view class="prompt-text">请选择机柜地址：</view>
      </view>

      <view class="shop-row">
        <view v-for="shop in shopList" :key="shop.shopId" class="shop-col" @click="handleShopSelect(shop.shopId)">
          <view class="shop-item">
            <wd-img
              :src="shop.coverImg || '/static/product-image.png'"
              width="100%"
              height="80"
              mode="aspectFill"
            ></wd-img>
            <view class="shop-info">
              <view class="shop-name">
                <wd-icon name="shop" size="16px" color="#666"></wd-icon>
                <text>{{ shop.shopName }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view v-if="!showShopList" class="shop">
      <ProductContainer
        @backToShopList="backToShopList"
        @checkout="handleCheckout"
      />
    </view>
  </view>
</template>

<style scoped lang="scss">
.shop-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f7f8fa;
}

.shop-list {
  .shop-header {
    width: 100%;
    height: 150px;
    overflow: hidden;
  }

  .shop-prompt {
    margin: 8px;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .prompt-text {
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }
  }

  .shop-row {
    padding: 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .shop-col {
    width: calc(50% - 4px);
    margin-bottom: 8px;
  }

  .shop-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;

    &:active {
      transform: scale(0.98);
    }

    .shop-info {
      padding: 12px;
    }

    .shop-name {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333;
      font-weight: 500;

      text {
        margin-left: 4px;
      }
    }
  }
}

.shop {
  flex: 1;
  height: 100%;
}
</style>