fe / yoho-community-web · Commits

Go to a project

Authored by htoooth
Commit dbfbcdfdb1b44c57bf45ec414bf4d9044c6aa706 1 parent d15a8a26

add products and text view

Inline Side-by-side
Showing 9 changed files with 354 additions and 15 deletions
... ... @@ -4,6 +4,7 @@ import Layouts from './layouts';
import Products from './products';
import Comments from './comments';
import YohoActionSheet from './action-sheet';
import TextEllipsis from './textellipsis'
export default [
...Buttons,
... ... @@ -11,5 +12,6 @@ export default [
...Layouts,
...Products,
...Comments,
...YohoActionSheet
...YohoActionSheet,
...TextEllipsis
];
... ...
import TextEllipsis from './textellipsis';
export default [
TextEllipsis
];
... ...
<template>
<div class="h-text-ellipsis" :style="{width: width ? width + 'px': 'unset'}">
<slot name="before" class="h-text-ellipsis-before"></slot>
<span class="text-ellipsis-limit-text" :key="keyIndex" :content="text">{{text}}</span>
<span class="h-text-ellipsis-more" v-show='oversize'><slot name="more"></slot></span>
<slot name="after" class="h-text-ellipsis-after"></slot>
</div>
</template>
<script>
export default {
name: 'TextEllipsis',
props: {
text: String,
height: Number,
width: {
Number,
default: 0
},
isLimitHeight: {
type: Boolean,
default: true
}
},
data() {
return {
keyIndex: 0,
oversize: false,
isHide: false
};
},
watch: {
isLimitHeight() {
this.init();
},
text() {
this.init();
},
height() {
this.init();
},
width() {
this.init();
}
},
mounted() {
this.init();
},
methods: {
init() {
this.oversize = false;
this.keyIndex += 1;
let more = this.$el.querySelector('.h-text-ellipsis-more');
more.style.display = 'none';
if (this.isLimitHeight) {
this.limitShow();
}
},
limitShow() {
this.$nextTick(() => {
let textDom = this.$el.querySelector('.text-ellipsis-limit-text');
let title = this.$el;
let more = this.$el.querySelector('.h-text-ellipsis-more');
let n = 1000;
if (textDom) {
if (title.offsetHeight > this.height) {
more.style.display = 'inline-block';
let text = this.text;
while (title.offsetHeight > this.height && n > 0) {
if (title.offsetHeight > this.height * 3) {
textDom.innerText = text = text.substring(0, Math.floor(text.length / 2));
} else {
textDom.innerText = text = text.substring(0, text.length - 1);
}
n--;
}
this.$emit('hide');
this.isHide = true;
} else {
this.$emit('show');
this.isHide = false;
}
}
});
}
}
};
</script>
<style lang="scss" scoped>
.text-ellipsis-limit-text {
white-space: pre-wrap;
}
</style>
... ...
<template>
<div class="header">
<div class="avatar-wrapper">
<img class="avatar" src="">
<img class="avatar" :src="avatar">
<span class="name">{{name}}</span>
</div>
... ... @@ -17,7 +17,7 @@ export default {
props: {
avatar: {
type: String,
default: ''
default: '//tvax2.sinaimg.cn/crop.0.0.828.828.50/006IPkwKly8fyhr791kkxj30n00n0q3u.jpg'
},
name: {
type: String,
... ... @@ -29,7 +29,8 @@ export default {
},
methods: {
close() {
this.emit('close');
console.log('close');
this.$emit('close');
}
}
};
... ...
<template>
<div class="footer">
<TextEllipsis :text="text" class="desc" :isLimitHeight="isLimitHeight" :height="68">
<template slot="more"><span>...</span><span class="link" @click="onClick">展开</span></template>
<span slot="after" v-if="!isLimitHeight" @click="isLimitHeight=true"></span>
</TextEllipsis>
<div class="product-wrapper">
<div class="products">
<Products></Products>
</div>
<div class="share"></div>
</div>
</div>
</template>
<script>
import Products from './products'
export default {
name: 'DescFooter',
components: {
Products
},
data() {
return {
text: '很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双,很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双',
isLimitHeight: true
};
},
methods: {
onClick() {
this.isLimitHeight = false;
}
},
};
</script>
<style lang="scss" scoped>
.footer {
position: relative;
min-height: 280px;
background: rgba(0, 0, 0, 0.5);
}
.desc {
min-height: 134px;
font-size: 26px;
color: white;
letter-spacing: 0.01px;
padding: 30px 28px 0 28px;
}
.product-wrapper {
height: 166px;
padding: 0 28px;
}
.products {
display: inline-block;
width: 290px;
height: 100px;
background-color: white;
margin-top: 36px;
}
.link {
color: #4a90e2;
}
</style>
... ...
<template>
<div class="order-wrapper">
<AvatarHeader class="avatar-wrapper"></AvatarHeader>
<Slide :data="list" :loop="false" :autoPlay="false" class="slide-container" @change="slideChangeHandler">
<!-- <Test class="test"></Test> -->
<Slide :data="list"
:loop="false"
:autoPlay="false"
class="slide-container"
@change="slideChangeHandler"
:threshold="0.05"
@options="slideOptions"
>
<SlideItem v-for="i in list">
<div class="image-wrapper">
<img class="image" :src="i" alt="">
... ... @@ -14,6 +21,10 @@
<div class="image-preview-footer">
<span class="image-preview-counter">{{currentPageIndex + 1}}/{{list.length}}</span>
</div>
<AvatarHeader class="avatar-wrapper"></AvatarHeader>
<DescFooter class="footer-wrapper"></DescFooter>
</div>
</template>
... ... @@ -21,13 +32,19 @@
import {Slide} from 'cube-ui';
import AvatarHeader from './avatar-header';
import DescFooter from './desc-footer';
import Test from './test'
const img = require('statics/image/showorder/test.png')
export default {
name: 'ShowOrderItem',
components: {
AvatarHeader,
DescFooter,
Slide,
SlideItem: Slide.Item
SlideItem: Slide.Item,
Test
},
data() {
return {
... ... @@ -35,17 +52,27 @@ export default {
'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg',
'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0ncnnej21hc0zetxo.jpg',
'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mqvu5j21hc0zkgzz.jpg',
'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0m3ufuj21hc0zkqbj.jpg'
img.toString()
],
currentPageIndex: 0
currentPageIndex: 0,
slideOptions: {
listenScroll: true,
probeType: 3,
click: false,
directionLockThreshold: 0,
stopPropagation: true
},
testimg: img
};
},
methods: {
close() {
},
onclick(e) {
console.log('huangtao12=>',e);
},
slideChangeHandler(currentPageIndex) {
this.currentPageIndex = currentPageIndex;
}
... ... @@ -97,4 +124,17 @@ export default {
height: 60px;
line-height: 60px;
}
.footer-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.test {
position: absolute;
top: 50px;
left: 100px;
}
</style>
... ...
<template>
<div class="product-wrapper">
<img :src="url" alt="" srcset="">
<div class="price">{{price}}</div>
</div>
</template>
<script>
export default {
name: 'ProductItem',
props: {
pid:{
type: String,
default() {
return '1212'
}
},
url: {
type: String,
default() {
return '//tvax2.sinaimg.cn/crop.0.0.828.828.50/006IPkwKly8fyhr791kkxj30n00n0q3u.jpg';
}
},
price: {
type: String,
default() {
return '￥121314';
}
}
}
}
</script>
<style lang="scss" scoped>
.product-wrapper {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
}
.price {
width: 100%;
height: 28px;
line-height: 28px;
font-size: 20px;
position: absolute;
bottom: 0;
text-align: center;
background: rgba(0,0,0,0.50);
color: white;
}
</style>
... ...
<template>
<div class="products-wrapper">
<ProductItem class="item" v-for="i in 3"></ProductItem>
</div>
</template>
<script>
import ProductItem from './product-item'
export default {
name: 'Products',
props: {
list: {
type: Array,
default() {
return [];
}
}
},
components: {
ProductItem
}
}
</script>
<style lang="scss" scoped>
.products-wrapper {
overflow: scroll;
}
.item {
margin-right: 20px;
}
</style>
... ...
<template>
<Layout>
<Slide ref="slide" :data="list" :loop="false" :autoPlay="false" direction="vertical" class="slide-container" :showDots="false">
<Slide ref="slide"
:data="list"
:loop="false"
:autoPlay="false"
direction="vertical"
class="slide-container"
:showDots="false"
@scroll-end="onChange"
:speed="1000"
:threshold="0.05"
:options="scrollOpts"
>
<SlideItem v-for="i in list">
<OrderSlideItem></OrderSlideItem>
</SlideItem>
... ... @@ -18,7 +29,7 @@ export default {
components: {
Slide,
SlideItem: Slide.Item,
OrderSlideItem
OrderSlideItem,
},
data() {
return {
... ... @@ -33,13 +44,33 @@ export default {
},
{
url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
}
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
},
],
scrollOpts: {
deceleration: 0.0001,
listenScroll: true,
probeType: 3,
click: true,
directionLockThreshold: 0,
}
};
},
mounted() {
},
methods: {
onChange(i) {
this.$nextTick(() => {
this.list.shift();
this.list.push({
url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
});
});
},
clickHandler(e) {
console.log(e);
}
}
};
</script>
... ...