上传文件至 '新闻小程序/pages/news-detail'

新增功能：收藏

新闻小程序/pages/news-detail/news-detail.js

@@ -1,81 +1,101 @@
 // pages/news-detail/news-detail.js
-let newsType = '';
+let newsType = ''
+let newsid = '' //4.27
+let collect = false //4.27
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-  },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
+  },
   onLoad: function (options) {
     // console.log('从主页传递来的id:', options.id)
     // console.log('从主页传递来的currentIndex:', options.currentIndex)
+    newsid = options.id //4.27
+    newsType = options.currentIndex
     let currentIndex = options.currentIndex
-    if (currentIndex == 0) {newsType='nd-news'}
-    else if (currentIndex == 1) {newsType='xg-news'}
-    else if (currentIndex == 2) {newsType='tw-news'}
-    else if (currentIndex == 3) {newsType='gj-news'}
-    else if (currentIndex == 4) {newsType='junshi-news'}
+    if (currentIndex == 0) {
+      newsType = 'nd-news'
+    } else if (currentIndex == 1) {
+      newsType = 'xg-news'
+    } else if (currentIndex == 2) {
+      newsType = 'tw-news'
+    } else if (currentIndex == 3) {
+      newsType = 'gj-news'
+    } else if (currentIndex == 4) {
+      newsType = 'junshi-news'
+    } else if (currentIndex == 5) {
+      newsType = 'lunbotu-news'
+    }
+    // 查询新闻详情数据，按不同板块
     wx.cloud.database().collection(newsType).doc(options.id)
       .get()
       .then(res => {
-      console.log('请求成功', res)
+        console.log('新闻详情页请求成功', res)
+        collect = res.data.collect  //4.27
         this.setData({
           detail: res.data,
           news_image: res.data.news_img,
+          collect_img: collect ?  "../../images/collect-yes.png" : "../../images/collect-no.png" //4.27
         })
       })
   },
+  // 收藏按钮 4.27
+  collect() {
+    this.setData({
+      collect_img: collect ?  "../../images/collect-no.png" : "../../images/collect-yes.png"
+    })
+    collect = !collect
+    wx.cloud.database().collection(newsType).doc(newsid)
+      .update({
+        data: {
+          collect: collect
+        }
+      })
+      .then(res => {
+        console.log('collect状态改变成功')
+        if (collect) {
+          wx.cloud.database().collection('news_collect')
+            .add({
+              data: {
+                _id: newsid,
+                type: newsType,
+                news_img: this.data.detail.news_img,
+                news_title: this.data.detail.news_title,
+                news_author: this.data.detail.news_author,
+                news_date: this.data.detail.news_date,
+              }
+            })
+            .then(res => {
+              console.log('添加新闻到收藏页成功', res)
+            })
+        }
+        else if (!collect) {
+          wx.cloud.database().collection('news_collect')
+            .doc(newsid).remove()
+            .then(res => {
+              console.log('已取消收藏', res)
+            })
+        }
+      })
+  },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
   onReady: function () {
 
   },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
   onShow: function () {
 
   },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
   onHide: function () {
 
   },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
   onUnload: function () {
 
   },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
   onPullDownRefresh: function () {
 
   },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
   onReachBottom: function () {
 
   },
-
-  /**
-   * 用户点击右上角分享
-   */
   onShareAppMessage: function () {
 
   }

新闻小程序/pages/news-detail/news-detail.wxml

@@ -1,3 +1,4 @@
+<!-- 顶部标题栏 -->
 <view class="detail_start">
   <view class="news_title">{{detail.news_title}}</view>
   <view class="publisher-info">
@@ -6,8 +7,17 @@
   </view>
 </view>
 
-
+<!-- 新闻正文 -->
+<view class="content">
   <view wx:if="{{news_image != 'None'}}">
     <image class="news_image" src="{{news_image}}"></image>
   </view>
   <rich-text class="news_content">{{detail.news_content}}</rich-text>
+</view>
+
+
+<!-- 收藏按钮 4.27-->
+<button class="collect"  bindtap="collect">
+  点击收藏<image class="collect_img" src="{{collect_img}}"></image>
+</button>
+

新闻小程序/pages/news-detail/news-detail.wxss

@@ -10,6 +10,9 @@ page {
   text-align: justify;
   margin: 30rpx 20rpx;
 }
+.content {
+  padding: 30rpx 30rpx 30rpx 30rpx;
+}
 .publisher-info{
   margin: 0 30rpx;
   display: flex;
@@ -42,3 +45,23 @@ page {
   width: 90%;
   margin: 30rpx;
 }
+.button {
+  width: 280rpx;
+  display: flex;
+}
+.sc_img {
+  height: 80rpx;
+  width: 80rpx;
+}
+
+/* 点赞 */
+.collect .collect_img {
+  width: 80rpx;
+  height: 80rpx;
+}
+.collect {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 20px;
+}
+