ui 接口联调

app.json

@@ -25,10 +25,10 @@
   ],
   "window": {
     "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#61CA54",
+    "navigationBarBackgroundColor": "#12C962",
     "navigationBarTitleText": "小学课文朗读配音",
     "navigationBarTextStyle": "white",
-    "backgroundColor": "#61CA54",
+    "backgroundColor": "#12C962",
     "onReachBottomDistance": 50,
     "enablePullDownRefresh": true
   },

app.wxss

@@ -2,17 +2,28 @@
 page {
   width: 100%;
   height: 100%;
-  color:#444;
+  color: #444;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+}
+
+view {
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+}
+
+text {
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 .container {
   height: auto;
-  box-sizing:border-box;
-  padding-top: 70rpx;
-  color:#444;
-} 
-::-webkit-scrollbar{
+  box-sizing: border-box;
+  padding-top: 80rpx;
+  color: #444;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+}
+
+::-webkit-scrollbar {
   width: 0;
   height: 0;
   color: transparent;
-}
+}

component/follow/follow.wxss

@@ -65,15 +65,15 @@
 }
 
 .worksLeft .worksInfo .authorName {
-    color: #444444;
-    font-size: 32rpx;
+    color: #393939;
+    font-size: 30rpx;
     margin-top: 8rpx;
 
 }
 
 .worksLeft .worksInfo .time {
-    color: #686868;
-    font-size: 28rpx;
+    color: #393939;
+    font-size: 30rpx;
 
 }
 

component/group/group.wxml

@@ -2,29 +2,6 @@
   <view class="group">
     <scroll-view scroll-y="{{true}}">
       <view class="group-container">
-        <!-- <block wx:for="{{groupData.recommendList}}" wx:key="{{index}}">
-          <view class="group-bars">
-            <view class="group-head">
-              <image src="{{item.organizer.avatar}}"></image>
-              <text>{{item.organizer.wechatName}}</text>
-            </view>
-            <view class="group-jion">
-              <view class="top-title">
-                <text>{{item.groupPurchaseOrder.groupTitle}}</text>
-                <text>{{item.groupPurchaseOrder.headcount}}人团</text>
-              </view>
-              <view class="group-detail {{groupData.isIOS ? 'specialBorder' : ''}}">
-                <view class="number">
-                  <text>还剩{{item.groupPurchaseOrder.headcount - item.groupPurchaseOrder.joinCount}}人成团</text>
-                  <text>剩余{{groupData.timeList[index]}}结束</text>
-                </view>
-                <view class="jion-btn {{groupData.isIOS ? 'specialBtn' : ''}}" bindtap="groupDetail" data-ind="{{index}}" data-id="{{item.groupPurchaseOrder.id}}" data-productId="{{item.groupPurchaseOrder.productId}}" data-groupId="{{item.groupPurchaseOrder.groupId}}">
-                  去参团
-                </view>
-              </view>
-            </view>
-          </view>
-        </block> -->
         <block wx:for="{{groupData.recommendList}}" wx:key="{{index}}">
           <view class="group-bars">
             <view class="group-head">
@@ -36,9 +13,9 @@
                 <text>{{item.productTitle}}</text>
                 <text>{{item.headCount}}人团</text>
               </view>
-              <view class="group-detail {{groupData.isIOS ? 'specialBorder' : ''}}">
+              <view class="group-detail">
                 <view class="number">
-                  <text>还剩{{item.headCount - item.joinCount}}人成团</text>
+                  <text>还剩<text class="red-text">{{item.headCount - item.joinCount}}</text>人成团</text>
                   <text>剩余{{item.lastTime}}结束</text>
                 </view>
                 <view class="jion-btn" bindtap="groupDetail" data-ind="{{index}}" data-id="{{item.id}}" >
@@ -51,11 +28,10 @@
         <view class="change" bindtap="change" wx:if="{{groupData.listLength > 1}}">换一换</view>
       </view>
       <view class="title">
-        <image class="ren" src="../../static/groupImg/Shape3.png" style="width: 30rpx; height: 38rpx;"></image>
-        <text class="left">全部课程</text>
+        <text class="title-regular left">全部课程</text>
         <view class="right" bindtap="more" data-type="course">
           更多
-          <image src="../../static/image/to.png" />
+          <image src="../../static/image/black_to.png" />
         </view>
       </view>
       <view class="whole-group">

component/group/group.wxss

@@ -58,7 +58,7 @@ scroll-view {
 
 .group-jion {
     width: 460rpx;
-    color:#444;
+    color: #444;
 }
 
 .group-jion .top-title {
@@ -72,14 +72,16 @@ scroll-view {
     justify-content: space-between;
     width: 100%;
     height: 84rpx;
-    border: 4rpx solid #FFACB6;
+    border: 4rpx solid #ff3600;
     border-radius: 12rpx;
     overflow: hidden;
     margin-top: 26rpx;
 }
-.group-jion .specialBorder{
+
+.group-jion .specialBorder {
     border: 4rpx solid #C6C6C6;
 }
+
 .group-jion .group-detail .number {
     display: flex;
     flex-direction: column;
@@ -95,14 +97,16 @@ scroll-view {
     justify-content: center;
     width: 36%;
     height: 100%;
-    background: #FF3E55;
+    background: #FF3600;
     color: #fff;
     font-size: 36rpx;
     line-height: 100%;
 }
-.group-jion .group-detail .specialBtn{
+
+.group-jion .group-detail .specialBtn {
     background: #C6C6C6
 }
+
 .change {
     width: 146rpx;
     height: 48rpx;
@@ -135,18 +139,15 @@ scroll-view {
     padding: 0 18rpx;
     position: relative;
     box-sizing: border-box;
-    color:#444;
+    color: #393939;
+    background: #fff;
 }
 
 .title .left {
-    font-size: 32rpx;
-    padding-left: 52rpx;
+    left: 32rpx;
+    top: 24rpx;
 }
 
-.quota {
-    font-size: 28rpx;
-    color: red;
-}
 
 .title .ren {
     width: 42rpx;
@@ -159,22 +160,26 @@ scroll-view {
     display: flex;
     /* flex-direction: row; */
     align-items: center;
-    font-size: 28rpx;
-    color:#444;
+    font-size: 30rpx;
+    color: #393939;
+    font-weight: 800;
+    position: absolute;
+    top: 30rpx;
+    right: 30rpx;
 }
 
 .title .right image {
     width: 16rpx;
     height: 28rpx;
-    margin-left:14rpx;
+    margin-left: 14rpx;
 }
 
 .group-box {
-    display:flex;
-width:106%;
-flex-wrap:wrap;
-flex-direction:row;
-overflow-x:hidden;
+    display: flex;
+    width: 106%;
+    flex-wrap: wrap;
+    flex-direction: row;
+    overflow-x: hidden;
 
 }
 
@@ -208,10 +213,13 @@ overflow-x:hidden;
 }
 
 .group-item #grade {
-    margin-top: 20rpx;
-    color:#444;
+    margin-top: 10rpx;
+    color: #393939;
     text-align: center;
-    font-size: 28rpx;
+    font-size: 30rpx;
+    font-weight: 800;
+    
+
 }
 
 .Collage-bottom {

component/hot/hot.js

@@ -23,16 +23,17 @@ export const hotInit = (that) => {
         recommend: [],
         hotWorks: [],
         winH: that.data.winH,
-        searchIcon: true
+        searchIcon: true,
+        // circular: true
       }
     }),
     // 搜索方法
     that.searchHandler = () => {
-      if (that.data.hotInput.lenght !== 0) {
-        wx.navigateTo({
-          url: `../main/searchResult/searchResult?keyWords=${that.data.hotInput}`
-        })
-      }
+      // if (that.data.hotInput.lenght !== 0) {
+      //   wx.navigateTo({
+      //     url: `../main/searchResult/searchResult?keyWords=${that.data.hotInput}`
+      //   })
+      // }
     },
     // 输入框获取焦点 放大镜消失
     that.searchIconDisappear = () => {

component/hot/hot.wxml

@@ -1,50 +1,51 @@
 <template name="hot">
-    <swiper indicator-dots="{{hotData.indicatorDots}}" indicator-active-color="rgba(255,255,255,.9)" autoplay="{{hotData.autoplay}}" interval="{{hotData.interval}}" duration="{{hotData.duration}}" circular="{{hotData.circular}}">
-        <block wx:for="{{hotData.banner}}" wx:key="{{index}}">
-            <swiper-item>
-                <image src="{{item.url}}" data-type="{{item.type}}" data-id="{{item.id}}" class="slide-image" width="750" height="318" />
-            </swiper-item>
-        </block>
-    </swiper>
+    <view class="messageSection">
+        <image class="messageIcon" src="../../static/image/message_icon.png" />
+        <text class="messageText">您有<text class="red-text">5</text>条新消息【立即查看】</text>
+    </view>
+    <view class="myCourseSection">
+        <view class="title-regular">我的课程</view>
+        <view class="myCoursePlaceHolder" wx:if="{{!groupData.bookList}}">
+            <image src="../../static/image/add_class.png" />
+        </view>
+        <view class="book-box">
+            <block wx:for="{{groupData.bookList}}" wx:key="{{index}}">
+                <view class="book-item" data-id="{{item.id}}" data-title="{{item.title}}" bindtap="goToBook">
+                    <image class="book-img" src="{{item.iconImg}}"></image>
+                    <view class="book-title">{{item.subTitle}}</view>
+                </view>
+            </block>
+        </view>
+    </view>
     <view class="searchSection">
         <input bindinput="inputHandler" bindfocus="searchIconDisappear" bindblur="searchIconCome" bindconfirm="searchHandler" placeholder="{{hotData.hotSearch}}" placeholder-style="text-indent:20rpx" confirm-type="search"></input>
-        <view >{{searchIcon}}</view>
+        <view>{{searchIcon}}</view>
         <view bindtap="searchHandler" class="searchBtn" wx:if="{{hotData.searchIcon}}">
             <!-- <icon type="search" size="14" /> -->
             <image src="../../static/image/search_new.png" alt="" />
         </view>
-        <view class="allBooks" bindtap="goToBooks">全部课本</view>
+        <view class="allBooks" bindtap="goToBooks">全部课程</view>
         <!-- <form bindsubmit="submitTest" report-submit="{{true}}" class="allBooks">
             <button formType="submit">Reset</button>
         </form> -->
     </view>
-    <view class="hotSection">
-        <view class="title">
-            <view class="leftWrapper">
-                <image class="recommendTag" src="../../static/image/course.png" alt="" />
-                <text>本周推荐</text>
-            </view>
-            <view class="moreBtn" bindtap="openMore">
-                更多
-                <image src="../../static/image/to.png" />
-            </view>
-        </view>
-        <view class="hotWares" style="flex-direction:row;">
-            <view wx:for="{{hotData.recommend}}" wx:key="{{index}}" class="hotWareCard" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
-                <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 class="swiperSection">
+        <view class="title-regular swiper-title">官方推荐</view>
+        <swiper previous-margin="0" next-margin="243rpx" circular="{{true}}" autoplay="{{hotData.autoplay}}" interval="{{hotData.interval}}" duration="{{hotData.duration}}" circular="{{hotData.circular}}">
+            <block wx:for="{{hotData.recommend}}" wx:key="{{index}}">
+                <swiper-item class="slide-item" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
+                    <image src="{{item.img}}" data-type="{{item.type}}" data-id="{{item.id}}" class="slide-image" />
+                    <view class="slide-summary">
+                        <text class="slide-title">{{item.title}}</text>
+                        <text class="slide-tip">{{item.summary}}</text>
+                    </view>
+                </swiper-item>
+            </block>
+        </swiper>
     </view>
     <view class="recommdSection">
-        <view class="title">
-            <view class="leftWrapper">
-                <image src="../../static/image/hot_recommend.png" alt="" />
-                <text>热门作品</text>
-            </view>
+        <view class="recommd-title">
+            热门作品
         </view>
         <view class="hotWares">
             <view wx:for="{{hotData.hotWorks}}" wx:key="{{index}}" class="worksCard" bindtap="openWorks" data-readId="{{item.classId}}" data-title="{{item.title}}">
@@ -61,12 +62,12 @@
                     </view>
                     <view class="numberInfo">
                         <view class="wareCardPlays">
-                            <text>{{item.plays}}</text>
                             <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.png" />
                             <text>{{item.likes}}</text>
-                            <image class="wareCardLikesImg" lazy-load="true" src="../../static/image/like.png" />
                         </view>
                     </view>
                 </view>

component/hot/hot.wxss

@@ -1,37 +1,116 @@
+.messageSection{
+    width: 720rpx;
+    height: 80rpx;
+    background: #fff;
+    border-radius: 40rpx;
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 10rpx;
+    box-sizing: border-box;
+    margin: 15rpx auto 0;
+}
+
+.messageIcon{
+    width: 60rpx;
+    height: 60rpx;
+    border-radius: 50%;
+}
+.messageText{
+    /* width: 349rpx; */
+    height: 30rpx;
+    font-size: 30rpx;
+    font-weight: 500;
+    color: #4f4f50;
+    margin-left: 115rpx;
+}
 swiper {
-    /* margin-top: 10rpx; */
-    padding-top: 20rpx;
+    margin-top: 60rpx;
+    /* padding-top: 20rpx; */
     background: #fff;
     display: block;
     width: 100%;
     height: 312rpx;
 }
 
+.swiperSection {
+    width: 100%;
+    height: 320rpx;
+    margin-top: 16rpx;
+    overflow: hidden;
+    position: relative;
+    background: #fff;
+}
+
+.slide-item {
+    width: 492rpx;
+}
+
 .slide-image {
     display: block;
     margin: 0 auto;
-    width: 728rpx;
-    height: 312rpx;
-    border-radius: 20rpx;
+    width: 492rpx;
+    height: 203rpx;
+    border-radius: 10rpx;
+}
+
+.slide-summary {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 15rpx;
+    overflow: hidden;
+}
+
+.slide-title {
+    /* margin: 0 auto; */
+    width: 65%;
+    height: 32rpx;
+    line-height: 32rpx;
+    display: block;
+    /* text-align: left; */
+    color: #393939;
+    font-size: 24rpx;
+    font-weight: 500;
+    /* letter-spacing: 4rpx; */
+    margin-left: 10rpx;
+    /* font-family: MicrosoftYaHei; */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.slide-tip {
+    width: 130rpx;
+    height: 32rpx;
+    display: block;
+    text-align: left;
+    color: #6d6d6d;
+    font-size: 24rpx;
+    line-height: 32rpx;
+    font-weight: 500;
+    margin-right: 10rpx;
 }
 
 .searchSection {
-    width: 748rpx;
+    width: 100%;
     height: 84rpx;
     display: flex;
     align-items: center;
-    background: #fff
+    margin-top: 16rpx;
+    /* background: #fff */
+    padding: 0 15rpx;
+    box-sizing: border-box;
 }
 
 .searchSection input {
     display: flex;
-    width: 518rpx;
-    height: 56rpx;
-    border-radius: 10rpx;
-    background: #F0F1F5;
+    width: 500rpx;
+    height: 80rpx;
+    border-radius: 40rpx;
+    background: #fff;
     color: #717171;
     font-size: 28rpx;
-    margin-left: 14rpx;
+    /* margin-left: 14rpx; */
     padding-left: 25rpx;
 }
 
@@ -39,7 +118,7 @@ swiper {
     /* background: #fff; */
     position: absolute;
     z-index: 2;
-    right: 202rpx;
+    left: 250rpx;
     width: 56rpx;
     height: 56rpx;
     border: 1rpx solid rgba(255, 255, 255, 0);
@@ -54,16 +133,18 @@ swiper {
 }
 
 .searchSection .allBooks {
-    font-size: 32rpx;
-    color: #41bb32;
+    font-size: 30rpx;
+    color: #494747;
+    font-weight: 800;
     /* font-family: PingFangSC-regular; */
-    width: 166rpx;
+    width: 200rpx;
     text-align: center;
     margin-left: 20rpx;
     background: #F0F1F5;
-    height: 56rpx;
-    line-height: 56rpx;
-    border-radius: 10rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    border-radius: 40rpx;
+    background: #fff;
 }
 
 .hotSection {
@@ -128,200 +209,6 @@ swiper {
 
 }
 
-.hotWares {
-    display: flex;
-    flex-wrap: wrap;
-    /* background: #e8e8e8; */
-}
-
-.hotSection .hotWares .hotWareCard {
-    position: relative;
-    overflow: hidden;
-    width: 720rpx;
-    height: 374rpx;
-    background: #fff;
-    /* padding: 26rpx; */
-    border-radius: 12rpx;
-    /* margin: 0 0 18rpx 16rpx; */
-    margin: 0 auto 20rpx;
-    /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
-}
-
-
-
-.hotWareCard .wareCardImg {
-    display: block;
-    width: 662rpx;
-    height: 272rpx;
-    margin: 26rpx auto 0;
-    border-radius: 20rpx;
-}
-
-.hotWareCard .titleSummary {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 12rpx;
-}
-
-.hotWareCard .wareCardTitle {
-    /* margin: 0 auto; */
-    width: 80%;
-    height: 46rpx;
-    display: block;
-    /* text-align: left; */
-    color: #414141;
-    font-size: 32rpx;
-    /* letter-spacing: 4rpx; */
-    margin-left: 28rpx;
-    /* font-family: MicrosoftYaHei; */
-}
-
-.hotWareCard .bottomData {
-    height: 34rpx;
-    margin-top: 10rpx;
-    display: flex;
-    /* flex-direction: row; */
-    justify-content: space-between;
-    align-items: center;
-}
-
-.hotWareCard .bottomData .wareCardPlays {
-    width: 100rpx;
-    margin-left: 270rpx;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.hotWareCard .wareCardTip {
-    width: 178rpx;
-    height: 40rpx;
-    display: block;
-    text-align: left;
-    color: #444;
-    font-size: 24rpx;
-    line-height: 41rpx;
-
-}
-
-.hotWareCard .wareCardPlays .wareCardPlaysImg {
-    width: 30rpx;
-    height: 30rpx;
-}
-
-.hotWareCard .wareCardPlays text {
-    margin-left: 4rpx;
-    color: #61CA54;
-    font-size: 24rpx;
-}
-
-.hotWareCard .wareCardLikes {
-    width: 100rpx;
-    margin-right: 18rpx;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-}
-
-.hotWareCard .wareCardLikes .wareCardLikesImg {
-    width: 30rpx;
-    height: 30rpx;
-}
-
-.hotWareCard .wareCardLikes text {
-    margin-left: 4rpx;
-    color: #FF9800;
-    font-size: 24rpx;
-}
-
-/** 第一个大图**/
-.hotSection .hotWares .hotWareCardFirst {
-    position: relative;
-    overflow: hidden;
-    width: 740rpx;
-    height: 342rpx;
-    margin: 10rpx auto 20rpx;
-    box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28);
-}
-
-.hotWareCardFirst .wareCardImg {
-    width: 100%;
-    height: 100%;
-}
-
-.hotWareCardFirst .wrapper {
-    width: 100%;
-    height: 100rpx;
-    background: #fff;
-    position: absolute;
-    bottom: 0;
-}
-
-.hotWareCardFirst .wareCardTitle {
-    margin: 10rpx 20rpx 0;
-    display: block;
-    /* text-align: center; */
-    color: rgba(16, 16, 16, 1);
-    font-size: 32rpx;
-}
-
-.hotWareCardFirst .wareCardTip {
-    margin: 0 20rpx;
-    width: 178rpx;
-    height: 34rpx;
-    display: block;
-    text-align: center;
-    color: rgba(16, 16, 16, 1);
-    font-size: 28rpx;
-}
-
-.hotWareCardFirst .bottomData {
-    width: 100%;
-    height: 34rpx;
-    margin-top: 5rpx;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.hotWareCardFirst .wareCardPlays {
-    width: 100rpx;
-    margin-left: 230rpx;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.hotWareCardFirst .wareCardPlays .wareCardPlaysImg {
-    width: 30rpx;
-    height: 30rpx;
-}
-
-.hotWareCardFirst .wareCardPlays text {
-    margin-left: 4rpx;
-    color: #61CA54;
-    font-size: 24rpx;
-}
-
-.hotWareCardFirst .wareCardLikes {
-    width: 100rpx;
-    margin-right: 18rpx;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.hotWareCardFirst .wareCardLikes .wareCardLikesImg {
-    width: 30rpx;
-    height: 30rpx;
-}
-
-.hotWareCardFirst .wareCardLikes text {
-    margin-left: 4rpx;
-    color: #FF9800;
-    font-size: 24rpx;
-}
 
 /* // 热门推荐 */
 .recommdSection {
@@ -332,12 +219,14 @@ swiper {
     /* margin-top: 10rpx; */
 }
 
-.recommdSection .title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 22rpx 20rpx;
-
+.recommdSection .recommd-title {
+    width: 100%;
+    height: 68rpx;
+    color: #393939;
+    font-size: 30rpx;
+    line-height: 68rpx;
+    text-indent: 30rpx;
+    font-weight: 800;
 }
 
 .recommdSection .leftWrapper {
@@ -377,169 +266,78 @@ swiper {
     color: #6e6e6e;
 }
 
-.hotWares {
-    display: flex;
-    flex-wrap: wrap;
-    /* background: #e8e8e8; */
-}
+/* 我的课程 */
 
-.recommdSection .hotWares .worksCard {
-    position: relative;
-    overflow: hidden;
+.myCourseSection {
     width: 720rpx;
-    height: 476rpx;
+    height: 410rpx;
+    margin: 15rpx auto 0;
     background: #fff;
-    /* padding: 26rpx; */
-    border-radius: 12rpx;
-    /* margin: 0 0 18rpx 16rpx; */
-    margin: 0 auto 20rpx;
-    /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
-}
-
-
-
-.worksCard .wareCardImg {
-    display: block;
-    width: 662rpx;
-    height: 272rpx;
-    margin: 22rpx auto 0;
     border-radius: 20rpx;
+    position: relative;
 }
 
-.worksCard .titleSummary {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 12rpx;
-}
-
-.worksCard .wareCardTitle {
-    /* margin: 0 auto; */
-    width: 80%;
+.title-regular {
+    width: 119rpx;
     height: 46rpx;
-    display: block;
-    /* text-align: left; */
-    color: #444;
-    font-size: 32rpx;
-    /* letter-spacing: 4rpx; */
-    margin-left: 28rpx;
-    font-family: MicrosoftYaHei;
-}
-
-.worksCard .topData {
-    height: 92rpx;
-    margin-top: 22rpx;
     display: flex;
-    flex-direction: row;
-    /* justify-content: space-between; */
     align-items: center;
+    color: #393939;
+    font-size: 30rpx;
+    border-bottom: solid 5rpx #12c962;
+    font-weight: 800;
+    position: absolute;
+    left: 16rpx;
+    top: 6rpx;
 }
-
-.worksLeft {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    margin-left: 10rpx;
-
+.swiper-title{
+    left: 32rpx;
 }
 
-.worksLeft .worksInfo .authorName {
-    color: #444444;
-    font-size: 32rpx;
-    margin-top: 8rpx;
-
+.myCourseSection .myCoursePlaceHolder {
+    width: 100%;
+    height: 100%;
 }
 
-.worksLeft .worksInfo .time {
-    color: #686868;
-    font-size: 28rpx;
-
+.myCourseSection .myCoursePlaceHolder image {
+    width: 100%;
+    height: 100%;
 }
 
-.worksCard .topData .wareCardPlays {
-    width: 100rpx;
-    /* margin-left: 270rpx; */
+.book-box {
     display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-    padding-right: 35rpx;
-
-}
-
-.worksCard .topData .authorAvatar {
-    width: 92rpx;
-    height: 92rpx;
-    margin: 0 22rpx 0 22rpx;
-    display: block;
-    border: 4rpx solid #61CA54;
-    border-radius: 50%;
-}
-
-.worksCard .topData .profession {
-    width: 68rpx;
-    height: 24rpx;
-    background: rgba(97, 202, 84, 1);
-    border-radius: 166rpx;
-    border: 2rpx solid rgba(255, 255, 255, 1);
-    font-size: 16rpx;
-    /* font-family: PingFangSC-Medium; */
-    /* font-weight: 500; */
-    color: rgba(255, 255, 255, 1);
-    line-height: 24rpx;
-    text-align: center;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+    overflow-x: hidden;
+    justify-content: space-between;
+    padding: 0 20rpx;
+    box-sizing: border-box;
     position: absolute;
-    bottom: -7rpx;
-    left: 37rpx;
-
+    top: 64rpx;
 }
 
-.topData .numberInfo {
+.book-item {
+    position: relative;
     display: flex;
+    /* margin-right: 35rpx; */
     flex-direction: column;
-}
 
-.worksCard .wareCardTip {
-    width: 178rpx;
-    height: 40rpx;
-    display: block;
-    text-align: left;
-    color: #444;
-    font-size: 24rpx;
-    line-height: 44rpx;
-
-}
-
-.worksCard .wareCardPlays .wareCardPlaysImg {
-    width: 26rpx;
-    height: 26rpx;
-    margin-right: 6rpx;
-    float: right;
+    width: 214rpx;
+    height: 330rpx;
 }
 
-.worksCard .wareCardPlays text {
-    margin-left: 4rpx;
-    color: #5e5e5e;
-    font-size: 22rpx;
-    text-align: right;
-    /* width:57%; */
-    float: right;
+.book-item .book-img {
+    width: 214rpx;
+    height: 278rpx;
 }
 
-.worksCard .wareCardLikes {
-    width: 100rpx;
-    margin-right: 18rpx;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-}
-
-.worksCard .wareCardLikes .wareCardLikesImg {
-    width: 26rpx;
-    height: 24rpx;
-    margin-right: 6rpx;
-}
-
-.worksCard .wareCardLikes text {
-    margin-left: 4rpx;
-    color: #FF9800;
-    font-size: 24rpx;
+.book-item .book-title {
+    /* margin-top: 20rpx; */
+    color: #393939;
+    text-align: center;
+    font-size: 30rpx;
+    font-weight: 800;
+    line-height: 36rpx;
+    margin-top: 16rpx;
 }

component/my/my.js

@@ -1,5 +1,8 @@
 import APIClient from '../../utils/APIClient';
 const app = getApp();
+import {
+  formatDate
+} from '../../utils/util';
 export const myInit = (that) => {
   that.setData({
     myData: {
@@ -14,9 +17,11 @@ export const myInit = (that) => {
       schoolName: '',
       user: {},
       isIOS: app.globalData.isIOS
-    }
+    },
+    followData:[]
   });
   that.getUserWorksInfo();
+  console.log(that.data.myData)
   that.toMyEdit = (e) => {
       let title = e.currentTarget.dataset.title;
       wx.navigateTo({
@@ -24,17 +29,10 @@ export const myInit = (that) => {
       });
     },
     that.toMyConcern = e => {
-      let title = e.currentTarget.dataset.title;
       wx.navigateTo({
-        url: `../user/myconcern/myconcern?title=${title}`
+        url: `../user/myconcern/myconcern?title=我的关注`
       });
     }
-  that.toMyWallet = e => {
-      let title = e.currentTarget.dataset.title;
-      wx.navigateTo({
-        url: `../user/myWallet/myWallet?title=${title}`
-      });
-    },
     that.toMyCourse = e => {
       let title = e.currentTarget.dataset.title;
       wx.navigateTo({
@@ -42,9 +40,8 @@ export const myInit = (that) => {
       });
     },
     that.toMyRead = e => {
-      let title = e.currentTarget.dataset.title;
       wx.navigateTo({
-        url: `../user/myread/myread?title=${title}`
+        url: `../user/myread/myread?title=我的朗读`
       });
     },
     that.toMyKeep = e => {
@@ -54,17 +51,47 @@ export const myInit = (that) => {
       });
     },
     that.toMyCollage = e => {
-      let title = e.currentTarget.dataset.title;
       if(app.globalData.isIOS){
         wx.navigateTo({
           url: `../../pages/groupPage/my-group/my-group?title=我的助力`
         });
       }else {
         wx.navigateTo({
-          url: `../../pages/groupPage/my-group/my-group?title=${title}`
+          url: `../../pages/groupPage/my-group/my-group?title=我的拼团`
         });
       }
       
+    },
+    that.getFollowWorks = (pageNo, pageSize) => {
+      APIClient.getFollowWorks(pageNo, pageSize).success(res => {
+        console.log(res)
+        const followData = res.data.data.list;
+        // const followTemp = [];
+        followData.forEach(item => {
+          const temp = {};
+          console.log(item.userRead.id)
+          temp.nickName = item.user.wechatName;
+          temp.avatar = item.user.avatar;
+          temp.plays = item.userRead.playAmount;
+          temp.likes = item.userRead.likeAmount;
+          temp.img = item.userRead.iconImg;
+          temp.id = item.userRead.id;
+          temp.title = item.userRead.title;
+          temp.summary = item.userRead.summary;
+          temp.time = formatDate(item.userRead.gmtCreated, 3);
+          // 还差一些字段
+          that.data.followData.push(temp);
+        });
+        // console.log(followTemp);
+        that.setData({
+          followData: that.data.followData,
+          followPageTotalNo: res.data.data.totalNo
+        })
+      });
+    },
+    that.toWalletDetail = function(e) {
+      wx.navigateTo({
+        url: `../../pages/user/walletDetails/walletDetails?title=资金明细`
+      });
     }
-    
 }

component/my/my.wxml

@@ -3,156 +3,153 @@
   <view class='mine-container'>
     <view class='follow-details'>
       <view class='follow-info'>
+        <view class="info-placerholder"></view>
         <view class='set-msg' wx:if="{{myData.user.user.wechatName}}">
           <view class='avatar-box'>
             <image class='avatar-image' src='{{ myData.user.user.avatar }}'></image>
-            <view class='occupation-title' wx:if="{{myData.user.user.profession}}">{{ myData.user.user.profession }}</view>
+            <!-- <view class='occupation-title' wx:if="{{myData.user.user.profession}}">{{ myData.user.user.profession }}</view> -->
           </view>
           <view class='avatar-msg'>
-            <view class='avatar-nickname'>
-              <text>{{ myData.user.user.wechatName }}</text>
-              <view class='flowers-box' wx:if='{{ myData.user.user.gender === 2 }}'>
-                <image src='../../static/image/flowers.png'></image>
-              </view>
-              <view class='flowers-box' wx:elif='{{ myData.user.user.gender === 1 }}'>
-                <image src='../../static/image/boy.png'></image>
-              </view>
-              <!-- <view wx:else class='gender-size'>未知</view> -->
+            <view class='avatar-nickname'>微信昵称：{{ myData.user.user.wechatName }}</view>
+            <view class='avatar-nickname'>宝贝昵称：{{ myData.user.user.wechatName }}的宝贝</view>
+            <view class='mine-category'>
+              <view class='amount-text'>{{ myData.user.playAmount || 0 }} 播放</view>
+              <view class='amount-text'>{{ myData.user.likeAmount || 0 }} 赞</view>
+              <view class='amount-text'>{{ myData.user.fansAmount || 0 }} 粉丝</view>
             </view>
-            <view class='avatar-birthday'>{{ myData.user.user.birthday }}</view>
-            <view class='avatar-address'>{{ myData.user.user.schoolName }}</view>
-          </view>
-          <view class='mine-edit' bindtap='toMyEdit' data-title='{{ myData.title }}'>
-            <!-- <view class='edit-image'> -->
-            <image class='edit-img' src='../../static/image/reset.png'></image>
-            <!-- </view> -->
-            <view class='edit-text'>修改</view>
           </view>
-        </view>
-        <view class='set-msg-temp' hidden="{{myData.user.user.wechatName}}">
-            <view class="placerholder line1"></view>
-            <view class="placerholder line2"></view>
-            <view class="placerholder line3"></view>
+          <!-- <view class='avatar-birthday'>{{ myData.user.user.birthday }}</view>
+            <view class='avatar-address'>{{ myData.user.user.schoolName }}</view> -->
         </view>
       </view>
-      <view class='mine-category'>
-        <view class='play-count'>
-          <view class='color' style="padding-right:38rpx;" >{{ myData.user.playAmount || 0 }}</view>
-          <view class='border-right'>
-            <view class='play-img'>
-              <image src='../../static/image/play.png'></image>
-            </view>
-            <text>播放量</text>
-          </view>
+      <!-- ios只显示红花 -->
+      <view class="only-flower" wx:if="{{myData.isIOS}}">
+        <view class="grey-point"></view>
+        <view class="flower-amount">
+          <image class="" src='../../static/image/flower_small.png' />
+          <view>小红花：{{myData.user.pointAmount || 0 }}</view>
         </view>
-        <view class='follow-count'>
-          <view class='color' style="padding-right:48rpx;">{{ myData.user.fansAmount || 0 }}</view>
-          <view class='border-right'>
-            <view class='red-heart'>
-              <image src='../../static/image/purple_heart.png'></image>
-            </view>
-            <text>粉丝</text>
-          </view>
+        <view class="flower-tips">
+          <text class="flower-last">{{myData.user.taskAmount }}</text>
+          个任务福利还没有领哦
         </view>
-        <view class='point-count'>
-          <view class='color' style="padding-right:60rpx;">{{ myData.user.likeAmount || 0 }}</view>
-          <view class='border-right'>
-            <view class='point-img'>
-              <image src='../../static/image/point.png'></image>
-            </view>
-            <text>赞</text>
-          </view>
+      </view>
+      <!-- android 显示两个 -->
+      <view class="wallet-section" wx:if="{{!myData.isIOS}}">
+        <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='flower-count'>
-          <view class='color'>{{ myData.user.pointAmount || 0 }}</view>
-          <view class='border-right'>
-            <view class='play-img'>
-              <image src='../../static/image/flower.png'></image>
+        <view class="flower-box">
+          <view class="grey-point"></view>
+          <image class="flower-icon" src='../../static/image/flower_small.png' />
+          <view class="flower-text">
+            <view>小红花：{{myData.user.pointAmount || 0 }}</view>
+            <view class="flower-tips-text">
+              <text class="flower-last">{{myData.user.taskAmount }}</text>
+              个任务福利还没有领哦
             </view>
-            <text>红花</text>
           </view>
         </view>
       </view>
-      <view class='wallet-module' bindtap='toMyWallet' data-title='{{ myData.wallet }}' wx:if="{{!myData.isIOS}}">
-      <!-- <view class='wallet-module' bindtap='toMyWallet' data-title='{{ myData.wallet }}'> -->
-        <view class='wallet-center'>
-          <view class='wallet-left'>
-            <view class='icon-box'>
-              <image src='../../static/image/wallet.png'></image>
-            </view>
-            <text>钱包</text>
-          </view>
-          <view class='wallet-right'>
-            <image src='../../static/image/to.png'></image>
-          </view>
+      <view class="btn-section">
+        <view class="btn" bindtap='toMyConcern'>
+          <image src="../../static/image/concern.png" />
+          <view class="btn-title">我的关注</view>
         </view>
-      </view>
-      <view class='course-module' bindtap='toMyCourse' data-title='{{ myData.course }}'>
-        <view class='wallet-center'>
-          <view class='wallet-left'>
-            <view class='icon-box'>
-              <image src='../../static/image/courses.png'></image>
-            </view>
-            <text>我的课程</text>
-          </view>
-          <view class='wallet-right'>
-            <image src='../../static/image/to.png'></image>
-          </view>
+        <view class="btn" bindtap='toMyKeep' data-title='{{ myData.keep }}'>
+          <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" />
+          <view class="btn-title">消息通知</view>
         </view>
       </view>
-      <!-- <view class='group-module' bindtap='toMyCollage' data-title='{{ myData.collage }}' wx:if="{{!myData.isIOS}}"> -->
-      <view class='group-module' bindtap='toMyCollage' data-title='{{ myData.collage }}'>
-        <view class='wallet-center'>
-          <view class='wallet-left'>
-            <view class='icon-box'>
-              <image src='../../static/image/group.png'></image>
-            </view>
-            <text>我的{{myData.isIOS? '助力' : '拼团'}}</text>
-          </view>
-          <view class='wallet-right'>
-            <image src='../../static/image/to.png'></image>
+      <view class="my-reading-section">
+        <view class="my-reading-title">
+          <view class="title-left">我的作品</view>
+          <view class="title-right" bindtap="toMyRead">
+            更多
+            <image src="../../static/image/black_to.png" />
           </view>
         </view>
-      </view>
-      <view class='reading-module' bindtap='toMyRead' data-title='{{ myData.read }}'>
-        <view class='wallet-center'>
-          <view class='wallet-left'>
-            <view class='icon-box'>
-              <image src='../../static/image/record.png'></image>
+        <view class="my-reading-gut">
+          <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.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>
-            <text>我的朗读</text>
-          </view>
-          <view class='wallet-right'>
-            <image src='../../static/image/to.png'></image>
           </view>
         </view>
       </view>
-      <view class='keep-module' bindtap='toMyKeep' data-title='{{ myData.keep }}'>
-        <view class='wallet-center'>
-          <view class='wallet-left'>
-            <view class='icon-box'>
-              <image src='../../static/image/keep.png'></image>
-            </view>
-            <text>我的收藏</text>
-          </view>
-          <view class='wallet-right'>
-            <image src='../../static/image/to.png'></image>
+      <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>
-      <view class='myfollow-module' bindtap='toMyConcern' data-title='{{ myData.concern }}'>
-        <view class='wallet-center'>
-          <view class='wallet-left'>
-            <view class='icon-box'>
-              <image src='../../static/image/myfollow.png'></image>
+        <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.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>
-            <text>我的关注</text>
-          </view>
-          <view class='wallet-right'>
-            <image src='../../static/image/to.png'></image>
           </view>
         </view>
       </view>
     </view>
+    <view class="footer-section" wx:if="{{ifHaveMore}}">
+      加载更多
+    </view>
   </view>
 </template>

component/my/my.wxss

@@ -1,8 +1,8 @@
 .mine-container {
-  width: 750rpx;
+  width: 100%;
   height: 1136rpx;
   position: relative;
-  background: #F0F1F5;
+  background: #faf7fa;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -11,30 +11,38 @@
 }
 
 page {
-  background: #F0F1F5;
+  background: #faf7fa;
 }
 
 .follow-details {
-  width: 750rpx;
+  width: 100%;
   box-sizing: border-box;
-  padding: 0 15rpx;
+  /* padding: 0 15rpx; */
 }
 
 .follow-info {
-  margin-top: 26rpx;
+  /* margin-top: 26rpx; */
   width: 100%;
-  height: 382rpx;
-  border-radius: 20rpx;
+  height: 230rpx;
   background: #FFFFFF;
-  display: flex;
+  position: relative;
+}
+
+.info-placerholder {
+  width: 100%;
+  height: 66rpx;
+  position: absolute;
+  top: 0;
+  background: #12C962;
 }
 
 .set-msg {
   width: 100%;
-  height: 248rpx;
+  height: 230rpx;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
+
+  /* align-items: flex-start; */
+  /* justify-content: center; */
 }
 
 .avatar-bg {
@@ -48,39 +56,30 @@ page {
 }
 
 .avatar-box {
-  width: 138rpx;
-  height: 138rpx;
+  width: 160rpx;
+  height: 160rpx;
   border-radius: 50%;
-  margin: 50rpx 0;
+  margin: 23rpx 0 0 66rpx;
   position: relative;
+  box-shadow: 5rpx 10rpx 3rpx 2rpx rgba(0, 0, 0, .1);
 }
 
 .avatar-image {
-  width: 100%;
-  height: 100%;
+  width: 154rpx;
+  height: 154rpx;
   border-radius: 50%;
-  border: 4rpx solid #61CA54;
+  border: 6rpx solid #fff;
+
 }
 
 .avatar-nickname {
-  width: 500rpx;
+  /* width: 500rpx; */
   display: flex;
-}
-
-.avatar-address {
-  width: 500rpx;
-}
-
-.flowers-box {
-  width: 26rpx;
   height: 26rpx;
-  margin-left: 10rpx;
+  margin-top: 17rpx;
 }
 
-.flowers-box>image {
-  width: 100%;
-  height: 100%;
-}
+
 
 .occupation-title {
   position: absolute;
@@ -98,85 +97,34 @@ page {
   border: 2rpx solid #fff;
 
 }
-
+  
 .avatar-msg {
-  margin-left: 40rpx;
-  margin-top: 50rpx;
-  width: 500rpx;
-  height: 150rpx;
-  color: #444444;
-  font-size: 32rpx;
-}
-
-.avatar-nickname,
-.avatar-birthday,
-.avatar-address {
-  line-height: 50rpx;
-}
-
-.gender-size {
-  margin-left: 10rpx;
+  /* margin-left: 40rpx; */
+  /* margin-top: 50rpx; */
+  width: 471rpx;
+  height: 110rpx;
+  color: #3d3d3d;
   font-size: 28rpx;
-  align-self: center;
+  margin: 66rpx 0 0 20rpx;
+  font-weight: 800;
+  border-bottom: solid 2rpx #edf0f3;
 }
 
 
+
 .mine-category {
   box-sizing: border-box;
-  width: 674rpx;
-  padding-top: 40rpx;
-  padding-bottom: 32rpx;
-  border-top: 4rpx solid #F0F1F5;
-  font-size: 28rpx;
-  /* font-weight: 600; */
-  z-index: 900;
-  display: flex;
-  position: absolute;
-  top: 268rpx;
-  left: 38rpx;
-}
-
-.border-right {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 471rpx;
   font-size: 24rpx;
-  /* font-weight: lighter; */
-  height: 22rpx;
-  border-right: 2rpx solid #D6D6D6;
-}
-
-.flower-count .border-right {
-  border: none;
-}
-
-.play-count,
-.point-count,
-.follow-count,
-.flower-count {
-  width: 25%;
-  text-align: center;
-}
-
-.play-img {
-  width: 28rpx;
-  height: 26rpx;
-  margin-right: 6rpx;
-  margin-bottom: 6rpx;
-}
-
-.red-heart {
-  width: 24rpx;
-  height: 22rpx;
-  margin-right: 6rpx;
-  margin-bottom: 6rpx;
+  display: flex;
+  justify-content: space-between;
+  color: #767676;
+  margin-top: 37rpx;
+  padding-right: 37rpx;
 }
 
-.point-img {
-  width: 28rpx;
-  height: 24rpx;
-  margin-right: 6rpx;
-  margin-bottom: 6rpx;
+.amount-text {
+  font-weight: 400;
 }
 
 image {
@@ -184,30 +132,6 @@ image {
   height: 100%;
 }
 
-.color {
-  text-align: right;
-  padding-right: 44rpx;
-
-}
-
-.play-count {
-  color: #92D626;
-}
-
-.point-count {
-  color: #FFA700;
-}
-
-.follow-count {
-  color: #F466FF;
-}
-
-.flower-count {
-  color: #EE5750;
-}
-
-
-
 .mine-edit {
   position: absolute;
   top: 72rpx;
@@ -246,67 +170,189 @@ image {
   /* line-height:46rpx; */
 }
 
-.wallet-module {
-  margin-top: 30rpx;
-  width: 716rpx;
-  height: 88rpx;
-  font-size: 32rpx;
-  color: #444;
-  background: #FFFFFF;
-  border-radius: 14rpx;
+.only-flower {
+  width: 720rpx;
+  height: 120rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  margin: 10rpx auto 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 40rpx;
+  box-sizing: border-box;
+}
+
+.grey-point {
+  width: 15rpx;
+  height: 15rpx;
+  background: #f2f2f2;
+  position: absolute;
+  top: 10rpx;
+  left: 10rpx;
+  border-radius: 50%;
+}
+
+
+.flower-amount,
+.wallet-box {
+  font-size: 30rpx;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+}
+
+.flower-amount image {
+  width: 64rpx;
+  height: 64rpx;
+  margin-right: 24rpx;
+}
+
+.flower-tips {
+  color: #848484;
+  font-size: 24rpx;
+}
+
+.flower-last {
+  color: #f65641;
 }
 
-.wallet-center {
-  width: 680rpx;
-  height: 88rpx;
-  margin: 0 auto;
+
+.wallet-section {
+  width: 720rpx;
+  height: 120rpx;
+  /* background: #fff; */
+  border-radius: 20rpx;
+  margin: 10rpx auto 0;
+  position: relative;
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.wallet-box,
+.flower-box {
+  width: 355rpx;
+  height: 120rpx;
+  border-radius: 20rpx;
+  background: #fff;
+  display: flex;
   align-items: center;
+  position: relative;
+  /* justify-content: space-around; */
 }
 
-.icon-box {
+.wallet-box {
+  margin-right: 10rpx;
+
+}
+
+.wallet-icon {
   width: 60rpx;
-  height: 60rpx;
-  margin-right: 16rpx;
-  margin-top: 2rpx;
+  height: 63rpx;
+  margin-left: 51rpx;
+  margin-right: 25rpx;
+}
 
+.flower-icon {
+  width: 54rpx;
+  height: 64rpx;
+  margin: 0 14rpx 0 32rpx;
 }
 
-.wallet-left {
+.flower-text {
+  width: 242rpx;
+  font-size: 30rpx;
+  font-weight: 800;
+}
+
+.flower-tips-text {
+  color: #848484;
+  font-size: 22rpx;
+}
+
+.btn-section {
+  width: 100%;
+  height: 190rpx;
+  background: #fff;
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  margin-top: 10rpx;
+  padding: 0 60rpx;
+  box-sizing: border-box;
+}
+
+.btn {
+  width: 121rpx;
+  height: 170rpx;
+  display: flex;
+  flex-direction: column;
 }
 
-.wallet-right {
-  margin-bottom: 20rpx;
-  width: 16rpx;
-  height: 28rpx;
+.btn image {
+  width: 121rpx;
+  height: 121rpx;
+  border-radius: 50%;
 }
 
-.course-module,
-.group-module,
-.reading-module,
-.keep-module,
-.myfollow-module {
-  margin-top: 20rpx;
-  width: 716rpx;
-  height: 88rpx;
-  font-size: 32rpx;
+.btn-title {
+  margin-top: 11rpx;
+  width: 121rpx;
+  text-align: center;
+  color: #505050;
+  font-size: 24rpx;
+  font-weight: 800;
+}
+
+.my-reading-title {
+  width: 100%;
+  height: 68rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 0 30rpx;
+  color: #393939;
+  font-weight: 800;
+  font-size: 30rpx;
+  box-sizing: border-box;
+}
+
+.title-right {
+  display: flex;
+  flex-direction: row;
+  float: right;
+  width: 100rpx;
+  height: 38rpx;
+  font-size: 28rpx;
   color: #444;
-  background: #FFFFFF;
-  border-radius: 14rpx;
+  align-items: center;
 }
 
+.title-right image{
+  width: 15rpx;
+  height: 27rpx;
+  margin-left: 10rpx;
+}
 .set-msg-temp {
   position: absolute;
   width: 100%;
   height: 248rpx;
 }
 
+.footer-section{
+  width: 100%;
+  height: 150rpx;
+  font-size: 24rpx;
+  color: #b6b6b6;
+  text-align: center;
+  padding-top: 70rpx;
+}
 .placerholder {
   height: 41rpx;
-  background: rgba(228,255,242,.8);
+  background: rgba(228, 255, 242, .8);
   /* background: #E4FFF2; */
   width: 410rpx;
   margin-top: 35rpx;

pages/index/index.js

@@ -28,30 +28,32 @@ import {
 
 Page({
   data: {
-    tab: [{
-        name: '热团',
-        templates: 'group',
+    tab: [
+      {
+        name: '我的',
+        templates: 'my',
       },
       {
-        name: '推荐',
+        name: '发现',
         templates: 'hot',
       },
       {
-        name: '动态',
-        templates: 'follow',
+        name: '热团',
+        templates: 'group',
       },
-      {
-        name: '我的',
-        templates: 'my',
-      }
+      // {
+      //   name: '动态',
+      //   templates: 'follow',
+      // },
+     
     ],
     winH: 568,
     myIndex: 1,
     followData: [],
     recommendPageNo: 1,
     recommendTotalNo: 0,
-    followPageNo: 1,
-    followPageTotalNo: 0,
+    followPageNo: 0,
+    followPageTotalNo: 1,
     myData: {},
     templates: 'hot',
     title: 'index中的title',
@@ -60,6 +62,7 @@ Page({
     mineSettingInfo: '528',
     hide: true,
     isIOS:app.globalData.isIOS,
+    ifHaveMore: true
   },
   jurisdiction: function () {
     //隐藏弹框
@@ -85,7 +88,11 @@ Page({
       templates
     });
     if (myIndex == 0) {
-      groupInit(this);
+      // groupInit(this);
+      this.setData({
+        followPageNo: 0,
+      })
+      myInit(this);
     }
     if (myIndex == 1) {
       this.setData({
@@ -94,10 +101,11 @@ Page({
       hotInit(this);
     }
     if (myIndex == 2) {
-      this.setData({
-        followPageNo: 1
-      })
-      followInit(this);
+      // this.setData({
+      //   followPageNo: 1
+      // })
+      // followInit(this);
+      groupInit(this);
     }
     if (myIndex == 3) {
       // console.log(this.data.isIOS)
@@ -105,7 +113,6 @@ Page({
     }
   },
   onLoad: function (options) {
-
     this.uid = wx.getStorageSync('uid');
     wx.getSystemInfo({
       success: (res) => {
@@ -152,10 +159,9 @@ Page({
   getUserWorksInfo: function () {
     console.log(wx.getStorageSync('user'));
     httpRequestApi.getUserWorksInfo().success(res => {
-      this.data.myData.user = res.data.data; //直接赋值 给 myData的user对象。
-      this.data.myData.user.user.birthday = this.data.myData.user.user.birthday ?  formatDate(res.data.data.user.birthday,4) : '2018年1月1日';
-      console.log(formatDate(res.data.data.user.birthday,1))
-      console.log(this.data.myData.user.birthday)
+      this.data.myData.user = res.data.data;
+      this.data.myData.user.user.birthday = this.data.myData.user.user.birthday ?  formatDate(res.data.data.user.birthday,3) : '2018年1月1日';
+      this.data.myData.user.myRead.gmtCreated = formatDate(this.data.myData.user.myRead.gmtCreated,4)
       this.setData({
         myData: this.data.myData,
       });
@@ -165,32 +171,36 @@ Page({
   },
   // 触底加载
   onReachBottom: function () {
-
-    // 当前在推荐页面 加载推荐
-    if (this.data.myIndex === 1) {
-      console.log(this.data.recommendPageNo)
+    if (this.data.myIndex === 0) {
+      console.log(this.data.followPageTotalNo)
+      console.log(this.data.followPageNo)
       this.setData({
-        recommendPageNo: this.data.recommendPageNo + 1
+        followPageNo: this.data.followPageNo + 1
       })
-      if (this.data.recommendPageNo <= this.data.recommendTotalNo) {
-        this.getHotRecommend(this.uid, this.data.recommendPageNo, 3);
+      if (this.data.followPageNo <= this.data.followPageTotalNo) {
+        this.getFollowWorks(this.data.followPageNo, 3);
 
       } else {
         console.log('没有更多')
+        this.setData({
+          ifHaveMore: false
+        })
       }
     }
-    if (this.data.myIndex === 2) {
-      console.log(this.data.followPageTotalNo)
+    // 当前在推荐页面 加载推荐
+    if (this.data.myIndex === 1) {
+      console.log(this.data.recommendPageNo)
       this.setData({
-        followPageNo: this.data.followPageNo + 1
+        recommendPageNo: this.data.recommendPageNo + 1
       })
-      if (this.data.followPageNo <= this.data.followPageTotalNo) {
-        this.getWorks(this.data.followPageNo, 5);
+      if (this.data.recommendPageNo <= this.data.recommendTotalNo) {
+        this.getHotRecommend(this.uid, this.data.recommendPageNo, 3);
 
       } else {
         console.log('没有更多')
       }
     }
+   
   },
   onPullDownRefresh: function () {
     //当前在团购页下拉加载

pages/index/index.wxss

@@ -25,35 +25,43 @@
   top: 0;
   width: 100%;
   height: 80rpx;
-  background: #fff;
-  color: #383838;
+  background: #12C962;
+  /* color: #383838; */
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15rpx;
+  /* margin-bottom: 15rpx; */
   z-index: 999;
-  padding: 0 10rpx 0;
+  padding: 0 82rpx 0 82rpx;
+
 }
 
 .tabbar {
-  flex: 1;
+  /* flex: 1; */
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 164rpx;
-  height: 60rpx;
+  width: 100rpx;
+  height: 71rpx;
   line-height: 60rpx;
-  font-size: 32rpx;
-  border-radius: 30rpx;
-  background: #fff;
+  font-size: 40rpx;
+  opacity:0.7;
+  font-weight: 800;
+  /* border-radius: 30rpx; */
+  /* background: #fff; */
+  border-bottom: none;
+  color: #fff;
 }
 
 .select {
   color: #fff;
   /* font-size: 40rpx; */
   /* font-family: SourceHanSansSC-bold; */
-  background: #61ca54;
+  /* background: #61ca54; */
+  font-size: 40rpx;
+  border-bottom: 6rpx solid #fff;
+  opacity:1;
 }
 
 .bottom-tab image {
@@ -67,4 +75,184 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-}
+}
+/* 部分公用css */
+.red-text {
+  color: #ff3600;
+}
+
+/* 作品列表 */
+
+.hotWares {
+  display: flex;
+  flex-wrap: wrap;
+  /* background: #e8e8e8; */
+}
+
+.recommdSection .hotWares .worksCard {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 484rpx;
+  background: #fff;
+  /* padding: 26rpx; */
+  /* border-radius: 12rpx; */
+  /* margin: 0 0 18rpx 16rpx; */
+  margin: 0 auto 10rpx;
+  /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
+}
+
+.worksCard {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 484rpx;
+  background: #fff;
+  margin: 0 auto 20rpx;
+}
+
+.worksCard .wareCardImg {
+  display: block;
+  width: 704rpx;
+  height: 290rpx;
+  margin: 21rpx auto 0;
+  border-radius: 20rpx;
+}
+
+.worksCard .titleSummary {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12rpx;
+}
+
+.worksCard .wareCardTitle {
+  /* margin: 0 auto; */
+  width: 80%;
+  height: 46rpx;
+  display: block;
+  /* text-align: left; */
+  color: #444;
+  font-size: 32rpx;
+  /* letter-spacing: 4rpx; */
+  margin-left: 28rpx;
+  font-family: MicrosoftYaHei;
+}
+
+.worksCard .topData {
+  height: 92rpx;
+  margin-top: 22rpx;
+  display: flex;
+  flex-direction: row;
+  /* justify-content: space-between; */
+  align-items: center;
+}
+
+.worksLeft {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  margin-left: 10rpx;
+
+}
+
+.worksLeft .worksInfo .authorName {
+  color: #393939;
+  font-size: 30rpx;
+  margin-top: 8rpx;
+
+}
+
+.worksLeft .worksInfo .time {
+  color: #393939;
+  font-size: 30rpx;
+
+}
+
+.worksCard .topData .wareCardPlays {
+  width: 100rpx;
+  /* margin-left: 270rpx; */
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  padding-right: 35rpx;
+
+}
+
+.worksCard .topData .authorAvatar {
+  width: 92rpx;
+  height: 92rpx;
+  margin: 0 22rpx 0 22rpx;
+  display: block;
+  border: 4rpx solid #61CA54;
+  border-radius: 50%;
+}
+
+.worksCard .topData .profession {
+  width: 68rpx;
+  height: 24rpx;
+  background: rgba(97, 202, 84, 1);
+  border-radius: 166rpx;
+  border: 2rpx solid rgba(255, 255, 255, 1);
+  font-size: 16rpx;
+  /* font-family: PingFangSC-Medium; */
+  /* font-weight: 500; */
+  color: rgba(255, 255, 255, 1);
+  line-height: 24rpx;
+  text-align: center;
+  position: absolute;
+  bottom: -7rpx;
+  left: 37rpx;
+
+}
+
+.topData .numberInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.worksCard .wareCardTip {
+  width: 178rpx;
+  height: 40rpx;
+  display: block;
+  text-align: left;
+  color: #444;
+  font-size: 24rpx;
+  line-height: 44rpx;
+
+}
+
+.worksCard .wareCardPlays .wareCardPlaysImg {
+  width: 30rpx;
+  height: 26rpx;
+  margin-left: 7rpx;
+  float: right;
+}
+
+.worksCard .wareCardPlays text {
+  /* margin-left: 4rpx; */
+  color: #848484;
+  font-size: 24rpx;
+  text-align: right;
+  /* width:57%; */
+  float: right;
+}
+
+.worksCard .wareCardLikes {
+  width: 100rpx;
+  margin-right: 18rpx;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.worksCard .wareCardLikes .wareCardLikesImg {
+  width: 22rpx;
+  height: 26rpx;
+  margin-left: 7rpx;
+}
+
+.worksCard .wareCardLikes text {
+  /* margin-left: 4rpx; */
+  color: #848484;
+  font-size: 24rpx;
+}

pages/social/works/works.wxml

@@ -10,14 +10,15 @@
         <image class="avatar" src="{{authorAvatar}}" bindtap="goToUsers" data-uid="{{authorUid}}" />
         <view class="profession" wx:if="{{authorProfession}}">{{authorProfession}}</view>
         <text class="nickName" bindtap="goToUsers" data-uid="{{authorUid}}">{{author}}</text>
-        <view class="like" bindtap="likeWorks" wx:if="{{authorUid !== myUid}}" style="{{authorUid === 'c7f0a8fdd3a549ea9109a7b7486775f2'? 'margin-left:160rpx' : null}}">
-            <image src="{{isLike? '../../../static/image/red_like.png' :'../../../static/image/red_like_empty.png'  }}" />
-            <text class="likeBtn">{{isLike ? '已' : ''}}点赞</text>
-        </view>
+        
         <view class="follow" wx:if="{{authorUid !== myUid && authorUid !== 'c7f0a8fdd3a549ea9109a7b7486775f2'}}" bindtap="follow">
             <image src="{{isFans? '../../../static/image/fully_heart.png' : '../../../static/image/empty_heart.png'}}" />
             <text class="followBtn">{{isFans ? '已' : ''}}关注</text>
         </view>
+        <view class="like" bindtap="likeWorks" wx:if="{{authorUid !== myUid}}" style="{{authorUid === 'c7f0a8fdd3a549ea9109a7b7486775f2'? 'margin-left:160rpx' : null}}">
+            <image src="../../../static/image/flower_circle.png" />
+            <!-- <text class="likeBtn">{{isLike ? '已' : ''}}点赞</text> -->
+        </view>
     </view>
     <view class="userSection">
         <view class="peopleNum">
@@ -69,10 +70,10 @@
     </view>
     <view class="footSection">
         <image class="blackbord" src="../../../static/image/blackbord.png" />
-        <view class="collectBtn footerBtn {{isIOS? 'get-opacity' : null}}" bindtap="reward">
+        <view class="collectBtn footerBtn" bindtap="reward">
             <!-- <view wx:if="{{isIOS}}" class="stop-default"></view> -->
-            <image src="../../../static/image/bonus.png" />
-            <text>奖励</text>
+            <image src="../../../static/image/listen_carfully.png" />
+            <text>听配音</text>
         </view>
         <view class="readingBtn footerBtn" bindtap="goToReading">
             <image class="microphone" src="../../../static/image/microphone.png" />

pages/social/works/works.wxss

@@ -78,13 +78,13 @@
 }
 
 .readAuthorSection .like {
-    display: flex;
+    /* display: flex;
     align-items: center;
-    justify-content: center;
-    /* margin-left: 90rpx; */
-    width: 160rpx;
-    height: 60rpx;
-    border: 2rpx solid #FF0000;
+    justify-content: center; */
+    margin-left: 20rpx;
+    width: 62rpx;
+    height: 62rpx;
+    /* border: 2rpx solid #FF0000; */
     font-size: 28rpx;
     border-radius: 30rpx;
     text-align: center;
@@ -93,8 +93,8 @@
 }
 
 .readAuthorSection .like image {
-    width: 36rpx;
-    height: 36rpx;
+    width: 100%;
+    height: 100%;
     margin-right: 15rpx;
 
 }
@@ -103,7 +103,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: 12rpx;
+    margin-left: 90rpx;
     width: 160rpx;
     height: 60rpx;
     border: 2rpx solid #ff0000;

utils/const.js

@@ -1,7 +1,7 @@
 // 常量列表
 module.exports = {
-	productApi: 'https://reader.lingjiao.cn/readerProduct/',
-	// productApi: 'https://readertest.lingjiao.cn/readerProduct/',
-	baseApi: 'https://reader.lingjiao.cn/readerBase/'
-	// baseApi: 'https://readertest.lingjiao.cn/readerBase/'
+	// productApi: 'https://reader.lingjiao.cn/readerProduct/',
+	productApi: 'https://readertest.lingjiao.cn/readerProduct/',
+	// baseApi: 'https://reader.lingjiao.cn/readerBase/'
+	baseApi: 'https://readertest.lingjiao.cn/readerBase/'
 }