收藏web端接口对接

assets/css/user/collection.scss

@@ -0,0 +1,224 @@
+@import "../scssCommon";
+
+
+.main {
+  margin-top: 0 !important;
+  &.isMobile {
+    width: 100vw;
+  }
+}
+
+
+.collectionCenter {
+  width: 1000px;
+  margin: 16px auto 40px auto !important;
+  display: flex;
+
+  .leftContent {
+    width:174px;
+    height:402px;
+    background:rgba(255,255,255,1);
+
+    .stitle {
+      height: 80px;
+      width:100%;
+      font-size:18px;
+      font-weight:600;
+      color:rgba(51,51,51,1);
+      line-height:80px;
+      text-align: center;
+    }
+    .sList {
+      .cell {
+        width:174px;
+        height:40px;
+        text-align: center;
+        font-size:15px;
+        font-weight:400;
+        line-height:40px;
+        background: #fff;
+        color: #333;
+        &.selected {
+          background:rgba(247,247,247,1);
+          color:rgba(0,147,253,1);
+        }
+      }
+    }
+  }
+  .rightContent {
+    margin-left: 10px;
+    width:816px;
+    .topSelectArea {
+      width:816px;
+      height:84px;
+      background:rgba(255,255,255,1);
+      padding: 24px;
+
+      .list {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        .cell {
+          margin-left: 8px;
+          width:88px;
+          height:36px;
+          border-radius:2px;
+          border:1px solid rgba(239,239,239,1);
+          font-size:13px;
+          font-weight:400;
+          color:rgba(85,85,85,1);
+          line-height:36.1px;
+          text-align: center;
+          cursor: pointer;
+          user-select: none;
+
+          &:nth-child(1) {
+            margin-left: 0;
+          }
+
+          &.selected {
+            border:1px solid rgba(48,142,255,1);
+            font-weight:500;
+            color:rgba(48,142,255,1);
+          }
+        }
+      }
+    }
+
+    .bodyArea {
+      width:816px;
+      margin-top: 10px;
+      min-height: 500px;
+
+      .list {
+        .cell {
+          width:816px;
+          height:164px;
+          background:rgba(255,255,255,1);
+          box-shadow:1px 0px 0px 0px rgba(0,0,0,0.1);
+          padding: 25px 20px;
+          border-bottom: 1px solid rgba(0,0,0,0.1);
+
+          display: flex;
+          align-items: center;
+          position: relative;
+
+          .left {
+            width:114px;
+            height:114px;
+            font-size: 0;
+            flex-shrink: 0;
+            img {
+              width:114px;
+              height:114px;
+              border-radius:2px;
+            }
+          }
+          .right {
+            width: 100%;
+            margin-left: 10px;
+
+            .ctitle {
+              width: 528px;
+              height:25px;
+              font-size:18px;
+              font-weight:400;
+              color:rgba(17,17,17,1);
+              line-height:25px;
+              overflow: hidden;
+              word-break: keep-all;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+            .links {
+              margin-top: 8px;
+              width:528px;
+              height:36px;
+              font-size:13px;
+              font-weight:400;
+              color:rgba(153,153,153,1);
+              line-height:18px;
+              text-align: left;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+            }
+            .timeArea {
+              margin-top: 20px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              width: 100%;
+              .time {
+                height:18px;
+                font-size:13px;
+                font-weight:400;
+                color:rgba(153,153,153,1);
+                line-height:18px;
+              }
+              .laber {
+                border-radius:1px;
+                border:1px solid rgba(48,142,255,1);
+                padding: 4px 15px;
+                box-sizing: content-box;
+                font-size:11px;
+                font-weight:500;
+                color:rgba(48,142,255,1);
+                line-height:16px;
+                cursor: pointer;
+              }
+            }
+          }
+          .delIcon {
+            content: "";
+            position: absolute;
+            right: 20px;
+            top: 25px;
+            width: 14px;
+            height: 14px;
+            background: url('~@/assets/img/user/icon_del@2x.png') no-repeat;
+            background-size: cover;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .emptyBlock {
+        height: 500px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        background-color: #fff;
+        img {
+          width: 154px;
+          height: 154px;
+        }
+        p {
+          height:20px;
+          font-size:14px;
+          font-weight:400;
+          color:rgba(153,153,153,1);
+          line-height:20px;
+        }
+      }
+
+      .pagination {
+        padding: 30px 0;
+        width: 100%;
+        text-align: center;
+        background-color: #fff;
+        box-sizing: content-box;
+      }
+    }
+  }
+}
+
+.collectionCenterMobile {
+
+}
+
+

pages/user/collection/index.vue

@@ -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>