09-1 回收站介绍.md

huishouzhan.png

回收站接口

import request from '@/utils/request';

const URL = {
  GET: '/notes/trash',
  REVERT: '/notes/:noteId/revert',
  DELETE: '/notes/:noteId/confirm'
}

export default {
  getAll() {
    return request(URL.GET)
  },
  revertNote({ noteId }) {
    return request(URL.REVERT.replace(':noteId', noteId),'PATCH')
  },
  deleteNote({ noteId }) {
    return request(URL.DELETE.replace(':noteId', noteId), 'DELETE')
  }
}

回收站布局

<template>
  <div class="trash">
    <Card style="width:22%;margin-bottom: 16px;height: 220px"  v-for='item in notesOfTrash' :key='item.id'>
        <p slot="title">
            <Icon type="ios-film-outline"></Icon>
            {{item.title}}
        </p>
        <a  href="javascript:;" slot="extra" @click.prevent="handleReverse(item.id)" sytle="color: #ed4014">
            <Icon type="md-sync"  color="#19be6b" size="22"/>
        </a>
        <a  href="javascript:;" slot="extra" @click.prevent="handleDelete(item.id)" sytle="color: #ed4014">
            <Icon type="ios-trash-outline"  color="#ed4014" size="22"/>
        </a>
        <div class='trash-content ellipsis'>
          {{item.content}}
        </div>
    </Card>
  </div>
</template>


<script>
import TRASH from '../apis/Trash'
export default {
  data(){
    return {
      notesOfTrash: null,
    }
  },
  created(){
    this.getAll()
  },
  methods: {
    getAll(){
      TRASH.getAll().then(res=>{
        console.log(res.data)
        this.notesOfTrash = res.data
      })
    },
    handleDelete(id){
    this.$Modal.confirm({
      title: '您确定要删除嘛？',
      content: '删除后的笔记不可找回',
      closable: true,
      onOk: ()=>{
        TRASH.deleteNote({noteId:id}).then(res=>{
        console.log(res)
        this.notesOfTrash = this.notesOfTrash.filter(item=>item.id!==id)
        this.$Message.success("删除成功")
      })
      }
    })
    },
    handleReverse(id){
      TRASH.revertNote({noteId: id}).then(res=>{
        this.notesOfTrash = this.notesOfTrash.filter(item=>item.id!==id)
        this.$Message.success("笔记已恢复")
      })
    }
  }
}
</script>

<style lang='less' scoped>
.trash {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .trash-content {
    overflow-wrap: break-word;

  }
}
</style>