<template>
  <view>
    <u-navbar bgColor="#F6F8FA" title="特价专区" :placeholder="true" autoBack></u-navbar>
    <view>
      <search />
      <view class="mainBox">
        <shops :list="shopList" :shopWidth="344" :shopHeight="344" :pointShop="false" :isTejia="true" />
      </view>
    </view>
    <view class="null flexV" v-if="!shopList.length">
      <image class="sss" src="/static/pointsMallic/pointsShopNull.png" mode=""></image>
      <text>暂无商品信息</text>
    </view>
  </view>
</template>

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

onShow(() => {
  getIndexs()
})
let shopList = ref([]) // 积分商品
const getIndexs = async () => {
  try {
    const res = await getIndex()
    shopList.value = res.tjgoods //特价商品
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getIndex', err)
  }
}
</script>

<style lang="scss">
page {
  background: #f6f8fa;
}
.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>