Showing
9 changed files
with
139 additions
and
31 deletions
apps/components/products/product-list.vue
0 → 100644
1 | +<template> | ||
2 | + <div class="product-list-wrap"> | ||
3 | + <div class="product-list"> | ||
4 | + <div class="product-item" v-for="(item, index) in list" :key="index"> | ||
5 | + <div class="thumb"> | ||
6 | + <ImageFormat :src="item.default_images" :width="235" :height="314"></ImageFormat> | ||
7 | + </div> | ||
8 | + <div class="name">{{item.product_name}}</div> | ||
9 | + <div class="price"> | ||
10 | + <span class="sale-price">¥{{item.sales_price}}</span> | ||
11 | + <span class="market-price">¥{{item.market_price}}</span> | ||
12 | + </div> | ||
13 | + </div> | ||
14 | + </div> | ||
15 | + </div> | ||
16 | +</template> | ||
17 | + | ||
18 | +<script> | ||
19 | +export default { | ||
20 | + name: 'ProductList', | ||
21 | + props: { | ||
22 | + list: Array | ||
23 | + } | ||
24 | +}; | ||
25 | +</script> | ||
26 | + | ||
27 | +<style type="css"> | ||
28 | + .product-list-wrap { | ||
29 | + display: flex; | ||
30 | + justify-content: center; | ||
31 | + } | ||
32 | + | ||
33 | + .product-list { | ||
34 | + max-width: 714px; | ||
35 | + display: flex; | ||
36 | + flex-wrap: wrap; | ||
37 | + } | ||
38 | + | ||
39 | + .product-item { | ||
40 | + width: 50%; | ||
41 | + padding: 18px 18px 48px; | ||
42 | + | ||
43 | + .thumb { | ||
44 | + height: 428px; | ||
45 | + | ||
46 | + img { | ||
47 | + width: 100%; | ||
48 | + height: 100%; | ||
49 | + display: block; | ||
50 | + } | ||
51 | + } | ||
52 | + | ||
53 | + .name { | ||
54 | + height: 68px; | ||
55 | + margin-top: 24px; | ||
56 | + font-size: 24px; | ||
57 | + line-height: 1.4; | ||
58 | + overflow: hidden; | ||
59 | + } | ||
60 | + | ||
61 | + .sale-price { | ||
62 | + color: #d0021b; | ||
63 | + font-size: 26px; | ||
64 | + font-weight: 500; | ||
65 | + } | ||
66 | + | ||
67 | + .market-price { | ||
68 | + color: #b0b0b0; | ||
69 | + font-size: 25px; | ||
70 | + margin-right: 4px; | ||
71 | + text-decoration: line-through; | ||
72 | + } | ||
73 | + } | ||
74 | +</style> |
1 | <template> | 1 | <template> |
2 | <div class="footer"> | 2 | <div class="footer"> |
3 | - <TextEllipsis :text="text" class="desc" :isLimitHeight="isLimitHeight" :height="68"> | 3 | + <TextEllipsis :text="text" class="desc" :isLimitHeight="isLimitHeight" :height="75"> |
4 | <template slot="more"><span>...</span><span class="link" @click="onClick">展开</span></template> | 4 | <template slot="more"><span>...</span><span class="link" @click="onClick">展开</span></template> |
5 | <span slot="after" v-if="!isLimitHeight" @click="isLimitHeight=true"></span> | 5 | <span slot="after" v-if="!isLimitHeight" @click="isLimitHeight=true"></span> |
6 | </TextEllipsis> | 6 | </TextEllipsis> |
@@ -9,19 +9,22 @@ | @@ -9,19 +9,22 @@ | ||
9 | <div class="products"> | 9 | <div class="products"> |
10 | <Products></Products> | 10 | <Products></Products> |
11 | </div> | 11 | </div> |
12 | - <div class="share"></div> | 12 | + <div class="share"> |
13 | + <WidgetIconBtn type="msg"></WidgetIconBtn> | ||
14 | + <WidgetIconBtn type="zan"></WidgetIconBtn> | ||
15 | + </div> | ||
13 | </div> | 16 | </div> |
14 | </div> | 17 | </div> |
15 | </template> | 18 | </template> |
16 | 19 | ||
17 | <script> | 20 | <script> |
18 | 21 | ||
19 | -import Products from './products' | 22 | +import Products from './products'; |
20 | 23 | ||
21 | export default { | 24 | export default { |
22 | name: 'DescFooter', | 25 | name: 'DescFooter', |
23 | components: { | 26 | components: { |
24 | - Products | 27 | + Products, |
25 | }, | 28 | }, |
26 | data() { | 29 | data() { |
27 | return { | 30 | return { |
@@ -31,6 +34,7 @@ export default { | @@ -31,6 +34,7 @@ export default { | ||
31 | }, | 34 | }, |
32 | methods: { | 35 | methods: { |
33 | onClick() { | 36 | onClick() { |
37 | + console.log('展开'); | ||
34 | this.isLimitHeight = false; | 38 | this.isLimitHeight = false; |
35 | } | 39 | } |
36 | }, | 40 | }, |
@@ -62,7 +66,6 @@ export default { | @@ -62,7 +66,6 @@ export default { | ||
62 | display: inline-block; | 66 | display: inline-block; |
63 | width: 290px; | 67 | width: 290px; |
64 | height: 100px; | 68 | height: 100px; |
65 | - background-color: white; | ||
66 | margin-top: 36px; | 69 | margin-top: 36px; |
67 | } | 70 | } |
68 | 71 |
@@ -34,6 +34,7 @@ import {Slide} from 'cube-ui'; | @@ -34,6 +34,7 @@ import {Slide} from 'cube-ui'; | ||
34 | import AvatarHeader from './avatar-header'; | 34 | import AvatarHeader from './avatar-header'; |
35 | import DescFooter from './desc-footer'; | 35 | import DescFooter from './desc-footer'; |
36 | 36 | ||
37 | +// const img = require('statics/image/showorder/test.png') | ||
37 | 38 | ||
38 | export default { | 39 | export default { |
39 | name: 'ShowOrderItem', | 40 | name: 'ShowOrderItem', |
@@ -41,7 +42,7 @@ export default { | @@ -41,7 +42,7 @@ export default { | ||
41 | AvatarHeader, | 42 | AvatarHeader, |
42 | DescFooter, | 43 | DescFooter, |
43 | Slide, | 44 | Slide, |
44 | - SlideItem: Slide.Item, | 45 | + SlideItem: Slide.Item |
45 | }, | 46 | }, |
46 | data() { | 47 | data() { |
47 | return { | 48 | return { |
@@ -49,9 +50,7 @@ export default { | @@ -49,9 +50,7 @@ export default { | ||
49 | 'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg', | 50 | 'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg', |
50 | 'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0ncnnej21hc0zetxo.jpg', | 51 | 'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0ncnnej21hc0zetxo.jpg', |
51 | 'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mqvu5j21hc0zkgzz.jpg', | 52 | 'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mqvu5j21hc0zkgzz.jpg', |
52 | - img.toString() | ||
53 | ], | 53 | ], |
54 | - | ||
55 | currentPageIndex: 0, | 54 | currentPageIndex: 0, |
56 | slideOptions: { | 55 | slideOptions: { |
57 | listenScroll: true, | 56 | listenScroll: true, |
@@ -59,8 +58,7 @@ export default { | @@ -59,8 +58,7 @@ export default { | ||
59 | click: false, | 58 | click: false, |
60 | directionLockThreshold: 0, | 59 | directionLockThreshold: 0, |
61 | stopPropagation: true | 60 | stopPropagation: true |
62 | - }, | ||
63 | - testimg: img | 61 | + } |
64 | }; | 62 | }; |
65 | }, | 63 | }, |
66 | methods: { | 64 | methods: { |
1 | <template> | 1 | <template> |
2 | - <div class="product-wrapper"> | ||
3 | - <img :src="url" alt="" srcset=""> | 2 | + <div class="product-wrapper" @click="onclick"> |
3 | + <img class="image-cls" :src="url" alt="" srcset=""> | ||
4 | <div class="price">{{price}}</div> | 4 | <div class="price">{{price}}</div> |
5 | </div> | 5 | </div> |
6 | </template> | 6 | </template> |
@@ -9,10 +9,10 @@ | @@ -9,10 +9,10 @@ | ||
9 | export default { | 9 | export default { |
10 | name: 'ProductItem', | 10 | name: 'ProductItem', |
11 | props: { | 11 | props: { |
12 | - pid:{ | 12 | + pid: { |
13 | type: String, | 13 | type: String, |
14 | default() { | 14 | default() { |
15 | - return '1212' | 15 | + return '1212'; |
16 | } | 16 | } |
17 | }, | 17 | }, |
18 | url: { | 18 | url: { |
@@ -27,8 +27,13 @@ export default { | @@ -27,8 +27,13 @@ export default { | ||
27 | return '¥121314'; | 27 | return '¥121314'; |
28 | } | 28 | } |
29 | } | 29 | } |
30 | + }, | ||
31 | + methods: { | ||
32 | + onclick() { | ||
33 | + console.log('click product') | ||
30 | } | 34 | } |
31 | -} | 35 | + }, |
36 | +}; | ||
32 | </script> | 37 | </script> |
33 | 38 | ||
34 | <style lang="scss" scoped> | 39 | <style lang="scss" scoped> |
@@ -39,6 +44,11 @@ export default { | @@ -39,6 +44,11 @@ export default { | ||
39 | height: 100px; | 44 | height: 100px; |
40 | } | 45 | } |
41 | 46 | ||
47 | +.image-cls { | ||
48 | + width: 100px; | ||
49 | + height: 100px; | ||
50 | +} | ||
51 | + | ||
42 | .price { | 52 | .price { |
43 | width: 100%; | 53 | width: 100%; |
44 | height: 28px; | 54 | height: 28px; |
@@ -47,7 +57,7 @@ export default { | @@ -47,7 +57,7 @@ export default { | ||
47 | position: absolute; | 57 | position: absolute; |
48 | bottom: 0; | 58 | bottom: 0; |
49 | text-align: center; | 59 | text-align: center; |
50 | - background: rgba(0,0,0,0.50); | 60 | + background: rgba(0, 0, 0, 0.5); |
51 | color: white; | 61 | color: white; |
52 | } | 62 | } |
53 | 63 |
1 | <template> | 1 | <template> |
2 | - <div class="products-wrapper"> | ||
3 | - <ProductItem class="item" v-for="i in 3"></ProductItem> | ||
4 | - </div> | 2 | + <Scroll class="product-list-wrapper" direction="horizontal" :options="scrollOpts"> |
3 | + <ul class="list-wrapper"> | ||
4 | + <ProductItem v-for="item in 3" class="list-item"></ProductItem> | ||
5 | + </ul> | ||
6 | + </Scroll> | ||
5 | </template> | 7 | </template> |
6 | 8 | ||
7 | <script> | 9 | <script> |
8 | 10 | ||
9 | -import ProductItem from './product-item' | 11 | +import {Scroll} from 'cube-ui'; |
12 | +import ProductItem from './product-item'; | ||
10 | 13 | ||
11 | export default { | 14 | export default { |
12 | - name: 'Products', | ||
13 | - props: { | ||
14 | - list: { | ||
15 | - type: Array, | ||
16 | - default() { | ||
17 | - return []; | ||
18 | - } | 15 | + name: 'Test', |
16 | + data() { | ||
17 | + return { | ||
18 | + scrollOpts: { | ||
19 | + click: false | ||
19 | } | 20 | } |
21 | + }; | ||
20 | }, | 22 | }, |
21 | components: { | 23 | components: { |
24 | + Scroll, | ||
22 | ProductItem | 25 | ProductItem |
23 | } | 26 | } |
24 | -} | 27 | +}; |
25 | </script> | 28 | </script> |
26 | 29 | ||
27 | <style lang="scss" scoped> | 30 | <style lang="scss" scoped> |
28 | -.products-wrapper { | ||
29 | - overflow: scroll; | 31 | +.product-list-wrapper { |
32 | + width: 290px; | ||
33 | + height: 100px; | ||
34 | + overflow: hidden; | ||
35 | + | ||
36 | + /deep/ .cube-scroll-content { | ||
37 | + display: inline-block; | ||
38 | + } | ||
30 | } | 39 | } |
31 | 40 | ||
32 | -.item { | 41 | +.list-wrapper { |
42 | + padding: 0 10px; | ||
43 | + line-height: 60px; | ||
44 | + white-space: nowrap; | ||
45 | +} | ||
46 | + | ||
47 | +.list-item { | ||
48 | + display: inline-block; | ||
33 | margin-right: 20px; | 49 | margin-right: 20px; |
34 | } | 50 | } |
51 | + | ||
35 | </style> | 52 | </style> |
-
Please register or login to post a comment