Authored by yyq

channel page ssr

@@ -64,9 +64,8 @@ export default { @@ -64,9 +64,8 @@ export default {
64 navHeight: 0, 64 navHeight: 0,
65 isShow: false, 65 isShow: false,
66 total: 0, 66 total: 0,
67 - marginTop: 0,  
68 active: 0, 67 active: 0,
69 - params: { 68 + listBaseParams: {
70 isHome: true, 69 isHome: true,
71 } 70 }
72 }; 71 };
@@ -78,40 +77,45 @@ export default { @@ -78,40 +77,45 @@ export default {
78 return get(find(this.channelList.list, ['template_name', 'guessLike']), 'data') || []; 77 return get(find(this.channelList.list, ['template_name', 'guessLike']), 'data') || [];
79 } 78 }
80 }, 79 },
  80 + async serverPrefetch() {
  81 + return this.fetchChannelList();
  82 + },
81 mounted() { 83 mounted() {
82 - this.fetchChannelList().then((res) => {  
83 - this.$nextTick(() => {  
84 - this.navTop = this.$refs.topSource.offsetHeight;  
85 - this.navHeight = get(this.$refs, 'scrollNav.offsetHeight') || 0;  
86 - this.total = this.$refs.scroll.$el.offsetHeight - this.navHeight;  
87 - });  
88 -  
89 - res.forEach((item) => {  
90 - if (item.template_name == "guessLike") {  
91 - let url = item.data[0].url.split("?");  
92 - this.params = queryString.parse(url[1]);  
93 - }  
94 - })  
95 - this.fetchProductList(this.params); 84 + this.$nextTick(() => {
  85 + this.navTop = this.$refs.topSource.offsetHeight;
  86 + this.navHeight = get(this.$refs, 'scrollNav.offsetHeight') || 0;
  87 + this.total = this.$refs.scroll.$el.offsetHeight - this.navHeight;
  88 + this.refreshProductList(this.active);
96 }); 89 });
97 }, 90 },
98 methods: { 91 methods: {
  92 + ...mapActions(['fetchChannelList']),
  93 + ...mapActionsList(['fetchProductList']),
99 getIndex(index) { 94 getIndex(index) {
100 this.active = Number(index); 95 this.active = Number(index);
101 }, 96 },
102 scrollHandler({ y }) { 97 scrollHandler({ y }) {
103 - let scrollY = Math.abs(parseInt(y));  
104 - if (scrollY >= this.navTop) {  
105 - this.isShow = true;  
106 - } else {  
107 - this.isShow = false; 98 + if (this.navTop) {
  99 + let scrollY = -y;
  100 +
  101 + if (scrollY >= this.navTop) {
  102 + this.isShow = true;
  103 + } else {
  104 + this.isShow = false;
  105 + }
108 } 106 }
109 }, 107 },
110 - ...mapActions(['fetchChannelList']),  
111 - ...mapActionsList(['fetchProductList']), 108 + refreshProductList(index) {
  109 + let str = get(get(this.navList, `[${index}].url`, '').split('?'), '[1]', '');
  110 +
  111 + this.params = Object.assign({}, queryString.parse(str), this.listBaseParams);
  112 + this.fetchProductList(this.params);
  113 + },
112 async onPullingUp() { 114 async onPullingUp() {
113 - this.params.isReset = false  
114 - await this.fetchProductList(this.params); 115 + if (this.params) {
  116 + this.params.isReset = false
  117 + await this.fetchProductList(this.params);
  118 + }
115 } 119 }
116 }, 120 },
117 components: { 121 components: {
@@ -68,6 +68,7 @@ export default { @@ -68,6 +68,7 @@ export default {
68 } 68 }
69 69
70 .img-link { 70 .img-link {
  71 + max-height: 100%;
71 display: block; 72 display: block;
72 border-radius: 8px; 73 border-radius: 8px;
73 overflow: hidden; 74 overflow: hidden;