|
|
@@ -11,130 +11,130 @@
|
|
|
</config>
|
|
|
<template>
|
|
|
<div class="home">
|
|
|
- <search-bar></search-bar>
|
|
|
-
|
|
|
- <img class="bg" src="../static/imgs/home_top_bg.png" alt="" />
|
|
|
- <div id="main">
|
|
|
- <div class="swiper">
|
|
|
- <swiper
|
|
|
- autoplay
|
|
|
- previous-margin="33px"
|
|
|
- next-margin="32px"
|
|
|
- class="swiper-home"
|
|
|
- @change="current = $event.detail.current"
|
|
|
- :current="current"
|
|
|
- circular
|
|
|
- >
|
|
|
- <block v-for="(item, index) in banners" :key="item.id">
|
|
|
- <swiper-item :class="{ active: index === current }">
|
|
|
- <van-image
|
|
|
- @click="goDetail(item)"
|
|
|
- :src="item.img"
|
|
|
- width="620rpx"
|
|
|
- height="280rpx"
|
|
|
- radius="3"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
- </swiper-item>
|
|
|
- </block>
|
|
|
- </swiper>
|
|
|
- <div class="dots" v-if="banners.length > 1">
|
|
|
- <div
|
|
|
- class="dot"
|
|
|
- :class="{ active: index === current }"
|
|
|
- v-for="(item, index) in banners"
|
|
|
- :key="item.id"
|
|
|
- ></div>
|
|
|
+ <div id="homeTop">
|
|
|
+ <search-bar></search-bar>
|
|
|
+
|
|
|
+ <img class="bg" src="../static/imgs/home_top_bg.png" alt="" />
|
|
|
+ <div id="main">
|
|
|
+ <div class="swiper">
|
|
|
+ <swiper
|
|
|
+ autoplay
|
|
|
+ previous-margin="33px"
|
|
|
+ next-margin="32px"
|
|
|
+ class="swiper-home"
|
|
|
+ @change="current = $event.detail.current"
|
|
|
+ :current="current"
|
|
|
+ circular
|
|
|
+ >
|
|
|
+ <block v-for="(item, index) in banners" :key="item.id">
|
|
|
+ <swiper-item :class="{ active: index === current }">
|
|
|
+ <van-image
|
|
|
+ @click="goDetail(item)"
|
|
|
+ :src="item.img"
|
|
|
+ width="620rpx"
|
|
|
+ height="280rpx"
|
|
|
+ radius="3"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ </swiper-item>
|
|
|
+ </block>
|
|
|
+ </swiper>
|
|
|
+ <div class="dots" v-if="banners.length > 1">
|
|
|
+ <div
|
|
|
+ class="dot"
|
|
|
+ :class="{ active: index === current }"
|
|
|
+ v-for="(item, index) in banners"
|
|
|
+ :key="item.id"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="main">
|
|
|
- <div class="menus">
|
|
|
- <div class="text">{{ $t('zhuan-ye-ping-tai') }}</div>
|
|
|
- <div class="text">{{ $t('zi-yuan-ji-qun-pang-da') }}</div>
|
|
|
- <div class="text">{{ $t('yi-zhan-shi-fu-wu') }}</div>
|
|
|
- <div class="text">{{ $t('xin-yu-bao-zhang') }}</div>
|
|
|
- </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="menus">
|
|
|
+ <div class="text">{{ $t('zhuan-ye-ping-tai') }}</div>
|
|
|
+ <div class="text">{{ $t('zi-yuan-ji-qun-pang-da') }}</div>
|
|
|
+ <div class="text">{{ $t('yi-zhan-shi-fu-wu') }}</div>
|
|
|
+ <div class="text">{{ $t('xin-yu-bao-zhang') }}</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <van-grid clickable icon-size="40" :border="false" click>
|
|
|
- <van-grid-item
|
|
|
- content-class="menu-info"
|
|
|
- icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_icon_zhanshang.png"
|
|
|
- :text="$t('zhan-shang-zong-lan')"
|
|
|
- @click="navigateTo('/pagesHome/Brand', false)"
|
|
|
- />
|
|
|
- <van-grid-item
|
|
|
- content-class="menu-info"
|
|
|
- icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_icon_quanqiu.png"
|
|
|
- :text="$t('quan-qiu-chan-pin')"
|
|
|
- @click="navigateTo('/pagesHome/Product', false)"
|
|
|
- />
|
|
|
- <van-grid-item
|
|
|
- content-class="menu-info"
|
|
|
- icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_icon_imt.png"
|
|
|
- :text="$t('imt-ping-tai')"
|
|
|
- @click="navigateTo('/pagesImt/Index', false)"
|
|
|
- />
|
|
|
- <van-grid-item
|
|
|
- content-class="menu-info"
|
|
|
- icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_icon_xinwen.png"
|
|
|
- :text="$t('xin-wen-zi-xun')"
|
|
|
- @click="navigateTo('/pagesNews/News', false)"
|
|
|
- />
|
|
|
- </van-grid>
|
|
|
- <div class="pathImg">
|
|
|
- <van-image
|
|
|
- width="100%"
|
|
|
- height="90px"
|
|
|
- :radius="4"
|
|
|
- v-if="tDurl && tDurl !== 'null'"
|
|
|
- src="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_img_3dimt.jpg"
|
|
|
- @click="navigateTo('/pagesHome/ShowView', false)"
|
|
|
- />
|
|
|
+ <van-grid clickable icon-size="40" :border="false" click>
|
|
|
+ <van-grid-item
|
|
|
+ content-class="menu-info"
|
|
|
+ icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_icon_zhanshang.png"
|
|
|
+ :text="$t('zhan-shang-zong-lan')"
|
|
|
+ @click="navigateTo('/pagesHome/Brand', false)"
|
|
|
+ />
|
|
|
+ <van-grid-item
|
|
|
+ content-class="menu-info"
|
|
|
+ icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_icon_quanqiu.png"
|
|
|
+ :text="$t('quan-qiu-chan-pin')"
|
|
|
+ @click="navigateTo('/pagesHome/Product', false)"
|
|
|
+ />
|
|
|
+ <van-grid-item
|
|
|
+ content-class="menu-info"
|
|
|
+ icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_icon_imt.png"
|
|
|
+ :text="$t('imt-ping-tai')"
|
|
|
+ @click="navigateTo('/pagesImt/Index', false)"
|
|
|
+ />
|
|
|
+ <van-grid-item
|
|
|
+ content-class="menu-info"
|
|
|
+ icon="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_icon_xinwen.png"
|
|
|
+ :text="$t('xin-wen-zi-xun')"
|
|
|
+ @click="navigateTo('/pagesNews/News', false)"
|
|
|
+ />
|
|
|
+ </van-grid>
|
|
|
+ <div class="pathImg">
|
|
|
+ <van-image
|
|
|
+ width="100%"
|
|
|
+ height="90px"
|
|
|
+ :radius="4"
|
|
|
+ src="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_img_3dimt.jpg"
|
|
|
+ @click="go3D"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="hot" v-if="hotProductsList.length > 0">
|
|
|
- <div class="title">
|
|
|
- <h1>{{ $t('re-men-chan-pin') }}</h1>
|
|
|
- <!-- <van-button size="small" :color="$colors.info" plain>
|
|
|
+ <div class="hot" v-if="hotProductsList.length > 0">
|
|
|
+ <div class="title">
|
|
|
+ <h1>{{ $t('re-men-chan-pin') }}</h1>
|
|
|
+ <!-- <van-button size="small" :color="$colors.info" plain>
|
|
|
查看更多
|
|
|
<van-icon name="arrow" :color="$colors.info" />
|
|
|
</van-button> -->
|
|
|
- </div>
|
|
|
- <van-tabs :active="hotActive" @change="hotActive = $event.detail.index" :ellipsis="false">
|
|
|
- <van-tab :title="item.name" v-for="item in hotProductsList" :key="item.id"></van-tab>
|
|
|
- </van-tabs>
|
|
|
- <div class="van-content" v-if="nowProductsList.length > 0 || mainProductInfo">
|
|
|
- <product-grid-big :info="mainProductInfo" v-if="mainProductInfo"></product-grid-big>
|
|
|
- <div v-if="nowProductsList.length > 0">
|
|
|
- <swiper
|
|
|
- :style="{ height: swiperHeight + 'rpx' }"
|
|
|
- :current="hotSwiperIndex"
|
|
|
- @change="hotSwiperIndex = $event.detail.current"
|
|
|
- >
|
|
|
- <swiper-item v-for="(list, index) in swiperProduct" :key="index">
|
|
|
- <div class="product-list">
|
|
|
- <div class="col-3" v-for="item in list" :key="item.id">
|
|
|
- <product-grid :info="item" :clo="3" :padding="3"></product-grid>
|
|
|
+ </div>
|
|
|
+ <van-tabs :active="hotActive" @change="hotActive = $event.detail.index" :ellipsis="false">
|
|
|
+ <van-tab :title="item.name" v-for="item in hotProductsList" :key="item.id"></van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <div class="van-content" v-if="nowProductsList.length > 0 || mainProductInfo">
|
|
|
+ <product-grid-big :info="mainProductInfo" v-if="mainProductInfo"></product-grid-big>
|
|
|
+ <div v-if="nowProductsList.length > 0">
|
|
|
+ <swiper
|
|
|
+ :style="{ height: swiperHeight + 'rpx' }"
|
|
|
+ :current="hotSwiperIndex"
|
|
|
+ @change="hotSwiperIndex = $event.detail.current"
|
|
|
+ >
|
|
|
+ <swiper-item v-for="(list, index) in swiperProduct" :key="index">
|
|
|
+ <div class="product-list">
|
|
|
+ <div class="col-3" v-for="item in list" :key="item.id">
|
|
|
+ <product-grid :info="item" :clo="3" :padding="3"></product-grid>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
-
|
|
|
- <div class="dots" v-if="swiperProduct.length > 1">
|
|
|
- <div
|
|
|
- class="dot"
|
|
|
- :class="{ active: index === hotSwiperIndex }"
|
|
|
- v-for="(item, index) in swiperProduct"
|
|
|
- :key="index"
|
|
|
- ></div>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <div class="dots" v-if="swiperProduct.length > 1">
|
|
|
+ <div
|
|
|
+ class="dot"
|
|
|
+ :class="{ active: index === hotSwiperIndex }"
|
|
|
+ v-for="(item, index) in swiperProduct"
|
|
|
+ :key="index"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <van-empty description="暂未设置该类型热门商品" v-else />
|
|
|
- </div>
|
|
|
- <!-- <div class="datas">
|
|
|
+ <van-empty description="暂未设置该类型热门商品" v-else />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="datas">
|
|
|
<van-image
|
|
|
width="100%"
|
|
|
src="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/home_img_yewushuju.jpg"
|
|
|
@@ -157,62 +157,69 @@
|
|
|
</div>
|
|
|
</div> -->
|
|
|
|
|
|
- <div class="van-content" v-if="vendorInfos.length > 0">
|
|
|
- <div class="title">
|
|
|
- <h1>合作伙伴</h1>
|
|
|
- <van-button size="small" :color="$colors.info" plain @click="navigateTo('/pagesHome/Brand', false)">
|
|
|
- <div class="btn_icon">
|
|
|
- <span>查看更多</span>
|
|
|
- <van-icon name="arrow" :color="$colors.info" />
|
|
|
- </div>
|
|
|
- </van-button>
|
|
|
- </div>
|
|
|
- <swiper
|
|
|
- :style="{ height: vendorInfosHeight + 'rpx' }"
|
|
|
- :current="vendorSwiper"
|
|
|
- @change="vendorSwiper = $event.detail.current"
|
|
|
- >
|
|
|
- <block v-for="(list, index) in vendorInfos" :key="index">
|
|
|
- <swiper-item>
|
|
|
- <div class="vendor-list">
|
|
|
- <div class="col-3" v-for="item in list" :key="item.id">
|
|
|
- <vendor-grid :info="item"></vendor-grid>
|
|
|
- </div>
|
|
|
+ <div class="van-content" v-if="vendorInfos.length > 0">
|
|
|
+ <div class="title">
|
|
|
+ <h1>合作伙伴</h1>
|
|
|
+ <van-button
|
|
|
+ size="small"
|
|
|
+ :color="$colors.info"
|
|
|
+ plain
|
|
|
+ @click="navigateTo('/pagesHome/Brand', false)"
|
|
|
+ >
|
|
|
+ <div class="btn_icon">
|
|
|
+ <span>查看更多</span>
|
|
|
+ <van-icon name="arrow" :color="$colors.info" />
|
|
|
</div>
|
|
|
- </swiper-item>
|
|
|
- </block>
|
|
|
- </swiper>
|
|
|
-
|
|
|
- <div class="dots" v-if="vendorInfos.length > 1">
|
|
|
- <div
|
|
|
- class="dot"
|
|
|
- :class="{ active: index === vendorSwiper }"
|
|
|
- v-for="(item, index) in vendorInfos"
|
|
|
- :key="index"
|
|
|
- ></div>
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ <swiper
|
|
|
+ :style="{ height: vendorInfosHeight + 'rpx' }"
|
|
|
+ :current="vendorSwiper"
|
|
|
+ @change="vendorSwiper = $event.detail.current"
|
|
|
+ >
|
|
|
+ <block v-for="(list, index) in vendorInfos" :key="index">
|
|
|
+ <swiper-item>
|
|
|
+ <div class="vendor-list">
|
|
|
+ <div class="col-3" v-for="item in list" :key="item.id">
|
|
|
+ <vendor-grid :info="item"></vendor-grid>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </swiper-item>
|
|
|
+ </block>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <div class="dots" v-if="vendorInfos.length > 1">
|
|
|
+ <div
|
|
|
+ class="dot"
|
|
|
+ :class="{ active: index === vendorSwiper }"
|
|
|
+ v-for="(item, index) in vendorInfos"
|
|
|
+ :key="index"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="tuiJian">
|
|
|
- <div class="title">
|
|
|
- <h1>为你推荐</h1>
|
|
|
+ <div class="tuiJian">
|
|
|
+ <div class="title">
|
|
|
+ <h1>为你推荐</h1>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <van-sticky :container="main" :offset-top="barHeight">
|
|
|
- <filter-sort-bar
|
|
|
- :sort="sort"
|
|
|
- :showType="showType"
|
|
|
- @showFilter="showFilter"
|
|
|
- @changeSort="changeSort"
|
|
|
- @changeShowType="changeShowType"
|
|
|
- :hasbottom="false"
|
|
|
- background="linear-gradient(180deg, @bg 0%, #FFFFFF 100%)"
|
|
|
- >
|
|
|
- </filter-sort-bar>
|
|
|
- </van-sticky>
|
|
|
-
|
|
|
+ <div>
|
|
|
+ <van-sticky :container="main" :offset-top="barHeight">
|
|
|
+ <filter-sort-bar
|
|
|
+ :sort="sort"
|
|
|
+ :showType="showType"
|
|
|
+ @showFilter="showFilter"
|
|
|
+ @changeSort="changeSort"
|
|
|
+ @changeShowType="changeShowType"
|
|
|
+ :hasbottom="false"
|
|
|
+ background="linear-gradient(180deg, @bg 0%, #FFFFFF 100%)"
|
|
|
+ >
|
|
|
+ </filter-sort-bar>
|
|
|
+ </van-sticky>
|
|
|
+ </div>
|
|
|
<sort-list :empty="empty" :loading="loading" :finish="finish" top="88rpx">
|
|
|
<div class="product-list-sort" v-if="showType === 'grid'">
|
|
|
<div class="clo-2" v-for="item in list" :key="item.id">
|
|
|
@@ -358,9 +365,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
- this.$http.get('/sysConfig/get/ThreeD_URL').then(res => {
|
|
|
- this.tDurl = res.value;
|
|
|
- });
|
|
|
getBanner('HOME').then(res => {
|
|
|
console.log(res);
|
|
|
this.banners = res;
|
|
|
@@ -383,16 +387,6 @@ export default {
|
|
|
});
|
|
|
console.log(_list);
|
|
|
this.vendorInfos = [..._list.values()];
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- wx.createSelectorQuery()
|
|
|
- .select('#main')
|
|
|
- .boundingClientRect(rect => {
|
|
|
- console.log(rect);
|
|
|
- this.searchTop = rect.height;
|
|
|
- })
|
|
|
- .exec();
|
|
|
- }, 1000);
|
|
|
});
|
|
|
this.getData();
|
|
|
},
|
|
|
@@ -401,17 +395,30 @@ export default {
|
|
|
console.log(e);
|
|
|
},
|
|
|
goDetail(info) {
|
|
|
- console.log(info.url);
|
|
|
if (info.url) {
|
|
|
this.navigateTo(info.url);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ getTop() {}
|
|
|
+ },
|
|
|
+ onPageScroll() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ wx.createSelectorQuery()
|
|
|
+ .select('#homeTop')
|
|
|
+ .boundingClientRect(rect => {
|
|
|
+ this.searchTop = rect.height - this.barHeight;
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ });
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
if (!this.loading && !this.finish) {
|
|
|
this.page++;
|
|
|
this.getData();
|
|
|
}
|
|
|
+ },
|
|
|
+ onShareAppMessage(from, target) {
|
|
|
+ return this.shareInfo();
|
|
|
}
|
|
|
};
|
|
|
</script>
|