Blame view

apps/pages/article/components/detail/article-footer.vue 1.54 KB
htoooth authored
1 2 3
<template>
  <div class="article-footer-wrapper">
    <div class="tool-bar">
htoooth authored
4 5
      <WidgetIconBtn class="item" type="fav" :text="praiseCount" :articleId="articleId" :option="optionPraise"></WidgetIconBtn>
      <WidgetIconBtn class="item" type="star" :text="favoriteCount" :articleId="articleId" :option="optionFav" ></WidgetIconBtn>
htoooth authored
6
      <WidgetIconBtn class="item" type="msg" :text="commentCount" :option="optionComment" @click="onComment"></WidgetIconBtn>
htoooth authored
7
    </div>
htoooth authored
8
    <div class="close ml20" @click="onClose">收起</div>
htoooth authored
9 10 11 12
  </div>
</template>

<script>
htoooth authored
13
htoooth authored
14 15
export default {
  name: 'ArticleFooter',
htoooth authored
16
  props: ['favoriteCount', 'praiseCount', 'commentCount', 'hasFavor', 'hasPraise', 'articleId'],
htoooth authored
17 18
  data() {
    return {
htoooth authored
19 20 21 22 23 24 25 26
      optionPraise: {
        selected: this.hasPraise === 'Y'
      },
      optionFav: {
        selected: this.hasFavor === 'Y'
      },
      optionComment: {
        emitName: 'click',
htoooth authored
27
        canSelect: false
htoooth authored
28
      },
htoooth authored
29 30
    };
  },
htoooth authored
31 32
  computed: {
  },
htoooth authored
33 34
  mounted() {
  },
htoooth authored
35
  methods: {
htoooth authored
36 37
    onComment() {
      this.$emit('on-comment-click');
htoooth authored
38 39 40
    },
    onClose() {
      this.$emit('on-close');
htoooth authored
41 42 43 44 45 46 47 48 49 50
    }
  },
};
</script>

<style lang="scss" scoped>

.article-footer-wrapper {
  display: flex;
  height: 100px;
htoooth authored
51 52
  border-top: 1px solid #e0e0e0;
  background-color: white;
htoooth authored
53 54 55 56
}

.tool-bar {
  flex: 1;
htoooth authored
57 58 59
  display: flex;
  align-items: center;
  justify-content: space-around;
htoooth authored
60 61 62 63 64 65 66 67 68 69 70
}

.close {
  width: 200px;
  color: white;
  font-size: 32px;
  line-height: 100px;
  background-color: #d0021b;
  text-align: center;
}
htoooth authored
71 72 73 74
.ml20 {
  margin-left: 20px;
}
htoooth authored
75
</style>