|
|
<template>
|
|
|
<div class="icon-btn" @click="onClick" :style="btnStyle">
|
|
|
<i class="iconfont" :class="iconClass" :style="iconStyle"></i>
|
|
|
<p v-if="text" class="icon-btn-text" :style="textStyle">
|
|
|
<p v-if="viewText" class="icon-btn-text" :style="textStyle">
|
|
|
<span class="view-text">{{viewText}}</span>
|
|
|
<span class="placeholder-text">{{text}}</span>
|
|
|
<span class="placeholder-text">{{placText}}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {forEach, get} from 'lodash';
|
|
|
import {forEach, get, fill} from 'lodash';
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
const {mapActions} = createNamespacedHelpers('user');
|
|
|
|
...
|
...
|
@@ -51,7 +51,12 @@ |
|
|
type: String,
|
|
|
default: 'fav'
|
|
|
},
|
|
|
text: [String, Number],
|
|
|
text: {
|
|
|
type: [String, Number],
|
|
|
default() {
|
|
|
return '';
|
|
|
}
|
|
|
},
|
|
|
articleId: Number,
|
|
|
commentId: Number,
|
|
|
option: {
|
...
|
...
|
@@ -125,7 +130,14 @@ |
|
|
return style;
|
|
|
},
|
|
|
viewText() {
|
|
|
return this.editText === null ? this.text : this.editText;
|
|
|
return `${(this.editText === null ? this.text : this.editText)}`;
|
|
|
},
|
|
|
placText() {
|
|
|
if (!isNaN(Number(this.text)) && this.viewText.length) {
|
|
|
return fill(Array(this.viewText.length), 0).join('');
|
|
|
} else {
|
|
|
return `${this.text}`;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
...
|
...
|
@@ -179,7 +191,7 @@ |
|
|
if (this._type === 'fav') {
|
|
|
syncFnName = 'praiseArticle';
|
|
|
} else if (this._type === 'star') {
|
|
|
syncFnName = 'praiseArticle';
|
|
|
syncFnName = 'followArticle';
|
|
|
}
|
|
|
} else if (this.commentId && this._type === 'fav') {
|
|
|
syncFnName = 'praiseComment';
|
...
|
...
|
@@ -192,10 +204,16 @@ |
|
|
|
|
|
if (res.code !== 200) {
|
|
|
this.changeBtnStatus();
|
|
|
}
|
|
|
|
|
|
if (res.code === 401) {
|
|
|
// TODO go_login
|
|
|
if (res.code === 401) {
|
|
|
// TODO go_login
|
|
|
} else {
|
|
|
this.$createToast && this.$createToast({
|
|
|
txt: res.message || '服务器开小差了',
|
|
|
type: 'warn',
|
|
|
time: 1000
|
|
|
}).show();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
...
|
...
|
|