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
1 const config = { 1 const config = {
2 development: { 2 development: {
3 - axiosBaseUrl: 'http://m.yohobuy.com/xianyu', 3 + axiosBaseUrl: 'http://m.yohobuy.com:6001/xianyu',
4 axiosResponseType: 'json', 4 axiosResponseType: 'json',
5 reportUrl: '//badjs.yoho.cn/apm/yas2.gif' 5 reportUrl: '//badjs.yoho.cn/apm/yas2.gif'
6 }, 6 },
1 <template> 1 <template>
  2 + <LayoutApp :show-back="true">
  3 + <div class="scroll-list-wrap">
  4 + <Scroll
  5 + ref="scroll"
  6 + :options="options"
  7 + @pulling-up="onPullingUp">
2 <div class="body" ref="body"> 8 <div class="body" ref="body">
3 - <div v-for="(item, index) in channelData" :key="index"> 9 + <div v-for="(item, index) in channelList.list" :key="index">
4 <template v-if="item.template_name == 'focus'"> 10 <template v-if="item.template_name == 'focus'">
5 <Slider :list="list"></Slider> 11 <Slider :list="list"></Slider>
6 </template> 12 </template>
@@ -17,22 +23,36 @@ @@ -17,22 +23,36 @@
17 <TwoBanner :list="item.data"></TwoBanner> 23 <TwoBanner :list="item.data"></TwoBanner>
18 </template> 24 </template>
19 </div> 25 </div>
20 - <!-- <ScrollNav></ScrollNav> --> 26 + <ScrollNav></ScrollNav>
  27 + <ProductList :list="channelList.productlist"></ProductList>
21 </div> 28 </div>
  29 + </Scroll>
  30 + </div>
  31 + </LayoutApp>
22 </template> 32 </template>
23 33
24 <script> 34 <script>
25 -import Slider from './components/slider'; // 轮播图  
26 -import Banner from './components/banner'; // 一张图广告位  
27 -import TwoBanner from './components/twoBanner'; // 两张图广告位  
28 -import Hot from './components/hot'; // 热门系列  
29 -import ScrollNav from './components/scrollNav'; // 滑动导航 35 +import { Style, Scroll } from 'cube-ui'
30 import { createNamespacedHelpers } from 'vuex'; 36 import { createNamespacedHelpers } from 'vuex';
31 -const {mapState, mapActions} = createNamespacedHelpers('home/channel'); 37 +import Slider from './components/slider';
  38 +import Banner from './components/banner';
  39 +import TwoBanner from './components/twoBanner';
  40 +import Hot from './components/hot';
  41 +import ScrollNav from './components/scrollNav';
  42 +import ProductList from '../../list/components/productList';
  43 +
  44 +const { mapState, mapActions } = createNamespacedHelpers('home/channel');
32 45
33 export default { 46 export default {
34 data() { 47 data() {
35 return { 48 return {
  49 + options: {
  50 + bounce: {
  51 + top: false
  52 + },
  53 + pullUpLoad: true
  54 + },
  55 + items: [1,2,3,4,5,6,7,8,9],
36 list: [ 56 list: [
37 { 57 {
38 url: 'http://www.didichuxing.com/', 58 url: 'http://www.didichuxing.com/',
@@ -195,28 +215,42 @@ export default { @@ -195,28 +215,42 @@ export default {
195 } 215 }
196 }, 216 },
197 computed: { 217 computed: {
198 - ...mapState(['channelData']), 218 + ...mapState(['channelList']),
199 }, 219 },
200 created() { 220 created() {
201 221
202 }, 222 },
203 mounted() { 223 mounted() {
204 this.fetchChannelList(); 224 this.fetchChannelList();
  225 + this.fetchProductList();
205 }, 226 },
206 methods: { 227 methods: {
207 - ...mapActions(['fetchChannelList']), 228 + ...mapActions(['fetchChannelList','fetchProductList']),
  229 +
  230 + async onPullingUp() {
  231 + await this.fetchProductList();
  232 + setTimeout(() => { this.$refs.scroll.forceUpdate() }, 1000)
  233 + }
  234 +
208 }, 235 },
209 components: { 236 components: {
210 Slider, 237 Slider,
211 Banner, 238 Banner,
212 TwoBanner, 239 TwoBanner,
213 Hot, 240 Hot,
214 - ScrollNav 241 + ScrollNav,
  242 + Style,
  243 + Scroll,
  244 + ProductList
215 } 245 }
216 }; 246 };
217 </script> 247 </script>
218 248
219 <style lang="scss" scoped> 249 <style lang="scss" scoped>
  250 +.scroll-list-wrap {
  251 + height: 100%;
  252 + width: 100%;
  253 +}
220 .body { 254 .body {
221 height: 100%; 255 height: 100%;
222 overflow-y: auto; 256 overflow-y: auto;
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <ul> 3 <ul>
4 <li v-for="(item, index) in list" :key="index" @click="goProduct(item)"> 4 <li v-for="(item, index) in list" :key="index" @click="goProduct(item)">
5 <div class="hot-image"> 5 <div class="hot-image">
6 - <img :src="item.image_url" alt="" /> 6 + <ImgSize class="item-imge" :src="item.image_url" :width="100" :height="80"/>
7 </div> 7 </div>
8 <div class="hot-name">{{item.series_name}}</div> 8 <div class="hot-name">{{item.series_name}}</div>
9 </li> 9 </li>
@@ -16,6 +16,8 @@ @@ -16,6 +16,8 @@
16 </template> 16 </template>
17 17
18 <script> 18 <script>
  19 +import ImgSize from '../../../../components/img-size';
  20 +
19 export default { 21 export default {
20 name: 'hot', 22 name: 'hot',
21 props: { 23 props: {
@@ -25,6 +27,9 @@ export default { @@ -25,6 +27,9 @@ export default {
25 }, 27 },
26 28
27 }, 29 },
  30 + components: {
  31 + ImgSize,
  32 + },
28 methods: { 33 methods: {
29 goProduct() { 34 goProduct() {
30 alert('跳转列表!'); 35 alert('跳转列表!');
@@ -45,6 +50,7 @@ export default { @@ -45,6 +50,7 @@ export default {
45 50
46 <style lang="scss" scoped> 51 <style lang="scss" scoped>
47 .hot { 52 .hot {
  53 + margin: 40px 0;
48 ul { 54 ul {
49 overflow: hidden; 55 overflow: hidden;
50 li { 56 li {
1 <template> 1 <template>
2 <div class="ScrollNav"> 2 <div class="ScrollNav">
3 - <ScrollNav>  
4 - <ScrollNav-panel  
5 - v-for="item in [1,2,3,4,5]"  
6 - :key="item"  
7 - :label="item">  
8 - <div v-for="item in [1,2,3,4,5]" :key="item" :label="item">22222</div>  
9 - </ScrollNav-panel>  
10 - </ScrollNav> 3 + <ScrollNavBar :current="current" :labels="labels">
  4 + <span slot-scope="props" @click="changeHandler(props.index)">
  5 + {{props.txt}}
  6 + </span>
  7 + </ScrollNavBar>
11 </div> 8 </div>
12 </template> 9 </template>
13 10
14 <script> 11 <script>
15 import Vue from 'vue' 12 import Vue from 'vue'
16 -import { Style, ScrollNav } from 'cube-ui'; 13 +import { Style, ScrollNavBar } from 'cube-ui';
  14 +import { createNamespacedHelpers } from 'vuex';
  15 +const { mapState, mapActions } = createNamespacedHelpers('home/channel');
17 16
18 export default { 17 export default {
19 name: 'slide', 18 name: 'slide',
@@ -23,15 +22,36 @@ export default { @@ -23,15 +22,36 @@ export default {
23 // default: true 22 // default: true
24 // }, 23 // },
25 }, 24 },
  25 + data() {
  26 + return {
  27 + index: 0,
  28 + current: '快车',
  29 + labels: [
  30 + '快车',
  31 + '小巴',
  32 + '专车',
  33 + '顺风车',
  34 + '代驾',
  35 + '公交',
  36 + '自驾租车',
  37 + '豪华车',
  38 + '二手车',
  39 + '出租车'
  40 + ]
  41 + }
  42 + },
26 components: { 43 components: {
27 Style, 44 Style,
28 - ScrollNav 45 + ScrollNavBar
29 }, 46 },
30 computed: { 47 computed: {
31 - // ...mapState(['resource']) 48 + ...mapState(['channelList','scrollnavidList']),
32 }, 49 },
33 methods: { 50 methods: {
34 - 51 + changeHandler(index) {
  52 + console.log(this.channelList.scrollnavList[index]); // value
  53 + // console.log(this.channelList.scrollnavidList[index]); // id
  54 + }
35 } 55 }
36 }; 56 };
37 </script> 57 </script>
  1 +import Vue from 'vue';
1 import * as Types from './types'; 2 import * as Types from './types';
2 -import { get, set } from 'lodash';  
3 -import { getImgUrl } from '../../common/utils';  
4 3
5 export default function() { 4 export default function() {
6 return { 5 return {
7 namespaced: true, 6 namespaced: true,
8 state: { 7 state: {
9 - channelData: [], 8 + // channelData: [],
  9 + channelList: {
  10 + list: [], // 资源列表
  11 + productlist: [], // 资源列表
  12 + page: 0, // 当前页
  13 + page_size: 10, // 每页数量
  14 + page_total: 0, // 总共多少页
  15 + total: 0, // 总共多少条
  16 + scrollnavList: [], // 导航菜单
  17 + // scrollnavidList: [], // 导航菜单id
  18 + },
10 }, 19 },
11 mutations: { 20 mutations: {
12 [Types.FETCH_CHANNEL](state, { list }) { 21 [Types.FETCH_CHANNEL](state, { list }) {
13 - state.channelData = list; 22 + state.channelList.list = list;
  23 + state.channelList.list.map(res => {
  24 + if (res.template_name === 'hotSeries') {
  25 + for (let i = 0; i < res.data.length; i++) {
  26 + state.channelList.scrollnavList.push(res.data[i].series_name);
  27 + // state.channelList.scrollnavidList.push(res.data[i].series_id);
  28 + }
  29 + }
  30 + });
  31 + },
  32 + [Types.FETCH_PRODUCT](state, { productlist }) {
  33 + // state.channelList.productlist = productlist;
  34 + Vue.set(state.channelList, 'productlist', state.channelList.productlist.concat(productlist.product_list));
  35 + Vue.set(state.channelList, 'page', productlist.page);
14 }, 36 },
15 }, 37 },
16 actions: { 38 actions: {
  39 + async fetchProductList({ commit, state }) {
  40 + let page = state.channelList.page;
  41 + let size = state.channelList.page_size;
  42 + const result = await this.$api.get('/api/ufo/list/productList', {
  43 + page: page + 1,
  44 + size,
  45 + });
  46 +
  47 + if (result.code === 200) {
  48 + commit(Types.FETCH_PRODUCT, {productlist: result.data});
  49 + }
  50 + },
17 async fetchChannelList({ commit }) { 51 async fetchChannelList({ commit }) {
18 const result = await this.$api.get('/api/ufo/channel/channelList', { 52 const result = await this.$api.get('/api/ufo/channel/channelList', {
19 content_code: '9cb6138be8e60c96f48107da481816c3', 53 content_code: '9cb6138be8e60c96f48107da481816c3',
20 uid: '64668089', 54 uid: '64668089',
21 }); 55 });
22 if (result.code === 200) { 56 if (result.code === 200) {
23 - result.data.map(res => {  
24 - // 焦点图  
25 - if(res.template_name === 'focus') {  
26 - for (let i = 0; i < res.data.length; i++) {  
27 - let url = "https:" + getImgUrl(get(res.data[i], "src") || '', 750, 200);  
28 - set(res.data[i], "src", url);  
29 - }  
30 - }  
31 - // 热门系列  
32 - if(res.template_name === 'hotSeries') {  
33 - for (let i = 0; i < res.data.length; i++) {  
34 - let url = "https:" + getImgUrl(get(res.data[i], "image_url") || '', 100, 80);  
35 - set(res.data[i], "image_url", url);  
36 - }  
37 - }  
38 - })  
39 - console.log(result.data);  
40 commit(Types.FETCH_CHANNEL, { list: result.data }); 57 commit(Types.FETCH_CHANNEL, { list: result.data });
41 } 58 }
42 } 59 }
@@ -3,3 +3,4 @@ export const FETCH_NOTICE_LIST_FAILD = 'FETCH_NOTICE_LIST_FAILD'; @@ -3,3 +3,4 @@ export const FETCH_NOTICE_LIST_FAILD = 'FETCH_NOTICE_LIST_FAILD';
3 export const FETCH_NOTICE_LIST_SUCCESS = 'FETCH_NOTICE_LIST_SUCCESS'; 3 export const FETCH_NOTICE_LIST_SUCCESS = 'FETCH_NOTICE_LIST_SUCCESS';
4 4
5 export const FETCH_CHANNEL = 'FETCH_CHANNEL'; 5 export const FETCH_CHANNEL = 'FETCH_CHANNEL';
  6 +export const FETCH_PRODUCT = 'FETCH_PRODUCT';