+ 点赞，收藏功能

common/EnumConst.js

@@ -8,6 +8,9 @@ export const ICON_CFG = {
   login_bg: '/profile/upload/2024/08/17/head-bg_20240817230007A002.png',
 };
 
+export const CONTENT_TYPE = {
+  news: 1,
+};
 export const FILE_ICON = {
   doc: '/profile/upload/2024/08/20/word_20240820110735A012.svg',
   docx: '/profile/upload/2024/08/20/word_20240820110735A012.svg',

common/api.js

@@ -1,12 +1,21 @@
-import { getToken } from '@/util';
+import { getToken, getUserInfo } from '@/util';
 
 const { http } = uni.$u
-// 获取菜单
-export const fetchMenu = (params, config = {}) => http.post(
-  '/ebapi/public_api/index', params, config);
 export const fetchContentInfo = (params) => http.get('/cp/contentInfo/list',
   { params });
 
+export const fetchUsrContentInfo = (params) => {
+  const usrInfo = getUserInfo();
+  const { openId } = usrInfo;
+  return http.get(`/cp/usr/content/rel/${openId}`,
+    {
+      params,
+      header: {
+        Authorization: `Bearer ${getToken()}`,
+      },
+    });
+};
+
 export const fetchContentDetail = (id) => http.get(`/cp/contentInfo/${id}`);
 
 export const fetchMsgList = (params) => http.get('/cp/msg/list',
@@ -60,3 +69,29 @@ export const fetchUsrInfo = (usrId) => http.get(
       Authorization: `Bearer ${getToken()}`,
     },
   });
+export const fetchUsrContent = (contentId, openId) => http.get(
+  `/cp/usrContentRel/${openId}/${contentId}`);
+
+export const usrLike = (param) => {
+  const openId = getUserInfo().openId;
+  return http.post(
+    `/cp/contentInfo/${openId}/like`, param);
+};
+
+export const usrUnLike = (param) => {
+  const openId = getUserInfo().openId;
+  return http.post(
+    `/cp/contentInfo/${openId}/unlike`, param);
+};
+
+export const usrCollect = (param) => {
+  const openId = getUserInfo().openId;
+  return http.post(
+    `/cp/contentInfo/${openId}/collect`, param);
+};
+
+export const usrUnCollect = (param) => {
+  const openId = getUserInfo().openId;
+  return http.post(
+    `/cp/contentInfo/${openId}/uncollect`, param);
+};

pages.json

@@ -79,6 +79,18 @@
           }
         }
       ]
+    },
+    {
+      "root": "pasb",
+      "name": "sub-6",
+      "pages": [
+        {
+          "path": "pages/usr-collect/index",
+          "style": {
+            "navigationBarTitleText": "资讯收藏"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {

pasb/pages/detail/index.scss

@@ -25,4 +25,35 @@
     align-items: center;
     justify-content: center;
   }
+
+  .content-like-col{
+    width: 100%;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: #fefefe;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    box-sizing: border-box;
+    padding: 10rpx 50rpx 10rpx 0;
+    .icon-wrap{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 30rpx;
+      margin-right: 20rpx;
+      .icon-base text{
+        font-size: 25px !important;
+        line-height:25px !important;
+        &[class*='fill']{
+          color: #548cf7 !important;
+        }
+      }
+      .icon-base{
+        margin-right: 10rpx;
+      }
+    }
+  }
 }

pasb/pages/detail/index.vue

@@ -5,29 +5,59 @@
       <view class="title-content-date">{{ date }}</view>
     </view>
     <mp-html :content="content|formatRichText" selectable="true" show-img-menu="true" />
+    <view class="content-like-col" v-if="CONTENT_TYPE.news === contentType">
+      <view class="icon-wrap">
+        <u-icon
+            :name="`${likeFlag ? 'thumb-up-fill':'thumb-up'}`"
+            class="icon-base"
+            @click="$u.throttle(onLikeClick,500)"
+        ></u-icon>
+        {{ likeCnt && likeCnt }}
+      </view>
+      <view class="icon-wrap">
+        <u-icon
+            :name="`${collectFlag ? 'star-fill':'star' }`"
+            class="icon-base"
+            @click="$u.throttle(onCollectClick,500)"
+        ></u-icon>
+        {{ collectCnt && collectCnt }}
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
-import { fetchContentDetail } from '@/common/api';
+import { fetchContentDetail, fetchUsrContent, usrCollect, usrLike, usrUnCollect, usrUnLike } from '@/common/api';
+import { CONTENT_TYPE } from '@/common/EnumConst';
+import { authLogin, getUserInfo } from '@/util';
 
 export default {
   name: 'content',
   props: {},
   data() {
     return {
+      CONTENT_TYPE,
       content: '',
       queryParams: {},
       title: '',
       date: '',
+      contentType: '',
+      likeCnt: 0,
+      collectCnt: 0,
+      likeFlag: false,
+      collectFlag: false,
+      id: '',
     };
   },
   created() {
   },
   onLoad(res) {
-    console.log(res);
-    this.queryParams = res;
+    // 登录返回之后的页面
+    if (res) {
+      this.queryParams = res;
+    }
     this.getContentInfo();
+    this.getUsrContent();
   },
   filters: {
     /**
@@ -65,7 +95,6 @@ export default {
             .replace(/src='/gi, `src='${process.env.UNI_FILE_PREFIX}`);
         return match;
       });
-
       return newContent;
     },
   },
@@ -76,15 +105,66 @@ export default {
           content,
           title,
           createTime,
+          contentType,
+          id,
+          likeCnt,
+          collectedCnt,
         },
       } = await fetchContentDetail(this.queryParams.id);
       this.content = content;
       this.title = title;
+      this.contentType = contentType;
+      this.id = id;
+      this.likeCnt = likeCnt;
+      this.collectCnt = collectedCnt;
       uni.setNavigationBarTitle({
         title
       })
       this.date = uni.$u.timeFormat(createTime, 'yyyy-mm-dd');
     },
+    async getUsrContent() {
+      const contentId = this.queryParams.id;
+      const usrInfo = getUserInfo();
+      if (usrInfo && usrInfo.openId) {
+        const { data } = await fetchUsrContent(contentId, usrInfo.openId);
+        if (data) {
+          this.collectFlag = data[0]?.collectFlag === '0';
+          this.likeFlag = data[0]?.likeFlag === '0';
+        }
+      }
+    },
+    onCollectClick() {
+      this.collectFlag = !this.collectFlag;
+      authLogin(async (usr) => {
+        if (this.collectFlag) {
+          this.collectCnt += 1;
+          await usrCollect({
+            id: this.queryParams.id,
+          });
+          return;
+        }
+        this.collectCnt -= 1;
+        await usrUnCollect({
+          id: this.queryParams.id,
+        });
+      });
+    },
+    onLikeClick() {
+      this.likeFlag = !this.likeFlag;
+      authLogin(async (usr) => {
+        if (this.likeFlag) {
+          this.likeCnt += 1;
+          await usrLike({
+            id: this.queryParams.id,
+          });
+          return;
+        }
+        this.likeCnt -= 1;
+        await usrUnLike({
+          id: this.queryParams.id,
+        });
+      });
+    },
   },
 };
 </script>

pasb/pages/usr-collect/index.scss

@@ -0,0 +1,6 @@
+@import "../../../common/common.scss";
+.usr-collect-info-container {
+
+}
+
+

pasb/pages/usr-collect/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <auth-wrap class="usr-collect-info-container" ref="authWrap">
+    <template slot="content">
+      <view class="search-content">
+        <u-search placeholder="请输入关键字" v-model="keyword" @custom="onSearch" @search="onSearch"></u-search>
+      </view>
+      <view class="u-page" v-if="indexList&&indexList.length>0">
+        <item-list :ds="indexList" :onItemClick="onContentClick" />
+      </view>
+      <u-empty
+          v-else
+          mode="data"
+          text="还没有收藏，赶紧去收藏吧！"
+      >
+      </u-empty>
+    </template>
+  </auth-wrap>
+</template>
+
+<script>
+import { fetchUsrContentInfo } from '@/common/api';
+import AuthWrap from '@/components/AuthComp/index.vue';
+import ItemList from '@/components/ItemList/index.vue';
+import { getImageUrl } from '@/util';
+
+export default {
+  components: {
+    AuthWrap,
+    ItemList,
+  },
+  data() {
+    return {
+      keyword: '',
+      indexList: [],
+    };
+  },
+  onLoad() {
+    debugger
+    this.$refs.authWrap.reloadPage();
+    this.loadmore();
+  },
+  methods: {
+    onContentClick(item) {
+      uni.navigateTo({
+        url: `/pasb/pages/detail/index?id=${item.id}`,
+      });
+    },
+    async loadmore(keyword = '') {
+      const res = await fetchUsrContentInfo({
+        pageNum: 1,
+        pageSize: 999,
+        contentType: 3,
+        title: keyword,
+      });
+      this.indexList = res.rows.map(item => {
+        return {
+          id: item.id,
+          imgUrl: getImageUrl(item.thumbnail),
+          title: item.title,
+          date: item.updateTime,
+        };
+      });
+    },
+    onSearch(val) {
+      this.loadmore(val);
+    },
+  },
+  onShareAppMessage() {
+    return {
+      title: 'First UI组件库',
+    };
+  },
+};
+</script>
+
+<style lang="scss" src="./index.scss" />