更多操作 (三) -举报文章——新建定义举报类型常量数据-导入使用数据-绑定事件进行提示

更多操作-举报文章——新建定义举报类型常量数据-导入使用数据-绑定事件进行提示

• 根据接口提供的传参，新建定义常量数据 src/api/constants.js

// 举报类型
export const reportType = [
  { value: 0, label: '其他问题' },
  { value: 1, label: '标题夸张' },
  { value: 2, label: '低俗色情' },
  { value: 3, label: '错别字多' },
  { value: 4, label: '旧闻重复' },
  { value: 5, label: '广告软文' },
  { value: 6, label: '内容不实' },
  { value: 7, label: '涉嫌违法犯罪' },
  { value: 8, label: '侵权' }
]

• 使用数据 src/vies/home/components/more-action.vue中的script里 导入

import { reportType } from '@/api/constants'

  data () {
    return {
      isReport: false,
+     reportType
    }
  },

<van-cell icon="info-o" v-for="item in reportType" :key="item.value">
  {{item.label}}
</van-cell>

• 举报api src/api/article.js

/**
 * 举报文章
 * @param {Obejct,Number} articleId - 文章ID
 * @param {Integer} type - 举报类型
 */
export const report = (articleId, type) => {
  return request('/app/v1_0/article/reports', 'post', {
    target: articleId,
    type
  })
}

• 绑定点击事件，发请求

import { reportType } from '@/api/constants'

<van-cell icon="info-o" @click="report(item.value)"

src/vies/home/components/more-action.vue中的methods里

   // 举报文章
    async report (type) {
      try {
        await report(this.articleId, type)
        // 1. 提示成功
        this.$toast({ type: 'success', message: '操作成功' })
        // 2. 关闭对话框
        this.$emit('input', false)
        // 3. 删除 父组件  对应文章
        this.$emit('on-report')
      } catch (e) {
        if (e.response.status === 409) {
          this.$toast('文章已经举报')
        } else {
          this.$toast({ type: 'fail', message: '操作失败' })
        }
      }
    }

• 成功后 通知父组件 删除文章

  src/vies/home/index.vue中的div里

<more-action
      v-if="auth.token"
      v-model="showMoreAction"
      @on-dislike="removeArticle"
+     @on-report="removeArticle"
      :articleId="articleId" >
    </more-action>