fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by Tao
Commit b83037c5be30024ba5e43ce1777891420e0d7859 1 parent 927dd40d

add channel

Inline Side-by-side
Showing 6 changed files with 124 additions and 46 deletions
const config = {
development: {
axiosBaseUrl: 'http://m.yohobuy.com/xianyu',
axiosBaseUrl: 'http://m.yohobuy.com:6001/xianyu',
axiosResponseType: 'json',
reportUrl: '//badjs.yoho.cn/apm/yas2.gif'
},
... ...
<template>
<LayoutApp :show-back="true">
<div class="scroll-list-wrap">
<Scroll
ref="scroll"
:options="options"
@pulling-up="onPullingUp">
<div class="body" ref="body">
<div v-for="(item, index) in channelData" :key="index">
<div v-for="(item, index) in channelList.list" :key="index">
<template v-if="item.template_name == 'focus'">
<Slider :list="list"></Slider>
</template>
... ... @@ -17,22 +23,36 @@
<TwoBanner :list="item.data"></TwoBanner>
</template>
</div>
<!-- <ScrollNav></ScrollNav> -->
<ScrollNav></ScrollNav>
<ProductList :list="channelList.productlist"></ProductList>
</div>
</Scroll>
</div>
</LayoutApp>
</template>
<script>
import Slider from './components/slider'; // 轮播图
import Banner from './components/banner'; // 一张图广告位
import TwoBanner from './components/twoBanner'; // 两张图广告位
import Hot from './components/hot'; // 热门系列
import ScrollNav from './components/scrollNav'; // 滑动导航
import { Style, Scroll } from 'cube-ui'
import { createNamespacedHelpers } from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('home/channel');
import Slider from './components/slider';
import Banner from './components/banner';
import TwoBanner from './components/twoBanner';
import Hot from './components/hot';
import ScrollNav from './components/scrollNav';
import ProductList from '../../list/components/productList';
const { mapState, mapActions } = createNamespacedHelpers('home/channel');
export default {
data() {
return {
options: {
bounce: {
top: false
},
pullUpLoad: true
},
items: [1,2,3,4,5,6,7,8,9],
list: [
{
url: 'http://www.didichuxing.com/',
... ... @@ -195,28 +215,42 @@ export default {
}
},
computed: {
...mapState(['channelData']),
...mapState(['channelList']),
},
created() {
},
mounted() {
this.fetchChannelList();
this.fetchProductList();
},
methods: {
...mapActions(['fetchChannelList']),
...mapActions(['fetchChannelList','fetchProductList']),
async onPullingUp() {
await this.fetchProductList();
setTimeout(() => { this.$refs.scroll.forceUpdate() }, 1000)
}
},
components: {
Slider,
Banner,
TwoBanner,
Hot,
ScrollNav
ScrollNav,
Style,
Scroll,
ProductList
}
};
</script>
<style lang="scss" scoped>
.scroll-list-wrap {
height: 100%;
width: 100%;
}
.body {
height: 100%;
overflow-y: auto;
... ...
... ... @@ -3,7 +3,7 @@
<ul>
<li v-for="(item, index) in list" :key="index" @click="goProduct(item)">
<div class="hot-image">
<img :src="item.image_url" alt="" />
<ImgSize class="item-imge" :src="item.image_url" :width="100" :height="80"/>
</div>
<div class="hot-name">{{item.series_name}}</div>
</li>
... ... @@ -16,6 +16,8 @@
</template>
<script>
import ImgSize from '../../../../components/img-size';
export default {
name: 'hot',
props: {
... ... @@ -25,6 +27,9 @@ export default {
},
},
components: {
ImgSize,
},
methods: {
goProduct() {
alert('跳转列表!');
... ... @@ -45,6 +50,7 @@ export default {
<style lang="scss" scoped>
.hot {
margin: 40px 0;
ul {
overflow: hidden;
li {
... ...
<template>
<div class="ScrollNav">
<ScrollNav>
<ScrollNav-panel
v-for="item in [1,2,3,4,5]"
:key="item"
:label="item">
<div v-for="item in [1,2,3,4,5]" :key="item" :label="item">22222</div>
</ScrollNav-panel>
</ScrollNav>
<ScrollNavBar :current="current" :labels="labels">
<span slot-scope="props" @click="changeHandler(props.index)">
{{props.txt}}
</span>
</ScrollNavBar>
</div>
</template>
<script>
import Vue from 'vue'
import { Style, ScrollNav } from 'cube-ui';
import { Style, ScrollNavBar } from 'cube-ui';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('home/channel');
export default {
name: 'slide',
... ... @@ -23,15 +22,36 @@ export default {
// default: true
// },
},
data() {
return {
index: 0,
current: '快车',
labels: [
'快车',
'小巴',
'专车',
'顺风车',
'代驾',
'公交',
'自驾租车',
'豪华车',
'二手车',
'出租车'
]
}
},
components: {
Style,
ScrollNav
ScrollNavBar
},
computed: {
// ...mapState(['resource'])
...mapState(['channelList','scrollnavidList']),
},
methods: {
changeHandler(index) {
console.log(this.channelList.scrollnavList[index]); // value
// console.log(this.channelList.scrollnavidList[index]); // id
}
}
};
</script>
... ...
import Vue from 'vue';
import * as Types from './types';
import { get, set } from 'lodash';
import { getImgUrl } from '../../common/utils';
export default function() {
return {
namespaced: true,
state: {
channelData: [],
// channelData: [],
channelList: {
list: [], // 资源列表
productlist: [], // 资源列表
page: 0, // 当前页
page_size: 10, // 每页数量
page_total: 0, // 总共多少页
total: 0, // 总共多少条
scrollnavList: [], // 导航菜单
// scrollnavidList: [], // 导航菜单id
},
},
mutations: {
[Types.FETCH_CHANNEL](state, { list }) {
state.channelData = list;
state.channelList.list = list;
state.channelList.list.map(res => {
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;
Vue.set(state.channelList, 'productlist', state.channelList.productlist.concat(productlist.product_list));
Vue.set(state.channelList, 'page', productlist.page);
},
},
actions: {
async fetchProductList({ commit, state }) {
let page = state.channelList.page;
let size = state.channelList.page_size;
const result = await this.$api.get('/api/ufo/list/productList', {
page: page + 1,
size,
});
if (result.code === 200) {
commit(Types.FETCH_PRODUCT, {productlist: result.data});
}
},
async fetchChannelList({ commit }) {
const result = await this.$api.get('/api/ufo/channel/channelList', {
content_code: '9cb6138be8e60c96f48107da481816c3',
uid: '64668089',
});
if (result.code === 200) {
result.data.map(res => {
// 焦点图
if(res.template_name === 'focus') {
for (let i = 0; i < res.data.length; i++) {
let url = "https:" + getImgUrl(get(res.data[i], "src") || '', 750, 200);
set(res.data[i], "src", url);
}
}
// 热门系列
if(res.template_name === 'hotSeries') {
for (let i = 0; i < res.data.length; i++) {
let url = "https:" + getImgUrl(get(res.data[i], "image_url") || '', 100, 80);
set(res.data[i], "image_url", url);
}
}
})
console.log(result.data);
commit(Types.FETCH_CHANNEL, { list: result.data });
}
}
... ...
... ... @@ -3,3 +3,4 @@ export const FETCH_NOTICE_LIST_FAILD = 'FETCH_NOTICE_LIST_FAILD';
export const FETCH_NOTICE_LIST_SUCCESS = 'FETCH_NOTICE_LIST_SUCCESS';
export const FETCH_CHANNEL = 'FETCH_CHANNEL';
export const FETCH_PRODUCT = 'FETCH_PRODUCT';
... ...