tnbapp/src/views/user/Collection.vue

<template>
  <el-row>
    <el-col :md="4">
      <el-menu
        :default-active="this.$route.path"
        router
        class="el-menu-vertical-demo"
      >
        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
          <i :class="item.icon" />
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :md="20">
      <div id="collection-list">
        <!--搜索结果面包屑-->
        <el-breadcrumb
          class="bread"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item>我的收藏：共 <span class="reslut">{{ totalSize }}</span> 条</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row v-if="totalSize !== 0" class="movie-list">
          <el-col style="text-align: right">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeFavlist"
            >删除收藏夹</el-button>
          </el-col>
          <el-col v-for="(item,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
            <div v-if="contentType === 1001">
              <el-card :body-style="{ padding: '0px' }" class="card">
                <div class="imgs">
                  <el-image
                    lazy
                    fit="cover"
                    class="coverImg"
                    :src="item.thumbnailUrl"
                    @click="showImages(index)"
                  />
                </div>
              </el-card>
            </div>
            <div v-else-if="contentType === 1002">
              <video-card :video="item" />
            </div>
            <div v-else-if="contentType === 1003" />
            <div v-else-if="contentType === 1004" />
            <div v-else>
              <span>未知 {{ contentType }}</span>
            </div>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              title="删除本收藏"
              @click.stop="removeCollection(item)"
            />
          </el-col>
          <el-col class="pagination">
            <el-pagination
              background
              :small="screenWidth <= 768"
              hide-on-single-page
              layout="prev, pager, next"
              :page-size="pageSize"
              :current-page="currentPage"
              :total="totalSize"
              @current-change="handleCurrentChange"
              @prev-click="handleCurrentChange"
              @next-click="handleCurrentChange"
            />
          </el-col>
        </el-row>
        <el-row v-else class="not-result">
          <el-col :span="12" :offset="6">
            <img src="@/assets/img/icon/not-collection.png">
            <div>你还没有收藏任何东西呢</div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import VideoCard from '@/components/card/VideoCard'
import {
  deleteFavlist,
  getUserFavlist,
  getFavlist,
  collectItem
} from '@/api/collect'

export default {
  name: 'Collection',
  components: { VideoCard },
  data() {
    return {
      navList: [],
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      favlist: null,
      contentType: 1001
    }
  },
  watch: {
    $route() {
      this.$router.go()
    }
  },
  created() {
    /* const myfavlist = localStorage.getItem('myfavlist')
    if (myfavlist !== undefined) {
      const myfavlist1 = JSON.parse(myfavlist)
      this.navList = []
      for (const item of myfavlist1) {
        this.navList.push(item)
      }
    } else {
      this.getUserFavlistWrapper()
    }*/
    const page = this.$route.query.page
    if (page !== undefined) {
      this.currentPage = parseInt(page)
    }

    const type = this.$route.query.contentType
    if (type !== undefined) {
      this.contentType = parseInt(type)
    }

    const favlistId1 = this.$route.query.favlistId
    if (favlistId1 === undefined) {
      // this.$router.push(this.navList[0].path)
      this.getUserFavlistWrapper()
    } else {
      const myfavlist = localStorage.getItem('myfavlist')
      const myfavlist1 = JSON.parse(myfavlist)
      this.navList = []
      for (const item of myfavlist1) {
        this.navList.push(item)
      }

      this.favlistId = favlistId1
      this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
    }

    document.title = '我的收藏夹'
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.dataList = []
      // 回到顶部
      scrollTo(0, 0)
    },
    getFavlistWrapper(favlistId, conentType, page) {
      getFavlist(favlistId, conentType, page).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.dataList = respData.list
          this.totalSize = respData.totalSize
        }
      })
    },
    getUserFavlistWrapper() {
      getUserFavlist().then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.navList = []
          for (const item of respData) {
            const contentType = item.contentType
            if (contentType === 1001) {
              this.navList.push({
                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
                name: item.favlistName,
                icon: 'el-icon-picture' })
            } else if (contentType === 1002) {
              this.navList.push({
                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
                name: item.favlistName,
                icon: 'el-icon-film' })
            } else if (contentType === 1003) {
              this.navList.push({
                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
                name: item.favlistName,
                icon: 'el-icon-headset' })
            } else if (contentType === 1004) {
              this.navList.push({
                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
                name: item.favlistName,
                icon: 'el-icon-document' })
            }
          }

          localStorage.setItem('myfavlist', JSON.stringify(this.navList))
        }
      })
    },
    showImages(index) {
      const imageUrls = []
      for (const i of this.dataList) {
        imageUrls.push(i.originalUrl)
      }

      this.$viewerApi({
        images: imageUrls,
        options: {
          initialViewIndex: index,
          movable: true,
          fullscreen: false,
          keyboard: true
        }
      })
    },
    // 移除收藏
    removeCollection(item) {
      this.$confirm('确认删除本收藏？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const jsonData = {}
        jsonData.contentType = 1001
        jsonData.contentId = item.imageFileId
        jsonData.collected = false
        collectItem(jsonData).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '移除成功!'
            })
            this.$router.go(0)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 删除收藏夹
    removeFavlist() {
      // 移除所有收藏
      this.$confirm('确认要删除收藏夹？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFavlist(this.favlistId).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '收藏夹已清空!'
            })

            this.$router.go(0)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }

  .coverImg {
    height: 120px !important;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}

.coverImg {
  width: 100%;
  height: 320px;
  display: block;
}

.card {
  margin-bottom: 20px;
  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
}

.imgs {
  position: relative;
}

#collection-list {
  padding-left: 6%;
  padding-right: 6%;
  padding-top: 30px;
}

.bread {
  font-size: 15px;
}

.movie-list {
  padding-top: 15px;
}

.reslut {
  color: red;
}

.not-result {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

.remove-slot {
  position: absolute;
  right: 5px;
  bottom: 2px;
}
</style>