|
|
<template>
|
|
|
<div class="icon-btn" @click="onClick" :style="btnStyle">
|
|
|
<AuthComponent :auth="isAuth" class="icon-btn" @click="onClick" :style="btnStyle">
|
|
|
<i class="iconfont" :class="iconClass" :style="iconStyle"></i>
|
|
|
<p v-if="viewText" class="icon-btn-text" :style="textStyle">
|
|
|
<span class="view-text">{{viewText}}</span>
|
|
|
<span class="placeholder-text">{{placText}}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</AuthComponent>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {forEach, get, fill} from 'lodash';
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
const {mapActions} = createNamespacedHelpers('user');
|
|
|
import {forEach, fill} from 'lodash';
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
const {mapActions} = createNamespacedHelpers('user');
|
|
|
|
|
|
const classMap = {
|
|
|
const classMap = {
|
|
|
fav: {
|
|
|
default: 'icon-zan',
|
|
|
selected: 'icon-zan-fill'
|
...
|
...
|
@@ -28,9 +28,9 @@ |
|
|
msg: {
|
|
|
default: 'icon-msg'
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
|
|
|
const defaultOption = {
|
|
|
const defaultOption = {
|
|
|
canSelect: true, // 是否支持选中
|
|
|
selected: false, // 初始选中状态(不受是否支持选中控制)
|
|
|
color: '#444', // btn字体颜色
|
...
|
...
|
@@ -42,9 +42,9 @@ |
|
|
textZoom: 0.9, // text缩放
|
|
|
textAutoChange: true, // text自动增减,只支持number类型(受是否支持选中控制)
|
|
|
emitName: '' // 点击触发事件名称
|
|
|
};
|
|
|
};
|
|
|
|
|
|
export default {
|
|
|
export default {
|
|
|
name: 'WidgetIconBtn',
|
|
|
props: {
|
|
|
type: {
|
...
|
...
|
@@ -72,7 +72,7 @@ |
|
|
btnSelected: false,
|
|
|
actionClass: '',
|
|
|
editText: null
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
forEach(defaultOption, (value, key) => {
|
...
|
...
|
@@ -81,6 +81,20 @@ |
|
|
this.viewOption = {...this.viewOption};
|
|
|
},
|
|
|
computed: {
|
|
|
syncFnName() {
|
|
|
if (this.articleId) {
|
|
|
if (this.type === 'fav') {
|
|
|
return 'praiseArticle';
|
|
|
} else if (this.type === 'star') {
|
|
|
return 'followArticle';
|
|
|
}
|
|
|
} else if (this.commentId && this.type === 'fav') {
|
|
|
return 'praiseComment';
|
|
|
}
|
|
|
},
|
|
|
isAuth() {
|
|
|
return !!this.syncFnName;
|
|
|
},
|
|
|
btnStyle() {
|
|
|
let color = this.viewOption.color || defaultOption.color;
|
|
|
|
...
|
...
|
@@ -90,19 +104,17 @@ |
|
|
if (this.actionClass) {
|
|
|
return this.actionClass;
|
|
|
}
|
|
|
|
|
|
if (!this._icon) {
|
|
|
this._type = classMap[this.type] ? this.type : 'fav'
|
|
|
this._icon = classMap[this._type];
|
|
|
}
|
|
|
if (classMap[this.type]) {
|
|
|
const currentClass = classMap[this.type];
|
|
|
|
|
|
if (this.viewOption.selected) {
|
|
|
this.btnSelected = true;
|
|
|
|
|
|
return this._icon.selected || this._icon.default;
|
|
|
return currentClass.selected || currentClass.default;
|
|
|
}
|
|
|
|
|
|
return this._icon.default;
|
|
|
return currentClass.default;
|
|
|
}
|
|
|
},
|
|
|
iconStyle() {
|
|
|
return `font-size: ${this.pxToRem(this.viewOption.iconFontSize)};`;
|
...
|
...
|
@@ -145,7 +157,7 @@ |
|
|
const rootValue = 40;
|
|
|
|
|
|
if (typeof px !== 'number') {
|
|
|
px = parseInt(`0${px}`);
|
|
|
px = parseInt(`0${px}`, 10);
|
|
|
}
|
|
|
|
|
|
if (px > 2) {
|
...
|
...
|
@@ -158,15 +170,13 @@ |
|
|
this.btnSelected = !this.btnSelected;
|
|
|
|
|
|
if (this.viewOption.textAutoChange) {
|
|
|
let _text = this.editText || this.text;
|
|
|
|
|
|
if (!isNaN(Number(this.viewText))) {
|
|
|
this.editText = Number(this.viewText) + (this.btnSelected ? 1 : -1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (this._icon.selected) {
|
|
|
this.actionClass = this.btnSelected ? this._icon.selected : this._icon.default;
|
|
|
if (classMap[this.type]) {
|
|
|
this.actionClass = this.btnSelected ? classMap[this.type].selected : classMap[this.type].default;
|
|
|
}
|
|
|
},
|
|
|
syncService(type, data) {
|
...
|
...
|
@@ -183,56 +193,32 @@ |
|
|
|
|
|
if (this.viewOption.canSelect) {
|
|
|
this.changeBtnStatus();
|
|
|
|
|
|
let syncFnName = '';
|
|
|
|
|
|
if (this.articleId) {
|
|
|
if (this._type === 'fav') {
|
|
|
syncFnName = 'praiseArticle';
|
|
|
} else if (this._type === 'star') {
|
|
|
syncFnName = 'followArticle';
|
|
|
}
|
|
|
} else if (this.commentId && this._type === 'fav') {
|
|
|
syncFnName = 'praiseComment';
|
|
|
}
|
|
|
|
|
|
if (syncFnName) {
|
|
|
if (!this.auth()) {
|
|
|
return this.changeBtnStatus();
|
|
|
}
|
|
|
|
|
|
const backFn = (res) => {
|
|
|
this.syncing = false;
|
|
|
|
|
|
if (res.code !== 200) {
|
|
|
this.changeBtnStatus();
|
|
|
|
|
|
if (res.code === 401) {
|
|
|
// TODO go_login
|
|
|
} else {
|
|
|
this.$createToast && this.$createToast({
|
|
|
txt: res.message || '服务器开小差了',
|
|
|
type: 'warn',
|
|
|
time: 1000
|
|
|
}).show();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
this.syncing = true;
|
|
|
|
|
|
this.syncService(syncFnName, {
|
|
|
this.syncService(this.syncFnName, {
|
|
|
articleId: this.articleId,
|
|
|
commentId: this.commentId,
|
|
|
status: this.btnSelected
|
|
|
}).then(backFn).catch(backFn);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.viewOption.emitName && this.$emit(this.viewOption.emitName, evt);
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style type="scss">
|
...
|
...
|
|