开发

我的页面

app.wxss

@@ -1,32 +1,38 @@
 /**app.wxss**/
 page {
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  color: #444;
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
-  background: #eee;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    color: #444;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    background: #eee;
 }
 
 view {
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 text {
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 .container {
-  height: auto;
-  box-sizing: border-box;
-  padding-top: 80rpx;
-  /* color: #444; */
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    height: auto;
+    box-sizing: border-box;
+    padding-top: 80rpx;
+    /* color: #444; */
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 ::-webkit-scrollbar {
-  display:none;
-  width:0;
-  height:0;
-  color:transparent;
+    display: none;
+    width: 0;
+    height: 0;
+    color: transparent;
+}
+
+.textOver {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

component/my/my.wxml

@@ -1,30 +1,30 @@
 <!-- <wxs src="../../pages/commonWxs/format.wxs" module="format" /> -->
-<wxs src="../../utils/filter.wxs" module="filters"/>
+<wxs src="../../utils/filter.wxs" module="filters" />
 <template name="my">
-  <view class='mine-container'>
-    <view class='follow-details'>
-      <view class='follow-info'>
-        <view class="info-placerholder"></view>
-        <view class='set-msg' wx:if="{{myData.userInfo.wechatName }}" bindtap="toMyEdit">
-          <view class='avatar-box'>
-            <image class='avatar-image' src='{{ myData.userInfo.avatar  }}'></image>
-            <!-- <view class='occupation-title' wx:if="{{myData.user.user.profession}}">{{ myData.user.user.profession }}</view> -->
-          </view>
-          <view class='avatar-msg' >
-            <view class='avatar-nickname'>昵称：{{ myData.userInfo.wechatName  }}</view>
-            <view class='avatar-nickname'>年级：{{myData.userInfo.gradeText  }}</view>
-            <image class="edit-img" src="../../static/index/edit.png" />
-            <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 class='amount-text'>作品 {{ myData.user.readAmount || 0 }} </view>
+    <view class='mine-container'>
+        <view class='follow-details'>
+            <view class='follow-info'>
+                <view class="info-placerholder"></view>
+                <view class='set-msg' wx:if="{{myData.userInfo.wechatName }}" bindtap="toMyEdit">
+                    <view class='avatar-box'>
+                        <image class='avatar-image' src='{{ myData.userInfo.avatar  }}'></image>
+                        <!-- <view class='occupation-title' wx:if="{{myData.user.user.profession}}">{{ myData.user.user.profession }}</view> -->
+                    </view>
+                    <view class='avatar-msg'>
+                        <view class='avatar-nickname'>昵称：{{ myData.userInfo.wechatName }}</view>
+                        <view class='avatar-nickname'>年级：{{myData.userInfo.gradeText }}</view>
+                        <image class="edit-img" src="../../static/index/edit.png" />
+                        <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 class='amount-text'>作品 {{ myData.user.readAmount || 0 }} </view>
+                        </view>
+                    </view>
+                </view>
             </view>
-          </view>
-        </view>
-      </view>
-      <!-- ios只显示红花 -->
-      <!-- <view class="only-flower" wx:if="{{myData.isIOS}}" bindtap="goToFlower">
+            <!-- ios只显示红花 -->
+            <!-- <view class="only-flower" wx:if="{{myData.isIOS}}" bindtap="goToFlower">
         <view class="grey-point"></view>
         <view class="flower-amount">
           <image class="" src='../../static/image/flower_small.png' />
@@ -37,70 +37,71 @@
         <view class="flower-tips" wx:if="{{myData.user.unfinishedAmount <= 0}}">今天任务全部完成，真棒</view>
       </view> -->
 
-      <view class="vip-con" wx:if="{{myData.isIOS}}">
-        <image src="http://reader-wx.ai160.com/images/reader/pay/vip_bg.png" />
-        <view class="invite" wx:if="{{!myData.isVIP}}" bindtap="myPlase">快去邀请好友 免费领取会员></view>
-        <view wx:else>
-          <view class="vip-end-time">{{filters.formatDate(myData.date)}}到期</view>
-          <view class="order-buy vip-buy"  bindtap="myPlase">
-              邀请有礼>
-          </view>
-        </view>
-      </view>
-      <view class="vip-con" wx:else>
-        <image src="http://reader-wx.ai160.com/images/reader/pay/vip_bg.png" />
-        <view wx:if="{{!myData.isVIP}}">
-          <view class="price">
-            <text >{{myData.price}}</text>元/月
-          </view>
-          <view class="flase-price">
-            原价：29.9元/月
-          </view>
-          <view class="order-buy"  bindtap="moneyBuy">
-              限时抢购>
-          </view>
-        </view>
-        <view wx:else>
-          <view class="vip-end-time">{{filters.formatDate(myData.date)}}到期</view>
-          <view class="order-buy vip-buy"  bindtap="moneyBuy">
-              立即续费>
-          </view>
-        </view>
-      </view>
-      <!-- android 显示两个 -->
-      <view class="wallet-section">
-        <view class="flower-box" bindtap="goToFlower">
-          <view class="grey-point"></view>
-          <view class="flower-box-box">
-            <image class="flower-icon" src='../../static/image/flower_small.png' />
-            <view class="flower-text">
-              <view>小红花：{{myData.user.integralAmount || 0 }}</view>
+            <view class="vip-con" wx:if="{{myData.isIOS}}">
+                <image src="http://reader-wx.ai160.com/images/reader/pay/vip_bg.png" />
+                <view class="invite" wx:if="{{!myData.isVIP}}" bindtap="myPlase">快去邀请好友 免费领取会员></view>
+                <view wx:else>
+                    <view class="vip-end-time">{{filters.formatDate(myData.date)}}到期</view>
+                    <view class="order-buy vip-buy" bindtap="myPlase">
+                        邀请有礼>
+                    </view>
+                </view>
+            </view>
+            <view class="vip-con" wx:else>
+                <image src="http://reader-wx.ai160.com/images/reader/pay/vip_bg.png" />
+                <view wx:if="{{!myData.isVIP}}">
+                    <view class="price">
+                        <text>{{myData.price}}</text>元/月
+                    </view>
+                    <view class="flase-price">
+                        原价：29.9元/月
+                    </view>
+                    <view class="order-buy" bindtap="moneyBuy">
+                        限时抢购>
+                    </view>
+                </view>
+                <view wx:else>
+                    <view class="vip-end-time">{{filters.formatDate(myData.date)}}到期</view>
+                    <view class="order-buy vip-buy" bindtap="moneyBuy">
+                        立即续费>
+                    </view>
+                </view>
+            </view>
+            <!-- android 显示两个 -->
+            <view class="wallet-section">
+                <view class="flower-box" bindtap="goToFlower">
+                    <view class="grey-point"></view>
+                    <view class="flower-box-box">
+                        <image class="flower-icon" src='../../static/image/flower_small.png' />
+                        <view class="flower-text">
+                            <view>小红花：{{myData.user.integralAmount || 0 }}</view>
+                        </view>
+                    </view>
+                    <view class="flower-tips-text">
+                        <text class="flower-last">{{myData.user.unfinishedAmount }}</text>
+                        个任务福利还没有完成
+                    </view>
+                </view>
+            </view>
+            <view class="btn-section">
+                <view class="btn" bindtap='toMyConcern'>
+                    <image class="btn-icon" src="../../static/image/concern.png" />
+                    <view class="btn-title">我的关注</view>
+                </view>
+                <view class="btn" bindtap='toMyKeep'>
+                    <image class="btn-icon" src="../../static/image/collect.png" />
+                    <view class="btn-title">我的收藏</view>
+                </view>
+                <view class="btn">
+                    <image class="btn-icon" src="../../static/image/message.png" bindtap="goToMessage" />
+                    <view class="btn-title">消息通知</view>
+                </view>
+                <button class="btn" bindtap="goToService" open-type="contact" plain="true" hover-class="none"
+                    style="border: none;">
+                    <image class="btn-icon" src="../../static/index/contact.png"></image>
+                    <view class="btn-title">联系客服</view>
+                </button>
             </view>
-          </view>
-          <view class="flower-tips-text">
-            <text class="flower-last">{{myData.user.unfinishedAmount }}</text>
-            个任务福利还没有完成
-          </view>
-        </view>
-      </view>
-      <view class="btn-section">
-        <view class="btn" bindtap='toMyConcern'>
-          <image class="btn-icon" src="../../static/image/concern.png" />
-          <view class="btn-title">我的关注</view>
-        </view>
-        <view class="btn" bindtap='toMyKeep'>
-          <image class="btn-icon" src="../../static/image/collect.png" />
-          <view class="btn-title">我的收藏</view>
-        </view>
-        <view class="btn">
-          <image class="btn-icon" src="../../static/image/message.png" bindtap="goToMessage" />
-          <view class="btn-title">消息通知</view>
         </view>
-        <button class="btn" bindtap="goToService" open-type="contact" plain="true" hover-class="none" style="border: none;">
-            <image class="btn-icon" src="../../static/index/contact.png"></image>
-            <view class="btn-title">联系客服</view>
-        </button>
-      </view>
     </view>
-  </view>
 </template>

pages/my/index.js

@@ -1,24 +1,78 @@
 import {
     getUserInfo
 } from '~/api/user'
+import {
+    getOpenidNoLogin
+} from '~/utils/httpUtilNoLogin';
+import httpRequestApi from '~/utils/APIClient';
+let app = getApp()
+var videoAd = null;
+
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-        userInfo: {}
+        userInfo: {},
+        isIos: false
+        // isIos: app.globalData.isIOS
     },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    async onLoad(options) {
-        let userInfo = await getUserInfo()
-        console.log(userInfo);
-        this.setData({
-            userInfo
-        })
+    onLoad() {
+        if (wx.createRewardedVideoAd) {
+            // 加载激励视频广告
+            videoAd = wx.createRewardedVideoAd({
+                adUnitId: 'adunit-77f46b2dc73da123'
+            })
+            //捕捉错误
+            videoAd.onError(err => {
+                console.log(err);
+            })
+            // 监听关闭
+            videoAd.onClose((status) => {
+                console.log(status);
+                if (status && status.isEnded || status === undefined) {
+                    // 正常播放结束，下发奖励
+                    // continue you code
+                } else {
+                    // 播放中途退出，进行提示
+                    wx.showToast({
+                        icon: 'none',
+                        title: '取消观看',
+                    })
+                }
+            })
+        }
+    },
+    async onShow() {
+        let uid = wx.getStorageSync('uid') || ''
+        // 没登陆先走静默登录，登录后直接获取用户信息
+        if (!uid) {
+            return getOpenidNoLogin(async () => {
+                let userInfo = await getUserInfo()
+                console.log(userInfo);
+                this.setData({
+                    userInfo
+                })
+            })
+        } else {
+            let userInfo = await getUserInfo()
+            console.log(userInfo);
+            this.setData({
+                userInfo
+            })
+        }
+    },
+    jump({
+        currentTarget
+    }) {
+        let url = currentTarget.dataset.url
+        wx.navigateTo({
+            url: url
+        });
+    },
+    goToService() {
+        httpRequestApi.userEvent('SERVICE');
     },
     switcher({
         currentTarget
@@ -26,5 +80,17 @@ Page({
         wx.reLaunch({
             url: `/pages/index/index?tabbarIndx=${currentTarget.dataset.index}`
         });
+    },
+    rewardedVideo() {
+        // button 点击事件
+        console.log('打开激励视频');
+        // 在合适的位置打开广告
+        if (videoAd) {
+            videoAd.show().catch(err => {
+                // 失败重试
+                videoAd.load()
+                    .then(() => videoAd.show())
+            })
+        }
     }
 })

pages/my/index.json

@@ -1,3 +1,5 @@
 {
-    "usingComponents": {}
+    "usingComponents": {},
+    "enablePullDownRefresh": false
+
 }

pages/my/index.less

@@ -1,19 +1,19 @@
 .container {
-    padding: 30rpx;
+    padding: 30rpx 20rpx;
 
     .top-tab {
         position: fixed;
-        top: 0;
+        top: 0px;
         left: 0rpx;
         width: 100%;
         height: 80rpx;
-        background: #ededed;
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
         z-index: 999;
         padding: 0 48rpx;
+        background-color: #EEEEEE;
 
         .tabbar {
             display: flex;
@@ -39,12 +39,12 @@
     }
 
     .userBox {
-        margin-top: 85rpx;
+        margin-top: 75rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
         background-color: white;
-        padding: 30rpx 12rpx;
+        padding: 20rpx 12rpx 0rpx;
         border-radius: 20rpx;
 
         .avatar {
@@ -56,7 +56,8 @@
 
         .userRight {
             flex: 1;
-            margin-left: 40rpx;
+            margin-left: 30rpx;
+            padding: 0px 10rpx;
 
             .uRtop {
                 display: flex;
@@ -64,13 +65,14 @@
 
                 .uRtopleft {
                     .nickName {
+                        max-width: 340rpx;
                         color: #333;
-                        font-size: 30rpx;
+                        font-size: 32rpx;
                     }
 
                     .gradeText {
-                        margin: 14rpx 0rpx 8rpx;
-                        font-size: 23rpx;
+                        margin: 18rpx 0rpx 12rpx;
+                        font-size: 24rpx;
                         color: #989A9C;
                     }
                 }
@@ -80,8 +82,8 @@
                     align-items: center;
 
                     .edit {
-                        width: 25rpx;
-                        height: 25rpx;
+                        width: 22rpx;
+                        height: 28rpx;
                     }
 
                     text {
@@ -91,6 +93,252 @@
                     }
                 }
             }
+
+            .uRBtm {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                border-top: 1px solid rgba(0, 0, 0, 0.1);
+                padding: 18rpx 0rpx;
+
+                .count {
+                    width: 33%;
+                    font-size: 28rpx;
+                    color: rgba(0, 0, 0, 0.6);
+                    border-right: 1px solid rgba(51, 51, 51, 0.3);
+                    text-align: center;
+
+                    .countNum {
+                        margin-left: 10rpx;
+                    }
+                }
+
+                .countFirst {
+                    text-align: left;
+                }
+
+                .countEnd {
+                    text-align: right;
+                    border: none;
+                }
+            }
+        }
+    }
+
+    .iosVip {
+        margin: 4rpx 0px 0px 6rpx;
+        font-size: 18rpx;
+        color: #333;
+    }
+
+    .sectionBoxs {
+        margin-top: 20rpx;
+        padding: 20rpx 30rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: white;
+        border-radius: 20rpx;
+
+        .sBox {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .img {
+                width: 69rpx;
+                height: 69rpx;
+            }
+
+            .title {
+                margin-top: 8rpx;
+                font-size: 24rpx;
+                color: #333;
+            }
+        }
+
+        .contactBtn {
+            border: none;
+            padding: 0rpx;
+            line-height: normal;
+            margin: 0;
+        }
+    }
+
+    .payBox {
+        margin-top: 20rpx;
+        padding: 13rpx 30rpx;
+        background-color: white;
+        border-radius: 20rpx;
+
+        .title {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000;
+        }
+
+        .pay {
+            margin: 20rpx 0rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0rpx 30rpx;
+            border-radius: 22rpx;
+            overflow: hidden;
+
+            .payLeft {
+                .pLTitle {
+                    font-size: 36rpx;
+                    font-weight: bold;
+                }
+
+                .pLcontent {
+                    font-size: 22rpx;
+                }
+            }
+
+            .payRight {
+                margin: 24rpx 0rpx;
+                padding: 12rpx 28rpx;
+                border-radius: 40rpx;
+                font-size: 24rpx;
+                font-weight: bold;
+            }
+        }
+
+        .vipPay {
+            background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
+            background-size: cover;
+
+            .vipTitle {
+                color: #FFE6B9;
+            }
+
+            .vipContent {
+                margin-top: 4rpx;
+                color: #FFE6B9;
+            }
+
+            .vipBtn {
+                background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
+                color: #211501;
+            }
+        }
+
+        .buyPay {
+            background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
+            background-size: cover;
+
+            .payLeft {
+                color: #7D320A;
+                font-size: 36rpx;
+                font-weight: bold;
+            }
+
+            .buyBtn {
+                border: 1rpx solid white;
+                color: white;
+                background-color: #7D320A;
+            }
+        }
+    }
+
+    .surplus {
+        margin-top: 20rpx;
+        padding: 22rpx 30rpx;
+        background-color: white;
+        border-radius: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 32rpx;
+
+        .title {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000;
+        }
+
+        .num {
+            color: #F97419;
+            font-weight: bold;
+            margin-right: 10rpx;
+        }
+    }
+
+    .taskBox {
+        margin-top: 20rpx;
+        padding: 20rpx 10rpx 0rpx;
+        background-color: white;
+        border-radius: 20rpx;
+
+        .title {
+            padding: 0rpx 20rpx;
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000;
+        }
+
+        .task {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 30rpx 22rpx;
+            border-bottom: 1px solid #EAEAEA;
+
+            .taskLeft {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .img {
+                    width: 76rpx;
+                    height: 76rpx;
+                    border-radius: 50%;
+                }
+
+                .taskContent {
+                    margin-left: 40rpx;
+
+                    .tcTitle {
+                        font-size: 30rpx;
+                        font-weight: bold;
+                        color: #333;
+                    }
+
+                    .tcNum {
+                        color: #FF6259;
+                        font-size: 26rpx;
+                    }
+                }
+            }
+
+            .taskRight {
+                width: 138rpx;
+                text-align: center;
+                padding: 10rpx 0rpx;
+                border-radius: 40rpx;
+                color: white;
+                background-color: #FC614E;
+                font-size: 30rpx;
+            }
+
+            .taskRight-close {
+                color: #6C6C6C;
+                background: #D0D0D0;
+                box-shadow: 0 2px 2px 0 #AEABAB;
+            }
+
+            .taskSurplus {
+                text-align: center;
+                margin-top: 4rpx;
+                color: #686868;
+                font-size: 20rpx;
+            }
+        }
+
+        .advert {
+            border: none;
         }
     }
 }

pages/my/index.wxml

@@ -1,4 +1,7 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+
 <view class="container">
+    <!-- 导航栏 -->
     <view class="top-tab">
         <view class="tabbar select">
             <text>我的</text>
@@ -13,21 +16,136 @@
             <text>资源</text>
         </view>
     </view>
+    <!-- 用户信息 -->
     <view class="userBox">
         <image class='avatar' src='{{ userInfo.user.avatar  }}'></image>
         <view class="userRight">
             <view class="uRtop">
                 <view class="uRtopleft">
-                    <view class="nickName">昵称：喔喔奶糖</view>
-                    <view class="gradeText">年级：三年级</view>
+                    <view class="nickName textOver">昵称：{{userInfo.user.wechatName }}</view>
+                    <view class="gradeText">年级：{{filters.gradeFilter(userInfo.user.grade)}}</view>
                 </view>
-                <view class="uRtopRight">
-                    <image src="/static/image/edit_new.png" class="edit" />
+                <view class="uRtopRight" bindtap="jump" data-url="/pages/user/myEdit/myEdit">
+                    <image class="edit" src="/static/image/edit_new.png" mode="" />
                     <text>编辑</text>
                 </view>
             </view>
             <view class="uRBtm">
-
+                <view class="count countFirst">
+                    作品<text class="countNum textOver">{{userInfo.user.readAmount || 0}}</text>
+                </view>
+                <view class="count">
+                    粉丝<text class="countNum textOver">{{userInfo.user.fansAmount || 0}}</text>
+                </view>
+                <view class="count countEnd">
+                    播放<text class="countNum textOver">{{userInfo.user.playAmount || 0}}</text>
+                </view>
+            </view>
+        </view>
+    </view>
+    <!-- ios会员展示到期时间 -->
+    <view class="iosVip" wx:if="{{isIos}}">
+        会员至：2023年12月11日
+    </view>
+    <!-- 跳转菜单 -->
+    <view class="sectionBoxs">
+        <view class="sBox" bindtap='jump' data-url="/pages/myworks/myworks">
+            <image class="img" src="/static/image/work.png" mode="" />
+            <text class="title">我的作品</text>
+        </view>
+        <view class="sBox" bindtap='jump' data-url="/pages/myconcern/myconcern?title=我的关注">
+            <image class="img" src="/static/image/concern.png" mode="" />
+            <text class="title">我的关注</text>
+        </view>
+        <view class="sBox" bindtap='jump' data-url="/pages/mycollection/mycollection?title=我的收藏">
+            <image class="img" src="/static/image/collect.png" mode="" />
+            <text class="title">我的收藏</text>
+        </view>
+        <view class="sBox" bindtap='jump' data-url="/pages/social/insideMessage/insideMessage">
+            <image class="img" src="/static/image/message.png" mode="" />
+            <text class="title">消息通知</text>
+        </view>
+        <button class="contactBtn" bindtap="goToService" open-type="contact" plain="true" hover-class="none">
+            <view class="sBox">
+                <image class="img" src="/static/image/contact.png" mode="" />
+                <text class="title">联系客服</text>
+            </view>
+        </button>
+    </view>
+    <!-- 支付 -->
+    <view class="payBox" wx:if="{{!isIos}}">
+        <view class="title">
+            付费购
+        </view>
+        <view class="pay vipPay">
+            <view class="payLeft">
+                <view class="pLTitle vipTitle">
+                    99元/12个月VIP
+                </view>
+                <view class="pLcontent vipContent">
+                    购买VIP会员，即可畅读全部资源
+                </view>
+            </view>
+            <view class="payRight vipBtn">
+                立即开通
+            </view>
+        </view>
+        <view class="pay buyPay">
+            <view class="payLeft">
+                10元/10次体验
+            </view>
+            <view class="payRight buyBtn">
+                立即开通
+            </view>
+        </view>
+    </view>
+    <!-- 剩余使用次数 -->
+    <view class="surplus">
+        <view class="title">剩余使用次数：</view>
+        <view class="num">0次</view>
+    </view>
+    <!-- 任务活动 -->
+    <view class="taskBox">
+        <view class="title">免费获取</view>
+        <view class="task">
+            <view class="taskLeft">
+                <image class="img" src="/static/image/task1.png" alt="" mode="" />
+                <view class="taskContent">
+                    <view class="tcTitle">
+                        每日签到
+                    </view>
+                    <view class="tcNum">+1次</view>
+                </view>
+            </view>
+            <view class="taskRight taskRight-close">签到</view>
+        </view>
+        <view class="task">
+            <view class="taskLeft">
+                <image class="img" src="/static/image/task2.png" alt="" mode="" />
+                <view class="taskContent">
+                    <view class="tcTitle">
+                        邀请新用户
+                    </view>
+                    <view class="tcNum">+2次/每位</view>
+                </view>
+            </view>
+            <view class="taskRight">去邀请</view>
+        </view>
+        <view class="task advert">
+            <view class="taskLeft">
+                <image class="img" src="/static/image/task3.png" alt="" mode="" />
+                <view class="taskContent">
+                    <view class="tcTitle">
+                        观看激励广告
+                    </view>
+                    <view class="tcNum">+1次/每条</view>
+                </view>
+            </view>
+            <view class="taskRightBox">
+                <view class="taskRight" bindtap="rewardedVideo">去观看</view>
+                <view class="taskSurplus">
+                    剩余次数：0/2
+                </view>
             </view>
         </view>
     </view>

pages/my/index.wxss

@@ -1,19 +1,19 @@
 .container {
-  padding: 30rpx;
+  padding: 30rpx 20rpx;
 }
 .container .top-tab {
   position: fixed;
-  top: 0;
+  top: 0px;
   left: 0rpx;
   width: 100%;
   height: 80rpx;
-  background: #ededed;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 999;
   padding: 0 48rpx;
+  background-color: #EEEEEE;
 }
 .container .top-tab .tabbar {
   display: flex;
@@ -35,12 +35,12 @@
   opacity: 1;
 }
 .container .userBox {
-  margin-top: 85rpx;
+  margin-top: 75rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: white;
-  padding: 30rpx 12rpx;
+  padding: 20rpx 12rpx 0rpx;
   border-radius: 20rpx;
 }
 .container .userBox .avatar {
@@ -51,19 +51,21 @@
 }
 .container .userBox .userRight {
   flex: 1;
-  margin-left: 40rpx;
+  margin-left: 30rpx;
+  padding: 0px 10rpx;
 }
 .container .userBox .userRight .uRtop {
   display: flex;
   justify-content: space-between;
 }
 .container .userBox .userRight .uRtop .uRtopleft .nickName {
+  max-width: 340rpx;
   color: #333;
-  font-size: 30rpx;
+  font-size: 32rpx;
 }
 .container .userBox .userRight .uRtop .uRtopleft .gradeText {
-  margin: 14rpx 0rpx 8rpx;
-  font-size: 23rpx;
+  margin: 18rpx 0rpx 12rpx;
+  font-size: 24rpx;
   color: #989A9C;
 }
 .container .userBox .userRight .uRtop .uRtopRight {
@@ -71,11 +73,216 @@
   align-items: center;
 }
 .container .userBox .userRight .uRtop .uRtopRight .edit {
-  width: 25rpx;
-  height: 25rpx;
+  width: 22rpx;
+  height: 28rpx;
 }
 .container .userBox .userRight .uRtop .uRtopRight text {
   margin: 0px 10rpx;
   font-size: 24rpx;
   color: #666;
 }
+.container .userBox .userRight .uRBtm {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 18rpx 0rpx;
+}
+.container .userBox .userRight .uRBtm .count {
+  width: 33%;
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.6);
+  border-right: 1px solid rgba(51, 51, 51, 0.3);
+  text-align: center;
+}
+.container .userBox .userRight .uRBtm .count .countNum {
+  margin-left: 10rpx;
+}
+.container .userBox .userRight .uRBtm .countFirst {
+  text-align: left;
+}
+.container .userBox .userRight .uRBtm .countEnd {
+  text-align: right;
+  border: none;
+}
+.container .iosVip {
+  margin: 4rpx 0px 0px 6rpx;
+  font-size: 18rpx;
+  color: #333;
+}
+.container .sectionBoxs {
+  margin-top: 20rpx;
+  padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  border-radius: 20rpx;
+}
+.container .sectionBoxs .sBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container .sectionBoxs .sBox .img {
+  width: 69rpx;
+  height: 69rpx;
+}
+.container .sectionBoxs .sBox .title {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #333;
+}
+.container .sectionBoxs .contactBtn {
+  border: none;
+  padding: 0rpx;
+  line-height: normal;
+  margin: 0;
+}
+.container .payBox {
+  margin-top: 20rpx;
+  padding: 13rpx 30rpx;
+  background-color: white;
+  border-radius: 20rpx;
+}
+.container .payBox .title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #000;
+}
+.container .payBox .pay {
+  margin: 20rpx 0rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0rpx 30rpx;
+  border-radius: 22rpx;
+  overflow: hidden;
+}
+.container .payBox .pay .payLeft .pLTitle {
+  font-size: 36rpx;
+  font-weight: bold;
+}
+.container .payBox .pay .payLeft .pLcontent {
+  font-size: 22rpx;
+}
+.container .payBox .pay .payRight {
+  margin: 24rpx 0rpx;
+  padding: 12rpx 28rpx;
+  border-radius: 40rpx;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+.container .payBox .vipPay {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
+  background-size: cover;
+}
+.container .payBox .vipPay .vipTitle {
+  color: #FFE6B9;
+}
+.container .payBox .vipPay .vipContent {
+  margin-top: 4rpx;
+  color: #FFE6B9;
+}
+.container .payBox .vipPay .vipBtn {
+  background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
+  color: #211501;
+}
+.container .payBox .buyPay {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
+  background-size: cover;
+}
+.container .payBox .buyPay .payLeft {
+  color: #7D320A;
+  font-size: 36rpx;
+  font-weight: bold;
+}
+.container .payBox .buyPay .buyBtn {
+  border: 1rpx solid white;
+  color: white;
+  background-color: #7D320A;
+}
+.container .surplus {
+  margin-top: 20rpx;
+  padding: 22rpx 30rpx;
+  background-color: white;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 32rpx;
+}
+.container .surplus .title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #000;
+}
+.container .surplus .num {
+  color: #F97419;
+  font-weight: bold;
+  margin-right: 10rpx;
+}
+.container .taskBox {
+  margin-top: 20rpx;
+  padding: 20rpx 10rpx 0rpx;
+  background-color: white;
+  border-radius: 20rpx;
+}
+.container .taskBox .title {
+  padding: 0rpx 20rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #000;
+}
+.container .taskBox .task {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30rpx 22rpx;
+  border-bottom: 1px solid #EAEAEA;
+}
+.container .taskBox .task .taskLeft {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.container .taskBox .task .taskLeft .img {
+  width: 76rpx;
+  height: 76rpx;
+  border-radius: 50%;
+}
+.container .taskBox .task .taskLeft .taskContent {
+  margin-left: 40rpx;
+}
+.container .taskBox .task .taskLeft .taskContent .tcTitle {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+}
+.container .taskBox .task .taskLeft .taskContent .tcNum {
+  color: #FF6259;
+  font-size: 26rpx;
+}
+.container .taskBox .task .taskRight {
+  width: 138rpx;
+  text-align: center;
+  padding: 10rpx 0rpx;
+  border-radius: 40rpx;
+  color: white;
+  background-color: #FC614E;
+  font-size: 30rpx;
+}
+.container .taskBox .task .taskRight-close {
+  color: #6C6C6C;
+  background: #D0D0D0;
+  box-shadow: 0 2px 2px 0 #AEABAB;
+}
+.container .taskBox .task .taskSurplus {
+  text-align: center;
+  margin-top: 4rpx;
+  color: #686868;
+  font-size: 20rpx;
+}
+.container .taskBox .advert {
+  border: none;
+}

project.private.config.json

@@ -1,5 +1,7 @@
 {
-    "setting": {},
+    "setting": {
+        "compileHotReLoad": true
+    },
     "condition": {
         "miniprogram": {
             "list": [
@@ -68,5 +70,6 @@
         }
     },
     "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-    "libVersion": "2.27.3"
+    "libVersion": "2.27.3",
+    "projectname": "render"
 }

utils/filter.wxs

@@ -1,18 +1,30 @@
 var formatNumber = function (n) {
-  n = n.toString()
-  return n[1] ? n : '0' + n
+    n = n.toString()
+    return n[1] ? n : '0' + n
 }
 /**
  * 将时间戳(1570550400)格式转为 yyyy-MM-dd格式
  */
 var formatDate = function (datetime) {
-  var time = datetime * 1
-  var date = getDate(time);
-  var year = date.getFullYear();
-  var month = date.getMonth() + 1;
-  var day = date.getDate();
-  return year + '年' + month + '月' + day + '日';
+    var time = datetime * 1
+    var date = getDate(time);
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    return year + '年' + month + '月' + day + '日';
 }
-module.exports = {
-  formatDate: formatDate
+
+function gradeFilter(grade) {
+    var gradeObj = {
+        "PRIMARY_FIRST_GRADE": "一年级",
+        "PRIMARY_SECOND_GRADE": "二年级",
+        "PRIMARY_THREE_GRADE": "三年级",
+        "PRIMARY_SENIOR_GRADE": "四年级",
+        "PRESCHOOL": "学前班",
+    }
+    return gradeObj[grade]
 }
+module.exports = {
+    formatDate: formatDate,
+    gradeFilter: gradeFilter
+}

utils/request.js

@@ -32,7 +32,8 @@ function request(url, method, data, abort = false) {
                 } else if (code == '1102' || code == '1204') {
                     wx.clearStorage()
                 } else {
-                    reject(data)
+                    console.log(message);
+                    // reject(message)
                 }
             },
             fail: (res) => {

utils/util.js

@@ -1,68 +1,84 @@
 const formatTime = date => {
-  console.log(date);
-  const day = parseInt(date / 1000 / 60 / 60 / 24);
-  const hour = parseInt(date / 1000 / 60 / 60  % 24);
-  const minute = parseInt(date / 1000 / 60 % 60);
-  const arr = [hour, minute].map(formatNumber);
-  arr.unshift(day);
-  return arr
+    console.log(date);
+    const day = parseInt(date / 1000 / 60 / 60 / 24);
+    const hour = parseInt(date / 1000 / 60 / 60 % 24);
+    const minute = parseInt(date / 1000 / 60 % 60);
+    const arr = [hour, minute].map(formatNumber);
+    arr.unshift(day);
+    return arr
 }
 const lastHours = date => {
-	let h = parseInt((date % (1000 * 60 * 60 * 72 )) / (1000 * 60 * 60));
-	let m = parseInt((date % (1000 * 60 * 60)) / (1000 * 60));
-	return h + '小时' + m + '分'
+    let h = parseInt((date % (1000 * 60 * 60 * 72)) / (1000 * 60 * 60));
+    let m = parseInt((date % (1000 * 60 * 60)) / (1000 * 60));
+    return h + '小时' + m + '分'
 }
 const addThreeYears = date => {
-		// const t = date + (31536000000 * 3)
-		const t = date
-		return formatDate(t,4)
+    // const t = date + (31536000000 * 3)
+    const t = date
+    return formatDate(t, 4)
 }
 const lastHoursInGroup = date => {
-	// const temp = [];
-	let h = parseInt((date % (1000 * 60 * 60 * 72 )) / (1000 * 60 * 60));
-	let m = parseInt((date % (1000 * 60 * 60)) / (1000 * 60));
-	return [h.toString(),m.toString()]
+    // const temp = [];
+    let h = parseInt((date % (1000 * 60 * 60 * 72)) / (1000 * 60 * 60));
+    let m = parseInt((date % (1000 * 60 * 60)) / (1000 * 60));
+    return [h.toString(), m.toString()]
 }
 const formatNumber = n => {
-  n = n.toString()
-  return n[1] ? n : '0' + n
+    n = n.toString()
+    return n[1] ? n : '0' + n
 }
 //时间戳转时间
 function formatDate(time, flag) {
-	const t = new Date(time); 
-	const tf = function(i){return (i < 10 ? '0' : '') + i};
-	const year = t.getFullYear();
-	const month = tf(t.getMonth() + 1);
-	const day = tf(t.getDate());
-	const hour = tf(t.getHours());
-	const minute = tf(t.getMinutes());
-	//console.log( month + '月' + day + '日' + hour + ':' + minute);
-	if(flag == 1) {
-		return  month + '月' + day + '日' + ' ' + hour + ':' + minute;
-	}else if(flag == 2) {
-		console.log(year,month,day)
-		return year + '-' + month + '-' + day
-	}else if(flag == 3){
-		return month + '-' + day + ' ' + hour + ':' + minute;
-	}else if( flag == 4) {
-		return year + '年' + month + '月' + day + '日';
-	}else if( flag == 5){
-		return day.toString().substring(1,2)
-	}else if( flag == 6) {
-		return month + '.' + day ;
-	}
+    const t = new Date(time);
+    const tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+    };
+    const year = t.getFullYear();
+    const month = tf(t.getMonth() + 1);
+    const day = tf(t.getDate());
+    const hour = tf(t.getHours());
+    const minute = tf(t.getMinutes());
+    //console.log( month + '月' + day + '日' + hour + ':' + minute);
+    if (flag == 1) {
+        return month + '月' + day + '日' + ' ' + hour + ':' + minute;
+    } else if (flag == 2) {
+        console.log(year, month, day)
+        return year + '-' + month + '-' + day
+    } else if (flag == 3) {
+        return month + '-' + day + ' ' + hour + ':' + minute;
+    } else if (flag == 4) {
+        return year + '年' + month + '月' + day + '日';
+    } else if (flag == 5) {
+        return day.toString().substring(1, 2)
+    } else if (flag == 6) {
+        return month + '.' + day;
+    }
 }
-function GetQueryString(str,name){
-	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
-	var r = str.match(reg);
-	if(r!=null) return  unescape(r[2]); 
-	return null;
+
+function GetQueryString(str, name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+    var r = str.match(reg);
+    if (r != null) return unescape(r[2]);
+    return null;
 }
-module.exports = {
-  formatTime: formatTime,
-	formatDate,
-	GetQueryString,
-	lastHours,
-	lastHoursInGroup,
-	addThreeYears
+
+function gradeFilter(grade) {
+    console.log(grade);
+    let gradeObj = {
+        "PRIMARY_FIRST_GRADE": "一年级",
+        "PRIMARY_SECOND_GRADE": "二年级",
+        "PRIMARY_THREE_GRADE": "三年级",
+        "PRIMARY_SENIOR_GRADE": "四年级",
+        "PRESCHOOL": "学前班",
+    }
+    return gradeObj[grade]
 }
+module.exports = {
+    formatTime: formatTime,
+    formatDate,
+    GetQueryString,
+    lastHours,
+    lastHoursInGroup,
+    addThreeYears,
+    gradeFilter
+}