fe / yoho-community-web · Commits

Go to a project

Authored by ityuany
Commit 4487c9f7d9bdb89f24a547236670a191d765ab97 1 parent 2d8c94f0

feature 

- 点击图片支持弹出输入框
- 引入optional-chain编译插件
Inline Side-by-side
Showing 8 changed files with 101 additions and 33 deletions
<template>
<div class="comment-empty-wrap">
<div class="comment-empty-wrap" @click="OPEN_COMENT_INPUT">
<div class="empty-content">
<div class="empty-img"></div>
<p class="empty-tip">暂无评论，快来评论吧！</p>
... ... @@ -8,34 +8,48 @@
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
const article = createNamespacedHelpers('article');
export default {
name: 'CommentEmpty'
name: 'CommentEmpty',
props: {
click: {
type: Function,
required: false
}
},
methods: {
...article.mapMutations(['OPEN_COMENT_INPUT'])
}
};
</script>
<style lang="css" scoped>
.comment-empty-wrap {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
}
.empty-content {
margin-top: -10px;
}
.empty-img {
width: 250px;
height: 181px;
background-image: url("~statics/image/article/comment-empty.png");
background-size: 100%;
margin: 0 auto 20px;
}
.empty-tip {
font-size: 26px;
color: #b0b0b0;
font-weight: 300;
}
.comment-empty-wrap {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
}
.empty-content {
margin-top: -10px;
}
.empty-img {
width: 250px;
height: 181px;
background-image: url("~statics/image/article/comment-empty.png");
background-size: 100%;
margin: 0 auto 20px;
}
.empty-tip {
font-size: 26px;
color: #b0b0b0;
font-weight: 300;
}
</style>
... ...
import {get, trim} from 'lodash';
import {createNamespacedHelpers} from 'vuex';
const {mapActions} = createNamespacedHelpers('comment');
import YAS from 'utils/yas-constants';
const {mapActions: articleMapActions, mapMutations: articleMapMutations} = createNamespacedHelpers('article');
const {mapActions: articleMapActions, mapMutations: articleMapMutations, mapState: articleMapState} = createNamespacedHelpers('article');
export default {
name: 'CommentPlaceholder',
... ... @@ -26,17 +26,27 @@ export default {
autoUpdate: {
type: Boolean,
default: true
},
}
},
data() {
return {
posting: false
};
},
computed: {
...articleMapState(['comentInputVisable'])
},
watch: {
comentInputVisable: function() {
if (this.comentInputVisable ?? false) {
this.openComentInput();
this.INIT_COMENT_INPUT?.();
}
}
},
methods: {
...mapActions(['postComment']),
...articleMapActions(['fetchArticleUpdate']),
...articleMapMutations(['UPDATE_ARTICLE_COMMENT_COUNT']),
...articleMapMutations(['UPDATE_ARTICLE_COMMENT_COUNT', 'INIT_COMENT_INPUT']),
async openComentInput() {
if (this.share) {
return this.$links.toDownloadApp();
... ...
... ... @@ -32,7 +32,8 @@ export default function() {
topicList: [],
fetchTopicList: false,
fetchTopicPage: 1,
fetchTopicLastedTime: 0
fetchTopicLastedTime: 0,
comentInputVisable: false
},
actions,
mutations
... ...
... ... @@ -111,6 +111,12 @@ function setArticleList(state, data, type, thumb) {
}
export default {
[Types.OPEN_COMENT_INPUT](state) {
state.comentInputVisable = true;
},
[Types.INIT_COMENT_INPUT](state) {
state.comentInputVisable = false;
},
[Types.FETCH_ARTICLE_LIST_REQUEST](state, {refresh}) {
state.fetchArticleList = true;
if (refresh) {
... ...
... ... @@ -50,3 +50,6 @@ export const FETCH_NICE_GOODS_SUCCESS = 'FETCH_NICE_GOODS_SUCCESS';
export const FETCH_TOPIC_LIST_REQUEST = 'FETCH_TOPIC_LIST_REQUEST';
export const FETCH_TOPIC_LIST_FAILD = 'FETCH_TOPIC_LIST_FAILD';
export const FETCH_TOPIC_LIST_SUCCESS = 'FETCH_TOPIC_LIST_SUCCESS';
export const OPEN_COMENT_INPUT = 'OPEN_COMENT_INPUT';
export const INIT_COMENT_INPUT = 'INIT_COMENT_INPUT';
... ...
... ... @@ -10,6 +10,8 @@ module.exports = {
'transform-vue-jsx',
'@babel/transform-async-to-generator',
'@babel/proposal-object-rest-spread',
'@babel/syntax-dynamic-import'
'@babel/syntax-dynamic-import',
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator'
]
};
... ...
... ... @@ -81,7 +81,9 @@
},
"devDependencies": {
"@babel/core": "^7.2.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-async-to-generator": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.2.0",
... ...
... ... @@ -255,6 +255,14 @@
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-json-strings" "^7.2.0"
"@babel/plugin-proposal-nullish-coalescing-operator@^7.4.4":
version "7.4.4"
resolved "http://npm.yohops.com/@babel%2fplugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.4.4.tgz#41c360d59481d88e0ce3a3f837df10121a769b39"
integrity sha1-QcNg1ZSB2I4M46P4N98QEhp2mzk=
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-nullish-coalescing-operator" "^7.2.0"
"@babel/plugin-proposal-object-rest-spread@^7.2.0", "@babel/plugin-proposal-object-rest-spread@^7.3.1":
version "7.3.1"
resolved "http://npm.yohops.com/@babel%2fplugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.1.tgz#f69fb6a1ea6a4e1c503994a91d9cf76f3c4b36e8"
... ... @@ -269,6 +277,14 @@
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
"@babel/plugin-proposal-optional-chaining@^7.2.0":
version "7.2.0"
resolved "http://npm.yohops.com/@babel%2fplugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.2.0.tgz#ae454f4c21c6c2ce8cb2397dc332ae8b420c5441"
integrity sha1-rkVPTCHGws6Msjl9wzKui0IMVEE=
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-optional-chaining" "^7.2.0"
"@babel/plugin-proposal-unicode-property-regex@^7.2.0":
version "7.2.0"
resolved "http://npm.yohops.com/@babel%2fplugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.2.0.tgz#abe7281fe46c95ddc143a65e5358647792039520"
... ... @@ -295,6 +311,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-nullish-coalescing-operator@^7.2.0":
version "7.2.0"
resolved "http://npm.yohops.com/@babel%2fplugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.2.0.tgz#f75083dfd5ade73e783db729bbd87e7b9efb7624"
integrity sha1-91CD39Wt5z54Pbcpu9h+e577diQ=
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-object-rest-spread@^7.2.0":
version "7.2.0"
resolved "http://npm.yohops.com/@babel%2fplugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
... ... @@ -307,6 +330,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-optional-chaining@^7.2.0":
version "7.2.0"
resolved "http://npm.yohops.com/@babel%2fplugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.2.0.tgz#a59d6ae8c167e7608eaa443fda9fa8fa6bf21dff"
integrity sha1-pZ1q6MFn52COqkQ/2p+o+mvyHf8=
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-transform-arrow-functions@^7.2.0":
version "7.2.0"
resolved "http://npm.yohops.com/@babel%2fplugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
... ...