fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by Tao
Commit b81e44544967cee6be50ce1cfe91738229eceae2 1 parent 71c2b92f

add channel

Inline Side-by-side
Showing 6 changed files with 123 additions and 231 deletions
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">  
8 - <div class="body" ref="body">  
9 - <div v-for="(item, index) in channelList.list" :key="index">  
10 - <template v-if="item.template_name == 'focus'">  
11 - <Slider :list="list"></Slider>  
12 - </template>  
13 -  
14 - <template v-if="item.template_name == 'hotSeries'">  
15 - <Hot :list="item.data"></Hot>  
16 - </template>  
17 -  
18 - <template v-if="item.template_name == 'single_image'">  
19 - <Banner :linkUrl="linkUrl" :imgUrl="imgUrl"></Banner>  
20 - </template>  
21 -  
22 - <template v-if="item.template_name == 'twoPicture'">  
23 - <TwoBanner :list="item.data"></TwoBanner>  
24 - </template>  
25 - </div>  
26 - <ScrollNav></ScrollNav>  
27 - <ProductList :list="channelList.productlist"></ProductList> 2 + <div class="scroll-app">
  3 + <div class="scroll-flex">
  4 + <div class="scroll-list-wrap">
  5 + <Scroll
  6 + ref="scroll"
  7 + :options="options"
  8 + @pulling-up="onPullingUp">
  9 + <div class="body" ref="body">
  10 + <div v-for="(item, index) in channelList.list" :key="index">
  11 + <Slider :list="item.data" v-if="item.template_name == 'focus'" />
  12 + <Hot :list="item.data" v-if="item.template_name == 'hotSeries'" />
  13 + <Banner :list="item.data" v-if="item.template_name == 'single_image'" />
  14 + <TwoBanner :list="item.data" v-if="item.template_name == 'twoPicture'" />
  15 + </div>
  16 + <ScrollNav></ScrollNav>
  17 + <ProductList :list="channelList.productlist"></ProductList>
  18 + </div>
  19 + </Scroll>
28 </div> 20 </div>
29 - </Scroll> 21 + </div>
30 </div> 22 </div>
31 - </LayoutApp>  
32 </template> 23 </template>
33 24
34 <script> 25 <script>
@@ -52,178 +43,18 @@ export default { @@ -52,178 +43,18 @@ export default {
52 }, 43 },
53 pullUpLoad: true 44 pullUpLoad: true
54 }, 45 },
55 - items: [1,2,3,4,5,6,7,8,9],  
56 - list: [  
57 - {  
58 - url: 'http://www.didichuxing.com/',  
59 - image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'  
60 - },  
61 - {  
62 - url: 'http://www.didichuxing.com/',  
63 - image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'  
64 - }  
65 - ],  
66 - linkUrl: 'https://www.baidu.com',  
67 - imgUrl: 'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/cb8065380cd79123d7648113a7345982b3b780d4.jpg',  
68 - list2: [  
69 - {  
70 - "data": [  
71 - {  
72 - "bgColor": "",  
73 - "src": "http://img10.static.yhbimg.com/yhb-img01/2017/07/26/16/01d47fc95f71a19469f38a19c7c843fe43.jpg?imageView2/{mode}/w/{width}/h/{height}",  
74 - "title": "",  
75 - "url": "https://m.yohobuy.com/?title=标题&openby:yohobuy={\"action\":\"go.collagehome\",\"params\":{\"title\":\"标题\"}}"  
76 - },  
77 - {  
78 - "bgColor": "",  
79 - "src": "http://img10.static.yhbimg.com/yhb-img01/2017/07/26/16/01e90704cc16d5a32a1680ae1d415426c6.jpg?imageView2/{mode}/w/{width}/h/{height}",  
80 - "title": "",  
81 - "url": "https://m.yohobuy.com/groupPurchase?activityId=56&type=2&title=模式2测试&openby:yohobuy={\"action\":\"go.activitytemplate\",\"params\":{\"activityId\":\"56\",\"type\":\"2\",\"title\":\"模式2测试\"}}"  
82 - },  
83 - {  
84 - "bgColor": "",  
85 - "src": "http://img10.static.yhbimg.com/yhb-img01/2017/07/27/09/01cc06fea3c1d22375abcd90836759f85f.png?imageView2/{mode}/w/{width}/h/{height}",  
86 - "title": "",  
87 - "url": "http://m.yohobuy.com/groupPurchase?activityId=58&type=2&title=团购状态验证&openby:yohobuy={\"action\":\"go.activitytemplate\",\"params\":{\"activityId\":\"58\",\"type\":\"2\",\"title\":\"团购状态验证\"}}"  
88 - },  
89 - {  
90 - "bgColor": "",  
91 - "src": "http://img11.static.yhbimg.com/yhb-img01/2017/09/20/09/01cf74dac1b0a354b82dc894dc66634352.jpg?imageView2/{mode}/w/{width}/h/{height}",  
92 - "title": "",  
93 - "url": "https://list.m.yohobuy.com/?specialsale_id=2&gender=1,3&actiontype=2&cover_url=http://img10.static.yhbimg.com/couponImg/2018/08/27/10/01021a4ec4029934bcffca8ee912f61654.jpg&openby:yohobuy={\"action\":\"go.list\",\"params\":{\"actiontype\":\"2\",\"cover_url\":\"http://img10.static.yhbimg.com/couponImg/2018/08/27/10/01021a4ec4029934bcffca8ee912f61654.jpg\",\"gender\":\"1,3\",\"specialsale_id\":\"2\"}}"  
94 - },  
95 - {  
96 - "bgColor": "",  
97 - "src": "http://img11.static.yhbimg.com/yhb-img01/2017/10/13/18/018044cceeb5a2afe6223a1412ccda89b9.jpg?imageView2/{mode}/w/{width}/h/{height}",  
98 - "title": "",  
99 - "url": "https://search.m.yohobuy.com/?productPool=680&title=618抢先购-6.1折封顶&openby:yohobuy={\"action\":\"go.poollist\",\"params\":{\"title\":\"618抢先购-6.1折封顶\",\"productPool\":\"680\"}}"  
100 - },  
101 - {  
102 - "bgColor": "",  
103 - "src": "http://img11.static.yhbimg.com/yhb-img01/2018/03/06/11/019dea67754e6c4c08711b118c3d050891.JPG?imageView2/{mode}/w/{width}/h/{height}",  
104 - "title": "秒杀",  
105 - "url": "http://m.yohobuy.com/product/seckill?type=2&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"type\":\"2\"},\"type\":\"2\",\"url\":\"http://m.yohobuy.com/product/seckill\"}}"  
106 - },  
107 - {  
108 - "bgColor": "",  
109 - "src": "http://img11.static.yhbimg.com/yhb-img01/2018/03/06/11/016a0402a7ff364326046b215f4d088cb8.JPG?imageView2/{mode}/w/{width}/h/{height}",  
110 - "title": "",  
111 - "url": "https://m.yohobuy.com/home/family?openby:yohobuy={\"action\":\"go.family\"}"  
112 - }  
113 - ],  
114 - "focus_type": "2",  
115 - "original_template_id": 1,  
116 - "template_id": "1",  
117 - "template_intro": "焦点图",  
118 - "template_name": "focus"  
119 - },  
120 - {  
121 - "template_name": "hotSeries",  
122 - "data": [  
123 - {  
124 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
125 - "series_name": "哈哈",  
126 - "series_id": "1"  
127 - },  
128 - {  
129 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
130 - "series_name": "耐克",  
131 - "series_id": "2"  
132 - },  
133 - {  
134 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
135 - "series_name": "哈哈",  
136 - "series_id": "1"  
137 - },  
138 - {  
139 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
140 - "series_name": "耐克",  
141 - "series_id": "2"  
142 - },  
143 - {  
144 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
145 - "series_name": "哈哈",  
146 - "series_id": "1"  
147 - },  
148 - {  
149 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
150 - "series_name": "耐克",  
151 - "series_id": "2"  
152 - },  
153 - {  
154 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
155 - "series_name": "耐克",  
156 - "series_id": "2"  
157 - },  
158 - ],  
159 - "template_intro": "热门系列",  
160 - "template_id": "1"  
161 - },  
162 - {  
163 - "template_name": "single_image",  
164 - "data": [  
165 - {  
166 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
167 - "series_name": "",  
168 - "series_id": "1"  
169 - },  
170 - {  
171 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
172 - "series_name": "",  
173 - "series_id": "2"  
174 - }  
175 - ],  
176 - "template_intro": "热门系列",  
177 - "template_id": "1"  
178 - },  
179 - {  
180 - "template_name": "twoPicture",  
181 - "data": [  
182 - {  
183 - "src": "http://img11.static.yhbimg.com/yhb-img01/2019/09/24/14/01bdf0e379025b33c9690861b843dbd966.jpg",  
184 - "id": "",  
185 - "url": "https://m.yohobuy.com/?openby:yohobuy={'action':'go.bargainlist'}"  
186 - },  
187 - {  
188 - "src": "http://img11.static.yhbimg.com/yhb-img01/2019/09/24/14/01bdf0e379025b33c9690861b843dbd966.jpg",  
189 - "id": "",  
190 - "url": "https://m.yohobuy.com/?openby:yohobuy={'action':'go.bargainlist'}"  
191 - },  
192 - ],  
193 - "template_intro": "热门系列",  
194 - "template_id": "1"  
195 - },  
196 - {  
197 - "template_name": "single_image",  
198 - "data": [  
199 - {  
200 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
201 - "series_name": "",  
202 - "series_id": "1"  
203 - },  
204 - {  
205 - "image_url": "http://img11.static.yhbimg.com/yhb-img01/2017/07/26/16/0186f834d5a21f26717254407c28fc3c53.jpg",  
206 - "series_name": "",  
207 - "series_id": "2"  
208 - }  
209 - ],  
210 - "template_intro": "热门系列",  
211 - "template_id": "1"  
212 - },  
213 -  
214 - ],  
215 } 46 }
216 }, 47 },
217 computed: { 48 computed: {
218 ...mapState(['channelList']), 49 ...mapState(['channelList']),
219 }, 50 },
220 - created() {  
221 -  
222 - },  
223 mounted() { 51 mounted() {
224 this.fetchChannelList(); 52 this.fetchChannelList();
225 this.fetchProductList(); 53 this.fetchProductList();
226 }, 54 },
  55 + created() {
  56 +
  57 + },
227 methods: { 58 methods: {
228 ...mapActions(['fetchChannelList','fetchProductList']), 59 ...mapActions(['fetchChannelList','fetchProductList']),
229 60
@@ -231,7 +62,6 @@ export default { @@ -231,7 +62,6 @@ export default {
231 await this.fetchProductList(); 62 await this.fetchProductList();
232 setTimeout(() => { this.$refs.scroll.forceUpdate() }, 1000) 63 setTimeout(() => { this.$refs.scroll.forceUpdate() }, 1000)
233 } 64 }
234 -  
235 }, 65 },
236 components: { 66 components: {
237 Slider, 67 Slider,
@@ -247,6 +77,29 @@ export default { @@ -247,6 +77,29 @@ export default {
247 </script> 77 </script>
248 78
249 <style lang="scss" scoped> 79 <style lang="scss" scoped>
  80 +.scroll-app {
  81 + position: absolute;
  82 + top: 0;
  83 + left: 0;
  84 + right: 0;
  85 + bottom: 0;
  86 + overflow: hidden;
  87 + font-size: 0.6rem;
  88 + display: -webkit-box;
  89 + display: -webkit-flex;
  90 + display: flex;
  91 + -webkit-box-orient: vertical;
  92 + -webkit-box-direction: normal;
  93 + -webkit-flex-direction: column;
  94 + flex-direction: column;
  95 +}
  96 +.scroll-flex {
  97 + -webkit-box-flex: 1;
  98 + -webkit-flex: 1;
  99 + flex: 1;
  100 + overflow: hidden;
  101 + position: relative;
  102 +}
250 .scroll-list-wrap { 103 .scroll-list-wrap {
251 height: 100%; 104 height: 100%;
252 width: 100%; 105 width: 100%;
1 <template> 1 <template>
2 - <div class="banner">  
3 - <a :href="linkUrl">  
4 - <img class="banner-image" :src="imgUrl" alt="" />  
5 - </a> 2 + <div class="banner" v-if="list.length > 0">
  3 + <ul>
  4 + <li v-for="(item, index) in list" :key="index" @click="jump(item)">
  5 + <ImageFormat :lazy="false" :src="item.src" :alt="item.alt" :width="item.width" :height="item.height" />
  6 + </li>
  7 + </ul>
6 </div> 8 </div>
7 </template> 9 </template>
8 10
@@ -10,16 +12,18 @@ @@ -10,16 +12,18 @@
10 export default { 12 export default {
11 name: 'banner', 13 name: 'banner',
12 props: { 14 props: {
13 - linkUrl: {  
14 - type: String,  
15 - default: true,  
16 - },  
17 - imgUrl: {  
18 - type: String, 15 + list: {
  16 + type: Array,
19 default: true, 17 default: true,
20 }, 18 },
21 }, 19 },
22 methods: { 20 methods: {
  21 + jump(item) {
  22 + const { src, url } = item;
  23 + console.log(src);
  24 + console.log(url);
  25 + }
  26 +
23 // onClick() { 27 // onClick() {
24 // this.$yoho.goNewPage({ 28 // this.$yoho.goNewPage({
25 // url: 'https://activity.yoho.cn/feature/5729.html?title=活动规则&openby:yohobuy={"action":"go.h5","params":{"title":"活动规则","url":"https://activity.yoho.cn/feature/5729.html"}}' 29 // url: 'https://activity.yoho.cn/feature/5729.html?title=活动规则&openby:yohobuy={"action":"go.h5","params":{"title":"活动规则","url":"https://activity.yoho.cn/feature/5729.html"}}'
@@ -32,12 +36,15 @@ export default { @@ -32,12 +36,15 @@ export default {
32 <style lang="scss" scoped> 36 <style lang="scss" scoped>
33 .banner { 37 .banner {
34 width: 100%; 38 width: 100%;
35 - margin: 20px 0; 39 + margin-bottom: 20px;
36 overflow: hidden; 40 overflow: hidden;
37 - .banner-image {  
38 - width: 100%;  
39 - height: 200px;  
40 - display: block; 41 + ul {
  42 + li {
  43 + img {
  44 + max-width: 100%;
  45 + display: block;
  46 + }
  47 + }
41 } 48 }
42 } 49 }
43 </style> 50 </style>
1 <template> 1 <template>
2 <div class="ScrollNav"> 2 <div class="ScrollNav">
3 - <ScrollNavBar :current="current" :labels="labels"> 3 + <ScrollNavBar :current="current" :labels="labels" @change="changeHandler">
4 <span slot-scope="props" @click="changeHandler(props.index)"> 4 <span slot-scope="props" @click="changeHandler(props.index)">
5 {{props.txt}} 5 {{props.txt}}
6 </span> 6 </span>
1 <template> 1 <template>
2 - <div class="slider" v-if="list.length > 0">  
3 - <Slide :data="list"></Slide>  
4 - </div> 2 + <cube-slide ref="slide" :data="list">
  3 + <cube-slide-item v-for="(item, index) in list" :key="index" @click.native="clickHandler(item, index)">
  4 + <a :href="item.url">
  5 + <ImageFormat :lazy="false" class="item-imge" :src="item.src" :width="750" :height="200"></ImageFormat>
  6 + </a>
  7 + </cube-slide-item>
  8 + </cube-slide>
5 </template> 9 </template>
6 10
7 <script> 11 <script>
8 import Vue from 'vue' 12 import Vue from 'vue'
9 import { Style, Slide } from 'cube-ui'; 13 import { Style, Slide } from 'cube-ui';
  14 +import ImgSize from '../../../../components/img-size';
10 // import { createNamespacedHelpers } from 'vuex'; 15 // import { createNamespacedHelpers } from 'vuex';
11 // const {mapState} = createNamespacedHelpers('channel'); 16 // const {mapState} = createNamespacedHelpers('channel');
12 17
@@ -18,9 +23,30 @@ export default { @@ -18,9 +23,30 @@ export default {
18 default: true 23 default: true
19 }, 24 },
20 }, 25 },
  26 + data() {
  27 + return {
  28 + items: [
  29 + {
  30 + url: 'http://www.didichuxing.com/',
  31 + image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
  32 + },
  33 + {
  34 + url: 'http://www.didichuxing.com/',
  35 + image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
  36 + },
  37 + {
  38 + url: 'http://www.didichuxing.com/',
  39 + image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
  40 + }
  41 + ]
  42 + }
  43 + },
21 components: { 44 components: {
22 Style, 45 Style,
23 - Slide 46 + Slide,
  47 + cubeSlide: Slide,
  48 + cubeSlideItem: Slide.Item,
  49 + ImgSize,
24 }, 50 },
25 computed: { 51 computed: {
26 // ...mapState(['resource']) 52 // ...mapState(['resource'])
@@ -32,7 +58,8 @@ export default { @@ -32,7 +58,8 @@ export default {
32 </script> 58 </script>
33 59
34 <style lang="scss" scoped> 60 <style lang="scss" scoped>
35 -.slider {  
36 - 61 +.cube-slide {
  62 + width: 100%;
  63 + margin-bottom: 20px;
37 } 64 }
38 </style> 65 </style>
1 <template> 1 <template>
2 - <div class="twoBanner" v-if="list.length > 0">  
3 - <div class="list" v-for="(item, index) in list" :key="index">  
4 - <a :href="item.url">  
5 - <img class="banner-image" :src="item.src" :alt="item.alt" />  
6 - </a>  
7 - </div> 2 + <div class="banner" v-if="list.length > 0">
  3 + <ul>
  4 + <li v-for="(item, index) in list" :key="index" @click="jump(item)">
  5 + <ImageFormat :lazy="false" :src="item.src" :alt="item.alt" :width="200" :height="200" />
  6 + </li>
  7 + </ul>
8 </div> 8 </div>
9 </template> 9 </template>
10 10
@@ -19,6 +19,11 @@ export default { @@ -19,6 +19,11 @@ export default {
19 19
20 }, 20 },
21 methods: { 21 methods: {
  22 + jump(item) {
  23 + const { src, url } = item;
  24 + console.log(src);
  25 + console.log(url);
  26 + }
22 // onClick() { 27 // onClick() {
23 // this.$yoho.goNewPage({ 28 // this.$yoho.goNewPage({
24 // url: 'https://activity.yoho.cn/feature/5729.html?title=活动规则&openby:yohobuy={"action":"go.h5","params":{"title":"活动规则","url":"https://activity.yoho.cn/feature/5729.html"}}' 29 // url: 'https://activity.yoho.cn/feature/5729.html?title=活动规则&openby:yohobuy={"action":"go.h5","params":{"title":"活动规则","url":"https://activity.yoho.cn/feature/5729.html"}}'
@@ -29,19 +34,18 @@ export default { @@ -29,19 +34,18 @@ export default {
29 </script> 34 </script>
30 35
31 <style lang="scss" scoped> 36 <style lang="scss" scoped>
32 -.twoBanner { 37 +.banner {
33 width: 100%; 38 width: 100%;
34 margin: 20px 0; 39 margin: 20px 0;
35 overflow: hidden; 40 overflow: hidden;
36 - display: flex;  
37 - // align-items: center;  
38 - justify-content: space-between;  
39 - .list {  
40 - width: 48%;  
41 - img {  
42 - width: 100%;  
43 - height: 200px;  
44 - display: block; 41 + ul {
  42 + display: flex;
  43 + li {
  44 + width: 50%;
  45 + img {
  46 + max-width: 100%;
  47 + display: block;
  48 + }
45 } 49 }
46 } 50 }
47 } 51 }
@@ -51,7 +51,8 @@ export default function() { @@ -51,7 +51,8 @@ export default function() {
51 async fetchChannelList({ commit }) { 51 async fetchChannelList({ commit }) {
52 const result = await this.$api.get('/api/ufo/channel/channelList', { 52 const result = await this.$api.get('/api/ufo/channel/channelList', {
53 content_code: '9cb6138be8e60c96f48107da481816c3', 53 content_code: '9cb6138be8e60c96f48107da481816c3',
54 - uid: '64668089', 54 + // uid: '64668089',
  55 + uid: '500031170',
55 }); 56 });
56 if (result.code === 200) { 57 if (result.code === 200) {
57 commit(Types.FETCH_CHANNEL, { list: result.data }); 58 commit(Types.FETCH_CHANNEL, { list: result.data });