✨ 1.文章点赞功能2.文章赞赏功能
This commit is contained in:
ronger
parent
1335dd9786
commit
58ecf2232b
@ -37,9 +37,9 @@
|
||||
<span>{{ item.label }}</span>
|
||||
</el-col>
|
||||
</template>
|
||||
<!-- <template slot="append">-->
|
||||
<!-- <el-button size="small" icon="el-icon-search" @click="search"></el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template slot="append">-->
|
||||
<!-- <el-button size="small" icon="el-icon-search" @click="search"></el-button>-->
|
||||
<!-- </template>-->
|
||||
</el-autocomplete>
|
||||
</el-col>
|
||||
<el-col :xs="6" :sm="6" :md="6" :xl="3" style="padding-top: 1rem;">
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"@chenfengyuan/vue-qrcode": "^1.0.2",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
||||
"@fortawesome/vue-fontawesome": "^2.0.0",
|
||||
"@nuxtjs/axios": "^5.12.2",
|
||||
|
||||
@ -51,7 +51,6 @@
|
||||
<el-button size="mini" @click="handleCommand('editTag')" plain>编辑标签</el-button>
|
||||
<el-button v-if="isPerfect" size="mini" @click="cancelPreference" plain>取消优选</el-button>
|
||||
<el-button v-else size="mini" @click="setPreference" plain>设为优选</el-button>
|
||||
|
||||
</template>
|
||||
<el-button size="mini" @click="handleCommand('share')" plain>分享</el-button>
|
||||
</el-col>
|
||||
@ -70,6 +69,46 @@
|
||||
<div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
|
||||
style="overflow: hidden;"></div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col v-if="article.portfolios && article.portfolios.length > 0">
|
||||
<portfolios-widget :portfolios="article.portfolios"></portfolios-widget>
|
||||
</el-col>
|
||||
<el-col v-if="user">
|
||||
<el-tooltip class="item" effect="dark" content="点赞" placement="top-start">
|
||||
<el-button type="text" style="font-size: 1.2rem;" @click="thumbsUp">
|
||||
<font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
|
||||
{{ article.articleThumbsUpCount }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="赞赏" placement="top-start">
|
||||
<el-button v-if="user.idUser === article.articleAuthorId" type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
|
||||
{{ article.articleSponsorCount }}
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
v-else
|
||||
title="赞赏本文作者 20 巴旦木？"
|
||||
@confirm="sponsor"
|
||||
>
|
||||
<el-button slot="reference" type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
|
||||
{{ article.articleSponsorCount }}
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col v-else>
|
||||
<el-tooltip class="item" effect="dark" content="点赞" placement="top-start">
|
||||
<el-button type="text" style="font-size: 1.2rem;">
|
||||
<font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
|
||||
{{ article.articleThumbsUpCount }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="赞赏" placement="top-start">
|
||||
<el-button type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
|
||||
{{ article.articleSponsorCount }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@ -91,7 +130,7 @@
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { mapState } from 'vuex';
|
||||
import {mapState} from 'vuex';
|
||||
import ShareBox from '~/components/widget/share';
|
||||
import PortfoliosWidget from '~/components/widget/portfolios';
|
||||
import EditTags from '~/components/widget/tags';
|
||||
@ -231,7 +270,7 @@ export default {
|
||||
},
|
||||
closeTagsDialog() {
|
||||
this.$set(this, 'dialogVisible', false);
|
||||
this.$store.dispatch('article/fetchDetail', this.$route.params)
|
||||
this.$store.dispatch('article/fetchDetail', this.$route.params);
|
||||
},
|
||||
followUser(idUser) {
|
||||
let _ts = this;
|
||||
@ -243,7 +282,7 @@ export default {
|
||||
_ts.$set(_ts, 'isFollow', res);
|
||||
})
|
||||
} else {
|
||||
_ts.gotoLogin()
|
||||
_ts.gotoLogin();
|
||||
}
|
||||
},
|
||||
cancelFollowUser(idUser) {
|
||||
@ -256,7 +295,7 @@ export default {
|
||||
_ts.$set(_ts, 'isFollow', res);
|
||||
})
|
||||
} else {
|
||||
_ts.gotoLogin()
|
||||
_ts.gotoLogin();
|
||||
}
|
||||
},
|
||||
setPreference() {
|
||||
@ -290,6 +329,37 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
thumbsUp() {
|
||||
let _ts = this;
|
||||
_ts.$axios.$post('/api/article/thumbs-up', {
|
||||
idArticle: _ts.article.idArticle
|
||||
}).then(function (res) {
|
||||
if (res) {
|
||||
if (res.success) {
|
||||
_ts.$message.success(res.message);
|
||||
_ts.$store.dispatch('article/updateThumbsUpCount', {thumbsUpNumber: res.thumbsUpNumber})
|
||||
} else {
|
||||
_ts.$message.error(_ts.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
sponsor() {
|
||||
let _ts = this;
|
||||
_ts.$axios.$post('/api/article/sponsor', {
|
||||
dataType: '0',
|
||||
dataId: _ts.article.idArticle
|
||||
}).then(function (res) {
|
||||
if (res) {
|
||||
if (res.success) {
|
||||
_ts.$message.success(res.message);
|
||||
_ts.$store.dispatch('article/updateSponsorCount', {sponsorNumber: 1})
|
||||
} else {
|
||||
_ts.$message.error(_ts.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -3,6 +3,7 @@ import { library, config } from '@fortawesome/fontawesome-svg-core'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import { fab } from '@fortawesome/free-brands-svg-icons'
|
||||
import { far } from '@fortawesome/free-regular-svg-icons'
|
||||
|
||||
// This is important, we are going to let Nuxt.js worry about the CSS
|
||||
config.autoAddCss = false
|
||||
@ -11,6 +12,7 @@ config.autoAddCss = false
|
||||
// can add other styles or just individual icons.
|
||||
library.add(fas)
|
||||
library.add(fab)
|
||||
library.add(far)
|
||||
|
||||
// Register the component globally
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
||||
|
||||
@ -53,6 +53,12 @@ export const mutations = {
|
||||
'isRenderedFullContent',
|
||||
action == null ? true : action
|
||||
)
|
||||
},
|
||||
updateArticleThumbsUpCount(state, action) {
|
||||
state.detail.data.articleThumbsUpCount += action.thumbsUpNumber
|
||||
},
|
||||
updateArticleSponsorCount(state, action) {
|
||||
state.detail.data.articleSponsorCount += action.sponsorNumber
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,5 +149,11 @@ export const actions = {
|
||||
commit('updateDetailFetching', false)
|
||||
return Promise.reject(error)
|
||||
})
|
||||
},
|
||||
updateThumbsUpCount({ commit }, params = {}) {
|
||||
commit('updateArticleThumbsUpCount', params)
|
||||
},
|
||||
updateSponsorCount({ commit }, params = {}) {
|
||||
commit('updateArticleSponsorCount', params)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user