applet/pages/tabtar/components/ChoiceZone.vue

<template>
  <view
    class="hxbox u-skeleton-fillet"
    v-if="hxCateList.length || skeletonShow"
  >
    <view class="title">惠选专区</view>
    <view class="hxClassify">
      <view
        class="item"
        v-for="(item) in skeletonShow ? 1 : hxCateList.slice(0, 4)"
        @click="jumpHxCate(item)"
        :key="item.id"
      >
        <image
          mode="widthFix"
          :src="`${item.cover_image}?x-oss-process=style/w_350`"
        ></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  skeletonShow: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['jumpHxCate']);
const hxCateList = ref([]);

const jumpHxCate = (item) => {
  emit('jumpHxCate', item);
};

const getHxCateList = () => {
  return
  uni.$uv.$http.get("/hxcategory/home/recommend/4").then((res) => {
    if (res && res.code == 200) {
      hxCateList.value = res.list;
    }
  });
};
// getHxCateList();
onMounted(() => {
  getHxCateList();
});

defineExpose({
  init: getHxCateList,
});

</script>

<style scoped lang="scss">
.hxbox {
  padding: 30rpx 30rpx 0;
  margin: 0rpx 30rpx 30rpx;
  background: linear-gradient(139deg, #ffe9c4 1%, #edffe7 100%);
  border-radius: 10rpx;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #1a1a1a;
  }

  .hxClassify {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30rpx;
    color: #373737;

    .item {
      text-align: center;
      margin-bottom: 20rpx;

      image {
        width: 300rpx !important;
        height: 210rpx !important;
      }
    }

    .item:first-child {
      margin-left: 0;
    }

    .item:nth-child(5n + 1) {
      margin-left: 0;
    }
  }
}
</style>