fe / yoho-community-web · Commits

Go to a project

Authored by 陈峰
Commit 1e6ac03885612a6d2407b3a0ea8e00e2276c78ca 2 parents abef12b6 d4177b39

commit

Inline Side-by-side
Showing 9 changed files with 141 additions and 33 deletions
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
\ No newline at end of file
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=http://npm.yohops.com
... ...
import ProductGroup from './product-group';
import ProductList from './product-list';
export default [
ProductGroup,
ProductList
];
... ...
<template>
<div class="product-list-wrap">
<div class="product-list">
<div class="product-item" v-for="(item, index) in list" :key="index">
<div class="thumb">
<ImageFormat :src="item.default_images" :width="235" :height="314"></ImageFormat>
</div>
<div class="name">{{item.product_name}}</div>
<div class="price">
<span class="sale-price">¥{{item.sales_price}}</span>
<span class="market-price">¥{{item.market_price}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ProductList',
props: {
list: Array
}
};
</script>
<style type="css">
.product-list-wrap {
display: flex;
justify-content: center;
}
.product-list {
max-width: 714px;
display: flex;
flex-wrap: wrap;
}
.product-item {
width: 50%;
padding: 18px 18px 48px;
.thumb {
height: 428px;
img {
width: 100%;
height: 100%;
display: block;
}
}
.name {
height: 68px;
margin-top: 24px;
font-size: 24px;
line-height: 1.4;
overflow: hidden;
}
.sale-price {
color: #d0021b;
font-size: 26px;
font-weight: 500;
}
.market-price {
color: #b0b0b0;
font-size: 25px;
margin-right: 4px;
text-decoration: line-through;
}
}
</style>
... ...
<template>
<div class="footer">
<TextEllipsis :text="text" class="desc" :isLimitHeight="isLimitHeight" :height="68">
<TextEllipsis :text="text" class="desc" :isLimitHeight="isLimitHeight" :height="75">
<template slot="more"><span>...</span><span class="link" @click="onClick">展开</span></template>
<span slot="after" v-if="!isLimitHeight" @click="isLimitHeight=true"></span>
</TextEllipsis>
... ... @@ -9,19 +9,22 @@
<div class="products">
<Products></Products>
</div>
<div class="share"></div>
<div class="share">
<WidgetIconBtn type="msg"></WidgetIconBtn>
<WidgetIconBtn type="zan"></WidgetIconBtn>
</div>
</div>
</div>
</template>
<script>
import Products from './products'
import Products from './products';
export default {
name: 'DescFooter',
components: {
Products
Products,
},
data() {
return {
... ... @@ -31,6 +34,7 @@ export default {
},
methods: {
onClick() {
console.log('展开');
this.isLimitHeight = false;
}
},
... ... @@ -62,7 +66,6 @@ export default {
display: inline-block;
width: 290px;
height: 100px;
background-color: white;
margin-top: 36px;
}
... ...
... ... @@ -34,6 +34,7 @@ import {Slide} from 'cube-ui';
import AvatarHeader from './avatar-header';
import DescFooter from './desc-footer';
// const img = require('statics/image/showorder/test.png')
export default {
name: 'ShowOrderItem',
... ... @@ -41,7 +42,7 @@ export default {
AvatarHeader,
DescFooter,
Slide,
SlideItem: Slide.Item,
SlideItem: Slide.Item
},
data() {
return {
... ... @@ -49,9 +50,7 @@ export default {
'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg',
'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0ncnnej21hc0zetxo.jpg',
'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mqvu5j21hc0zkgzz.jpg',
img.toString()
],
currentPageIndex: 0,
slideOptions: {
listenScroll: true,
... ... @@ -59,8 +58,7 @@ export default {
click: false,
directionLockThreshold: 0,
stopPropagation: true
},
testimg: img
}
};
},
methods: {
... ...
<template>
<div class="product-wrapper">
<img :src="url" alt="" srcset="">
<div class="product-wrapper" @click="onclick">
<img class="image-cls" :src="url" alt="" srcset="">
<div class="price">{{price}}</div>
</div>
</template>
... ... @@ -9,10 +9,10 @@
export default {
name: 'ProductItem',
props: {
pid:{
pid: {
type: String,
default() {
return '1212'
return '1212';
}
},
url: {
... ... @@ -27,8 +27,13 @@ export default {
return '￥121314';
}
}
}
}
},
methods: {
onclick() {
console.log('click product')
}
},
};
</script>
<style lang="scss" scoped>
... ... @@ -39,6 +44,11 @@ export default {
height: 100px;
}
.image-cls {
width: 100px;
height: 100px;
}
.price {
width: 100%;
height: 28px;
... ... @@ -47,7 +57,7 @@ export default {
position: absolute;
bottom: 0;
text-align: center;
background: rgba(0,0,0,0.50);
background: rgba(0, 0, 0, 0.5);
color: white;
}
... ...
<template>
<div class="products-wrapper">
<ProductItem class="item" v-for="i in 3"></ProductItem>
</div>
<Scroll class="product-list-wrapper" direction="horizontal" :options="scrollOpts">
<ul class="list-wrapper">
<ProductItem v-for="item in 3" class="list-item"></ProductItem>
</ul>
</Scroll>
</template>
<script>
import ProductItem from './product-item'
import {Scroll} from 'cube-ui';
import ProductItem from './product-item';
export default {
name: 'Products',
props: {
list: {
type: Array,
default() {
return [];
name: 'Test',
data() {
return {
scrollOpts: {
click: false
}
}
};
},
components: {
Scroll,
ProductItem
}
}
};
</script>
<style lang="scss" scoped>
.products-wrapper {
overflow: scroll;
.product-list-wrapper {
width: 290px;
height: 100px;
overflow: hidden;
/deep/ .cube-scroll-content {
display: inline-block;
}
}
.item {
.list-wrapper {
padding: 0 10px;
line-height: 60px;
white-space: nowrap;
}
.list-item {
display: inline-block;
margin-right: 20px;
}
</style>
... ...
export default [{
path: '/order/:id',
name: 'order',
... ...
... ... @@ -53,6 +53,7 @@ export default {
probeType: 3,
click: true,
directionLockThreshold: 0,
stopPropagation: true
}
};
},
... ...