xinkeaboard/xinkeaboard-web/components/Home/home.vue

<template>
  <div class="index">
    <!--初次加载后面的虚拟mask-->
    <template v-if="firstLoading">
      <div class="skeleton_banner"></div>
      <div class="w_sld_react_1210 adv_04_wrap skeleton">
        <div class="floor_title">
          <h2>
            <span></span>
          </h2>
        </div>
        <div class="floor_goods">
          <div
            class="item"
            v-for="(item_main, index_main) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            v-bind:key="index_main"
          >
            <div class="wrap">
              <a href="javascript:void(0)" class="example_text"></a>
              <p class="title">
                <a href="javascript:void(0)">{{ item_main }}</a>
              </p>
              <p class="price">
                <span></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>

    <SldDiy
      v-if="decorateData.data.length"
      :decorateData="decorateData"
      @adv19="handleAdv19"
    />

    <SldCommonEmpty
      v-if="!firstLoading && !decorateData.data.length"
      totalHeight="900"
      paddingTop="250"
      :tip="L['我们正在努力装修中，敬请期待～']"
    />
  </div>
</template>

<script setup>
import { getCurLanguage } from "@/composables/common.js";
const L = getCurLanguage();
const router = useRouter();
const route = useRoute();
const decorateData = reactive({ data: [] }); //装修数据
const firstLoading = ref(true); //是否第一次加载
const { proxy } = getCurrentInstance();
const latestProducts = reactive({ data: [] });
const getInitData = async () => {
  let param = {};
  if (route.query.type == "view" && route.query.id)
    param.decoId = route.query.id;
  const {
    data: value,
    pending,
    error,
    refresh,
  } = await useFetchRaw(apiUrl + "v3/system/front/pcDeco/index");
  const res = value._rawValue;
  if (!pending._rawValue) {
    firstLoading.value = false;
  }

  if (res.state == 200) {
    decorateData.data = JSON.parse(res.data.data.replace(/&quot;/g, '"'));
    decorateData.data.map((item) => {
      item.json_data = item.json;
      if (item.json_data && item.json_data.type == "adv_19") {
        item.json_data.data.map((child) => {
          child.cur_tab = 0;
        });
      }
      if (item.json_data && item.json_data.type == "main_banner_pc") {
        item.json_data.data = item.json_data.info.carousel_info.data.filter((i) => i.imgUrl);
      }
    });
  }
};

getInitData();


router.beforeEach((to, from, next) => {
  document.body.style.overflow = "";
  next();
});


const handleAdv19 = (data) => {
  let tmp_data = decorateData.data.filter(
    (item) => item.dataId == data.dataId
  )[0];
  tmp_data.json_data.data[data.left_or_right_index]["cur_tab"] = data.tab_index;
};

//获取最新商品
// const getLatestProducts = async () => {
//   const {data:value } = await useFetchRaw(apiUrl+ "v3/goods/front/goods/new/list");
//   const res = value._rawValue
//   console.log(res.data)
//   if(res.state == 200){
//     latestProducts.data = res.data.list
//   }
// }
// getLatestProducts()



onMounted(() => {});
</script>
<style lang="scss" scoped>
@import "@/assets/style/decorate.scss";
@import "@/assets/style/theme.scss";
@import "@/assets/style/homeImgLayout.scss";

.index {
  min-height: 456px;
  background: #f8f8f8;
  padding-bottom: 10px;
}

.skeleton_banner {
  width: 100%;
  height: 470px;
  background: $colorSkeleton;
  margin-bottom: 10px;
}

.skeleton {
  &.adv_04_wrap .floor_title h2 span {
    background: $colorSkeleton;
    display: inline-block;
    width: 200px;
  }

  &.adv_04_wrap .floor_goods .item .wrap .title {
    background: $colorSkeleton;
    width: 100%;

    a {
      color: transparent;
    }
  }

  &.adv_04_wrap .floor_goods .item .wrap .price {
    width: 100%;
    height: 25px;
  }

  &.adv_04_wrap .floor_goods .item .wrap .price span {
    display: inline-block;
    width: 70px;
    height: 100%;
    background: $colorSkeleton;
  }
}
</style>