fe / yoho-community-web · Commits

Go to a project

Authored by 陈峰
Commit bb6e1a594c46b003f741d9fb015a5e8b93599b69 1 parent 1686a15a

commit

Inline Side-by-side
Showing 13 changed files with 169 additions and 65 deletions
... ... @@ -596,6 +596,18 @@ const yoho = {
url = url + 'product/' + skn + '.html';
window.open(url);
}
},
getInput(args, success, fail) {
console.log('get.Input')
if (this.isYohoBuy && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
method: 'get.Input',
arguments: args
});
} else {
// tip(tipInfo);
}
}
};
... ...
<template>
<transition name="action-sheet-fade">
<div class="yoho-popup" :class="actionCls" v-show="isVisible" :style="{'z-index': zIndex}">
<div class="yoho-popup-mask" @click="maskClick"></div>
<div class="yoho-popup-container">
<div class="yoho-popup-content">
<transition name="action-sheet-move">
<div class="detail" v-show="isVisible">
<slot></slot>
</div>
</transition>
<div v-transfer-dom :data-transfer="transfer">
<transition name="action-sheet-fade">
<div class="yoho-popup" :class="actionCls" v-show="isVisible" :style="{'z-index': zIndex}">
<div class="yoho-popup-mask" @click="maskClick"></div>
<div class="yoho-popup-container">
<div class="yoho-popup-content">
<transition name="action-sheet-move">
<div class="detail" v-show="isVisible">
<slot></slot>
</div>
</transition>
</div>
</div>
</div>
</div>
</transition>
</transition>
</div>
</template>
<script>
import { Popup } from 'cube-ui';
export default {
name: 'YohoActionSheet',
props: {
... ... @@ -25,6 +25,7 @@ export default {
type: Boolean,
default: true
},
transfer: Boolean,
zIndex: {
type: Number,
default: 100
... ... @@ -59,9 +60,6 @@ export default {
return [{ 'yoho-action-sheet': this.full }];
}
},
components: {
Popup
},
methods: {
maskClick() {
this.maskClosable && this.cancel();
... ... @@ -92,7 +90,7 @@ export default {
.action-sheet-fade-enter-active,
.action-sheet-fade-leave-active {
transition: all 0.3s ease-in-out;
transition: all 0.2s ease-in-out;
}
.action-sheet-move-enter,
... ... @@ -102,7 +100,7 @@ export default {
.action-sheet-move-enter-active,
.action-sheet-move-leave-active {
transition: all 0.3s ease-in-out;
transition: all 0.2s ease-in-out;
}
.yoho-popup {
... ... @@ -119,6 +117,7 @@ export default {
.yoho-popup-mask,
.yoho-popup-container {
background-color: #fff;
position: absolute;
width: 100%;
height: 100%;
... ... @@ -133,6 +132,8 @@ export default {
.detail {
position: relative;
width: 100%;
height: 100%;
}
</style>
... ...
<template>
<div class="comment-list">
<div class="comment-content">
<LayoutRecycleList v-if="show" ref="comment" :offset="500" :on-fetch="onFetch">
<template class="article-item" v-slot:item="{ data }">
<CommentItem
:parent-comment="data.parentComment"
:children-comments="data.childrenComments"
:column-type="columnType"
@on-reply="onReply">
</CommentItem>
</template>
</LayoutRecycleList>
<Scroll ref="scroll" :data="commentList" :options="scrollOption" @pulling-up="onPullingUp">
<CommentItem
v-for="(comment, index) in commentList"
:key="index"
:parent-comment="comment.parentComment"
:children-comments="comment.childrenComments"
:column-type="columnType"
@on-reply="onReply">
</CommentItem>
</Scroll>
</div>
<div class="comment-footer">
<div class="comment-input" @click="onComment">参与评论</div>
<CommentPlaceholder class="comment-input">
参与评论
</CommentPlaceholder>
</div>
</div>
</template>
... ... @@ -21,8 +23,8 @@
<script>
import CommentItem from './comment-item.vue';
import {Scroll} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';
import {get} from 'lodash';
import {createNamespacedHelpers} from 'vuex';
const {mapActions} = createNamespacedHelpers('comment');
export default {
... ... @@ -37,36 +39,57 @@ export default {
data() {
return {
page: 1,
commentList: [],
scrollOption: {
pullUpLoad: {
threshold: 200,
txt: {
more: '上拉加载',
noMore: '- 已经到底了 -'
}
}
},
show: false
};
},
watch: {
destId() {
this.init();
}
},
mounted() {
setTimeout(() => {
this.show = true;
this.fetchComments();
}, 200);
},
methods: {
...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']),
async onFetch() {
async fetchComments(refresh) {
const result = await this.fetchCommentList({
destId: this.destId,
columnType: this.columnType,
page: this.page,
});
let dirty = true;
if (result.code === 200) {
const comments = get(result, 'data.commentInfos', []);
if (refresh) {
this.commentList = comments;
} else {
this.commentList = this.commentList.concat(comments);
}
if (comments.length) {
this.page++;
this.$emit('on-page-change', {
page: this.page,
size: result.data.total
});
return Promise.resolve(comments);
} else {
return Promise.resolve(false);
dirty = false;
}
this.$emit('on-page-change', {
page: this.page,
size: result.data.total
});
} else {
this.$createToast && this.$createToast({
txt: result.message || '服务器开小差了',
... ... @@ -74,6 +97,11 @@ export default {
time: 1000
}).show();
}
this.$refs.scroll.forceUpdate(dirty);
return result;
},
onPullingUp() {
this.fetchComments();
},
async onComment() {
const result = await this.postComment({
... ... @@ -93,9 +121,10 @@ export default {
}).show();
}
},
init() {
async init() {
this.page = 1;
this.$refs.comment.init();
await this.fetchComments(true);
this.$refs.scroll.forceUpdate(true);
},
async onReply({commentId}) {
const result = await this.fetchReplayList({
... ...
export default {
name: 'CommentPlaceholder',
props: {
tag: String,
destId: Number,
addType: Number,
columnType: {
type: Number,
default: 1001
},
placeholder: String
},
methods: {
openComentInput() {
this.$yoho.getInput({
hint: '你好',
success: (content) => {
console.log(content)
},
fail: (e) => {
console.log('fail', e)
}
});
}
},
render(h) {
return h(this.tag || 'div', {
on: {
click: () => {
this.openComentInput();
}
}
}, this.$slots.default);
}
};
... ...
<template>
<Layout class="article">
<LayoutHeader theme="white" slot='header'>
<Layout>
<LayoutHeader :back="!popup" theme="white" slot='header'>
{{headerText}}
<template v-slot:opts v-if="popup">
<i class="iconfont icon-close icon" @click="onClose"></i>
</template>
</LayoutHeader>
<CommentList :dest-id="destId" :column-type="1001" @on-page-change="onPageChange"></CommentList>
</Layout>
... ... @@ -11,9 +14,13 @@
import CommentList from './comment-list';
export default {
name: 'ArticleCommentComponent',
name: 'Comment',
props: {
destId: Number
destId: Number,
popup: {
type: Boolean,
default: false
}
},
data() {
return {
... ... @@ -28,6 +35,9 @@ export default {
methods: {
onPageChange({size}) {
this.size = size;
},
onClose() {
this.$emit('on-close');
}
},
components: {CommentList}
... ...
import Comment from './comment';
import CommentPlaceholder from './comment-placeholder';
export default [
Comment,
CommentPlaceholder
];
... ...
<template>
<img v-lazy="currentSrc" :alt="alt" v-if="lazy">
<img :src="currentSrc" :alt="alt" v-else>
<img v-lazy="currentSrc" :alt="alt" v-if="currentLazy">
<img :src="currentSrc" :alt="alt" v-else lazy="" data-src="">
</template>
<script>
... ... @@ -22,12 +22,16 @@ export default {
},
data() {
return {
refresh: false
refresh: false,
currentLazy: this.lazy
};
},
watch: {
src() {
this.lazy = false;
this.currentLazy = false;
},
lazy(val) {
this.currentLazy = val;
}
},
computed: {
... ...
<template>
<div class="layout-header" :class="{[`theme-${theme}`]: theme}">
<div class="back flex hover-opacity" @click="onBack">
<slot name="back">
<slot name="back" v-if="back">
<i class="iconfont icon-left"></i>
</slot>
</div>
... ... @@ -25,6 +25,10 @@ export default {
title: String,
theme: String,
fixed: Boolean,
back: {
type: Boolean,
default: true
},
transparentSeek: Number,
opacity: {
type: Number,
... ...
import Vue from 'vue';
import focus from './focus';
import TransferDom from './transfer-dom';
import Tap from './tap';
Vue.directive('focus', focus);
Vue.directive('TransferDom', TransferDom);
Vue.directive('Tap', Tap);
... ...
... ... @@ -3,7 +3,6 @@
</template>
<script>
import Comment from 'components/comments/comment';
export default {
name: 'ArticleComment',
... ... @@ -17,6 +16,5 @@ export default {
return parseInt(this.$route.params.articleId, 10);
}
},
components: {Comment}
};
</script>
... ...
... ... @@ -25,9 +25,9 @@
</LayoutRecycleList>
<slot name="thumb" v-else></slot>
<ArticleActionSheet ref="actionSheet"></ArticleActionSheet>
<YohoActionSheet v-if="showCommentAction" ref="commentAction" :full="true">
<Comment :destId="currentArticle.articleId"></Comment>
<ArticleActionSheet v-if="showArticleDetailAction" ref="actionSheet"></ArticleActionSheet>
<YohoActionSheet transfer v-if="showCommentAction" ref="commentAction" :full="true">
<Comment :destId="articleId" :popup="true" @on-close="onClose"></Comment>
</YohoActionSheet>
</Layout>
</template>
... ... @@ -52,6 +52,7 @@ export default {
return {
articleId: 0,
showCommentAction: false,
showArticleDetailAction: false,
shareData: {},
inx: 0,
scrollTop: 0,
... ... @@ -74,10 +75,14 @@ export default {
},
methods: {
onComment({articleId}) {
console.log(articleId)
this.articleId = articleId;
this.showCommentAction = true;
this.$refs.commentAction.show();
this.$nextTick(() => {
this.$refs.commentAction.show();
});
},
onClose() {
this.$refs.commentAction.hide();
},
onScroll({item, scrollTop}) {
this.scrollTop = scrollTop;
... ... @@ -144,8 +149,11 @@ export default {
toast.show();
this.$refs.actionSheet.show(params).then(() => {
toast.hide();
this.showArticleDetailAction = true;
this.$nextTick(() => {
this.$refs.actionSheet.show(params).then(() => {
toast.hide();
});
});
}
},
... ...
<template>
<YohoActionSheet ref="actionSheet" :full="true">
<YohoActionSheet transfer ref="actionSheet" :full="true">
<ArticleDetail ref="detail" @on-close="onClose"></ArticleDetail>
</YohoActionSheet>
</template>
... ...
... ... @@ -57,7 +57,12 @@ export default {
productIds: ufoProducts.join(','),
});
commit(Types.FETCH_ARTICLE_PRODUCT_SUCCESS, {articles, favs: result.data, articleProductType: 2});
if (result.code === 200) {
if (!result.data) {
result.data = [];
}
commit(Types.FETCH_ARTICLE_PRODUCT_SUCCESS, {articles, favs: result.data, articleProductType: 2});
}
}
},
async fetchArticleListByTopic({commit, state}, {labelId, limit = 5, page = 1}) {
... ...