fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by Tao
Commit e3156b86b1061e3831b54cc3246009a7d76937ab 1 parent a9d70279

add channel

Inline Side-by-side
Showing 5 changed files with 106 additions and 62 deletions
<template>
<div class="scroll-app">
<div class="scroll-flex">
<div class="scroll-list-wrap">
<Scroll
ref="scroll"
:scroll-events="scrollEvents"
@scroll="scrollHandler"
:options="options"
@pulling-up="onPullingUp"
:data="channelList.productlist">
<div class="body" ref="body">
<div class="channel-top"></div>
<!-- <div class="html">qwdwqdwq、</div> -->
<div v-for="(item, index) in channelList.list" :key="index">
<Swiper :list="item.data" v-if="item.template_name == 'threePicture'"/>
<Hot :list="item.data.list" v-if="item.template_name == 'image_list'" />
<Banner :list="item.data" v-if="item.template_name == 'single_image'" />
<TwoBanner :list="item.data" v-if="item.template_name == 'twoPicture'" />
<ScrollNav :list="item.data.list" v-if="item.template_name == 'guessLike'"></ScrollNav>
<LayoutApp :show-back="true">
<div class="scroll-list-wrap">
<template v-if="isShow">
<div v-for="(item, index) in channelList.list" v-if="item.template_name == 'guessLike'">
<ScrollNav :list="item.data.list"></ScrollNav>
</div>
<ProductList :list="channelList.productlist"></ProductList>
</div>
</Scroll>
</div>
</div>
</div>
</template>
<Scroll
ref="scroll"
:scroll-events="scrollEvents"
@scroll="scrollHandler"
:options="options"
@pulling-up="onPullingUp"
:data="productList.list">
<div class="body" ref="body">
<div class="channel-top"></div>
<div class="marginTop">
<div v-for="(item, index) in channelList.list" :key="index" class="space-between">
<Swiper :list="item.data" v-if="item.template_name == 'threePicture'"/>
<Hot :list="item.data.list" v-if="item.template_name == 'image_list'" />
<Banner :list="item.data" v-if="item.template_name == 'single_image'" />
<TwoBanner :list="item.data" v-if="item.template_name == 'twoPicture'" />
<template v-if="!isShow">
<div ref="sss" v-if="item.template_name == 'guessLike'">
<ScrollNav :list="item.data.list"></ScrollNav>
</div>
</template>
</div>
</div>
<div :style="{minHeight: total + 'px',marginTop: '30px'}">
<ProductList :list="productList.list" v-if="productList.list.length > 0" class="bgColor"></ProductList>
<div v-else> 没有数据！ </div>
</div>
</div>
</Scroll>
</div>
</LayoutApp>
</template>
<script>
... ... @@ -36,8 +47,10 @@ 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';
const { mapState, mapActions } = createNamespacedHelpers('home/channel');
const { mapState: mapStateList, mapActions: mapActionsList } = createNamespacedHelpers('list');
export default {
data() {
... ... @@ -50,32 +63,58 @@ export default {
},
scrollEvents: ['scroll'],
scrollY: 0,
navTop: 0,
navHeight: 0,
isShow: false,
total: 0,
marginTop: 0,
}
},
computed: {
...mapState(['channelList']),
...mapStateList(['productList']),
},
mounted() {
const params = {
isPage: true
isPage: true,
isHome: true,
}
this.fetchChannelList();
this.fetchChannelList().then((res)=>{
this.navTop = this.$refs.sss[0].offsetTop;
this.navHeight = this.$refs.sss[0].offsetHeight;
let windowH = document.documentElement.clientHeight || document.body.clientHeight;
this.total = windowH - this.navHeight;
console.log(windowH);
console.log(this.navHeight);
console.log(this.total);
console.log("______");
});
this.fetchProductList(params);
console.log(this.$refs.elememt);
console.log("elememt");
},
created() {
},
methods: {
scrollHandler({ y }) {
// console.log(y);
let scrollY = Math.abs(parseInt(y));
if(scrollY >= this.navTop) {
this.isShow = true;
this.marginTop = 0;
} else {
this.isShow = false;
this.marginTop = '30px';
}
// this.scrollY = -y
},
...mapActions(['fetchChannelList','fetchProductList']),
...mapActions(['fetchChannelList']),
...mapActionsList(['fetchProductList']),
async onPullingUp() {
const params = {
isReset: false
isReset: false,
isHome: true,
}
await this.fetchProductList(params);
this.$refs.scroll.forceUpdate()
... ... @@ -103,6 +142,9 @@ export default {
height: 310px;
background: #08304B;
}
.marginTop {
margin-top: -150px;
}
.scroll-app {
position: absolute;
top: 0;
... ... @@ -133,11 +175,18 @@ export default {
.body {
height: 100%;
overflow-y: auto;
// padding: 0 40px;
}
.html {
margin-top: -250px;
margin-bottom: 20px;
.space-between {
padding: 0 20px;
}
.bgColor {
background: #f5f5f5;
}
.navFixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
</style>
... ...
<template>
<div class="ScrollNav" v-if="labels.length > 0">
<div class="ScrollNav" ref="scrollNavtop" v-if="labels.length > 0">
<ScrollNavBar :current="current" :labels="labels" @change="changeHandler">
<span slot-scope="props">
{{props.txt}}
... ... @@ -13,7 +13,8 @@
import Vue from 'vue'
import { Style, ScrollNavBar } from 'cube-ui';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('home/channel');
// const { mapState, mapActions } = createNamespacedHelpers('list/channel');
const {mapState, mapActions} = createNamespacedHelpers('list');
export default {
name: 'slide',
... ... @@ -35,27 +36,24 @@ export default {
ScrollNavBar
},
computed: {
...mapState(['scrollnavidList']),
...mapState(['productList']),
},
mounted() {
// this.fetchProductList();
// 遍历ScrollNavBar的key值，组装到labels中;
this.list.map((res) => { this.labels.push(res.tab_name) });
console.log(this.$refs.scrollNavtop);
console.log("this.$refs.xxx.offsetTop2");
},
created() {
},
methods: {
...mapActions(['fetchProductList']),
changeHandler(cur) {
let index = this.$refs[`getindex${cur}`].innerText;
const params = {
isReset: true,
}
let query = this.list[index].query
let params = Object.assign({},...query);
params.isReset = true; delete params.method;
this.fetchProductList(params);
console.log(this.list[index].tab_name);
// console.log(index);
}
}
};
... ...
... ... @@ -2,15 +2,15 @@
<div class="swiper">
<div class="swiper-item swiper-item-left">
<a :href="list[0].url">
<ImageFormat @click="clickHandler(item, index)" :lazy="false" class="item-imge" :src="list[0].src" :width="302" :height="402"></ImageFormat>
<ImageFormat @click="clickHandler(item, index)" :lazy="false" class="item-imge" :src="list[0].src" :width="310" :height="402"></ImageFormat>
</a>
</div>
<div class="swiper-item swiper-item-right">
<a :href="list[1].url">
<ImageFormat @click="clickHandler(item, index)" :lazy="false" class="item-imge" :src="list[1].src" :width="374" :height="196"></ImageFormat>
<ImageFormat @click="clickHandler(item, index)" :lazy="false" class="item-imge" :src="list[1].src" :width="380" :height="196"></ImageFormat>
</a>
<a :href="list[2].url">
<ImageFormat style="margin-top: 4px" @click="clickHandler(item, index)" :lazy="false" class="item-imge" :src="list[2].src" :width="374" :height="196"></ImageFormat>
<ImageFormat style="margin-top: 4px" @click="clickHandler(item, index)" :lazy="false" class="item-imge" :src="list[2].src" :width="380" :height="196"></ImageFormat>
</a>
</div>
</div>
... ... @@ -38,18 +38,18 @@ export default {
<style lang="scss" scoped>
.swiper {
// margin-top: -250px;
padding: 0 32px;
// padding: 0 32px;
overflow: hidden;
.swiper-item {
&.swiper-item-left {
width: 301px;
width: 310px;
float: left;
img {
height: 402px;
}
}
&.swiper-item-right {
width: 374px;
width: 380px;
float: right;
img {
height: 196px;
... ... @@ -58,7 +58,7 @@ export default {
img {
width: 100%;
display: block;
border-radius: 4px;
border-radius: 8px;
}
}
}
... ...
... ... @@ -24,27 +24,24 @@ export default function() {
if (res.template_name === 'hotSeries') {
for (let i = 0; i < res.data.length; i++) {
state.channelList.scrollnavList.push(res.data[i].series_name);
// state.channelList.scrollnavidList.push(res.data[i].series_id);
}
}
});
},
[Types.FETCH_PRODUCT](state, { productlist }) {
// state.channelList.productlist = productlist;
console.log(state.channelList.productlist);
Vue.set(state.channelList, 'productlist', state.channelList.productlist.concat(productlist.product_list));
Vue.set(state.channelList, 'page', productlist.page);
},
},
actions: {
async fetchProductList({ commit, state }, obj) {
console.log(obj);
let page = obj && obj.isReset ? state.channelList.page = 1 : state.channelList.page + 1;
let size = state.channelList.page_size;
const result = await this.$api.get('/api/ufo/list/productList', {
order: obj && obj.isReset ? 'sale_desc' : 'st_desc',
type: 6,
page,
pageSize: size,
...obj,
});
if (result.code === 200) {
... ... @@ -53,7 +50,7 @@ export default function() {
},
async fetchChannelList({ commit }) {
const result = await this.$api.get('/api/ufo/channel/channelList', {
content_code: 'c07b807110b342a09bd65d13aeb118f6',
content_code: 'b4c2aa846b56ad7e51e7255c2ee4c1f9',
// uid: '64668089',
uid: '500031170',
});
... ...