'简版开发'

app.js

@@ -11,6 +11,9 @@ App({
   globalData: {
     isIPX: false, // 当前设备是否为 iPhone X
     isIOS: false, // 判断设备是否为苹果
+    userInfo: null,
+    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
+    userGrade: '二年级'
   },
   checkIsIPhoneX: function () {
     const self = this

app.json

@@ -24,13 +24,7 @@
     "pages/vipPage/wechat/wechat"
   ],
   "window": {
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#12C962",
-    "navigationBarTitleText": "小学语文朗读配音",
-    "navigationBarTextStyle": "white",
-    "backgroundColor": "#12C962",
-    "onReachBottomDistance": 50,
-    "enablePullDownRefresh": true
+    "navigationStyle": "custom"
   },
   "debug": false,
   "sitemapLocation": "sitemap.json"

component/comment/comment.js

@@ -0,0 +1,57 @@
+// component/comment.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    commentList: {
+      type: Array,
+      value: [],
+      observer: function observer() {
+        console.log(123)
+        this.formatList()
+      }
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    inputValue: '',
+    showControl: 0
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    formatList: function formatList(changeIndex) {
+      this.data.commentList.map((item, index) => {
+        if (changeIndex && index === changeIndex) {
+          item.showControl = 100;
+
+        } else {
+          item.showControl = 0;
+
+        }
+      })
+      this.setData({
+        commentList: this.data.commentList
+      })
+      console.log(321, this.data.commentList)
+    },
+    showMore: function showMore(e) {
+      // this.formatList(100)
+    },
+    sendReply: function sendReply(e) {
+      console.log('sendReply', e.detail.value)
+      this.triggerEvent('sendReply', {
+        content: e.detail.value
+      });
+      this.setData({
+        inputValue: '',
+      })
+    },
+  }
+})

component/comment/comment.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

component/comment/comment.less

@@ -0,0 +1,184 @@
+.container {
+    position: fixed;
+    z-index: 99;
+    bottom: 0;
+    width: 100%;
+    // height: auto;
+    // min-height: 550rpx;
+    max-height: 900rpx;
+    background: #ffffff;
+
+
+    .comment_number {
+        width: 100%;
+        height: 68rpx;
+        display: flex;
+        align-items: center;
+        padding-left: 20rpx;
+        color: #4a4a4a;
+        font-size: 30rpx;
+    }
+
+    .comment_item {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        padding-left: 20rpx;
+        padding-right: 68rpx;
+        box-sizing: border-box;
+
+        .comment_box {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+
+            .avatar_box {
+                width: 111rpx;
+                height: 100%;
+                display: block;
+                margin-right: 15rpx;
+
+                image {
+                    width: 96rpx;
+                    height: 96rpx;
+                    background: chocolate;
+                    border-radius: 50%;
+                }
+            }
+
+            .comment_info {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                width: 100%;
+
+                .nickname {
+                    font-size: 30rpx;
+                    color: rgba(0, 0, 0, .6);
+
+                }
+
+                .comment_text {
+                    font-size: 28rpx;
+                    color: rgba(0, 0, 0, 0.6);
+                    margin-bottom: 23rpx;
+                }
+
+                .comment_reply_wrapper {
+                    background: rgba(0, 0, 0, .03);
+                    width: 100%;
+
+                    .comment_reply_item {
+                        font-size: 28rpx;
+                        color: rgba(0, 0, 0, .6);
+
+                        .reply_nickname {
+                            color: rgba(1, 67, 124, .6);
+                        }
+
+                    }
+
+                    .more_btn {
+                        display: flex;
+                        justify-content: flex-end;
+                        width: 100%;
+                        height: 37rpx;
+                        font-size: 26rpx;
+                        color: #698FAF;
+                        padding-right: 20rpx;
+                    }
+                }
+
+                .time_info {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-top: 30rpx;
+
+                    .time {
+                        color: rgba(0, 0, 0, .6);
+                        font-size: 28rpx;
+
+                    }
+
+                    .info {
+                        width: 200rpx;
+                        height: 100%;
+                        display: flex;
+                        position: relative;
+
+                        .like {
+                            width: 80rpx;
+                            height: 35rpx;
+                            display: flex;
+                            align-items: center;
+                            position: absolute;
+                            top: -14rpx;
+                            left: 0;
+
+                            image {
+                                width: 30rpx;
+                                height: 27rpx;
+                                margin-right: 12rpx;
+                            }
+
+                            text {
+                                font-size: 22.4rpx;
+                                color: rgba(0, 0, 0, .6);
+                            }
+                        }
+
+                        .comment {
+                            width: 80rpx;
+                            height: 35rpx;
+                            display: flex;
+                            align-items: center;
+                            position: absolute;
+                            top: -14rpx;
+                            left: 120rpx;
+
+                            image {
+                                width: 28.8rpx;
+                                height: 25rpx;
+                                margin-right: 16rpx;
+                            }
+
+                            text {
+                                font-size: 22.4rpx;
+                                color: rgba(0, 0, 0, .6);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .place_line {
+            height: 1rpx;
+            width: 103%;
+            background: #979797;
+            margin-top: 35rpx;
+            margin-bottom: 33rpx;
+            opacity: .34;
+            position: relative;
+            left: 10rpx;
+        }
+    }
+
+
+
+    .comment_input {
+        width: 100%;
+        height: 120rpx;
+        background: #eeeded;
+        position: fixed;
+        bottom: 0;
+        input {
+            width: 100%;
+            height: 100%;
+            background: #eeeded;
+        }
+    }
+}

component/comment/comment.wxml

@@ -0,0 +1,39 @@
+<!-- component/comment.wxml -->
+<scroll-view class="container" scroll-y="{{true}}">
+    <view class="comment_number">评论 {{commentNum}}</view>
+    <view class="comment_item" wx:for="{{commentList}}" data-commentid="{{item.id}}" wx:key="*this">
+        <view class="comment_box">
+            <view class="avatar_box">
+                <image src="{{item.avatar}}" />
+            </view>
+            <view class="comment_info">
+                <text class="nickname">{{item.nickName}}</text>
+                <text class="comment_text" space="false">{{item.text}}</text>
+                <view class="comment_reply_wrapper" wx:if="{{item.replyCount > 0}}">
+                    <view class="comment_reply_item" wx:for="{{item.replyList}}" wx:if="{{index > showControl}}" wx:key="{{item.id}}">
+                        <text class="reply_nickname">{{item.user.nickName}}：</text>
+                        <text class="reply_text">{{item.content}}</text>
+                    </view>
+                    <view wx:if="{{item.replyCount > 1}}" class="more_btn">更多></view>
+                </view>
+                <view class="time_info">
+                    <view class="time">{{item.time}}</view>
+                    <view class="info">
+                        <view class="like">
+                            <image src="../../static/index/flower.png" />
+                            <text>{{item.likes}}</text>
+                        </view>
+                        <view class="comment">
+                            <image src="../../static/index/comment.png" />
+                            <text>{{item.replyCount}}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="place_line"></view>
+    </view>
+    <view class="comment_input">
+        <input confirm-type="hold" value="{{inputValue}}" bindconfirm="sendReply" placeholder="给好评..." />
+    </view>
+</scroll-view>

component/comment/comment.wxss

@@ -0,0 +1,153 @@
+.container {
+  position: fixed;
+  z-index: 99;
+  bottom: 0;
+  width: 100%;
+  max-height: 900rpx;
+  background: #ffffff;
+}
+.container .comment_number {
+  width: 100%;
+  height: 68rpx;
+  display: flex;
+  align-items: center;
+  padding-left: 20rpx;
+  color: #4a4a4a;
+  font-size: 30rpx;
+}
+.container .comment_item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-left: 20rpx;
+  padding-right: 68rpx;
+  box-sizing: border-box;
+}
+.container .comment_item .comment_box {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.container .comment_item .comment_box .avatar_box {
+  width: 111rpx;
+  height: 100%;
+  display: block;
+  margin-right: 15rpx;
+}
+.container .comment_item .comment_box .avatar_box image {
+  width: 96rpx;
+  height: 96rpx;
+  background: chocolate;
+  border-radius: 50%;
+}
+.container .comment_item .comment_box .comment_info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+.container .comment_item .comment_box .comment_info .nickname {
+  font-size: 30rpx;
+  color: rgba(0, 0, 0, 0.6);
+}
+.container .comment_item .comment_box .comment_info .comment_text {
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 23rpx;
+}
+.container .comment_item .comment_box .comment_info .comment_reply_wrapper {
+  background: rgba(0, 0, 0, 0.03);
+  width: 100%;
+}
+.container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item {
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.6);
+}
+.container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item .reply_nickname {
+  color: rgba(1, 67, 124, 0.6);
+}
+.container .comment_item .comment_box .comment_info .comment_reply_wrapper .more_btn {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 37rpx;
+  font-size: 26rpx;
+  color: #698FAF;
+  padding-right: 20rpx;
+}
+.container .comment_item .comment_box .comment_info .time_info {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 30rpx;
+}
+.container .comment_item .comment_box .comment_info .time_info .time {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 28rpx;
+}
+.container .comment_item .comment_box .comment_info .time_info .info {
+  width: 200rpx;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+.container .comment_item .comment_box .comment_info .time_info .info .like {
+  width: 80rpx;
+  height: 35rpx;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -14rpx;
+  left: 0;
+}
+.container .comment_item .comment_box .comment_info .time_info .info .like image {
+  width: 30rpx;
+  height: 27rpx;
+  margin-right: 12rpx;
+}
+.container .comment_item .comment_box .comment_info .time_info .info .like text {
+  font-size: 22.4rpx;
+  color: rgba(0, 0, 0, 0.6);
+}
+.container .comment_item .comment_box .comment_info .time_info .info .comment {
+  width: 80rpx;
+  height: 35rpx;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -14rpx;
+  left: 120rpx;
+}
+.container .comment_item .comment_box .comment_info .time_info .info .comment image {
+  width: 28.8rpx;
+  height: 25rpx;
+  margin-right: 16rpx;
+}
+.container .comment_item .comment_box .comment_info .time_info .info .comment text {
+  font-size: 22.4rpx;
+  color: rgba(0, 0, 0, 0.6);
+}
+.container .comment_item .place_line {
+  height: 1rpx;
+  width: 103%;
+  background: #979797;
+  margin-top: 35rpx;
+  margin-bottom: 33rpx;
+  opacity: 0.34;
+  position: relative;
+  left: 10rpx;
+}
+.container .comment_input {
+  width: 100%;
+  height: 120rpx;
+  background: #eeeded;
+  position: fixed;
+  bottom: 0;
+}
+.container .comment_input input {
+  width: 100%;
+  height: 100%;
+  background: #eeeded;
+}

component/my/my.js

@@ -24,6 +24,7 @@ export const myInit = (that) => {
   });
   that.getUserWorksInfo();
   that.getUserAuth(); //用户鉴权
+  // that.getMyRead();
   console.log(that.data.myData)
   that.toMyEdit = (e) => {
       let title = e.currentTarget.dataset.title;

component/my/my.wxml

@@ -23,8 +23,6 @@
               <view class='amount-text'>{{ myData.user.fansAmount || 0 }} 粉丝</view>
             </view>
           </view>
-          <!-- <view class='avatar-birthday'>{{ myData.user.user.birthday }}</view>
-            <view class='avatar-address'>{{ myData.user.user.schoolName }}</view> -->
         </view>
       </view>
       <!-- ios只显示红花 -->
@@ -42,21 +40,6 @@
       </view> -->
       <!-- android 显示两个 -->
       <view class="wallet-section" >
-        <!-- <view class="wallet-box" bindtap="toWalletDetail">
-          <view class="grey-point"></view>
-          <image class="wallet-icon" src='../../static/image/wallet.png' />
-          <view>钱包：{{myData.user.walletAmount / 100  || 0 }}</view>
-        </view> -->
-        <view class="wallet-box" bindtap="toVIPBuy">
-          <view class="grey-point"></view>
-          <image class="wallet-icon" src="{{myData.isIOS ? '../../static/vip/idcard.png' : '../../static/vip/small_crown.png'}}" />
-          <view class="right_vip">
-            <view class="vip_text">{{myData.isIOS ? '激活码激活': 'VIP会员'}}</view>
-            <view class="{{myData.isVIP ? 'vip': 'grey'}}">
-              {{myData.isVIP ? myData.isIOS ? '已激活': '已开通': myData.isIOS ? '立即激活': '立即开通'}}
-            </view>
-          </view>
-        </view>
         <view class="flower-box" bindtap="goToFlower">
           <view class="grey-point"></view>
           <image class="flower-icon" src='../../static/image/flower_small.png' />
@@ -78,96 +61,11 @@
           <image src="../../static/image/collect.png" />
           <view class="btn-title">我的收藏</view>
         </view>
-        <!-- <view class="btn" bindtap='toMyCollage' data-title='{{ myData.collage }}'>
-          <image src="../../static/image/firends.png" />
-          <view class="btn-title">我的{{myData.isIOS? '助力' : '拼团'}}</view>
-        </view> -->
         <view class="btn">
           <image src="../../static/image/message.png" bindtap="goToMessage" />
           <view class="btn-title">消息/客服</view>
         </view>
       </view>
-      <view class="my-reading-section">
-        <view class="my-reading-title" wx:if="{{myData.user.myRead}}">
-          <view class="title-left">我的作品</view>
-          <view class="title-right" bindtap="toMyRead">
-            更多
-            <image src="../../static/image/black_to.png" />
-          </view>
-        </view>
-        <view class="my-reading-section-placeholder" wx:if="{{!myData.user.myRead}}">
-          您还没有朗读过，快去留下声音吧
-        </view>
-        <view class="my-reading-gut" wx:if="{{myData.user.myRead}}">
-          <view class="worksCard" style="margin-bottom: 0;" bindtap="openWorks" data-readId="{{myData.user.myRead.id}}" data-title="{{myData.user.myRead.title}}">
-            <view class="topData">
-              <view class="worksLeft">
-                <image class="authorAvatar" lazy-load="true" src="{{myData.user.user.avatar}}" />
-                <view class="profession" wx:if="{{item.profession}}">{{item.profession}}</view>
-                <view class="worksInfo">
-                  <view class="authorName">{{myData.user.user.wechatName}}</view>
-                  <view class="time">{{myData.user.myRead.gmtCreated}}</view>
-                </view>
-              </view>
-              <view class="numberInfo">
-                <view class="wareCardPlays">
-                  <image class="wareCardPlaysImg" lazy-load="true" src="../../static/image/hotPlays.png" />
-                  <text>{{myData.user.myRead.playAmount}}</text>
-                </view>
-                <view class="wareCardLikes">
-                  <image class="wareCardLikesImg" lazy-load="true" src="../../static/image/flower_small_pink.png" />
-                  <text>{{myData.user.myRead.likeAmount}}</text>
-                </view>
-              </view>
-            </view>
-            <image class="wareCardImg" src="{{myData.user.myRead.iconImg}}" />
-            <view class="titleSummary">
-              <text class="wareCardTitle">{{myData.user.myRead.title}}</text>
-              <text class="wareCardTip">{{myData.user.myRead.summary}}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-      <view class="my-reading-section ">
-        <view class="my-reading-title">
-          <view class="title-left">关注的人的作品</view>
-          <!-- <view class="title-right">
-            更多
-            <image src="../../static/image/black_to.png" />
-          </view> -->
-        </view>
-        <view class="my-reading-section-placeholder" wx:if="{{followData.length === 0}}">没有更多</view>
-        <view class="my-reading-gut">
-          <view wx:for="{{followData}}" wx:key="{{index}}" class="worksCard" bindtap="openWorks" data-readid="{{item.id}}" data-title="{{item.title}}">
-            <view class="topData">
-              <view class="worksLeft" catchtap="goToUsers" data-uid="{{item.uid}}">
-                <image class="authorAvatar" lazy-load="true" src="{{item.avatar}}" />
-                <view class="profession" wx:if="{{item.profession}}">{{item.profession}}</view>
-                <view class="worksInfo">
-                  <view class="authorName">{{item.nickName}}</view>
-                  <view class="time">{{item.time}}</view>
-                </view>
-              </view>
-              <view class="numberInfo">
-                <view class="wareCardPlays">
-                  <image class="wareCardPlaysImg" lazy-load="true" src="../../static/image/hotPlays.png" />
-                  <text>{{item.plays}}</text>
-                </view>
-                <view class="wareCardLikes">
-                  <image class="wareCardLikesImg" lazy-load="true" src="../../static/image/flower_small_pink.png" />
-                  <text>{{item.likes}}</text>
-                </view>
-              </view>
-            </view>
-            <image class="wareCardImg" src="{{item.img}}" />
-            <view class="titleSummary">
-              <text class="wareCardTitle">{{item.title}}</text>
-              <text class="wareCardTip">{{item.summary}}</text>
-            </view>
-          </view>
-        </view>
-      </view>
     </view>
-    <view class="footer-section" wx:if="{{ifHaveMore}}">加载更多</view>
   </view>
 </template>

component/statusBar/statusBar.js

@@ -0,0 +1,74 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    receiveData: {
+      type: null,
+      observer: function (newVal, oldVal) {
+        let gradeText = '一年级'
+        switch (newVal.grade) {
+          case '0':
+            gradeText = '学前班';
+            break;
+          case '1':
+            gradeText = '一年级';
+            break;
+          case '2':
+            gradeText = '二年级';
+            break;
+          case '3':
+            gradeText = '三年级';
+            break;
+        }
+        this.setData({
+          isshowbtn: newVal.isshowbtn, //是否显示按钮
+          title: newVal.title, //标题
+          grade: gradeText
+        })
+      }
+    },
+    grade: {
+      type: 'String',
+      observer: function (newVal) {
+        console.log('年级',newVal)
+        let gradeText = '一年级'
+        switch (newVal) {
+          case '0':
+            gradeText = '学前班';
+            break;
+          case '1':
+            gradeText = '一年级';
+            break;
+          case '2':
+            gradeText = '二年级';
+            break;
+          case '3':
+            gradeText = '三年级';
+            break;
+        }
+        this.setData({
+          gradeText: gradeText
+        })
+      }
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    statusBarHeight: getApp().globalData.statusBarHeight
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    //点击年级
+    gradeTap: function () {
+      console.log("点击年级");
+      this.triggerEvent('gradeTap', 'false');
+    }
+  }
+})

component/statusBar/statusBar.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

component/statusBar/statusBar.wxml

@@ -0,0 +1,14 @@
+<!-- 没有按钮的情况 -->
+<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px" wx:if="{{!isshowbtn}}">
+    <view class='custom titlev'>{{title}}</view>
+</view>
+<!-- 显示按钮的情况 -->
+<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px" wx:else>
+    <view class='custom iconv' bindtap="gradeTap">
+        <text class="custom text">{{gradeText}}</text>
+        <view class="custom arrow"></view>
+    </view>
+    <view class='custom title'>{{title}}</view>
+</view>
+<!-- 站位行，填补空白 -->
+<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

component/statusBar/statusBar.wxss

@@ -0,0 +1,70 @@
+/* component/statusBar/statusBar.wxss */
+.flex_center {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    height: 45px;
+    background: #12C962;
+    z-index: 999;
+    display: flex;
+}
+
+.custom .iconv {
+    max-width: 150rpx;
+    min-width: 80rpx;
+    text-align: center;
+    display: flex;
+    border-radius: 60rpx;
+    margin: 12rpx 10rpx;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 10rpx;
+}
+
+.custom .iconv .text {
+    color: #fff;
+    font-size: 30rpx;
+    margin-right: 12rpx;
+}
+
+.custom .iconv .arrow {
+    margin-top: -11rpx;
+    width: 19rpx;
+    height: 19rpx;
+    border-right: solid 2rpx #fff;
+    border-bottom: solid 2rpx #fff;
+    transform: rotate(45deg);
+
+}
+
+.custom .title {
+    color: #fff;
+    font-size: 36rpx;
+    font-weight: 400;
+    min-width: 350rpx;
+    max-width: 420rpx;
+    line-height: 45px;
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.custom .titlev {
+    color: #333;
+    font-size: 34rpx;
+    font-weight: 500;
+    width: 500rpx;
+    line-height: 45px;
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-left: 50rpx;
+}
+
+.empty_custom {
+    height: 45px;
+    width: 100%;
+}

component/video-swiper/index.js

@@ -28,7 +28,7 @@ Component({
                 this._videoListChanged(newVal);
             }
         },
-        nextMargin:{
+        nextMargin: {
             type: String,
             value: '400rpx'
 
@@ -80,7 +80,9 @@ Component({
             if (diff === 0) return;
             this.data._last = current;
             this.playCurrent(current);
-            this.triggerEvent('change', { activeId: curQueue[current].id });
+            this.triggerEvent('change', {
+                activeId: curQueue[current].id
+            });
             var direction = diff === 1 || diff === -2 ? 'up' : 'down';
             if (direction === 'up') {
                 if (this.data._invalidDown === 0) {
@@ -127,6 +129,7 @@ Component({
             });
         },
         playCurrent: function playCurrent(current) {
+            return;// 注掉自动播放
             this.data._videoContexts.forEach(function (ctx, index) {
                 index !== current ? ctx.pause() : ctx.play();
             });
@@ -155,15 +158,26 @@ Component({
         onLoadedMetaData: function onLoadedMetaData(e) {
             this.trigger(e, 'loadedmetadata');
         },
-        onTimeUpdate: function onTimeUpdate(e){
+        onTimeUpdate: function onTimeUpdate(e) {
 
         },
+        openComment: function openComment(e) {
+            console.log(e)
+            this.trigger(e, 'openComment')
+        },
+        // 点击头部
+        headTap: function headTap(e){
+            this.trigger(e,'headTap')
+        },
         trigger: function trigger(e, type) {
             var ext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-            var detail = e.detail;
-            var activeId = e.target.dataset.id;
-            this.triggerEvent(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext));
+            // var detail = e.detail;
+            var activeId =  e.target.dataset.id ? e.target.dataset.id : e.currentTarget.dataset.id;
+            this.triggerEvent(type, {activeId: activeId},{bubbles:false});
+          /*   this.triggerEvent(type, Object.assign(Object.assign(Object.assign({}, detail), {
+                activeId: activeId
+            }), ext)); */
         }
     }
 });

component/video-swiper/index.wxml

@@ -5,13 +5,14 @@
     next-margin="{{nextMargin}}" 
     easing-function="{{easingFunction}}" 
     vertical 
-    current="1"
+    current="0"
     duration="{{duration}}" 
     bindanimationfinish="animationfinish">
     <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
-    <swiper-item class="swiper_item" wx:for="{{curQueue}}" wx:key="*this">
+        
+    <swiper-item class="swiper_item" wx:for="{{curQueue}}"  data-id="{{item.id}}"  wx:key="*this">
       <view class="head_box">
-        <view class="user_box">
+        <view class="user_box" catchtap="headTap" data-id="{{item.uid}}">
           <image class="avatar" lazy-load="true" src="{{item.avatar}}" />
           <view class="user_right">
             <view class="nickname">{{item.nickName}}</view>
@@ -38,18 +39,17 @@
         show-center-play-btn="{{false}}"
         controls="{{true}}"
         src="{{item.url}}" 
-        data-id="{{item.id}}"
         object-fit="contain"
         data-index="{{index}}"
-        bindplay="onPlay"
+      >
+      <!--   bindplay="onPlay"
         bindpause="onPause"
         bindended="onEnded"
         binderror="onError"
         bindtimeupdate="onTimeUpdate"
         bindwaiting="onWaiting"
         bindprogress="onProgress"
-        bindloadedmetadata="onLoadedMetaData"
-      >
+        bindloadedmetadata="onLoadedMetaData" -->
       </video>
       <view class="video_title">
         <text>
@@ -74,9 +74,9 @@
               <image class="flower_btn_icon" src="../../static/index/flower.png" lazy-load="true" />
               <text>{{item.likes}}</text>
           </view>
-          <view class="btn comment_btn">
+          <view class="btn comment_btn" catchtap="openComment" data-id="{{item.id}}">
               <image class="comment_btn_icon" src="../../static/index/comment.png" lazy-load="true" />
-              <text>{{item.likes}}</text>
+              <text>{{item.likes}}123</text>
           </view>
         </view>
             

pages/index/index.js

@@ -56,7 +56,7 @@ Page({
     followPageNo: 1,
     followPageTotalNo: 1,
     myData: {},
-    templates: 'hot',
+    templates: '',
     title: 'index中的title',
     jurisdictionFlag: true,
     hotInput: '12345',
@@ -68,7 +68,12 @@ Page({
     indexMissionDialog: false,
     unfinishedCount: 0,
     videoList: [],
-    nextMargin: '400rpx' // 视频下边距
+    nextMargin: '400rpx', // 视频下边距
+    commentShow: false,
+    commentList: [],
+    commentNum: 0,
+    followPageNo: 1,
+    followPageSize: 6
   },
   jurisdiction: function () {
     //隐藏弹框
@@ -88,37 +93,56 @@ Page({
   // 根据index 更新template
   updateData: function (index) {
     let myIndex = index;
-    let templates = this.data.tab[myIndex].templates;
     this.setData({
       myIndex,
-      templates
     });
+    // 获取推荐列表
     if (myIndex == 0) {
-      // groupInit(this);
       this.setData({
-        followPageNo: 1,
+        videoList: []
+      }, () => {
+        this.getHotRecommend(this.uid);
       })
-      getOpenidSessionKey((res) => {
-        console.log(res)
-        myInit(this);
-      }, (error) => {
-        console.log(error)
-        wx.setStorageSync('userSourseType', 'normal')
-        this.setData({
-          hide: !this.data.hide
-        })
-        return;
-      });
-    }
-    if (myIndex == 1) {
-      // this.setData({
-      //   recommendPageNo: 0
-      // })
-      hotInit(this);
+      return;
     }
+    // 刷新资源
     if (myIndex == 2) {
       groupInit(this);
+      return;
+    }
+
+    /* 关注和我的需要登陆后查看 */
+
+    getOpenidSessionKey((res) => {}, (error) => {
+      console.log('获取信息失败', error)
+      wx.setStorageSync('userSourseType', 'normal')
+      this.setData({
+        hide: !this.data.hide
+      })
+      return;
+    });
+    console.log('继续')
+    // 刷新关注列表
+    if (myIndex == 1) {
+      this.setData({
+        videoList: []
+      }, () => {
+        this.getFollowData()
+      })
+      return;
+    }
+    // 刷新我的
+    if (myIndex == 3) {
+      this.setData({
+        videoList: [],
+        templates: 'my'
+      }, () => {
+        myInit(this);
+      })
+      return;
     }
+
+
   },
   onLoad: function (options) {
     this.uid = wx.getStorageSync('uid');
@@ -176,9 +200,9 @@ Page({
     })
     // this.init();
     getOpenidNoLogin((res) => {
-      let winH = this.data.winH * 2;
+      let winH = this.data.winH * this.data.devicePixelRatio;
       // let minusNumber = 860;
-      let minusNumber = (winH * 860) / 1206;
+      let minusNumber = (winH * 880) / 1206;
 
       // if(winH < 510){
       //   minusNumber = 400;
@@ -191,8 +215,7 @@ Page({
       this.setData({
         nextMargin: nextMargin + 'rpx'
       })
-      this.getHotRecommend(this.uid);
-
+      this.updateData(0)
       // hotInit(this)
     }, (error) => {
       // console.log(error)
@@ -207,7 +230,16 @@ Page({
       // 从修改信息页面退回
       // this.getUserWorksInfo(true);
     }
+    this.setData({
+      statusbarobj: {
+        isshowbtn: true, //是否显示按钮
+        title: "小学语文课文朗读", //标题
+      },
+      grade: wx.getStorageSync('grade') ? wx.getStorageSync('grade') : '2'
+
+    })
   },
+
   onHide: function () {
     const str = 'hotData.inputFocus'
     this.setData({
@@ -222,7 +254,6 @@ Page({
     ).success((res) => {
       // 点击切换按钮时 只刷新我的课程和未读消息 官方推荐和热门不加载
       const recommendRes = res.data.data;
-
       console.log(res)
       recommendRes.hotReader.forEach(item => {
         const temp = {};
@@ -237,7 +268,7 @@ Page({
         temp.url = item.userRead.originVideo;
         // temp.avatar = item.user.avatar;
         temp.nickName = item.user ? item.user.wechatName : '';
-        temp.id = item.id;
+        temp.id = item.userRead.id;
         // recommendWorks.push(temp);
         // that.data.hotData.hotWorks.push(temp);
         this.data.videoList.push(temp);
@@ -246,13 +277,6 @@ Page({
         videoList: this.data.videoList
       })
       this.getHotRecommendSecond(this.uid, 1, 5)
-      const hotStr = 'hotData.hotWorks'
-      const myCourseStr = 'hotData.myCourse'
-      const isMessageNormal = 'hotData.isMessageNormal'
-      const unReadMessageContent = 'hotData.unReadMessageContent'
-      // that.setData({
-
-      // })
     })
   },
   // 获取热门作品 算法出来的
@@ -275,6 +299,7 @@ Page({
         temp.profession = item.user.profession;
         temp.uid = item.user.uid;
         temp.url = item.userRead.originVideo;
+        temp.id = item.userRead.id;
         // temp.avatar = item.user.avatar;
         temp.nickName = item.user.wechatName;
         // recommendWorks.push(temp);
@@ -308,6 +333,7 @@ Page({
       [str]: userLocal
     })
     httpRequestApi.getUserWorksInfo().success(res => {
+      console.log('getUserWorksInfo',res)
       this.data.myData.user = res.data.data;
       httpRequestApi.userIntoPage('pages/index/index', '首页我的').success((res) => {})
       if (this.data.myData.user.myRead) {
@@ -315,6 +341,9 @@ Page({
       }
       this.setData({
         myData: this.data.myData,
+        userInfo: res.data.data.user
+      },()=>{
+        this.getMyRead()
       });
     }).fail(error => {
       console.log(error)
@@ -322,35 +351,35 @@ Page({
   },
   // 触底加载
   onReachBottom: function () {
-    console.log(this.data.myIndex)
-    if (this.data.myIndex === 0) {
-      this.setData({
-        followPageNo: this.data.followPageNo + 1
-      })
-      if (this.data.followPageNo <= this.data.followPageTotalNo) {
-        this.getFollowWorks(this.data.followPageNo, 3);
+    // console.log(this.data.myIndex)
+    // if (this.data.myIndex === 0) {
+    //   this.setData({
+    //     followPageNo: this.data.followPageNo + 1
+    //   })
+    //   if (this.data.followPageNo <= this.data.followPageTotalNo) {
+    //     this.getFollowWorks(this.data.followPageNo, 3);
 
-      } else {
-        console.log('没有更多')
-        this.setData({
-          ifHaveMore: false
-        })
-      }
-    }
-    // 当前在推荐页面 加载推荐
-    if (this.data.myIndex === 1) {
-      console.log(this.data.recommendPageNo)
-      console.log(this.data.recommendTotalNo)
-      this.setData({
-        recommendPageNo: this.data.recommendPageNo + 1
-      })
-      if (this.data.recommendPageNo <= this.data.recommendTotalNo) {
-        this.getHotRecommendSecond(this.uid, this.data.recommendPageNo, 3);
+    //   } else {
+    //     console.log('没有更多')
+    //     this.setData({
+    //       ifHaveMore: false
+    //     })
+    //   }
+    // }
+    // // 当前在推荐页面 加载推荐
+    // if (this.data.myIndex === 1) {
+    //   console.log(this.data.recommendPageNo)
+    //   console.log(this.data.recommendTotalNo)
+    //   this.setData({
+    //     recommendPageNo: this.data.recommendPageNo + 1
+    //   })
+    //   if (this.data.recommendPageNo <= this.data.recommendTotalNo) {
+    //     this.getHotRecommendSecond(this.uid, this.data.recommendPageNo, 3);
 
-      } else {
-        console.log('没有更多')
-      }
-    }
+    //   } else {
+    //     console.log('没有更多')
+    //   }
+    // }
 
   },
   onPullDownRefresh: function () {
@@ -427,5 +456,183 @@ Page({
         })
       }
     })
+  },
+  // 获取我的朗读
+  getMyRead: function(){
+    httpRequestApi.myRead().success(res=>{
+      console.log(res)
+      console.log('mydata',this.data.myData)
+      const myList = res.data.data.list;
+      if (myList.length === 0) return;
+      // const recommendWorks = [];
+      myList.forEach(item => {
+      console.log('mydata',this.data.myData)
+      console.log('mydata',this.data.userInfo.user)
+
+        const temp = {};
+        temp.title = item.title;
+        temp.summary = item.summary;
+        temp.img = item.iconImg;
+        temp.plays = item.playAmount;
+        temp.likes = item.likeAmount;
+        temp.classId = item.lessonId;
+        temp.time = formatDate(item.gmtCreated, 3);
+        temp.avatar = this.data.userInfo.avatar;
+        temp.uid = this.uid;
+        temp.url = item.originVideo;
+        temp.id = item.id;
+        // temp.avatar = item.user.avatar;
+        temp.nickName = this.data.userInfo.wechatName;
+        // recommendWorks.push(temp);
+        this.data.videoList.push(temp);
+      });
+      this.setData({
+        videoList: this.data.videoList
+      })
+    })
+  },
+  // 评论区点击
+  commentTap: function (e) {
+    console.log('点击评论区', e)
+    if (e.target.dataset.type === 'blank') {
+      this.setData({
+        commentShow: false
+      })
+    }
+  },
+  // 打开评论
+  openComment: function (e) {
+    // 
+    console.log('id', e.detail.activeId)
+    this.setData({
+      commentShow: !this.data.commentShow,
+      commentId: e.detail.activeId,
+      commentList: []
+    });
+    this.getReply(e.detail.activeId);
+  },
+  // 获取评论信息
+  getReply: function (columnId) {
+    // let columnId = this.data.id;
+    console.log(123123123, columnId)
+    // let pageNo = this.data.pageNo;
+    // let pageSize = this.data.pageSize;
+    httpRequestApi.getReply(this.uid, columnId, 1, 10).success((res) => {
+      console.log('reply', res)
+      const commentList = res.data.data.list;
+      const commentNum = res.data.data.totalSize;
+
+      commentList.forEach((item) => {
+        const temp = {};
+        temp.nickName = item.user.wechatName;
+        temp.avatar = item.user.avatar;
+        temp.uid = item.user.uid;
+        temp.text = item.detailDesc;
+        temp.id = item.id;
+        temp.replyCount = item.replyCount;
+        temp.time = formatDate(item.gmtCreated, 3);
+        temp.likes = item.postsAttributeInfo.favors || 0;
+        temp.isLike = item.isLike;
+        temp.replyList = item.replyVOList;
+        this.data.commentList.push(temp);
+      });
+      this.setData({
+        commentList: this.data.commentList,
+        commentNum: commentNum
+      })
+    });
+  },
+  // 发布回复
+  sendReply: function (e) {
+    console.log('triger', e.detail.content);
+    let data = {
+      columnId: this.data.commentId,
+      colunmNames: 'what',
+      detailDesc: e.detail.content,
+      // productId: this.data.productId
+    }
+    httpRequestApi.postReply(this.uid, data).success(res => {
+      console.log(res)
+      this.setData({
+        pageNo: 1,
+        commentList: []
+      }, () => {
+        this.getReply(this.data.commentId);
+      })
+    });
+  },
+  gradeTap: function () {
+    // console.log("组件回调，返回上一页");
+    this.setData({
+      isGradeShow: true
+    })
+  },
+  // 修改年级
+  changeGrade: function (e) {
+    const grade = e.target.dataset.code;
+    wx.setStorageSync('grade', grade)
+    this.setData({
+      isGradeShow: false,
+      grade: grade
+    })
+
+    let gradeText = '一年级';
+    switch (e.target.dataset.code) {
+      case '0':
+        gradeText = '学前班';
+        break;
+      case '1':
+        gradeText = '一年级';
+        break;
+      case '2':
+        gradeText = '二年级';
+        break;
+      case '3':
+        gradeText = '三年级';
+        break;
+    }
+  },
+
+  getFollowData: function () {
+    httpRequestApi.getFollowWorks(this.data.followPageNo, this.data.followPageSize).success(res => {
+      if (res.data.data.totalSize === 0) {
+        this.setData({
+          videoList: []
+        })
+        console.log('没有关注人或关注的人没有发过作品')
+        return
+      }
+      console.log('关注列表', res)
+      const followData = res.data.data.list;
+      followData.forEach(item => {
+        const temp = {};
+        temp.title = item.userRead ? item.userRead.title : '';
+        temp.img = item.userRead.iconImg;
+        temp.plays = item.userRead.playAmount ? item.userRead.playAmount : 0;
+        temp.likes = item.userRead.likeAmount ? item.userRead.likeAmount : 0;
+        temp.classId = item.userRead.id;
+        temp.time = formatDate(item.userRead.gmtCreated, 3);
+        temp.avatar = item.user ? item.user.avatar : '';
+        temp.uid = item.user ? item.user.uid : '';
+        temp.url = item.userRead.originVideo;
+        temp.nickName = item.user ? item.user.wechatName : '';
+        temp.id = item.userRead.id;
+        this.data.videoList.push(temp);
+      });
+      this.setData({
+        videoList: this.data.videoList
+      })
+    });
+  },
+  // 点击用户头像区域
+  headTapHandler: function (e) {
+    console.log('点击头像', e)
+    let tapId = e.detail.activeId;
+    // 点击头像既关注 测试
+    httpRequestApi.followUser(this.uid, tapId).success(res => {
+      console.log(res)
+    })
   }
+
+
 })

pages/index/index.json

@@ -3,8 +3,9 @@
         "Dialog": "../../component/dialog/dialog",
         "MyToast": "../../component/myToast/myToast",
         "myPlacerholder": "/component/myPlacerholder/myPlacerholder",
-        "VideoSwiper": "../../component/video-swiper/index"
-
+        "VideoSwiper": "../../component/video-swiper/index",
+        "Comment": "../../component/comment/comment",
+        "StatusBar": "../../component/statusBar/statusBar"
     },
     "enablePullDownRefresh": false,
     "window": {

pages/index/index.wxml

@@ -1,12 +1,35 @@
 <!-- index.wxml -->
+<StatusBar receiveData="{{statusbarobj}}" grade="{{grade}}" bindgradeTap="gradeTap" />
+<view class="change_grade" wx:if="{{isGradeShow}}">
+  <view class="change_brage_wrapper">
+    <text class="title">分龄选择</text>
+    <view class="change_row">
+      <view class="change_item" bindtap="changeGrade" data-code="0">
+        学前班
+      </view>
+      <view class="change_item" bindtap="changeGrade" data-code="1">
+        一年级
+      </view>
+    </view>
+     <view class="change_row">
+      <view class="change_item" bindtap="changeGrade" data-code="2">
+        二年级
+      </view>
+      <view class="change_item" bindtap="changeGrade" data-code="3">
+        三年级
+      </view>
+    </view>
+  </view>
+</view>
 <view class="container">
+
   <!-- 引入组件 -->
   <!-- <import src="/component/group/group.wxml" /> -->
   <!-- <import src="/component/hot/hot.wxml" /> -->
   <!-- <import src="/component/follow/follow.wxml" /> -->
-  <!-- <import src="/component/my/my.wxml" /> -->
+  <import src="/component/my/my.wxml" />
   <!-- 调用组件 -->
-  <!-- <template is="{{templates}}" data="{{groupData: groupData, hotData: hotData, followData: followData, myData: myData}}"></template> -->
+  <template is="{{templates}}" data="{{groupData: groupData, hotData: hotData, followData: followData, myData: myData}}"></template>
   <!-- 顶部导航 -->
   <view class="top-tab">
     <block wx:for="{{tab}}" wx:key="{{index}}">
@@ -16,19 +39,36 @@
     </block>
   </view>
   <VideoSwiper 
+  wx:if="{{videoList.length > 0}}"
   class="video-swiper" 
   video-list="{{videoList}}" 
   nextMargin="{{nextMargin}}"
-  bindplay="onPlay"
+
+  bindopenComment="openComment"
+  bindheadTap="headTapHandler"
+  >
+    <!-- bindplay="onPlay"
   bindpause="onPause"
   bindtimeupdate="onTimeUpdate"
   bindended="onEnded"
   binderror="onError"
   bindwaiting="onWaiting"
   bindprogress="onProgress"
-  bindloadedmetadata="onLoadedMetaData">
+  bindloadedmetadata="onLoadedMetaData" -->
   </VideoSwiper>
+
+  <view class="comment_section" catchtap="commentTap" data-type="blank" wx:if="{{commentShow}}">
+  <Comment 
+  data-type="list"
+  commentList = "{{commentList}}"
+  commentNum ="{{commentNum}}"
+  inputValue="{{inputValue}}"
+  bindsendReply = "sendReply"
+  />
+</view>
 </view>
+
+
  <!-- <MyToast /> -->
 <view hidden="{{hide}}">
   <Dialog bindmyevent="jurisdiction" />

pages/index/index.wxss

@@ -23,7 +23,8 @@
 
 .top-tab {
   position: fixed;
-  top: 0;
+  /* top: 0; */
+  top: 118rpx;
   width: 100%;
   height: 80rpx;
   background: #12C962;
@@ -310,4 +311,64 @@ margin-left: 4rpx;
   position: absolute;
   background: rgba(0,0,0, 0);
   top: 0;
+}
+
+.comment_section{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 98%;
+  background: rgba(0,0,0, .2);
+  overflow: hidden;
+}
+
+.change_grade{
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+.change_grade .change_brage_wrapper{
+  width: 548rpx;
+  height: 453rpx;
+  background: #fff;
+  border-radius: 20rpx;
+}
+
+.change_grade .change_brage_wrapper .title{
+  width: 100%;
+  text-align: center;
+  color: rgba(0,0,0,.6);
+  font-size: 40rpx;
+  margin-top: 33rpx;
+  margin-bottom: 66rpx;
+  display: flex;
+  justify-content: center;
+}
+
+.change_grade .change_brage_wrapper .change_row{
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 65rpx;
+}
+
+.change_grade .change_brage_wrapper .change_row .change_item{
+  width: 220rpx;
+  height: 68rpx;
+  background: #14c962;
+  border-radius: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36rpx;
+  color: #fff;
 }