|
|
|
<template>
|
|
|
|
<LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title" :no-safe-area="true">
|
|
|
|
<div class="wrapper-search" :class="{'hidden': !isFixSearch}">
|
|
|
|
<div class="search-header" @click="goSearch">
|
|
|
|
<div class="search-img"></div>
|
|
|
|
<input class="search-input" type="search" disabled="true" :placeholder="defaultSearchWord || '搜索商品名称或货号'"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="fixed-nav scroll-nav-wrap" :class="{'hidden': !isShow}" v-if="navList.length">
|
|
|
|
<ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -11,7 +18,7 @@ |
|
|
|
@pulling-up="onPullingUp" >
|
|
|
|
<div ref="body">
|
|
|
|
<div ref="topSource" class="channel-html">
|
|
|
|
<div class="search-header middle" @click="goSearch">
|
|
|
|
<div ref="searchSource" class="search-header middle" @click="goSearch">
|
|
|
|
<div class="search-img"></div>
|
|
|
|
<input class="search-input" type="search" disabled="true" :placeholder="defaultSearchWord || '搜索商品名称或货号'"/>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -22,8 +29,7 @@ |
|
|
|
<TwoBanner :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'twoPicture'"/>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
<!-- <div ref="scrollNav" :class="['scroll-nav-wrap',isShow?'fixed':'']" v-if="navList.length"> -->
|
|
|
|
<div ref="scrollNav" class="scroll-nav-wrap" v-if="navList.length">
|
|
|
|
<div ref="scrollNav" class="scroll-nav-wrap" v-if="navList.length">
|
|
|
|
<ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
|
|
|
|
</div>
|
|
|
|
<div class="list-wrap" :style="listStyle">
|
|
...
|
...
|
@@ -46,7 +52,6 @@ import TwoBanner from './components/twoBanner'; |
|
|
|
import Hot from './components/hot';
|
|
|
|
import ScrollNav from './components/scrollNav';
|
|
|
|
import ProductList from '../../list/components/productList';
|
|
|
|
import { setTimeout } from 'timers';
|
|
|
|
import UfoNoItem from '../../../components/ufo-no-item';
|
|
|
|
|
|
|
|
const { mapState, mapActions } = createNamespacedHelpers('home/channel');
|
|
...
|
...
|
@@ -70,6 +75,7 @@ export default { |
|
|
|
navTop: 0,
|
|
|
|
navHeight: 0,
|
|
|
|
isShow: false,
|
|
|
|
isFixSearch: false,
|
|
|
|
total: 0,
|
|
|
|
active: 0,
|
|
|
|
yasHeight: 0,
|
|
...
|
...
|
@@ -128,7 +134,6 @@ export default { |
|
|
|
listStyle() {
|
|
|
|
return {
|
|
|
|
minHeight: this.total + 'px',
|
|
|
|
// marginTop: this.isShow? this.navHeight +'px' : 0
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
...
|
...
|
@@ -149,9 +154,8 @@ export default { |
|
|
|
this.fetchChannelList();
|
|
|
|
}
|
|
|
|
this.init();
|
|
|
|
// this.getAllInboxCatInfo();
|
|
|
|
|
|
|
|
this.fetchDefaultSearchWord()
|
|
|
|
this.fetchDefaultSearchWord();
|
|
|
|
|
|
|
|
this.PAGE_URL = window.location.href;
|
|
|
|
|
|
...
|
...
|
@@ -172,7 +176,7 @@ export default { |
|
|
|
// 初始化 选中类目
|
|
|
|
const [firstNav] = this.navList;
|
|
|
|
|
|
|
|
if(firstNav) {
|
|
|
|
if (firstNav) {
|
|
|
|
const {url = ''} = firstNav;
|
|
|
|
|
|
|
|
this.selectedCategory = queryString.parse(url);
|
|
...
|
...
|
@@ -220,7 +224,6 @@ export default { |
|
|
|
}
|
|
|
|
if (scrollY) { // 滚动时
|
|
|
|
if (scrollHeight + scrollY > eleTop && item.template_name === 'guessLike') {
|
|
|
|
// console.log('guessLike report')
|
|
|
|
item.data.forEach((val, i) => {
|
|
|
|
reportParams = {...val.reportParams, PAGE_URL: this.PAGE_URL};
|
|
|
|
this.homeYasParams.push(reportParams);
|
|
...
|
...
|
@@ -228,7 +231,6 @@ export default { |
|
|
|
|
|
|
|
}
|
|
|
|
if (scrollY < (eleTop + eleHeight) && item.template_name !== 'guessLike') {
|
|
|
|
// console.log(item.template_name)
|
|
|
|
let reportMoreParams = {};
|
|
|
|
|
|
|
|
item.data.forEach((val, i) => {
|
|
...
|
...
|
@@ -264,24 +266,25 @@ export default { |
|
|
|
// console.log(this.homeYasParams)
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
param: {DATA:this.homeYasParams},
|
|
|
|
param: {DATA: this.homeYasParams},
|
|
|
|
appop: 'XY_UFO_SHOW_EVENT'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
reportTabYas() {
|
|
|
|
let guessLikeTabParams = this.listYasParams;
|
|
|
|
|
|
|
|
delete guessLikeTabParams.I_INDEX;
|
|
|
|
|
|
|
|
// 防止重复上报
|
|
|
|
if(this.guessLikeId !== guessLikeTabParams.TAB_ID) {
|
|
|
|
this.guessLikeId = guessLikeTabParams.TAB_ID
|
|
|
|
console.log('guesslisttab',guessLikeTabParams)
|
|
|
|
if (this.guessLikeId !== guessLikeTabParams.TAB_ID) {
|
|
|
|
this.guessLikeId = guessLikeTabParams.TAB_ID;
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
param: guessLikeTabParams,
|
|
|
|
appop: 'XY_UFO_MAIN_EVENT'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
params: {
|
|
|
|
param: guessLikeTabParams,
|
|
|
|
appop: 'XY_UFO_MAIN_EVENT'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async guessLikeListParams(params) {
|
|
...
|
...
|
@@ -301,8 +304,10 @@ export default { |
|
|
|
this.active = Number(index);
|
|
|
|
this.isShow && this.$refs.scroll.scrollTo(this.navTop);
|
|
|
|
await this.guessLikeListParams({index, ...params});
|
|
|
|
|
|
|
|
// tab点击
|
|
|
|
this.reportTabYas()
|
|
|
|
this.reportTabYas();
|
|
|
|
|
|
|
|
// 商品列表曝光
|
|
|
|
this.productList.list.length > 0 && this.listScrollY > 0 && this.$refs.product && this.$refs.product.yasShowEvent(this.yasHeight);
|
|
|
|
},
|
|
...
|
...
|
@@ -326,8 +331,10 @@ export default { |
|
|
|
this.scrollY = -y;
|
|
|
|
|
|
|
|
if (this.navTop) {
|
|
|
|
this.isShow = (this.scrollY >= this.$refs.topSource.offsetHeight);
|
|
|
|
this.isShow = (this.scrollY >= this.$refs.topSource.offsetHeight - 32);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.isFixSearch = (this.scrollY >= this.$refs.searchSource.offsetHeight);
|
|
|
|
},
|
|
|
|
async refreshProductList(index) {
|
|
|
|
let str = get(get(this.navList, `[${index}].url`, '').split('?'), '[1]', '');
|
|
...
|
...
|
@@ -386,27 +393,25 @@ export default { |
|
|
|
let {data} = result;
|
|
|
|
|
|
|
|
if (result.code === 200) {
|
|
|
|
|
|
|
|
data.endReached = (data.page === data.page_total) && (data.page_size !== 1) || !data.page_total;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (typeof data === 'object' && Object.keys(data).length) {
|
|
|
|
for (let key in data) {
|
|
|
|
if (key === 'product_list') {
|
|
|
|
list.list = data.page > 1 ? list.list.concat(data.product_list) : data.product_list;
|
|
|
|
} else {
|
|
|
|
list[key] = data[key];
|
|
|
|
}
|
|
|
|
if (!data.product_list) {
|
|
|
|
this.productList.list = [];
|
|
|
|
if (data.hasOwnProperty(key)) {
|
|
|
|
if (key === 'product_list') {
|
|
|
|
list.list = data.page > 1 ? list.list.concat(data.product_list) : data.product_list;
|
|
|
|
} else {
|
|
|
|
list[key] = data[key];
|
|
|
|
}
|
|
|
|
if (!data.product_list) {
|
|
|
|
this.productList.list = [];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.productList = list;
|
|
|
|
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
// console.log(e);
|
|
|
|
if (this.productList.page <= 1) {
|
|
|
|
this.productList.list = [];
|
|
|
|
}
|
|
...
|
...
|
@@ -458,6 +463,7 @@ export default { |
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.scroll-nav-wrap {
|
|
|
|
position: relative;
|
|
|
|
background-color: #fefefe;
|
|
...
|
...
|
@@ -465,6 +471,7 @@ export default { |
|
|
|
&.fixed-nav {
|
|
|
|
width: 100%;
|
|
|
|
position: absolute;
|
|
|
|
top: 64px;
|
|
|
|
z-index: 10;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
...
|
...
|
@@ -487,16 +494,6 @@ export default { |
|
|
|
.channel-html {
|
|
|
|
padding: 20px 24px 0;
|
|
|
|
|
|
|
|
// &:before {
|
|
|
|
// content: "";
|
|
|
|
// width: 520px;
|
|
|
|
// height: 28px;
|
|
|
|
// background-image: url("~statics/image/channel/service-info.png");
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
// margin: 10px auto 20px;
|
|
|
|
// display: block;
|
|
|
|
// }
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
content: "";
|
|
|
|
width: 100%;
|
|
...
|
...
|
@@ -520,18 +517,29 @@ export default { |
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.yohoufo-channel-page {
|
|
|
|
/deep/ .cube-pullup-wrapper {
|
|
|
|
background: #f2f2f2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/deep/ .cube-scroll-nav-bar-item_active {
|
|
|
|
&:after {
|
|
|
|
width: 16px;
|
|
|
|
// left: 50%;
|
|
|
|
transform: translateX(-10px)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.wrapper-search {
|
|
|
|
background: #fff;
|
|
|
|
padding: 0 24px;
|
|
|
|
width: 100%;
|
|
|
|
position: absolute;
|
|
|
|
z-index: 10;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search-header {
|
|
|
|
height: 64px;
|
|
|
|
background: #f5f5f5;
|
|
...
|
...
|
@@ -561,6 +569,7 @@ input::-webkit-input-placeholder { |
|
|
|
.middle {
|
|
|
|
margin: 0 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search-img {
|
|
|
|
width: 28px;
|
|
|
|
height: 28px;
|
|
...
|
...
|
@@ -568,9 +577,11 @@ input::-webkit-input-placeholder { |
|
|
|
background: url(~statics/image/list/searchPage_icon@3x.png) no-repeat;
|
|
|
|
background-size: cover;
|
|
|
|
}
|
|
|
|
|
|
|
|
.class-a {
|
|
|
|
padding-top: 104px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.hidden {
|
|
|
|
visibility: hidden;
|
|
|
|
opacity: 0;
|
...
|
...
|
|
