<template>
  <search></search>
  <view class="mainBox">
    <shops :list="shopList" :shopWidth="344" :shopHeight="344" :isClass="true" />
  </view>
  <view class="null flexV" v-if="!shopList.length">
    <image class="sss" src="/static/pointsMallic/pointsShopNull.png" mode=""></image>
    <text>暂无商品信息</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getCategoryGoods } from '@/api'
import search from '@/componets/searchBox.vue'
import shops from '@/componets/shops.vue'

const shopList = ref([])

onLoad(async ({ pid }) => {
  const res = await getCategoryGoods({ pid })
  shopList.value = res
  console.log(res, '分类商品列表')
})
</script>

<style lang="scss">
page {
  background: #f7f8fa;
}

.mainBox {
  width: 100%;
  padding: 16rpx 24rpx;
  box-sizing: border-box;
}

.null {
  margin-top: 266rpx;

  text {
    position: relative;
    margin-top: -80rpx;
    color: #00000066;
    font-size: 26rpx;
  }

  image {
    width: 348rpx;
    height: 348rpx;
  }
}
</style>