首页等

app.json

@@ -1,9 +1,11 @@
 {
   "pages": [
     "pages/index/index",
+    "pages/social/works/works",
     "pages/main/class/class",
-    "pages/main/reading/reading",
-    "pages/social/works/works"
+    "pages/main/books/books",
+    "pages/main/reading/reading"
+    
   ],
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -8,4 +8,9 @@
   padding: 80rpx 0;
   box-sizing: border-box;
   /* background: #f0f1f5 */
-} 
+} 
+::-webkit-scrollbar{
+  width: 0;
+  height: 0;
+  color: transparent;
+}

component/follow/follow.js

@@ -1,7 +1,42 @@
 export const followInit =  (that) => {
   that.setData({
     followData: {
-      title: '关注'
+      title: '关注',
+      wareCards:[
+        {
+          title:"铺满色巴掌的水泥道",
+          grade:"一年级 上学期",
+          img: "../../static/image/timg.jpg",
+          plays: "1",
+          likes: "2",
+          classId: "1",
+          avatar: '../../static/image/timg.jpg',
+          nickName: '萝莉小猫咪',
+          time: '11-01 14:14'
+        },
+        {
+          title:"铺满色巴掌的水泥道",
+          grade:"一年级 上学期",
+          img: "../../static/image/timg.jpg",
+          plays: "1",
+          likes: "2",
+          classId: "1",
+          avatar: '../../static/image/timg.jpg',
+          nickName: '萝莉小猫咪',
+          time: '11-01 14:14'
+        },
+        {
+          title:"铺满色巴掌的水泥道",
+          grade:"一年级 上学期",
+          img: "../../static/image/timg.jpg",
+          plays: "1",
+          likes: "2",
+          classId: "1",
+          avatar: '../../static/image/timg.jpg',
+          nickName: '萝莉小猫咪',
+          time: '11-01 14:14'
+        },
+      ]
     }
   })
   //请求数据封装

component/follow/follow.wxml

@@ -1,3 +1,26 @@
 <template name="follow">
-  <view> follw 关注 </view>
+  <view class="followWares" style="flex-direction:row;">
+    <view wx:for="{{followData.wareCards}}" wx:key="{{index}}" class="followWareCard" bindtap="openWorks" data-classId="{{item.classId}}" data-title="{{item.title}}">
+      <view class="userCard">
+        <image class="avatar" src="{{item.avatar}}" />
+        <view class="nameCross">
+          <text class="nickName">{{item.nickName}}</text>
+          <text class="time">{{item.time}}</text>
+        </view>
+      </view>
+      <image class="wareCardImg" src="{{item.img}}" />
+      <text class="wareCardTitle">{{item.title}}</text>
+      <view class="bottomData">
+                    <text class="wareCardTip">{{item.grade}}</text>
+                    <view class="wareCardPlays">
+                        <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
+                        <text>{{item.plays}}</text>
+                    </view>
+                    <view class="wareCardLikes">
+                        <image class="wareCardLikesImg" src="../../static/image/like.png" />
+                        <text>{{item.likes}}</text>
+                    </view>
+                </view>
+    </view>
+  </view>
 </template>

component/follow/follow.wxss

@@ -0,0 +1,121 @@
+.followWares {
+    width: 100%;
+    background: #fff;
+
+}
+
+.followWares .followWareCard {
+    width: 100%;
+    height: 526rpx;
+    border-top: solid 2rpx #f0f1f5;
+}
+
+.followWareCard .userCard {
+    width: 100%;
+    height: 126rpx;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.userCard .avatar {
+    width: 96rpx;
+    height: 96rpx;
+    margin-left: 22rpx;
+    border-radius: 50%;
+    display: flex;
+}
+
+.userCard .nameCross {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    font-size: 32rpx;
+    margin-left: 14rpx;
+}
+
+.nameCross .nickName {
+    color: #000;
+    margin-top: 14rpx;
+}
+
+.nameCross .time {
+    color: #686868;
+}
+
+.followWareCard .wareCardImg {
+    width: 704rpx;
+    height: 290rpx;
+    border-radius: 20rpx;
+    margin: 0 auto;
+    display: block;
+}
+
+.followWareCard .wareCardTitle {
+    width: 100%;
+    height: 46rpx;
+    display: block;
+    color: #414141;
+    margin-left: 22rpx;
+    margin-top: 10rpx;
+    font-size: 32rpx;
+    letter-spacing: 4rpx;
+    font-family: MicrosoftYaHei;
+}
+
+.followWareCard .bottomData {
+    height: 34rpx;
+    margin-top: 10rpx;
+    display: flex;
+    margin-left: 22rpx;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.followWareCard .bottomData .wareCardPlays {
+    width: 100rpx;
+    margin-left: 270rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.followWareCard .wareCardTip {
+
+    width: 178rpx;
+    height: 40rpx;
+    display: block;
+    text-align: center;
+    color: #414141;
+    font-size: 24rpx;
+}
+
+.followWareCard .wareCardPlays .wareCardPlaysImg {
+    width: 30rpx;
+    height: 30rpx;
+}
+
+.followWareCard .wareCardPlays text {
+    margin-left: 4rpx;
+    color: #61CA54;
+    font-size: 24rpx;
+}
+
+.followWareCard .wareCardLikes {
+    width: 100rpx;
+    margin-right: 18rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.followWareCard .wareCardLikes .wareCardLikesImg {
+    width: 30rpx;
+    height: 30rpx;
+}
+
+.followWareCard .wareCardLikes text {
+    margin-left: 4rpx;
+    color: #FF9800;
+    font-size: 24rpx;
+}

component/hot/hot.js

@@ -1,3 +1,4 @@
+import httpRequestApi from '../../utils/APIClient';
 export const hotInit = (that) => {
   that.setData({
       hotData: {
@@ -17,7 +18,7 @@ export const hotInit = (that) => {
         hotSearch: '鹅鹅鹅',
         wareCards:[
           {
-            title:"铺满金色巴掌的水泥道",
+            title:"铺满色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "1",
@@ -56,6 +57,13 @@ export const hotInit = (that) => {
       console.log(that.data.hotInput)
     }
     // 打开课程页面
+    that.openBooks = (e) =>{
+      wx.navigateTo({
+        url: `../main/books/books`
+      })
+    }
+    
+    // 打开课程页面
     that.openClass = (e) =>{
       let classId = e.currentTarget.dataset.classid;
       let title = e.currentTarget.dataset.title;
@@ -71,4 +79,23 @@ export const hotInit = (that) => {
         url: `../social/works/works?id=${classId}&title=${title}`
       })
     }
+    that.getIndex = (uid)=>{
+      httpRequestApi.getIndex({
+        uid
+      }).success((res)=>{
+        console.log(res);
+      })
+    }
+    that.getHotRecommend = (uid,pageNo,pageSize)=>{
+      console.log(pageNo)
+      httpRequestApi.getHotRecommend(
+        uid,
+        pageNo,
+        pageSize
+      ).success((res)=>{
+        console.log(res);
+      })
+    }
+    that.getIndex(1);
+    that.getHotRecommend(1,1,3) 
 }

component/hot/hot.wxml

@@ -15,65 +15,39 @@
     </view>
     <view class="hotSection">
         <view class="title">
-            <image src="../../static/image/hot_recommend.png" alt="" />
-            <text>人气推荐</text>
+            <view class="leftWrapper">
+                <image class="recommendTag" src="../../static/image/class_recommend.png" alt="" />
+                <text>本周课程推荐</text>
+            </view>
+            <view class="moreBtn" bindtap="openBooks">更多></view>
         </view>
         <view class="hotWares" style="flex-direction:row;">
-            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="hotWareCard" bindtap="openWorks" data-classId="{{item.classId}}" data-title="{{item.title}}">
-                <!-- <image class="wareCardImg" src="{{item.img}}" />
-                <view wx:if="{{index===0}}" class="wrapper">
-                    <text class="wareCardTitle">{{item.title}}</text>
-                    <view class="bottomData">
-                        <text class="wareCardTip">{{item.grade}}</text>
-                        <view class="wareCardPlays">
-                            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
-                            <text>{{item.plays}}</text>
-                        </view>
-                        <view class="wareCardLikes">
-                            <image class="wareCardLikesImg" src="../../static/image/like.png" />
-                            <text>{{item.likes}}</text>
-                        </view>
-                    </view>
-                </view>
-                <view wx:if="{{index!==0}}">
-                    <text class="wareCardTitle">{{item.title}}</text>
-                    <text class="wareCardTip">{{item.grade}}</text>
-                    <view class="bottomData">
-                        <view class="wareCardPlays">
-                            <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
-                            <text>{{item.plays}}</text>
-                        </view>
-                        <view class="wareCardLikes">
-                            <image class="wareCardLikesImg" src="../../static/image/like.png" />
-                            <text>{{item.likes}}</text>
-                        </view>
-                    </view>
-                </view> -->
+            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="hotWareCard" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
                 <image class="wareCardImg" src="{{item.img}}" />
                 <text class="wareCardTitle">{{item.title}}</text>
                 <view class="bottomData">
                     <text class="wareCardTip">{{item.grade}}</text>
-                    <view class="wareCardPlays">
+                    <!-- <view class="wareCardPlays">
                         <image class="wareCardPlaysImg" src="../../static/image/hotPlays.png" />
                         <text>{{item.plays}}</text>
                     </view>
                     <view class="wareCardLikes">
                         <image class="wareCardLikesImg" src="../../static/image/like.png" />
                         <text>{{item.likes}}</text>
-                    </view>
+                    </view> -->
                 </view>
             </view>
         </view>
-    
     </view>
-
     <view class="hotSection">
         <view class="title">
-            <image class="recommendTag" src="../../static/image/class_recommend.png" alt="" />
-            <text>本周课程推荐</text>
+            <view class="leftWrapper">
+                <image src="../../static/image/hot_recommend.png" alt="" />
+                <text>人气推荐</text>
+            </view>
         </view>
         <view class="hotWares" style="flex-direction:row;">
-            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="hotWareCard" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
+            <view wx:for="{{hotData.wareCards}}" wx:key="{{index}}" class="hotWareCard" bindtap="openWorks" data-classId="{{item.classId}}" data-title="{{item.title}}">
                 <image class="wareCardImg" src="{{item.img}}" />
                 <text class="wareCardTitle">{{item.title}}</text>
                 <view class="bottomData">
@@ -89,6 +63,5 @@
                 </view>
             </view>
         </view>
-    
     </view>
 </template>

component/hot/hot.wxss

@@ -68,9 +68,14 @@ swiper {
 .hotSection .title {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     margin: 8rpx 20rpx 20rpx 8rpx;
 }
+.hotSection .leftWrapper{
+    display:flex;
+align-items:center;
 
+}
 .hotSection .title image {
     width: 54rpx;
     height: 60rpx;
@@ -92,6 +97,14 @@ swiper {
     color: #414141;
 }
 
+.hotSection .title .moreBtn {
+    display: block;
+    float: right;
+    width: 80rpx;
+    height: 38rpx;
+    font-size: 28rpx;
+    color: #6e6e6e;
+}
 .hotWares {
     display: flex;
     flex-wrap: wrap;

pages/index/index.js

@@ -54,6 +54,7 @@ Page({
       hotInit(this);
     }
     if (myIndex == 2) {
+      console.log('follow')
       followInit(this);
     }
     if (myIndex == 3) {

pages/index/index.wxss

@@ -1,10 +1,11 @@
 /**index.wxss**/
-/*看*/
+/*热门推荐*/
 @import "/component/hot/hot.wxss";
-/*搜索*/
-/* @import "/component/search/search.wxss"; */
+/*关注*/
+@import "/component/follow/follow.wxss";
 /*我的*/
 @import "/component/my/my.wxss";
+
 .container{
   background: rgba(240,241,245,1);
 }
@@ -26,6 +27,7 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15rpx;
+  padding: 0 10rpx 0;
 }
 
 .tabbar {
@@ -33,17 +35,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 125rpx;
-  height: 60rpx;
+  width: 164rpx;
+  height: 64rpx;
   font-size: 36rpx;
-  border-radius: 100rpx;
+  border-radius: 30rpx;
   background: #fff;
 }
 
 .select {
-  color: #000;
-  font-size: 40rpx;
-  font-family: SourceHanSansSC-bold;
+  color: #fff;
+  /* font-size: 40rpx; */
+  /* font-family: SourceHanSansSC-bold; */
+  background: #61ca54;
 }
 
 .bottom-tab image {

pages/main/books/books.js

@@ -0,0 +1,7 @@
+Page({
+    onLoad:function(options){
+        wx.setNavigationBarTitle({
+            title: '全部课本'
+          })
+    }
+})

pages/main/books/books.json

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

pages/main/books/books.wxml

@@ -0,0 +1,3 @@
+<view >
+    全部书籍
+</view>

pages/main/class/class.js

@@ -3,7 +3,63 @@ Page({
     fullScreenBtn: false,
     playBtn: false,
     gesture: true,
+    works:[
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '1123'
+      },
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '12332'
+      },
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '12332'
+      },
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '12332'
+      },
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '12332'
+      },
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '12332'
+      },
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '12332'
+      },
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '12332'
+      },
+      {
+        nickName: '萝莉小猫咪',
+        time: '10-18 09:56',
+        avatar: '../../../static/image/timg.jpg',
+        likes: '12332'
+      },
 
+    ]
   },
   onLoad: function (option) {
     if(option.title){
@@ -21,7 +77,14 @@ Page({
     let id = this.data.id;
     let title = this.data.title;
     wx.navigateTo({
-      url: `../../main/reading/reading?id=${id}&title=${title}`
+      url: `../../main/reading/reading?id=${id}&title=${'战狼撤侨归来'}`
+    })
+  },
+  goToWorks: function(){
+    // let id = this.data.id;
+    // let title = this.data.title;
+    wx.navigateTo({
+      url: `../../social/works/works`
     })
   }
 })

pages/main/class/class.wxml

@@ -1,36 +1,35 @@
-<view >
-课件朗读
-  <video
-  class="videoSection"
-  src="http://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8"
-  controls
-  show-fullscreen-btn="{{fullScreenBtn}}"
-  show-play-btn="{{playBtn}}"
-
-  ></video>
-<view class="readWorksSection">
-    <view class="workCard">
-        <image class="avatar" src="../../../static/image/timg.jpg" />
-        <text class="nickName">萝莉小猫咪</text>
-        <text class="time"></text>
-        <view class="likes">
-            <image class="likeTag" src="" />
-            <text class="likeNum">231</text>
+<view class="classPage">
+    <video class="videoSection" src="https://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8" controls show-fullscreen-btn="{{fullScreenBtn}}" show-play-btn="{{playBtn}}"></video>
+    <view class="readWorksSection">
+        <view class="peopleNum">
+            <image class="peoplesIcon" src="../../../static/image/peoples.png" />
+            <view class="title">共有12345人完成了录音</view>
+        </view>
+        <view class="workCard" wx:for="{{works}}" wx:key="{{index}}" bindtap="goToWorks">
+            <image class="avatar" src="{{item.avatar}}" />
+            <view class="name">
+                <text class="nickName">{{item.nickName}}</text>
+                <text class="time">{{item.time}}</text>
+            </view>
+            <view class="likes">
+                <image class="likeTag" src="../../../static/image/like_gray.png" />
+                <text class="likeNum">{{item.likes}}</text>
+            </view>
         </view>
     </view>
-</view>
-<view class="footSection">
-    <view class="collectBtn footerBtn">
-        <image src="../../../static/image/hot_recommand.png" />
-        <text >收藏</text>
-    </view>
-    <view class="readingBtn footerBtn" bindtap="goToReading">
-         <image src="../../../static/image/hot_recommand.png" />
-        <text >我要朗读</text>
-    </view>
-    <view class="shareBtn footerBtn">
-         <image src="../../../static/image/hot_recommand.png" />
-        <text >分享</text>
+    <view class="footSection">
+        <image class="blackbord" src="../../../static/image/blackbord.png" />
+        <view class="collectBtn footerBtn">
+            <image src="../../../static/image/collected.png" />
+            <text>收藏</text>
+        </view>
+        <view class="readingBtn footerBtn" bindtap="goToReading">
+            <image class="microphone" src="../../../static/image/microphone.png" />
+            <text>我要朗读</text>
+        </view>
+        <view class="shareBtn footerBtn">
+            <image src="../../../static/image/share.png" />
+            <text>分享</text>
+        </view>
     </view>
-</view>
 </view>

pages/main/class/class.wxss

@@ -1,28 +1,152 @@
-.videoSection{
+.videoSection {
     width: 750rpx;
     height: 428rpx;
 }
-.footSection{
+.classPage{
+    background: #e8e8e8;
+}
+/**底部按钮区域**/
+.footSection {
     width: 750rpx;
-    height: 124rpx;
+    height: 192rpx;
     position: fixed;
     bottom: 0;
-    background: #aaa;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
+}
+
+.blackbord {
+    width: 100%;
+    height: 192rpx;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
 }
-.readingBtn{
+
+.readingBtn {
     width: 148rpx;
     height: 148rpx;
     border-radius: 50%;
-    background: #aaa;
+    display: flex;
+    align-items: center;
 }
-.footerBtn{
+
+.footerBtn {
     display: flex;
     flex-direction: column;
+    margin-top: 60rpx;
+}
+.collectBtn{
+    margin-left: 80rpx
 }
-.footerBtn image{
-    width: 48rpx;    
+.shareBtn{
+    margin-right: 80rpx
+}
+.footerBtn image {
+    width: 50rpx;
     height: 48rpx;
+    display:block;
+    margin: 0 auto 18rpx; 
+}
+.footerBtn text {
+    width: 112rpx;
+    height: 40rpx;
+    font-size: 28rpx;
+    color: #414141;
+    text-align: center;
+}
+.footSection .microphone {
+    display: block;
+    margin: -6rpx auto 0;
+    width: 108rpx;
+    height: 106rpx;
+}
+.footSection .readingBtn text{
+    margin-top: -10rpx;
+}
+.readWorksSection {
+    width: 100%;
+    background: #e8e8e8;
+    margin-bottom: 150rpx;
+}
+
+.readWorksSection  .peopleNum{
+    display: flex;
+    align-items: center;
+    margin: 10rpx 0 10rpx 24rpx;
+
+}
+.peopleNum .peoplesIcon{
+    width: 28rpx;
+    height: 28rpx;
+    margin-right: 10rpx;
+}
+.peopleNum .title{
+    font-size: 24rpx;
+    color: #5d5d5d;
+    height: 24rpx;
+    line-height: 24rpx;
+}
+
+.readWorksSection .workCard {
+    width: 716rpx;
+    height: 132rpx;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    background: #fff;
+    margin: 0 auto 12rpx;
+    border-radius: 12rpx;
+}
+
+.workCard .avatar {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    margin-left: 20rpx;
+}
+
+.workCard .name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 12rpx;
+}
+
+.workCard .nickName {
+    width: 200rpx;
+    height: 44rpx;
+    color: #000;
+    font-size: 32rpx;
+}
+
+.workCard .time {
+    width: 200rpx;
+    height: 44rpx;
+    color: #686868;
+    font-size: 32rpx;
+
+}
+
+.readWorksSection .likes {
+    display: flex;
+    flex-direction: column;
+    margin-left: 270rpx;
+    width: 104rpx;
+    overflow: hidden;
+    text-align: center;
+}
+
+.likes .likeTag {
+    margin: 0 auto;
+    width: 32rpx;
+    height: 28rpx;
+}
+
+.likes .likeNum {
+    color: #686868;
+    font-size: 32rpx;
 }

pages/main/reading/reading.wxml

@@ -1,34 +1,37 @@
 <view >
-课件朗读
   <video
   id="myVideo"
   class="videoSection"
-  src="http://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8"
+  src="{{videoUrl}}"
   show-fullscreen-btn="{{fullScreenBtn}}"
   show-play-btn="{{playBtn}}"
   show-center-play-btn="{{centerBtn}}"
   muted="{{muted}}"
   enable-progress-gesture="{{gesture}}"
+  bindwaiting="{{videoWaiting}}"
   bindended="{{videoCtr}}"
+  bindplay="{{videoPlay}}"
   ></video>
 
   <!-- <audio name="123" author="123" src="{{recordSource}}" id="myAudio" controls loop></audio> -->
-  <button type="primary" bindtap="audioPlay">试听</button>
-<view class="readWorksSection">
-   
-</view>
-<view class="footSection">
-    <view class="collectBtn footerBtn">
-        <image src="../../../static/image/hot_recommand.png" />
-        <text >收藏</text>
+<scroll-view class="textSection" scroll-y="true">
+   <text class="textContent">
+       {{readingText}}
+   </text>
+</scroll-view>
+    <view class="footSection">
+        <image class="blackbord" src="../../../static/image/blackbord.png" />
+        <view class="collectBtn footerBtn" wx:if="{{btnFlag}}" bindtap="audioPlay">
+            <image src="../../../static/image/listen.png" />
+            <text>试听</text>
+        </view>
+        <view class="readingBtn footerBtn" bindtap="audioRecord">
+            <image class="microphone" src="{{recordFlag === 1 ? recordingGif :microphonePng}}" />
+            <text>我要朗读</text>
+        </view>
+        <view class="shareBtn footerBtn" wx:if="{{btnFlag}}">
+            <image src="../../../static/image/upload.png" />
+            <text>上传</text>
+        </view>
     </view>
-    <view class="readingBtn footerBtn" bindtap="audioRecord">
-         <image src="../../../static/image/hot_recommand.png" />
-        <text >我要朗读</text>
-    </view>
-    <view class="shareBtn footerBtn">
-         <image src="../../../static/image/hot_recommand.png" />
-        <text >分享</text>
-    </view>
-</view>
 </view>

pages/main/reading/reading.wxss

@@ -1,35 +1,101 @@
-.videoSection{
+.videoSection {
     width: 750rpx;
     height: 428rpx;
 }
-audio{
+
+audio {
     background: #000;
     width: 100%;
     height: 200rpx;
     position: fixed;
     bottom: 200rpx;
 }
-.footSection{
+.textSection{
+    width: 100%;
+    height: 600rpx;
+    overflow: visible;
+}
+.textSection .textContent{
+    font-size: 32rpx;
+    line-height: 56rpx;
+    width: 100%;
+    text-align: center;
+    display: block;
+    margin: 0 auto;
+}
+::-webkit-scrollbar{
+    width: 0;
+    height: 0;
+    color: transparent;
+}
+/**底部按钮区域**/
+.footSection {
     width: 750rpx;
-    height: 124rpx;
+    height: 192rpx;
     position: fixed;
     bottom: 0;
-    background: #aaa;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
+}
+
+.blackbord {
+    width: 100%;
+    height: 192rpx;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
 }
-.readingBtn{
+
+.readingBtn {
     width: 148rpx;
     height: 148rpx;
     border-radius: 50%;
-    background: #aaa;
+    display: flex;
+    align-items: center;
+    margin: 60rpx auto 0;
+
 }
-.footerBtn{
+
+.footerBtn {
     display: flex;
     flex-direction: column;
+    margin-top: 60rpx;
+}
+
+.collectBtn {
+    margin-left: 80rpx
+}
+
+.shareBtn {
+    margin-right: 80rpx
 }
-.footerBtn image{
-    width: 48rpx;    
+
+.footerBtn image {
+    width: 50rpx;
     height: 48rpx;
+    display: block;
+    margin: 0 auto 18rpx;
+}
+
+.footerBtn text {
+    width: 112rpx;
+    height: 40rpx;
+    font-size: 28rpx;
+    color: #414141;
+    text-align: center;
+}
+
+.footSection .microphone {
+    display: block;
+    margin: -6rpx auto 0;
+    width: 108rpx;
+    height: 106rpx;
+}
+
+.footSection .readingBtn text {
+    margin-top: -10rpx;
 }

pages/social/works/works.js

@@ -1,3 +1,4 @@
+import httpRequestApi from '../../../utils/APIClient';
 Page({
     data: {
         fullScreenBtn: false,
@@ -30,8 +31,29 @@ Page({
             {
                 nickName: '萝莉小猫咪',
                 image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
+            },
+            {
+                nickName: '萝莉小猫咪',
+                image: '../../../static/image/timg.jpg',
             }
-        ]
+        ],
+        text: '总有一天我将实质性操作死去而你我的\xa0\xa0\xa0\xa0\xa0\xa0\xa0儿子自行车在啊实打实大苏打撒旦将加冕为王'
     },
     onLoad: function (option) {
         if (option.title) {
@@ -43,8 +65,11 @@ Page({
                 id: option.id
             })
         }
+        let uid = 1;
+        httpRequestApi.getWorksDetail(uid,option.id).success((res)=>{
+            console.log(res);
+        });
     },
-
     goToReading: function () {
         let id = this.data.id;
         let title = this.data.title;

pages/social/works/works.json

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

pages/social/works/works.wxml

@@ -1,5 +1,4 @@
 <view>
-    用户作品
     <video class="videoSection" src="http://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8" controls show-fullscreen-btn="{{fullScreenBtn}}" show-play-btn="{{playBtn}}"></video>
     <view class="readAuthorSection">
         <image class="avatar" src="../../../static/image/timg.jpg" />
@@ -13,51 +12,54 @@
         </view>
     </view>
     <view class="userSection">
-        <view class="title">共有12345人完成了录音</view>
-        <view class="avatarRow">
-            <view class="userItem" wx:for="{{user}}" wx:key="{{index}}">
-                <image src="{{item.image}}" />
-                <text class="nickName">{{item.nickName}}</text>
-            </view>
+        <view class="peopleNum">
+            <image class="peoplesIcon" src="../../../static/image/peoples.png" />
+            <view class="title">共有12345人完成了录音</view>
         </view>
+        <scroll-view scroll-x class="scrollWrapper" scroll-with-animation="true">
+            <view class="avatarRow">
+                <view class="userItem" wx:for="{{user}}" wx:key="{{index}}">
+                    <image src="{{item.image}}" />
+                </view>
+            </view>
+        </scroll-view>
     </view>
     <view class="commentSection">
-        <view class="title">
-            评论（38）
-        </view>
-        <input class="commentInput"  placeholder="听了这么多，说点什么吧"/>
-        <view class="commentArea">
-            <view class="commentItem">
-                <iamge class="avatar" />
-                <text class="nickName"></text>
-                <text class="time"></text>
-                <text class="gut"></text>
-                <view class="commentBtn">
-                    <image class="" />
-                    <text >评论</text>
-                </view>
-                <view class="likes">
-                    <image class="" />
-                    <text >165</text>
-                </view>
-                <view class="commentAll">
-                    共有123条评论
-                </view>
+        <view class="title">评论（38）</view>
+        <view class="commentInput">听了这么多，说点什么吧</view>
+    </view>
+    <view class="commentArea">
+        <view class="commentItem">
+            <image class="avatar" src="../../../static/image/timg.jpg" />
+            <view class="commentCore">
+                <text class="nickName">阿尔萨斯</text>
+                <text class="time">10-18 09:56</text>
+                <text class="gut">{{text}}</text>
+                <view class="commentAll">共有123条评论</view>
+            </view>
+            <view class="btnWrapper">
+                <image class="commentBtn" src="../../../static/image/comment.png" />
+                <text class="commentText">评论</text>
+                <image class="likeBtn" src="../../../static/image/like.png" />
+                <text class="likeText">165</text>
             </view>
         </view>
     </view>
     <view class="footSection">
+        <image class="blackbord" src="../../../static/image/blackbord.png" />
         <view class="collectBtn footerBtn">
-            <image src="../../../static/image/hot_recommand.png" />
-            <text>收藏</text>
+            <image src="../../../static/image/bonus.png" />
+            <text>奖励</text>
         </view>
         <view class="readingBtn footerBtn" bindtap="goToReading">
-            <image src="../../../static/image/hot_recommand.png" />
+            <image class="microphone" src="../../../static/image/microphone.png" />
             <text>我要朗读</text>
         </view>
         <view class="shareBtn footerBtn">
-            <image src="../../../static/image/hot_recommand.png" />
-            <text>分享</text>
+            <button open-type="share" plain="true" hover-class="none" >
+                <image src="../../../static/image/share.png" />
+                <text>分享</text>
+            </button>
         </view>
     </view>
 </view>

pages/social/works/works.wxss

@@ -1,50 +1,56 @@
-.videoSection{
+.videoSection {
     width: 750rpx;
     height: 428rpx;
 }
-.readAuthorSection{
+
+.readAuthorSection {
     width: 100%;
     height: 152rpx;
     display: flex;
     /* justify-items: center; */
-    align-items: center
-    
+    align-items: center;
+    border-bottom: solid 2rpx #f0f1f5;
 }
-.readAuthorSection .avatar{
+
+.readAuthorSection .avatar {
     width: 108rpx;
     height: 108rpx;
     border-radius: 50%;
     margin-left: 22rpx;
 }
-.readAuthorSection .nickName{
-    margin-left: 8rpx;
+
+.readAuthorSection .nickName {
+    margin-left: 20rpx;
     width: 160rpx;
     height: 46rpx;
     font-size: 32rpx;
     color: #101010;
 
 }
-.readAuthorSection .like{
+
+.readAuthorSection .like {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 90rpx;
     width: 160rpx;
     height: 60rpx;
-    border: 2rpx solid rgba(255,152,0,1);
+    border: 2rpx solid rgba(255, 152, 0, 1);
     font-size: 28rpx;
     border-radius: 30rpx;
     text-align: center;
     /* line-height: 60rpx; */
     color: #ff9800;
 }
-.readAuthorSection .like image{
+
+.readAuthorSection .like image {
     width: 36rpx;
     height: 36rpx;
     margin-right: 15rpx;
 
 }
-.readAuthorSection .follow{
+
+.readAuthorSection .follow {
     margin-left: 12rpx;
     width: 160rpx;
     height: 60rpx;
@@ -55,70 +61,268 @@
     line-height: 60rpx;
     color: #259b24;
 }
-.userSection{
+
+.userSection {
     width: 100%;
-    height: 196rpx;
+    height: 166rpx;
+    border-bottom: solid 2rpx #f0f1f5;
 }
-.userSection .title{
-    
-}
-.userSection .avatarRow{
+
+.userSection .peopleNum {
     display: flex;
     align-items: center;
-    overflow: hidden;
+    margin: 10rpx 0 0 24rpx;
 }
-.userSection .avatarRow .userItem{
-    margin-right: 20rpx;
+
+.peopleNum .peoplesIcon {
+    width: 28rpx;
+    height: 28rpx;
+    margin-right: 10rpx;
 }
-.avatarRow .userItem image {
+
+.peopleNum .title {
+    font-size: 24rpx;
+    color: #5d5d5d;
+    height: 24rpx;
+    line-height: 24rpx;
+}
+
+.userSection .scrollWrapper {
+    display: flex;
+    margin-top: 16rpx;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    color: transparent;
+}
+
+.userSection .avatarRow {
+    display: flex;
+    align-items: center;
+}
+
+.userSection .avatarRow .userItem {
+    display: felx;
+    justify-items: center;
     width: 100rpx;
     height: 100rpx;
+    margin-left: 18rpx;
+}
+
+.avatarRow .userItem image {
+    width: 96rpx;
+    height: 96rpx;
     border-radius: 50%;
 }
-.avatarRow .userItem .nickName {
-    width: 100rpx;
-    height: 20rpx;
-    color: #101010;
-    font-size: 24rpx;
-    text-align: center;
+
+.commentSection {
+    width: 100%;
+    height: 180rpx;
+}
+
+.commentSection .title {
+    height: 44rpx;
+    font-size: 32rpx;
+    line-height: 44rpx;
+    margin-left: 20rpx;
+    margin-bottom: 10rpx;
+}
+
+.commentSection .commentInput {
+    width: 720rpx;
+    height: 60rpx;
+    margin: 0 auto;
+    background: #f0f1f5;
+    color: #545454;
+    font-size: 28rpx;
+    line-height: 60rpx;
+    text-indent: 20rpx;
+}
+
+.commentArea {
+    width: 100%;
+}
+
+.commentArea .commentItem {
+    width: 704rpx;
+    height: 240rpx;
+    border-bottom: solid 2rpx #f0f1f5;
+    margin: 0 auto 200rpx;
+    display: flex;
+    position: relative;
+}
+
+.commentItem .commentCore {
+    margin-left: 14rpx;
+    width: 600rpx;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.commentItem .avatar {
+    border-radius: 50%;
+    width: 96rpx;
+    height: 96rpx;
+    margin-top: 18rpx;
+}
+
+.commentItem .nickName {
+    margin-top: 18rpx;
+    height: 44rpx;
+    font-size: 32rpx;
+    color: #000;
+    font-family: PingFangSC-Regular;
+}
+
+.commentItem .time {
+    width: 180rpx;
+    height: 44rpx;
+    font-size: 32rpx;
+    color: #686868;
+}
+
+.commentItem .gut {
+    margin-top: 12rpx;
+    width: 420rpx;
+    height: 44rpx;
+    font-size: 32rpx;
+    color: #000;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    overflow: hidden;
 }
-.commentSection{
 
+.commentItem .commentAll {
+    margin-top: 10rpx;
+    width: 263rpx;
+    height: 50rpx;
+    background: #f0f1f5;
+    font-size: 32rpx;
+    color: #61ca54;
+    text-indent: 20rpx;
+    border-radius: 12rpx;
 }
-.commentSection .title{
 
+.commentItem .btnWrapper {
+    position: absolute;
+    top: 10rpx;
+    right: 10rpx;
+    display: flex;
+    align-items: center;
 }
-.commentSection .commentInput{
 
+.btnWrapper .commentBtn {
+    width: 32rpx;
+    height: 30rpx;
+    margin-left: 8rpx;
 }
-.commentSection .commentArea{
-    
+
+.btnWrapper .commentText,
+.likeText {
+    width: 58rpx;
+    height: 40rpx;
+    color: #545454;
+    font-size: 28rpx;
+    line-height: 40rpx;
+    margin-left: 8rpx;
+}
+
+.btnWrapper .likeBtn {
+    width: 32rpx;
+    height: 28rpx;
+    margin-left: 8rpx;
 }
 
-.footSection{
+/**底部按钮区域**/
+.footSection {
     width: 750rpx;
-    height: 124rpx;
+    height: 192rpx;
     position: fixed;
     bottom: 0;
-    background: #aaa;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
 }
-.readingBtn{
+
+.blackbord {
+    width: 100%;
+    height: 192rpx;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+.readingBtn {
     width: 148rpx;
     height: 148rpx;
     border-radius: 50%;
-    background: #aaa;
+    display: flex;
+    align-items: center;
 }
-.footerBtn{
+
+.footerBtn {
     display: flex;
     flex-direction: column;
+    margin-top: 60rpx;
+}
+
+.collectBtn {
+    margin-left: 80rpx
+}
+
+.shareBtn button {
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+    background: #f7f7f7;
+}
+
+button::after {
+    width: 0;
+    height: 0;
+    top: 0;
+    left: 0
+}
+
+.shareBtn {
+    margin-right: 80rpx;
+    padding: 0;
+    background: #fff;
 }
-.footerBtn image{
-    width: 48rpx;    
+
+.footerBtn image {
+    width: 50rpx;
     height: 48rpx;
+    display: block;
+    margin: 0 auto 18rpx;
+}
+
+.footerBtn text {
+    width: 112rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #414141;
+    text-align: center;
+}
+
+.footSection .microphone {
+    display: block;
+    margin: -6rpx auto 0;
+    width: 108rpx;
+    height: 106rpx;
+}
+
+.footSection .readingBtn text {
+    margin-top: -10rpx;
 }

utils/APIClient.js

@@ -0,0 +1,40 @@
+var constant = require('const.js');
+const HOST_PRODUCT = constant.productApi;
+const HOST_BASE = constant.baseApi;
+let request = require('WXHttpRequest.js');
+const httputil = require('httpUtill.js');
+
+function getProductUrl(action) {
+	return HOST_PRODUCT + action;
+}
+
+function getBaseUrl(action) {
+	return HOST_BASE + action;
+}
+module.exports = {
+	//获取推荐首页信息
+	getIndex(uid) {
+		let url = getProductUrl('wx/index');
+		return request.getInstance().header({
+			uid
+		}).url(url).send();
+	},
+	// 获取首页人气推荐
+	getHotRecommend(uid, pageNo, pageSize) {
+		let url = getBaseUrl('wx/userRead/recommend');
+		console.log(url);
+		return request.getInstance().header({
+			uid
+		}).data({
+			pageNo,
+			pageSize,
+		}).url(url).send();
+	},
+	// 获取用户朗读详细信息
+	getWorksDetail(uid, readId) {
+		let url = getBaseUrl(`wx/userRead/info/${readId}`);
+		return request.getInstance().header({
+			uid
+		}).url(url).send();
+	}
+}

utils/WXHttpRequest.js

@@ -0,0 +1,51 @@
+module.exports = {
+	getInstance: function() {
+		return {
+			_sucCallback: null,
+			_failCallback: null,
+			_method: 'GET',
+			_data: {},
+			_header: { 'content-type': 'application/json'	},
+			_url: '',
+			send: function() {
+				wx.request({
+					url: this._url,
+					data: this._data,
+					method: this._method,
+					header: this._header,
+					success: function(res) {
+						this._sucCallback(res);
+					}.bind(this),
+					fail: function(res) {
+						this._failCallback(res);
+					}.bind(this)
+				});
+				return this;
+			},
+			success: function(callback) {
+				this._sucCallback = callback;
+				return this;
+			},
+			fail: function(callback) {
+				this._failCallback = callback;
+				return this;
+			},
+			url: function(url) {
+				this._url = url;
+				return this;
+			},
+			data: function(data) {
+				this._data = data;
+				return this;
+			},
+			header: function(header) {
+				this._header = header;
+				return this;
+			},
+			method: function(method) {
+				this._method = method;
+				return this;
+			}
+		};
+	}
+};

utils/const.js

@@ -0,0 +1,7 @@
+// 常量列表
+module.exports = {
+
+	// ----测试环境-----
+	productApi: 'https://readerproduct.efunbox.cn/',
+  baseApi: 'https://readerbase.efunbox.cn/'
+}

utils/httpUtill.js

@@ -0,0 +1,61 @@
+const request = require('./WXHttpRequest.js');
+const url = require('./const.js');
+const util = require('./util.js');
+
+const HOST = url.apiUrlOnLine;
+
+
+function genAPIUrl(action) {
+	return HOST + action;
+}
+
+// 登录
+function wxLogin(successcallback, failcallback) {
+    wx.showToast({
+        title: '登录中...',
+        icon: 'loading',
+        duration: 1500
+    })
+    wx.login({  
+        success: function(res) {
+            if (res.code) {
+                // 获取openid
+                 let url = genAPIUrl('wx/openId')
+                 let data = { code: res.code }
+                 return request.getInstance().url(url).data(data).send().success(successcallback).fail(failcallback);
+            } else {
+                console.log('获取用户登录态失败！' + res.errMsg)
+            }
+        }
+    })
+}
+
+// 获取原来的 openid 和 session_key
+function getOpenidSessionKey(successcallback, failcallback) {
+    if (wx.getStorageSync('user')) {
+      successcallback(
+        wx.getStorageSync('user'),
+        //分享小程序按钮
+        wx.showShareMenu({
+          withShareTicket: true
+        })
+      );
+      return;
+    }
+    wxLogin(function(res) {
+      if(res.data.code == 200){
+        let sessionKey = res.data.data.session_key;
+        let openId = res.data.data.openid;
+        getLoginSchedule(sessionKey, openId, successcallback, failcallback);
+      }
+
+    },function(res) {
+        failcallback(res);
+    })    
+}
+
+//登录
+
+module.exports = {
+    getOpenidSessionKey
+}