123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- <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(/"/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>
|