Blame view

apps/pages/article/components/detail/more-action-sheet.vue 4.72 KB
yyq authored
1
<template>
陈峰 authored
2
  <YohoActionSheet :transfer="transfer" class="more-action-sheet" ref="actionSheet">
yyq authored
3 4 5
    <div class="action-wrap">
      <div class="action-list">
        <div class="action-item" v-for="(i, index) in list" :key="index" v-show="!i.hide" @click="onClick(i.fnName)">
yyq authored
6 7 8 9 10 11
          <a :href="i.href || 'javascript:;'">
            <p class="icon">
              <span class="iconfont" :class="i.icon"></span>
            </p>
            <p class="name">{{i.name}}</p>
          </a>
yyq authored
12 13 14 15 16 17 18 19
        </div>
      </div>
      <div class="cancel" @click="hide">取消</div>
    </div>
  </YohoActionSheet>
</template>

<script>
yyq authored
20
import version from 'utils/version';
yyq authored
21
import {createNamespacedHelpers} from 'vuex';
yyq authored
22 23
const {mapState: mapArticleState, mapActions: mapArticleActions} = createNamespacedHelpers('article');
const {mapActions: mapUserActions} = createNamespacedHelpers('user');
yyq authored
24 25 26

export default {
  name: 'MoreActionSheetPage',
陈峰 authored
27 28 29
  props: {
    transfer: Boolean
  },
yyq authored
30 31 32 33 34 35 36 37 38 39 40 41 42 43
  data() {
    return {
      list: [
        {
          icon: 'icon-fav-cancel',
          name: '取消关注',
          fnName: 'actionCancelFav'
        },
        {
          icon: 'icon-warn',
          name: '举报',
          fnName: 'actionrReport'
        },
        {
yyq authored
44
          icon: 'icon-edit',
yyq authored
45 46
          name: '编辑',
          fnName: 'actionEdit'
yyq authored
47 48
        },
        {
yyq authored
49 50 51 52 53 54 55
          icon: 'icon-delete',
          name: '删除',
          fnName: 'actionDelete'
        }
      ]
    };
  },
yyq authored
56 57 58
  computed: {
    ...mapArticleState(['authorStates'])
  },
yyq authored
59
  methods: {
yyq authored
60 61 62
    ...mapArticleActions(['reportArticle', 'deleteArticle']),
    ...mapUserActions(['followUser']),
    show(article, uid, index) {
yyq authored
63
      this.index = index || 0;
yyq authored
64
      article = article || {};
yyq authored
65
yyq authored
66
      const authorState = this.authorStates[`${article.authorUid}-${article.authorType}`] || article;
yyq authored
67
yyq authored
68
      this.list[0].hide = authorState.hasAttention !== 'Y';
yyq authored
69
yyq authored
70
      this.list[2].href = `?openby:yohobuy={"action":"go.editPost","params":{"articleId":"${article.articleId}"}}`;
yyq authored
71
      this.list[2].hide = article.sort === 2 || version(this.$yoho.appVersion, '6.9.5') < 0 || article.isAuthor !== 'Y';
yyq authored
72
      this.list[3].hide = article.isAuthor !== 'Y';
yyq authored
73 74
      this.list = [...this.list];
yyq authored
75
      this._article = article;
yyq authored
76 77 78 79 80 81 82 83 84 85 86
      this.$refs.actionSheet.show();
    },
    hide() {
      this.$refs.actionSheet.hide();
    },
    actionrReport() {
      this.$createToast({
        txt: '举报成功',
        type: 'correct',
        time: 1000
      }).show();
yyq authored
87
      this.reportArticle(this._article);
yyq authored
88
      this.$emit('on-report', this._article);
yyq authored
89 90
    },
    actionCancelFav() {
yyq authored
91
      let {authorUid, authorType} = this._article;
yyq authored
92 93 94

      this.followUser({
        followUid: authorUid,
yyq authored
95
        status: 1,
yyq authored
96 97 98
        authorType
      }).then(res => {
        if (res.code === 200) {
yyq authored
99
          this.$emit('on-follow', this._article);
yyq authored
100 101 102
        }
      });
    },
yyq authored
103 104 105
    actionEdit() {
      this.$emit('on-edit', this._article);
    },
yyq authored
106 107 108 109 110 111 112 113
    actionDelete() {
      this.$createDialog({
        type: 'confirm',
        title: '确认删除该文章?',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
yyq authored
114
          href: 'javascript:;' // eslint-disable-line
yyq authored
115 116 117 118 119
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
yyq authored
120
          href: 'javascript:;' // eslint-disable-line
yyq authored
121 122
        },
        onConfirm: () => {
yyq authored
123
          this.deleteArticle(this._article).then(res => {
yyq authored
124
            if (res.code === 200) {
yyq authored
125
              this.$emit('on-delete', this.index);
yyq authored
126 127 128 129 130 131 132 133 134
            } else {
              this.$createToast({
                type: 'warn',
                time: 1000,
                txt: '删除失败了'
              }).show();
            }
          });
        }
yyq authored
135
      }).show();
yyq authored
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
    },
    onClick(name) {
      this[name] && this[name]();
      this.hide();
    }
  }
};
</script>


<style scoped lang="scss">
/deep/ .yoho-popup {
  &:after,
  > .yoho-popup-container {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.action-wrap {
  color: #444;

  .action-list {
    width: 100%;
yyq authored
159
    padding: 20px 0 20px 60px;
yyq authored
160 161 162 163 164 165 166
    border-bottom: 1PX solid #d7d7d7;
    display: flex;
  }

  .action-item {
    width: 128px;
    padding: 12px 0;
yyq authored
167
    margin-right: 40px;
yyq authored
168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200

    .icon {
      width: 88px;
      height: 88px;
      line-height: 92px;
      border-radius: 50%;
      margin: 0 auto 16px;
      background-color: #fff;
      text-align: center;
      overflow: hidden;
    }

    .iconfont {
      font-size: 48px;
      color: #b0b0b0;
    }

    .name {
      font-size: 24px;
      text-align: center;
      transform: scale(0.9, 0.9);
      opacity: 0.65;
    }
  }

  .cancel {
    line-height: 88px;
    font-size: 32px;
    letter-spacing: 0.05px;
    text-align: center;
  }
}
</style>