文章列表更多操作

通用组件准备

目标：准备弹窗层组件（封装独立的组件）

文件路径src/components/more-action.vue

popup 组件 (opens new window)

• 基本组件布局

<template>
  <van-popup :value="value" @input="$emit('input',$event)" @open="isReport=false">
    <van-cell-group v-if="!isReport">
      <van-cell>不感兴趣</van-cell>
      <van-cell is-link @click="isReport=true">反馈垃圾内容</van-cell>
      <van-cell>拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport=false">返回</van-cell>
      <van-cell>侵权</van-cell>
      <van-cell>色情</van-cell>
      <van-cell>暴力</van-cell>
      <van-cell>低俗</van-cell>
      <van-cell>不适</van-cell>
      <van-cell>错误</van-cell>
      <van-cell>其他</van-cell>
    </van-cell-group>
  </van-popup>
</template>

<script>
export default {
  name: 'MoreAction',
  props: {
    // 配置父组件传递过来的数据的类型（防止传递的数据格式有问题）
    // 增强组件封装的严谨性
    // Vue官方说明：https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    // 控制举报窗口
    return {
      isReport: false
    }
  }
}
</script>

<style scoped lang='less'>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>

• 导入并使用组件

// 导入组件
import MoreAction from '@/components/more-action.vue'
// 配置组件
components: { MoreAction },
// data 中提供弹窗属性
showMoreAction: false

<more-action v-model="showMoreAction"></more-action>

• 点击按钮控制弹窗

<span class="close" @click="showMoreAction=true">
  <van-icon name="cross"></van-icon>
</span>

获取不感兴趣文章的id

目标：实现不感兴趣功能

• 点击按钮时传入文章id

<span v-if="user.token" class="close" @click="openMorenActionWidnow(article.art_id)">
  <van-icon name="cross"></van-icon>
</span>

• 获取文章id

// data总提供 articleId: null
openMorenActionWidnow (id) {
  this.showMoreAction = true
  this.articleId = id.toString()
},

• 文章id注入子组件

<more-action 
   v-model="showMoreAction" 
   :articleId="articleId">
</more-action>

不感兴趣功能实现

目标：封装不喜欢接口调用方法

• 封装接口调用方法

// 不喜欢文章方法
export const disLike = (articleId) => {
  return request({
    method: 'post',
    url: 'v1_0/article/dislikes',
    data: {
      target: articleId
    }
  })
}

• 点击按钮发送请求

<van-cell icon="closed-eye" @click="disLike">不感兴趣</van-cell>

// 实现不感兴趣接口
export const dislike = (articleId) => {
  return request({
    method: 'post',
    url: 'v1_0/article/dislikes',
    data: {
      target: articleId
    }
  })
}
// ----------------------------------------------------
import { dislike } from '@/api/api-article.js'
async dislike () {
  // 调用接口实现不感兴趣功能
  const [err] = await dislike(this.articleId)
  if (err) {
    // 不感兴趣功能失败
    this.$toast.fail('操作失败')
  } else {
    // 不感兴趣功能成功
    this.$toast.success('操作成功')
  }
  // 关闭弹窗(通过父组件关闭弹窗)
  this.$emit('input', false)
}

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

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

removeArticle (articleId) {
  // 删除不感兴趣的文章
  const articles = this.activeChannel.articles
  // 根据文章的id查找文章索引
  const index = articles.findIndex(item => {
    return item.art_id.toString() === articleId
  })
  // 删除数组中指定索引位置的数据
  articles.splice(index, 1)
},

举报文章列表基本布局

目标：实现删除文章布局

• 定义常量信息

文件路径src/utils/constant.js

/**
 * 举报类型
 */
export const reports = [
  { 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: '侵权' }
]

• 使用常量数据

import { reports } from '@/utils/constant.js'

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

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

举报文章功能实现

目标：实现举报文章功能

• 封装举报文章接口调用方法

// 举报文章
export const report = (articleId, type) => {
  return request({
    method: 'post',
    url: 'v1_0/article/reports',
    data: {
      target: articleId,
      type: type
    }
  })
}

• 绑定点击事件，发请求

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

import { disLike, report } from '@/api/api-article.js'
async report (type) {
  const [err] = await report(this.articleId, type)
  if (err) {
    this.$toast.fail('举报失败')
  } else {
    this.$toast.success('举报成功')
    // 通知父组件删除文章
    this.$emit('on-success', this.articleId)
  }
  // 关闭弹窗(通过父组件关闭弹窗)
  this.$emit('input', false)
},