:smile: 接口联调，完善上传相册

app.json

@@ -2,7 +2,8 @@
   "pages": [
     "pages/index/index",
     "pages/details/details",
-    "pages/setName/setName"
+    "pages/setName/setName",
+    "pages/album/album"
   ],
   "window": {
     "backgroundTextStyle": "light",

component/look/look.js

@@ -15,7 +15,7 @@ export const lookInit =  (that) => {
       lookData: that.data.lookData
     })
     //数据请求
-    that.httpList(detail.current + 1)
+    that.httpList(currentTarget.dataset.index + 1)
   }
   //滑动更改数据
   that.lookSlide = ({ detail }) => {
@@ -38,7 +38,7 @@ export const lookInit =  (that) => {
     httpRequestApi.getCourse({
       categoryId: ind
     }).success((res)=>{
-      console.log(res);
+      console.log('课程列表', res);
       that.data.lookData.lookList = res.data.data.list;
       that.setData({
         lookData: that.data.lookData

component/mys/mys.js

@@ -1,26 +1,81 @@
+import httpRequestApi from '../../utils/APIRequest';
 export function myInit(that) {
   that.setData({
     myData: {
       nav: ['我的娃', '收藏', '历史'],
-      myInd: 0
+      myInd: 0,
+      favoritesList: [],
+      playLogList: []
     }
   })
+  //点击切换
   that.myChoice = ({ currentTarget }) => {
     that.data.myData.myInd = currentTarget.dataset.index;
     that.setData({
       myData: that.data.myData
     })
+    //获取收藏列表
+    if(currentTarget.dataset.index == 1) {
+      that.getFavoritesList();
+    }
+    //获取播放记录
+    if(currentTarget.dataset.index == 2) {
+      that.getPlayLogList();
+    }
   }
+  //滑动切换
   that.mySlide = ({detail}) => {
     that.data.myData.myInd = detail.current;
     // console.log(detail.current);
     that.setData({
       myData: that.data.myData
     })
+    //获取收藏列表
+    if(detail.current == 1) {
+      that.getFavoritesList();
+    }
+    //获取播放记录
+    if(detail.current == 2) {
+      that.getPlayLogList();
+    }
   }
+  //点击跳转页面
   that.setName = () => {
     wx.navigateTo({
       url: '/pages/setName/setName'
     })
   }
+  //获取收藏列表
+  that.getFavoritesList = () => {
+    httpRequestApi.getFavoritesList({
+      pageNo: 1,
+      pageSize: 10
+    }).success((res)=>{
+      console.log('收藏列表', res);
+      that.data.myData.favoritesList = res.data.data.list;
+      that.setData({
+        myData: that.data.myData
+      })
+    })
+  }
+  //获取播放记录
+  that.getPlayLogList = () => {
+    httpRequestApi.getPlayLogList({
+      pageNo: 1,
+      pageSize: 10
+    }).success((res)=>{
+      console.log('播放记录', res);
+      that.data.myData.playLogList = res.data.data.list;
+      that.setData({
+        myData: that.data.myData
+      })
+    })
+  }
+  //跳转到相册
+  that.album = ({ currentTarget }) => {
+    //const id = currentTarget.dataset.id;
+    wx.navigateTo({
+      url: '/pages/album/album' 
+    })
+  }
 }

component/mys/mys.wxml

@@ -5,31 +5,38 @@
             <view class="{{index == myData.myInd ? 'slecte-nav' : ''}}" bindtap="myChoice" data-index="{{index}}">{{item}}</view>
         </block>
     </view>
-    <scroll-view class="scroll-view" scroll-y>
-        <swiper current="{{myData.myInd}}" bindchange="mySlide" style="height: 100%;">
-            <swiper-item>
-                <view class="my-information">
-                    <view class="information-item">
-                        <image class="head" src=""></image>
-                        <view class="set-name">
-                            <text class="name">阿杰</text>
-                            <text bindtap="setName">点击修改头像和名字</text>
-                        </view>
+    <swiper current="{{myData.myInd}}" bindchange="mySlide" style="height: 92%;">
+        <swiper-item>
+            <view class="my-information">
+                <view class="information-item">
+                    <image class="head" src=""></image>
+                    <view class="set-name">
+                        <text class="name">阿杰</text>
+                        <text bindtap="setName">点击修改头像和名字</text>
                     </view>
-                    <view class="shaiwa">如何使用电视上的晒娃功能</view>
-                    <view class="mengwa">萌娃相册</view>
                 </view>
-            </swiper-item>
-            <swiper-item>
+                <view class="shaiwa">如何使用电视上的晒娃功能</view>
+                <view class="mengwa" bindtap="album">萌娃相册</view>
+            </view>
+        </swiper-item>
+        <swiper-item>
+            <scroll-view class="scroll-view" scroll-y>
                 <view class="my-collection">
-                    <view class="collection-item">
-                        收藏
+                    <view class="collection-item" wx:for="{{myData.favoritesList}}" wx:key="{{index}}">
+                        <image src="{{item.iconImg}}"></image>
                     </view>
                 </view>
-            </swiper-item>
-            <swiper-item>
-                历史
-            </swiper-item>
+            </scroll-view>
+        </swiper-item>
+        <swiper-item>
+            <scroll-view class="scroll-view" scroll-y>
+                <view class="my-collection">
+                    <view class="collection-item" wx:for="{{myData.playLogList}}" wx:key="{{index}}">
+                        <image src="{{item.iconImg}}"></image>
+                    </view>
+                </view>
+            </scroll-view>
+        </swiper-item>
         </swiper>
-    </scroll-view>
+    
 </template> 

component/mys/mys.wxss

@@ -22,6 +22,10 @@
     background: #fff;
 }
 
+swiper-item {
+    height: 100%;
+}
+
 .my-information {
     padding: 0 16rpx;
     box-sizing: border-box;
@@ -103,4 +107,9 @@
     margin-top: 27rpx;
     border-radius: 20rpx;
     background: red;
+}
+
+.collection-item image {
+    width: 100%;
+    height: 100%;
 }

component/search/search.js

@@ -1,66 +1,27 @@
 // pages/search/search.js
-Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+import httpRequestApi from '../../utils/APIRequest';
+export const searchInit = (that) => {
+  that.setData({
+    searchData: {
+      searchList: []
+    }
+  })
+  //获取输入值,并请求接口
+  that.focus = ({detail}) => {
+    httpRequestApi.getCourse({
+      title: detail.value
+    }).success((res)=>{
+      that.data.searchData.searchList = res.data.data.list;
+      that.setData({
+        searchData: that.data.searchData
+      })
+    })
   }
-})
+  //跳转到详情页
+  that.details = ({ currentTarget }) => {
+    const id = currentTarget.dataset.id;
+    wx.navigateTo({
+      url: '/pages/details/details?id=' + id 
+    })
+  }
+}

component/search/search.wxml

@@ -2,13 +2,13 @@
     <view class="search-container">
         <view class="search-video">
             <image class="icon" src="../../static/image/search.png"></image>
-            <input placeholder="输入关键字"/>
+            <input placeholder="输入关键字" bindinput="focus"/>
         </view>
         <scroll-view class="scroll-view" scroll-y>
             <view class="title">热门搜索</view>
             <view class="hot-video">
-                <view class="hot-item">
-                    {{item}}
+                <view class="hot-item" wx:for="{{searchData.searchList}}" wx:key="{{inedex}}" bindtap="details" data-id="{{item.id}}">
+                    <image src="{{item.iconImg}}"></image>
                 </view>
             </view>
         </scroll-view>

component/search/search.wxss

@@ -21,7 +21,7 @@
 }
 
 .search-video input {
-    text-align: center;
+    padding-left: 20rpx;
 }
 
 .title {
@@ -41,4 +41,9 @@
     margin-top: 27rpx;
     border-radius: 20rpx;
     background: red;
+}
+
+.hot-item image {
+    width: 100%;
+    height: 100%;
 }

pages/album/album.js

@@ -0,0 +1,73 @@
+// pages/album/album.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    stateFlag: true,
+  },
+
+  //更改相册
+  setState: function () {
+    this.setData({
+      stateFlag: !this.data.stateFlag
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/album/album.json

@@ -0,0 +1 @@
+{}

pages/album/album.wxml

@@ -0,0 +1,36 @@
+<!--pages/album/album.wxml-->
+<view class="album">
+    <view class="album-state">
+        <text>相册状态</text>
+        <view class="state" bindtap="setState">
+            <view class="left">
+                公开
+            </view>
+            <view class="right">
+                私密
+            </view>
+            <view class="{{stateFlag ? 'open' : 'private'}}"></view>
+        </view>
+    </view>
+    <view class="album-code">
+        <text>相册提取码</text>
+        <view wx:if="{{stateFlag}}">
+           公开相册凭手机尾号提取
+        </view>
+        <view class="code" wx:if="{{!stateFlag}}">
+           <view>1</view>
+           <view>1</view>
+           <view>1</view>
+           <view>1</view>
+        </view>
+    </view>
+    <view class="photo">
+        <view class="img">
+            <image src="../../static/image/add.jpg"></image>    
+        </view>
+        <view class="img">
+            <image src="../../static/image/add.jpg"></image> 
+            <image src="../../static/image/delect.png" class="delect"></image>
+        </view> 
+    </view>
+</view>

pages/album/album.wxss

@@ -0,0 +1,111 @@
+/* pages/album/album.wxss */
+.album {
+    width: 100%;
+    height: 100%;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    background: #eaeaea;
+}
+
+.album-state {
+    display: flex;
+    align-items: center;
+    padding-top: 52rpx;
+}
+
+.album-state text {
+    font-size: 36rpx;
+    margin-right: 62rpx;
+}
+
+.state {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 188rpx;
+    height: 64rpx;
+    background: #fff;
+    border-radius: 64rpx;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+}
+
+.state view {
+    font-size: 28rpx;
+    color: #797979;
+}
+
+.state .open {
+    position: absolute;
+    left: 10rpx;
+    top: 5rpx;
+    width: 68rpx;
+    height: 54rpx;
+    background: #A1d100;
+    border-radius: 54rpx;
+}
+
+.state .private {
+    position: absolute;
+    right: 10rpx;
+    top: 5rpx;
+    width: 68rpx;
+    height: 54rpx;
+    background: #ce3800; 
+    border-radius: 54rpx;
+}
+
+.album-code {
+    display: flex;
+    align-items: center;
+    margin-top: 52rpx;
+    font-size: 36rpx;
+}
+
+.album-code text {
+    margin-right: 26rpx;
+}
+
+.album-code .code view {
+    width: 60rpx;
+    height: 60rpx;
+    background: #fff;
+    border-radius: 10rpx;
+    margin-right: 10rpx;
+    text-align: center;
+    line-height: 60rpx;
+    float: left;
+} 
+
+.photo {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 22rpx;
+}
+
+.img {
+    position: relative;
+    width: 332rpx;
+    height: 241rpx;
+    border-radius: 20rpx; 
+    margin-top: 30rpx;
+}
+
+.img image{
+    width: 100%;
+    height: 100%;
+    border-radius: 20rpx;
+}
+
+.img .delect {
+    position: absolute;
+    top: 15rpx;
+    right: 15rpx;
+    width: 53rpx;
+    height: 53rpx;
+}
+
+.img:nth-child(even) {
+    margin-left: 26rpx;
+}

pages/details/details.js

@@ -1,5 +1,6 @@
 // pages/details/details.js
 import httpRequestApi from '../../utils/APIRequest';
+import util from '../../utils/util';
 Page({
   /**
    * 页面的初始数据
@@ -14,15 +15,16 @@ Page({
     courseId: '',
     favoritesFlag: false,
     title: '',
-    iconImg: ''
+    iconImg: '',
+    postsList: [],
+    dateArr: []
   },
   //点击收藏
   favorites: function () {
     this.setData({
       favoritesFlag: !this.data.favoritesFlag
     })
-    console.log(this.data.courseId, this.data.title, this.data.iconImg)
-    httpRequestApi.getCourseDetails({
+    httpRequestApi.getDetailsFavorites({
       targetCode: this.data.courseId,
       title: this.data.title,
       iconImg: this.data.iconImg
@@ -60,12 +62,32 @@ Page({
       str: ''
     })
   },
-  //点击确定
+  //点击确定评论
   yes: function () {
-    this.setData({
-      hide: !this.data.hide,
-      str: ''
-    })
+    if(this.data.str === '') {
+      wx.showModal({
+        title: '提示',
+        content: '请输入内容'
+      })
+      return false;
+    }
+    httpRequestApi.getDetailsPosts({
+      columnId: this.data.courseId,
+      columnNames: this.data.title,
+      detailDesc: this.data.str
+    }).success((res)=>{
+      if(res.data.success){
+        wx.showToast({
+          title: '评论成功'
+        })
+        this.setData({
+          hide: !this.data.hide,
+          str: ''
+        })
+        //获取评论列表
+        this.getPostsList(this.data.courseId);
+      }
+    })    
   },   
   //获取输入值
   focus: function ({detail}) {
@@ -80,9 +102,10 @@ Page({
   onLoad: function (options) {
     const courseId = options.id;
     httpRequestApi.getCourseDetails(courseId).success((res)=>{
-      console.log(res);
+      console.log('课程详情', res);
       const data = res.data.data;
       this.setData({
+        favoritesFlag: data.isFavorites,
         title: data.course.title,
         iconImg: data.course.iconImg,
         courseId,
@@ -90,6 +113,26 @@ Page({
         courseWareList: data.courseWareList
       })
     })
+    //获取评论列表
+    this.getPostsList(courseId);
+  },
+  //获取评论列表
+  getPostsList: function (courseId) {
+    httpRequestApi.getPostsList({
+      courseId,
+      pageNo: 1,
+      pageSize: 10
+    }).success((res)=>{
+      console.log('评论列表', res);
+      const dateArr = [];
+      res.data.data.list.forEach(item => {
+        dateArr.push(util.formatTime(new Date(item.gmtCreated)));
+      });
+      this.setData({
+        postsList: res.data.data.list,
+        dateArr
+      })
+    })
   },
 
   /**
@@ -103,7 +146,6 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
   },
 
   /**

pages/details/details.wxml

@@ -35,16 +35,16 @@
                     <view class="yes" bindtap="yes">发送</view>
                 </view>
             </view>
-            <view class="content-speak">
+            <view class="content-speak" wx:for="{{postsList}}" wx:key="{{index}}">
                 <view class="information-item">
-                    <image class="head" src=""></image>
+                    <image class="head" src="{{item.user.avatar}}"></image>
                     <view class="name">
-                        <text>阿杰</text>
-                        <text>2018年9月10日</text>
+                        <text>{{item.user.nickName}}</text>
+                        <text>{{dateArr[index]}}</text>
                     </view>
                 </view>
                 <view class="language">
-                    非常好看的纪录片，推荐给大家
+                    {{item.detailDesc}}
                 </view>
             </view>
         </view>

pages/details/details.wxss

@@ -145,7 +145,6 @@
     width: 92rpx;
     height: 92rpx;
     border-radius: 50%;
-    background: red;
     margin-right: 22rpx;
 }
 

pages/index/index.js

@@ -3,6 +3,7 @@
 const app = getApp()
 import { lookInit } from '../../component/look/look';
 import { myInit } from '../../component/mys/mys';
+import { searchInit } from '../../component/search/search';
 import httpRequestApi from '../../utils/APIRequest';
 Page({
   data: {
@@ -41,5 +42,6 @@ Page({
   onLoad: function () {
     lookInit(this);
     myInit(this);
+    searchInit(this);
   },
 })

utils/APIRequest.js

@@ -9,17 +9,51 @@ class httpRequestApi {
     //课程表首页
     static getCourse(data) {
         const url = httpApiUrl('wx/course');
-        return getInstance().url(url).data(data).send();
+        return getInstance().header({
+            uid: 1,
+        }).url(url).data(data).send();
     }
     //获取课程详情
     static getCourseDetails(id) {
         const url = httpApiUrl(`wx/course/${id}`);
-        return getInstance().url(url).data().send();
+        return getInstance().header({
+            uid: 1,
+        }).url(url).data().send();
     }
     //收藏或者取消
     static getDetailsFavorites(data) {
         const url = httpApiUrl('wx/favorites');
-        return getInstance().url(url).data(data).method('POST').send();
+        return getInstance().header({
+            uid: 1,
+        }).url(url).data(data).method('POST').send();
+    }
+    //获取收藏列表
+    static getFavoritesList(data) {
+        const url = httpApiUrl('wx/favorites');
+        return getInstance().header({
+            uid: 1,
+        }).url(url).data(data).send();
+    }
+    //添加评论
+    static getDetailsPosts(data) {
+        const url = httpApiUrl('wx/posts');
+        return getInstance().header({
+            uid: 1,
+        }).url(url).data(data).method('POST').send();
+    }
+    //获取评论列表
+    static getPostsList(data) {
+        const url = httpApiUrl('wx/posts');
+        return getInstance().header({
+            uid: 1,
+        }).url(url).data(data).send();
+    }
+    //获取播放记录
+    static getPlayLogList(data) {
+        const url = httpApiUrl('wx/playLog');
+        return getInstance().header({
+            uid: 1,
+        }).url(url).data(data).send();
     }
 }