|
|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <div :class="{collectionCenterMobile: mobile, collectionCenter: !mobile}">
|
|
|
+ <div class="leftContent" v-if="!mobile">
|
|
|
+ <div class="stitle">
|
|
|
+ 全部收藏
|
|
|
+ </div>
|
|
|
+ <div class="sList">
|
|
|
+ <div class="cell selected">
|
|
|
+ 链接
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightContent">
|
|
|
+ <div class="topSelectArea">
|
|
|
+ <div class="list">
|
|
|
+ <div class="cell"
|
|
|
+ v-for="item in sList"
|
|
|
+ :class="{selected: selectedTypeIndex === item.type}"
|
|
|
+ @click="changeSelectedIndex(item)"
|
|
|
+ >
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bodyArea" v-loading="loading">
|
|
|
+ <div class="list" v-if="dataList.length">
|
|
|
+ <div class="cell" v-for="item in dataList" :key="item.id">
|
|
|
+ <div class="left">
|
|
|
+ <img :src="item.cover_url" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="ctitle">{{item.title}}</div>
|
|
|
+ <div class="links">{{item.url}}</div>
|
|
|
+ <div class="timeArea">
|
|
|
+ <div class="time">
|
|
|
+ {{item.create_at}}
|
|
|
+ </div>
|
|
|
+ <div class="laber" @click="changeSelectedIndex(item)">
|
|
|
+ {{TypeOption[item.type] || '其他'}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="delIcon" @click="delConnectionHandler(item)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="emptyBlock" v-else-if="!loading">
|
|
|
+ <img src="@/assets/img/common/empty@2x.png" alt="" />
|
|
|
+ <p>暂无数据</p>
|
|
|
+ </div>
|
|
|
+ <div class="pagination" v-if="!mobile">
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="page.total"
|
|
|
+ :page-size="page.size" @current-change="pageChange" :current-page="Number(page.page
|
|
|
+ )"></el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const TypeOption = {
|
|
|
+ "1": "兼职招聘",
|
|
|
+ "2": "解决方案",
|
|
|
+ "3": "程序员主页",
|
|
|
+ "4": "企业主页",
|
|
|
+ "5": "文章",
|
|
|
+ "6": "视频",
|
|
|
+ }
|
|
|
+ /** 收藏中心 **/
|
|
|
+ export default {
|
|
|
+ name: "CollectionCenter",
|
|
|
+ showCommonFooter: false,
|
|
|
+ components: {},
|
|
|
+ head() {
|
|
|
+ let obj = {
|
|
|
+ title: "我的收藏-程序员客栈",
|
|
|
+ meta: [
|
|
|
+ {
|
|
|
+ 'name': 'keywords',
|
|
|
+ 'content': ""
|
|
|
+ }, {
|
|
|
+ 'name': 'descrption',
|
|
|
+ 'content': ""
|
|
|
+ }, {
|
|
|
+ 'name': 'h1',
|
|
|
+ 'content': ""
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ },
|
|
|
+ async asyncData({ app }) {
|
|
|
+ return {
|
|
|
+ mobile: app.$deviceType.isMobile()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ TypeOption,
|
|
|
+ page: {
|
|
|
+ page: 1,
|
|
|
+ total: 0,
|
|
|
+ size: 20,
|
|
|
+ },
|
|
|
+ sList: [
|
|
|
+ {name: "全部链接", type: 0},
|
|
|
+ {name: "兼职招聘", type: 1},
|
|
|
+ {name: "文章", type: 5},
|
|
|
+ {name: "程序员主页", type: 3},
|
|
|
+ {name: "企业主页", type: 4},
|
|
|
+ {name: "解决方案", type: 2},
|
|
|
+ {name: "视频", type: 6},
|
|
|
+ ],
|
|
|
+ selectedTypeIndex:0,
|
|
|
+
|
|
|
+ dataList: [],
|
|
|
+ finished: false, //移动端列表是否完全加载完成
|
|
|
+ loading: true, //web端列表首次加载loading
|
|
|
+ refreshing: false,
|
|
|
+ firstLoading: false, //移动端加载loading
|
|
|
+ isLoading: false //控制防止一次没响应，重复请求接口
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ this.checkLogin()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeSelectedIndex(item) {
|
|
|
+ let {type} = item
|
|
|
+ type = Number(type || 0)
|
|
|
+ console.log("item", item)
|
|
|
+ if (this.selectedTypeIndex !== type) {
|
|
|
+ this.selectedTypeIndex = type
|
|
|
+ this.page.page = 1
|
|
|
+ this.page.total = 0
|
|
|
+ this.dataList = []
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ const { page, selectedTypeIndex } = this
|
|
|
+ let url = "/api/collection_center/list"
|
|
|
+ if (this.isLoading) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ ...page,
|
|
|
+ type: selectedTypeIndex
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ this.isLoading = true
|
|
|
+ this.$axios.post(url, data).then(res => {
|
|
|
+ if (Number(res.data.status) === 1) {
|
|
|
+ let data = res.data.data
|
|
|
+ let list = data.list || []
|
|
|
+ this.page.total = data.total
|
|
|
+ if (this.page.page === 1 || !this.mobile) {
|
|
|
+ this.dataList = [ ...list ]
|
|
|
+ } else {
|
|
|
+ this.dataList = [ ...this.dataList, ...list]
|
|
|
+ }
|
|
|
+ this.page.page += 1
|
|
|
+ if (this.page.total <= this.dataList.length) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.firstLoading = false
|
|
|
+ this.refreshing = false
|
|
|
+ this.isLoading = false
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ pageChange(i) {
|
|
|
+ this.page.page = i
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /** 移动端下拉刷新 **/
|
|
|
+ onRefresh() {
|
|
|
+ // 清空列表数据
|
|
|
+ this.finished = false;
|
|
|
+ this.page.page = 1
|
|
|
+ this.page.total = 0
|
|
|
+ this.onLoad();
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ console.log('onLoad')
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 跳转 **/
|
|
|
+ jumpToJishuinHomePageHandler(item) {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ delConnectionHandler({item_id, type}, index) {
|
|
|
+ let data = {
|
|
|
+ item_id: item_id,
|
|
|
+ type: type,
|
|
|
+ }
|
|
|
+ this.$axios.post('/api/collection_center/create', {
|
|
|
+ ...data
|
|
|
+ }).then(res=> {
|
|
|
+ console.log(res)
|
|
|
+ if (Number(res.data.status) === 1) {
|
|
|
+ this.dataList.splice(index, 1)
|
|
|
+ this.$message.success("取消收藏成功！")
|
|
|
+ if (this.dataList.length === 0) {
|
|
|
+ this.page.page = 1
|
|
|
+ this.page.total = 0
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scope lang="scss">
|
|
|
+ .delete-button {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ @import "../../../assets/css/user/collection.scss";
|
|
|
+</style>
|
xinfeng
