ycwh/miniapp/pages/components/detailbottom.vue

<template>
  <view class="dis-flex flex-x-between bottom-btns">
    <view class="dis-flex flex-y-center btn-active">
      <u-icon name="eye" color="#00aeec" size="18"></u-icon>
      <view class="btn-title">{{views || 0}}人阅读</view>
    </view>
    <view class="dis-flex flex-y-center" :class="{'btn-active':liked}" @click="like">
      <u-icon v-if="liked" name="thumb-up-fill" color="#00aeec" size="18"></u-icon>
      <u-icon v-else name="thumb-up" color="#7f7f7f" size="18"></u-icon>
      <view class="btn-title">{{likeNum || 0}}点赞</view>
    </view>
    <view class="dis-flex flex-y-center" :class="{'btn-active':collected}" @click="collection">
      <u-icon v-if="collected" name="star-fill" color="#00aeec" size="18"></u-icon>
      <u-icon v-else name="star" color="#7f7f7f" size="18"></u-icon>
      <view class="btn-title">{{collectNum || 0}}收藏数</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      liked: Boolean,
      collected: Boolean,
      views: Number,
      likeNum: Number,
      collectNum: Number,
      articleId: String,
      type: String,
    },
    data() {
      return {
        submitting: false,
      }
    },
    methods: {
      like() {
        if (this.liked) {
          this.cancelLike()
        } else {
          this.addLike()
        }
      },
      collection() {
        if (this.collected) {
          this.cancelCollection()
        } else {
          this.addCollection()
        }
      },
      addLike() {
        if (this.submitting) {
          return;
        }
        this.submitting = true;
        uni.showLoading()
        // 点赞
        this.$u.api.addLike(this.articleId, this.type).then(res => {
          this.submitting = false;
          uni.hideLoading()
          this.finishSave()
        }).catch(e => {
          this.submitting = false;
          uni.hideLoading()
        });
      },
      cancelLike() {
        if (this.submitting) {
          return;
        }
        this.submitting = true;
        uni.showLoading()
        // 取消点赞
        this.$u.api.cancelLike(this.articleId, this.type).then(res => {
          this.submitting = false;
          uni.hideLoading()
          this.finishSave()
        }).catch(e => {
          this.submitting = false;
          uni.hideLoading()
        });
      },
      addCollection() {
        if (this.submitting) {
          return;
        }
        this.submitting = true;
        uni.showLoading()
        // 收藏
        this.$u.api.addCollection(this.articleId, this.type).then(res => {
          this.submitting = false;
          uni.hideLoading()
          this.finishSave()
        }).catch(e => {
          this.submitting = false;
          uni.hideLoading()
        });
      },
      cancelCollection() {
        if (this.submitting) {
          return;
        }
        this.submitting = true;
        uni.showLoading()
        // 取消收藏
        this.$u.api.cancelCollection(this.articleId, this.type).then(res => {
          this.submitting = false;
          uni.hideLoading()
          this.finishSave()
        }).catch(e => {
          this.submitting = false;
          uni.hideLoading()
        });
      },
      finishSave() {
        this.$emit("doRefresh")
      }
    },
  }
</script>

<style scoped lang="scss">
  .bottom-btns {
    width: 100%;

    .btn-title {
      margin-left: 10rpx;
      color: #7f7f7f;
    }
  }

  .btn-active {
    .btn-title {
      color: #00aeec;
    }
  }
</style>