fe / yoho-community-web · Commits

Go to a project

Authored by 陈峰
Commit 2342c62c1280701e97029838daae6215b3211e0a 2 parents 60b3560c 910c75cc

Merge branch 'master' of http://git.yoho.cn/fe/yoho-community-web

Inline Side-by-side
Showing 23 changed files with 1028 additions and 25 deletions
<template>
<div></div>
<div class="comment-item">
<ImageFormat :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar"></ImageFormat>
<div class="comment">
<div class="comment-nav">
<div class="comment-nav-left">
<p class="comment-user-name">{{parentComment.userName}}</p>
<p class="comment-time">{{parentComment.createTime}}</p>
</div>
<WidgetFav :num="parentComment.praiseTotal"></WidgetFav>
</div>
<p class="comment-cont" @click="replyComment" :data-parent-id="parentComment.parentId" :data-root-id="parentComment.rootId">
{{parentComment.content}}
</p>
<div class="reply-main">
<p class="reply-item" v-for="(reply, replyIndex) in childrenComments" :key="replyIndex" v-show="isShowReply(replyIndex)">
<span class="reply-user">
{{reply.userName}}
</span>
<span v-if="reply.parentUserName">
回复<em class="reply-to-user">@{{reply.parentUserName}}</em>
</span>:
<span @click="replyComment" :data-parent-id="reply.parentId" :data-root-id="reply.rootId">
{{reply.content}}
</span>
</p>
<p class="reply-more" v-if="isShowReplyMore" @click="viewMoreReply" v-html="replyMoreText"></p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CommentList'
name: 'CommentList',
props: {
parentComment: Object,
childrenComments: Array,
columnType: {
type: Number,
default: 1001
}
},
data() {
return {
showAllReply: false,
replyMoreText: '',
moreText: ''
};
},
computed: {
isShowReplyMore() {
return this.childrenComments.length > 2;
},
viewReplyNum() {
return this.childrenComments.length - 2;
}
},
created() {
this.moreText = `查看${this.viewReplyNum}条回复<span class="iconfont icon-right"></span>`;
this.replyMoreText = this.moreText;
},
methods: {
isShowReply(index) {
return index <= 1 || this.showAllReply;
},
viewMoreReply() {
this.replyMoreText = this.showAllReply ? this.moreText : '收起';
this.showAllReply = !this.showAllReply;
},
replyComment(e) {
console.log(e)
}
}
};
</script>
<style scoped lang="scss">
.comment-item {
display: flex;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.comment-user-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
.comment {
width: 600px;
margin-left: 10px;
}
.comment-nav {
padding-left: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.comment-nav-left {
flex: 1;
.comment-user-name {
font-size: 28px;
font-weight: bold;
color: #222;
line-height: 40px;
}
.comment-time {
font-size: 20px;
color: #B0B0B0;
line-height: 28px;
}
}
.comment-cont {
font-size: 28px;
color: #444;
line-height: 40px;
margin: 12px 0 20px;
padding-left: 10px;
box-sizing: border-box;
}
.reply-main {
background: #F0F0F0;
padding: 20px;
box-sizing: border-box;
font-size: 24px;
color: #444;
line-height: 34px;
.reply-item {
margin-bottom: 20px;
display: flex;
&:last-child {
margin-bottom: 0;
}
.reply-to-user {
color: #4A90E2;
font-style: normal;
}
.reply-user {
font-weight: 500;
}
}
.reply-more {
text-align: right;
color: #4A90E2;
margin-top: 10px;
}
}
}
</style>
... ...
... ... @@ -24,7 +24,7 @@ export default {
};
</script>
<style type="css">
<style type="scss" scoped>
.product-list-wrap {
display: flex;
justify-content: center;
... ...
... ... @@ -45,7 +45,7 @@
type: String,
default: 'fav'
},
text: String,
text: [String, Number],
option: {
type: Object,
default() {
... ... @@ -88,12 +88,16 @@
textStyle() {
let style = `font-size: ${pxToRem(this.option.textFontSize || defaultOption.textFontSize)};`;
if (['top', 'bottom'].indexOf(this.option.textAlign) >= 0) {
style += ` vertical-align: ${this.option.textAlign};`;
let textAlign = this.option.textAlign || defaultOption.textAlign;
if (['top', 'bottom'].indexOf(textAlign) >= 0) {
style += ` vertical-align: ${textAlign};`;
}
if (Number(this.option.textZoom) !== NaN) {
style += `transform: scale(${this.option.textZoom}, ${this.option.textZoom});`
let textZoom = this.option.textZoom || defaultOption.textAlign;
if (Number(textZoom) !== NaN) {
style += `transform: scale(${textZoom}, ${textZoom});`
}
return style;
... ...
<template>
<Layout>
<LayoutHeader slot="header" title="潮物详情" :share="shareData"></LayoutHeader>
<div class="fashion-detail-page">
<div class="product-info">
<img src="//img12.static.yhbimg.com/goodsimg/2018/12/24/09/02ce4a371bd58b47e599f8e04c7c7bc250.jpg?imageMogr2/thumbnail/235x314/position/center/quality/60" alt="" class="product-img">
<div class="product-info-right">
<div class="product-title">Lee X-LINE系列男士宽松插画印花背带裤</div>
<div class="product-desc">一年到头，我们总喜欢给过去来个总结。要说今年最火的穿搭元素，我想离不开两个字——“老爹”。满大街的老爹鞋，从去年踩到今年，足以证明这股复古风潮的影响力。</div>
<div class="product-price">
<span class="sale-price">￥899</span>
<span class="market-price">￥1899</span>
</div>
</div>
</div>
<div class="follow">
<WidgetAvatarGroup :avatars="avatars" :option="{srcKey: 'src', maxDisplayNum: 10}"></WidgetAvatarGroup>
<span class="follow-num">3998人已种草</span>
</div>
<div class="hot-comment out-box">
<div class="comment-title"></div>
<div class="comment-list">
<CommentList v-for="(comment, index) in commentInfos" v-bind="comment" :columnType="1003" :key="index"></CommentList>
</div>
<span class="more">查看更多</span>
</div>
<div class="you-like out-box">
<div class="yoho-like-title"></div>
<ProductList></ProductList>
</div>
<div class="fashion-footer">
<div class="grass-btn"><span class="iconfont icon-grass-fill"></span><em>种草</em></div>
<div class="comment-btn"><span class="iconfont icon-msg-blod"></span><em>评论</em></div>
<button class="go-buy">立即购买</button>
</div>
</div>
</Layout>
</template>
<script>
export default {
name: 'fashionDetail',
data() {
return {
shareData: {},
avatars: [{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'}
],
commentInfos: [{
childrenComments: [
{
content: "fdsfdsfsdf对方水电费第三方",
id: 68,
isPraise: "Y",
parentId: 66,
parentUid: 500030381,
praiseTotal: "12",
rootId: 66,
status: 1,
uid: 600033622,
columnType: 1000,
destId: 600033622,
createTime: 111,
userName: "三只松鼠",
headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
parentUserName: "",
articleType: 1
},
{
content: "fdsfdsfsdf对方水电费第三方",
id: 68,
isPraise: "Y",
parentId: 66,
parentUid: 500030381,
praiseTotal: "12",
rootId: 66,
status: 1,
uid: 600033622,
columnType: 1000,
destId: 600033622,
createTime: 111,
userName: "三只松鼠",
headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
parentUserName: "大松鼠",
articleType: 1
},
{
content: "fdsfdsfsdf对方水电费第三方",
id: 68,
isPraise: "Y",
parentId: 66,
parentUid: 500030381,
praiseTotal: "12",
rootId: 66,
status: 1,
uid: 600033622,
columnType: 1000,
destId: 600033622,
createTime: 111,
userName: "三只松鼠",
headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
parentUserName: "大松鼠",
articleType: 1
}
],
parentComment: {
articleType: 1,
content: "fsefs第三方",
createTime: 23213,
id: 66,
isPraise: "Y",
praiseTotal: "11",
status: 0,
uid: 500030381,
columnType: 1000,
destId: 600033622,
articleId: 123,
userName: "大松鼠",
headIco: '//img13.static.yhbimg.com/author/2018/12/10/10/02143c5a70e288801cda4ac4f3fa8b9d7b.jpg?imageView2/2/interlace/1/q/75',
}
}],
}
}
}
</script>
<style scoped lang="scss">
.fashion-detail-page {
.product-info {
display: flex;
padding: 30px;
box-sizing: border-box;
.product-img {
width: 320px;
height: 424px;
}
.product-info-right {
width: 350px;
margin-left: 20px;
}
.product-title {
font-size: 30px;
color: #222;
line-height: 44px;
font-weight: bold;
}
.product-desc {
font-size: 26px;
color: #B0B0B0;
line-height: 36px;
margin-top: 18px;
height: 174px;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.product-price {
display: flex;
align-items: center;
margin-top: 84px;
}
.sale-price {
color: #D0021B;
font-size: 28px;
}
.market-price {
color: #B0B0B0;
font-size: 20px;
margin-left: 12px;
}
}
.follow {
margin-bottom: 30px;
padding: 0 30px;
clear: both;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.out-box {
border-top: 20px solid #F0F0F0;
padding: 30px;
}
.hot-comment {
display: flex;
width: 100%;
flex-direction: column;
.comment-title {
background: url(../../statics/image/fashion/jcrp_title@2x.png) no-repeat;
background-size: contain;
width: 310px;
height: 78px;
margin: 0 auto 60px;
}
.more {
font-size: 24px;
color: #B0B0B0;
margin: 60px auto 30px;
display: flex;
align-items: center;
&:before{
content: "";
background: #B0B0B0;
width: 40px;
height: 2px;
margin-right: 20px;
display: inline-block;
}
&:after{
content: "";
background: #B0B0B0;
width: 40px;
height: 2px;
margin-left: 20px;
display: inline-block;
}
}
}
.yoho-like-title {
background: url(../../statics/image/fashion/cnxh_title@2x.png) no-repeat;
background-size: contain;
width: 250px;
height: 78px;
margin: 0 auto;
}
.fashion-footer {
height: 120px;
width: 100%;
background: #fff ;
border-top: 1px solid #D8D8D8 ;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
.go-buy {
background: #D0021B;
color: #fff;
text-align: center;
width: 260px;
height: 88px;
border: none;
outline: none;
border-radius: 6px;
margin: 0 30px;
}
.comment-btn,
.grass-btn {
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
font-size: 18px;
color: #444;
span {
font-size: 52px;
}
em {
font-style: normal;
margin-top: -6px;
}
}
.comment-btn {
span {
color: #b0b0b0;
}
}
}
}
</style>
... ...
export default [{
path: '/xxx',
name: 'xxx',
path: '/fashion/detail',
name: 'fashionDetail',
// component: () => import(/* webpackChunkName: "xxx" */ './xxx')
component: () => import(/* webpackChunkName: "fashionDetail" */ './fashion-detail')
}];
... ...
<template>
<div class="article">
<ArticleBar class="header"></ArticleBar>
<ArticleBody class="body"></ArticleBody>
<ArticleFooter class="footer"></ArticleFooter>
</div>
</template>
<script>
import ArticleBar from './components2/article-bar';
import ArticleFooter from './components2/article-footer';
import ArticleBody from './components2/article-body';
export default {
name: 'ArticleDetail',
components: {
ArticleBar,
ArticleBody,
ArticleFooter
},
data() {
return {};
}
};
</script>
<style lang="scss" scoped>
.article {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
.header {
// pass
}
.body {
flex: 1;
}
.footer {
// pass
}
}
</style>
... ...
... ... @@ -29,8 +29,8 @@ export default {
},
methods: {
close() {
console.log('close');
this.$emit('close');
this.$yoho.finishPage({});
}
}
};
... ...
<template>
<YohoActionSheet ref="actionSheet" :full="true">
<div class="content">
<!--<template v-if="list.length === 0">-->
<!--<Loading class="loading" :size="50"></Loading>-->
<!--</template>-->
<CommentScrollView ref="commentList"></CommentScrollView>
</div>
</YohoActionSheet>
</template>
<script>
import {Loading} from 'cube-ui';
import CommentScrollView from './comment-scroll-view';
export default {
name: 'CommentActionSheetPage',
components: {
Loading,
CommentScrollView
},
data() {
return {
};
},
methods: {
click() {
this.$refs.actionSheet.show();
this.$refs.commentList.click();
}
}
};
</script>
<style>
.content {
width: 100%;
height: 80vh;
background-color: white;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
... ...
<template>
<div class="comment-scroll-view">
<div class="header">{{ count }}评论
</div>
<Scroll class="scroll-wrapper" ref="scroll" :options="scrollOptions">
<div v-for="i in list" class="item">huangtao {{i}}</div>
</Scroll>
<div class="footer">
<div class="input">评论</div>
</div>
</div>
</template>
<script>
import {Scroll} from 'cube-ui';
export default {
name: 'CommentScrollView',
components: {
Scroll
},
data() {
return {
list: [],
scrollOptions: {
bounce: false
}
};
},
computed: {
count() {
return this.list.length > 0 ? this.list.length + '条' : '';
}
},
methods: {
click() {
this.$nextTick(() => {
this.initData();
this.forceUpdate();
}, 1000);
},
forceUpdate() {
this.$refs.scroll.forceUpdate();
},
initData() {
console.log('click')
for (let i = 0; i < 100; i++) {
this.list.push(i);
}
}
}
};
</script>
<style lang="scss" scoped>
.comment-scroll-view {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 88px;
border-bottom: 2px solid #e0e0e0;
text-align: center;
line-height: 88px;
font-size: 32px;
}
.scroll-wrapper {
flex: 1;
}
.item {
background-color: white;
}
.footer {
width: 100%;
height: 100px;
border-top: 2px solid #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
}
.input {
width: 690px;
height: 72px;
background-color: #f0f0f0;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 24px;
color: #b0b0b0;
padding: 18px 0 18px 22px;
}
</style>
... ...
... ... @@ -10,8 +10,9 @@
<Products></Products>
</div>
<div class="share">
<WidgetIconBtn type="msg"></WidgetIconBtn>
<WidgetIconBtn type="zan"></WidgetIconBtn>
<WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onCommentClick"></WidgetIconBtn>
<WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
<WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
</div>
</div>
</div>
... ... @@ -29,13 +30,23 @@ export default {
data() {
return {
text: '很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双,很好，能抢到真的不容易！整体感觉很舒服，庆幸下手一定要快准狠！如果能够再抢到一双就更好了，下次加买很多双',
isLimitHeight: true
isLimitHeight: true,
option: {
emitName: 'click',
color: 'white'
}
};
},
methods: {
onClick() {
console.log('展开');
this.isLimitHeight = false;
},
onCommentClick() {
this.$emit('on-comment-click', {});
},
onFavClick() {
this.$emit('on-favorite-click', {});
}
},
};
... ... @@ -58,6 +69,8 @@ export default {
}
.product-wrapper {
display: flex;
justify-content: space-between;
height: 166px;
padding: 0 28px;
}
... ... @@ -72,4 +85,13 @@ export default {
.link {
color: #4a90e2;
}
.share {
height: 100px;
margin-top: 86px;
}
.item {
margin-left: 50px;
}
</style>
... ...
<template>
<div class="order-wrapper">
<!-- <Test class="test"></Test> -->
<Slide :data="list"
:loop="false"
:autoPlay="false"
... ... @@ -24,7 +23,7 @@
<AvatarHeader class="avatar-wrapper"></AvatarHeader>
<DescFooter class="footer-wrapper"></DescFooter>
<DescFooter class="footer-wrapper" @on-comment-click="onCommentClick"></DescFooter>
</div>
</template>
... ... @@ -34,15 +33,13 @@ 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',
components: {
AvatarHeader,
DescFooter,
Slide,
SlideItem: Slide.Item
SlideItem: Slide.Item,
},
data() {
return {
... ... @@ -70,6 +67,9 @@ export default {
},
slideChangeHandler(currentPageIndex) {
this.currentPageIndex = currentPageIndex;
},
onCommentClick() {
this.$emit('on-comment-click', {});
}
}
};
... ...
<template>
<div class="bar-wrapper">
<div class="title">资讯详情</div>
<div class="close" @click="close">
<i class="iconfont icon-close icon"></i>
</div>
</div>
</template>
<script>
export default {
name: 'ArticleBar',
methods: {
close() {
}
},
};
</script>
<style lang="scss" scoped>
.bar-wrapper {
width: 100%;
height: 88px;
position: relative;
background-color: white;
border-bottom: 1px solid #e0e0e0;
}
.title {
font-size: 32px;
color: #444;
line-height: 88px;
text-align: center;
}
.close {
color: #444;
position: absolute;
top: 20px;
right: 40px;
}
.icon {
font-size: 50px;
}
</style>
... ...
<template>
<Scroll class="scroll-wrapper" :options="scrollOpts">
<div v-for="i in 40">huangtao {{i}}</div>
<Recommend>
<RecommendProductList></RecommendProductList>
</Recommend>
</Scroll>
</template>
<script>
import {Scroll} from 'cube-ui';
import RecommendProductList from './recommend-product-list';
import Recommend from './recommend'
export default {
name: 'ArticleBody',
components: {
Scroll,
RecommendProductList,
Recommend
},
data() {
return {
scrollOpts: {
eventPassthrough: 'horizontal'
}
};
}
};
</script>
<style lang="scss" scoped>
.scroll-wrapper {
background-color: white;
}
</style>
... ...
<template>
<div class="article-footer-wrapper">
<div class="tool-bar">
<WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onClick"></WidgetIconBtn>
<WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onClick"></WidgetIconBtn>
<WidgetIconBtn class="item" type="star" text="100" :option="option" @click="onClick"></WidgetIconBtn>
</div>
<div class="close ml20">收起</div>
</div>
</template>
<script>
export default {
name: 'ArticleFooter',
data() {
return {
option: {
eventName: 'click'
}
};
},
methods: {
onClick() {
}
},
};
</script>
<style lang="scss" scoped>
.article-footer-wrapper {
display: flex;
height: 100px;
border-top: 1px solid #e0e0e0;
background-color: white;
}
.tool-bar {
flex: 1;
display: flex;
align-items: center;
justify-content: space-around;
}
.close {
width: 200px;
color: white;
font-size: 32px;
line-height: 100px;
background-color: #d0021b;
text-align: center;
}
.ml20 {
margin-left: 20px;
}
</style>
... ...
<template>
<div class="product-item">
<div class="product-images-wrapper">
<img class="image" :src="imgUrl"/>
<div class="price">{{price}}</div>
</div>
<div class="title line-clamp-2">{{title}}</div>
</div>
</template>
<script>
export default {
name: 'RecommendProductItem',
props: {
price: {
type: String,
default() {
return '￥1111.0';
},
},
imgUrl: {
type: String,
default() {
return '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60';
}
},
title: {
type: String,
default() {
return 'viishow 套头圆领撞拼条纹针织衫';
}
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.product-item {
display: inline-block;
width: 170px;
.product-images-wrapper {
position: relative;
width: 170px;
height: 226px;
margin-bottom: 12px;
.image {
width: 170px;
height: 226px;
}
.price {
width: 100px;
height: 40px;
line-height: 40px;
position: absolute;
bottom: 10px;
margin-left: 82px;
color: white;
font-size: 20px;
background-image: linear-gradient(90deg, #474747 0%, #222 100%);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}
}
.title {
width: 100%;
font-size: 20px;
color: #444;
word-break: break-all;
white-space: normal;
}
}
</style>
... ...
<template>
<div class="product-list">
<RecommendProductItem class="item" v-for="i in 5"></RecommendProductItem>
</div>
</template>
<script>
import RecommendProductItem from './recommend-product-item'
export default {
name: 'RecommendProductList',
components: {
RecommendProductItem
}
};
</script>
<style lang="scss" scoped>
.product-list {
width: 100%;
overflow: scroll;
white-space: nowrap;
}
.item + .item {
margin-left: 22px;
}
.item:first-child {
margin-left: 40px;
}
.item:last-child {
margin-right: 40px;
}
</style>
... ...
<template>
<div>
<div class="title">推荐商品</div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Recommend'
};
</script>
<style lang="scss" scoped>
.title {
font-size: 32px;
color: #222;
text-align: left;
margin-bottom: 30px;
font-weight: bold;
margin-left: 40px;
}
</style>
... ...
<template>
<div>
</div>
</template>
<script>
export default {
name: 'TextBody'
}
</script>
<style scoped>
</style>
... ...
export default [{
path: '/order/:id',
name: 'order',
path: '/mapp/showorder/:id',
name: 'showorder',
component: () => import(/* webpackChunkName: "order" */ './order')
component: () => import(/* webpackChunkName: "order" */ './article-detail')
}];
... ...
... ... @@ -13,9 +13,11 @@
:options="scrollOpts"
>
<SlideItem v-for="i in list">
<OrderSlideItem></OrderSlideItem>
<OrderSlideItem @on-comment-click="onComment"></OrderSlideItem>
</SlideItem>
</Slide>
<CommentActionSheet ref="actionsheet"></CommentActionSheet>
</Layout>
</template>
... ... @@ -23,6 +25,7 @@
import {Slide} from 'cube-ui';
import OrderSlideItem from './components/order-slide-item';
import CommentActionSheet from './components/comment-action-sheet';
export default {
name: 'ShowOrderPage',
... ... @@ -30,6 +33,7 @@ export default {
Slide,
SlideItem: Slide.Item,
OrderSlideItem,
CommentActionSheet
},
data() {
return {
... ... @@ -71,6 +75,10 @@ export default {
},
clickHandler(e) {
console.log(e);
},
onComment() {
console.log('ok');
this.$refs.actionsheet.click();
}
}
};
... ...
This diff could not be displayed because it is too large.