Authored by 陈峰

commit

1 phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs 1 phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
2 sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 2 sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
  3 +registry=http://npm.yohops.com
1 import ProductGroup from './product-group'; 1 import ProductGroup from './product-group';
  2 +import ProductList from './product-list';
2 3
3 export default [ 4 export default [
4 ProductGroup, 5 ProductGroup,
  6 + ProductList
5 ]; 7 ];
  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>
  1 +
  2 +
1 export default [{ 3 export default [{
2 path: '/order/:id', 4 path: '/order/:id',
3 name: 'order', 5 name: 'order',
@@ -53,6 +53,7 @@ export default { @@ -53,6 +53,7 @@ export default {
53 probeType: 3, 53 probeType: 3,
54 click: true, 54 click: true,
55 directionLockThreshold: 0, 55 directionLockThreshold: 0,
  56 + stopPropagation: true
56 } 57 }
57 }; 58 };
58 }, 59 },