加入vip和剩余次数校验

api/user.js

@@ -9,6 +9,8 @@ module.exports = {
   getMyInfo: data => request('/v3/user/my', 'get', data),
   //获取他人用户信息,
   getUserInfo: data => request('/user/info', 'get', data),
+  //获取用户信息
+  getMyInfo: data => request('/v3/user/my', 'get', data),
   // 设置用户信息
   setUserInfo: (data, method = 'post') => request('/user', method, data),
   //获取是否vip及过期时间

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
-    "pages/pkResult/index",
     "pages/index/index",
+    "pages/pkResult/index",
     "pages/pkPage/index",
     "pages/rankIntro/index",
     "pages/ranking/index",

components/readingTips/index.js

@@ -0,0 +1,185 @@
+import {
+  getProducts,
+  getTasks,
+  buyVip,
+  buyNum,
+  submitTask
+} from '~/api/global'
+import {
+  getMyInfo,
+  getVipInfo
+} from '~/api/user'
+const app = getApp()
+
+Component({
+  data: {
+    //弹窗显示控制 
+    showModalStatus: false,
+    isIos: app.globalData.isIOS,
+    userInfo: {},
+    productNum: {},
+    productVip: {},
+    userInfo: {},
+    vipTime: '',
+  },
+  lifetimes: {
+    attached() {
+      this.getProducts()
+      this.setUserInfo()
+    },
+  },
+  methods: {
+    // 提交任务
+    async submitTask({
+      currentTarget
+    }) {
+      let id = currentTarget.dataset.type
+      await submitTask({
+        id
+      })
+      wx.showToast({
+        title: id == '1' ? '签到成功！' : id == 3 ? "观看成功!" : "",
+        icon: "none"
+      })
+      this.setUserInfo()
+    },
+    async getProducts() {
+      let products = await getProducts()
+      console.log(products);
+      let productVip = products.find(item => {
+        return item.type == 1
+      })
+      let productNum = products.find(item => {
+        return item.type == 2
+      })
+      this.setData({
+        productNum,
+        productVip
+      })
+    },
+    // 设置用户信息及vip状态和任务完成情况
+    async setUserInfo() {
+      let userInfo = await getMyInfo()
+      let vipTime = await getVipInfo()
+      this.getTasks()
+      this.setData({
+        userInfo,
+        vipTime,
+      })
+    },
+    // 调起广告
+    rewardedVideo() {
+      if (this.data.tasks.length != 3 || this.data.tasks[2].completed) {
+        return
+      }
+      this.selectComponent('#advert').rewardedVideo();
+    },
+    async getTasks() {
+      let tasks = await getTasks()
+      this.setData({
+        tasks
+      })
+    },
+    //购买vip和购买次数不是一个接口 type 1001是vip，1010是次数
+    async toBuy({
+      currentTarget
+    }) {
+      let that = this
+      let productId = currentTarget.dataset.type
+      wx.showLoading({
+        title: '提交中',
+        mask: true
+      })
+      let res = ''
+      if (productId == '1001') {
+        res = await buyVip({
+          productId
+        }).finally(() => {
+          wx.hideLoading()
+        })
+      } else if (productId == '1010') {
+        res = await buyNum({
+          productId
+        }).finally(() => {
+          wx.hideLoading()
+        })
+      } else {
+        wx.hideLoading()
+        wx.showToast({
+          title: "支付失败,请重试",
+          icon: "none"
+        })
+      }
+      let {
+        timeStamp,
+        nonceStr,
+        signType,
+        paySign
+      } = res
+      // package保留字
+      wx.requestPayment({
+        timeStamp,
+        nonceStr,
+        package: res.package,
+        signType,
+        paySign,
+        success(res) {
+          wx.showToast({
+            title: "支付成功",
+            duration: 2500
+          })
+          setTimeout(() => {
+            that.setUserInfo()
+          }, 1500)
+        },
+        fail(res) {
+          wx.showToast({
+            title: "支付失败",
+            icon: "none"
+          })
+        }
+      })
+    },
+    //底部弹出框
+    showModal: function () {
+      // 背景遮罩层
+      var animation = wx.createAnimation({
+        duration: 200,
+        timingFunction: "linear",
+        delay: 0
+      })
+      animation.translateY(300).step()
+      this.setData({
+        animationData: animation.export(),
+        showModalStatus: true
+      })
+      setTimeout(function () {
+        animation.translateY(0).step()
+        this.setData({
+          animationData: animation.export()
+        })
+      }.bind(this), 200)
+    },
+
+    //点击背景面任意一处时，弹出框隐藏
+    hideModal: function () {
+      //弹出框消失动画
+      var animation = wx.createAnimation({
+        duration: 200,
+        timingFunction: "linear",
+        delay: 0
+      })
+      animation.translateY(300).step()
+      this.setData({
+        animationData: animation.export(),
+      })
+      setTimeout(function () {
+        animation.translateY(0).step()
+        this.setData({
+          animationData: animation.export(),
+          showModalStatus: false
+        })
+      }.bind(this), 200)
+    },
+  }
+})

components/readingTips/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "rewardedVideo": "/components/rewardedVideo/index"
+    },
+    "styleIsolation": "apply-shared"
+}

components/readingTips/index.less

@@ -0,0 +1,219 @@
+/*使屏幕变暗  */
+.background_screen {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #000;
+    opacity: 0.4;
+    overflow: hidden;
+    z-index: 99;
+    color: #fff;
+}
+
+/*对话框 */
+.attr_box {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    background-image: linear-gradient(180deg, #FFEBC1 1%, #FEEFCD 54%, #FFFCF0 100%);
+    border-radius: 40px 40px 0 0;
+    border-radius: 40px 40px 0px 0px;
+    border-top-left-radius: 30rpx;
+    border-top-right-radius: 30rpx;
+    padding: 29rpx 18rpx;
+    box-sizing: border-box;
+    /*兼容 IOS<11.2*/
+    padding-bottom: constant(safe-area-inset-bottom);
+    /*兼容 IOS>11.2*/
+    padding-bottom: env(safe-area-inset-bottom);
+
+
+    .payBox {
+        margin-top: 20rpx;
+        padding: 13rpx 30rpx;
+        background-color: white;
+        border-radius: 20rpx;
+
+        .title {
+            font-size: 34rpx;
+            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: 34rpx;
+            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: 34rpx;
+            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;
+        }
+    }
+
+    .share_cancel {
+        position: absolute;
+        right: 50rpx;
+        top: -80rpx;
+        width: 60rpx;
+        height: 80rpx;
+    }
+}

components/readingTips/index.wxml

@@ -0,0 +1,89 @@
+<view class="half-screen">
+    <!--屏幕背景变暗的背景  -->
+    <view class="background_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
+    <!--弹出框  -->
+    <view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}">
+        <image class="share_cancel" bindtap="hideModal" src="/static/lollipop.png"></image>
+        <!-- 支付 -->
+        <view class="payBox" wx:if="{{!isIos}}">
+            <view class="title">
+                付费购
+            </view>
+            <view class="pay vipPay">
+                <view class="payLeft">
+                    <view class="pLTitle vipTitle">
+                        {{productVip.title}}
+                    </view>
+                    <view class="pLcontent vipContent">
+                        {{vipTime?filters.formatDate(vipTime)+'过期':'购买VIP会员，即可畅读全部资源'}}
+                    </view>
+                </view>
+                <view class="payRight vipBtn" bindtap="toBuy" data-type="{{productVip.id}}">
+                    {{vipTime?'立即续费':'立即开通'}}
+                </view>
+            </view>
+            <view class="pay buyPay">
+                <view class="payLeft">
+                    {{productNum.title}}
+                </view>
+                <view class="payRight buyBtn" bindtap="toBuy" data-type="{{productNum.id}}">
+                    立即购买
+                </view>
+            </view>
+        </view>
+        <!-- 剩余使用次数 -->
+        <view class="surplus">
+            <view class="title">剩余使用次数：</view>
+            <view class="num">{{userInfo.experienceAmount}}次</view>
+        </view>
+        <!-- 任务活动 -->
+        <view class="taskBox">
+            <view class="title">免费获取</view>
+            <view class="task">
+                <view class="taskLeft">
+                    <image class="img" src="/static/task1.png" alt="" mode="" />
+                    <view class="taskContent">
+                        <view class="tcTitle">
+                            {{tasks[0].title}}
+                        </view>
+                        <view class="tcNum">+{{tasks[0].award}}次</view>
+                    </view>
+                </view>
+                <view class="taskRight {{tasks[0].completed?'taskRight-close':''}}" bindtap="submitTask" data-type='{{tasks[0].id}}'>
+                    {{tasks[0].completed?'已签到':'签到'}}</view>
+            </view>
+            <view class="task">
+                <view class="taskLeft">
+                    <image class="img" src="/static/task2.png" alt="" mode="" />
+                    <view class="taskContent">
+                        <view class="tcTitle">
+                            {{tasks[1].title}}
+                        </view>
+                        <view class="tcNum">+{{tasks[1].award}}次/每位</view>
+                    </view>
+                </view>
+                <button open-type="share" class="resetBtn taskRight">去邀请</button>
+            </view>
+            <view class="task advert">
+                <view class="taskLeft">
+                    <image class="img" src="/static/task3.png" alt="" mode="" />
+                    <view class="taskContent">
+                        <view class="tcTitle">
+                            {{tasks[2].title}}
+                        </view>
+                        <view class="tcNum">+{{tasks[2].award}}次/每条</view>
+                    </view>
+                </view>
+                <view class="taskRightBox">
+                    <view class="taskRight {{tasks[2].completed?'taskRight-close':''}}" bindtap="rewardedVideo">去观看
+                    </view>
+                    <view class="taskSurplus">
+                        剩余次数：{{tasks[2].completedNum}}/{{tasks[2].num}}
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>
+<!-- 广告组件 -->
+<rewardedVideo id='advert' bind:taskOver="setUserInfo" />

components/readingTips/index.wxss

@@ -0,0 +1,186 @@
+/*使屏幕变暗  */
+.background_screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.4;
+  overflow: hidden;
+  z-index: 99;
+  color: #fff;
+}
+/*对话框 */
+.attr_box {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  background-image: linear-gradient(180deg, #FFEBC1 1%, #FEEFCD 54%, #FFFCF0 100%);
+  border-radius: 40px 40px 0 0;
+  border-radius: 40px 40px 0px 0px;
+  border-top-left-radius: 30rpx;
+  border-top-right-radius: 30rpx;
+  padding: 29rpx 18rpx;
+  box-sizing: border-box;
+  /*兼容 IOS<11.2*/
+  padding-bottom: constant(safe-area-inset-bottom);
+  /*兼容 IOS>11.2*/
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.attr_box .payBox {
+  margin-top: 20rpx;
+  padding: 13rpx 30rpx;
+  background-color: white;
+  border-radius: 20rpx;
+}
+.attr_box .payBox .title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #000;
+}
+.attr_box .payBox .pay {
+  margin: 20rpx 0rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0rpx 30rpx;
+  border-radius: 22rpx;
+  overflow: hidden;
+}
+.attr_box .payBox .pay .payLeft .pLTitle {
+  font-size: 36rpx;
+  font-weight: bold;
+}
+.attr_box .payBox .pay .payLeft .pLcontent {
+  font-size: 22rpx;
+}
+.attr_box .payBox .pay .payRight {
+  margin: 24rpx 0rpx;
+  padding: 12rpx 28rpx;
+  border-radius: 40rpx;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+.attr_box .payBox .vipPay {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
+  background-size: cover;
+}
+.attr_box .payBox .vipPay .vipTitle {
+  color: #FFE6B9;
+}
+.attr_box .payBox .vipPay .vipContent {
+  margin-top: 4rpx;
+  color: #FFE6B9;
+}
+.attr_box .payBox .vipPay .vipBtn {
+  background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
+  color: #211501;
+}
+.attr_box .payBox .buyPay {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
+  background-size: cover;
+}
+.attr_box .payBox .buyPay .payLeft {
+  color: #7D320A;
+  font-size: 36rpx;
+  font-weight: bold;
+}
+.attr_box .payBox .buyPay .buyBtn {
+  border: 1rpx solid white;
+  color: white;
+  background-color: #7D320A;
+}
+.attr_box .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;
+}
+.attr_box .surplus .title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #000;
+}
+.attr_box .surplus .num {
+  color: #F97419;
+  font-weight: bold;
+  margin-right: 10rpx;
+}
+.attr_box .taskBox {
+  margin-top: 20rpx;
+  padding: 20rpx 10rpx 0rpx;
+  background-color: white;
+  border-radius: 20rpx;
+}
+.attr_box .taskBox .title {
+  padding: 0rpx 20rpx;
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #000;
+}
+.attr_box .taskBox .task {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30rpx 22rpx;
+  border-bottom: 1px solid #EAEAEA;
+}
+.attr_box .taskBox .task .taskLeft {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.attr_box .taskBox .task .taskLeft .img {
+  width: 76rpx;
+  height: 76rpx;
+  border-radius: 50%;
+}
+.attr_box .taskBox .task .taskLeft .taskContent {
+  margin-left: 40rpx;
+}
+.attr_box .taskBox .task .taskLeft .taskContent .tcTitle {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+}
+.attr_box .taskBox .task .taskLeft .taskContent .tcNum {
+  color: #FF6259;
+  font-size: 26rpx;
+}
+.attr_box .taskBox .task .taskRight {
+  width: 138rpx;
+  text-align: center;
+  padding: 10rpx 0rpx;
+  border-radius: 40rpx;
+  color: white;
+  background-color: #FC614E;
+  font-size: 30rpx;
+}
+.attr_box .taskBox .task .taskRight-close {
+  color: #6C6C6C;
+  background: #D0D0D0;
+  box-shadow: 0 2px 2px 0 #AEABAB;
+}
+.attr_box .taskBox .task .taskSurplus {
+  text-align: center;
+  margin-top: 4rpx;
+  color: #686868;
+  font-size: 20rpx;
+}
+.attr_box .taskBox .advert {
+  border: none;
+}
+.attr_box .share_cancel {
+  position: absolute;
+  right: 50rpx;
+  top: -80rpx;
+  width: 60rpx;
+  height: 80rpx;
+}

pages/pkResult/index.js

@@ -136,36 +136,11 @@ Page({
     })
   },
   /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
    * 生命周期函数--监听页面卸载
    */
   onUnload() {
     this.innerAudioContext.destroy()
   },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
   onShareAppMessage() {
 
   }

pages/pkResult/index.less

@@ -124,6 +124,17 @@
     align-items: center;
     justify-content: space-between;
 
+    .btn {
+      padding: 16rpx 0rpx;
+      text-align: center;
+      border-radius: 50rpx;
+      width: 220rpx;
+      font-size: 30rpx;
+      color: white;
+      background-color: #F84041;
+      box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+    }
+
     .stBtn {
       padding: 16rpx 0rpx;
       text-align: center;

pages/pkResult/index.wxml

@@ -29,5 +29,8 @@
   </view>
   <view class="footer">
     <view class="stBtn" bindtap="result">重新挑战</view>
+    <button class="resetBtn btn" open-type="share">
+      分享
+    </button>
   </view>
 </view>

pages/pkResult/index.wxss

@@ -109,6 +109,16 @@
   align-items: center;
   justify-content: space-between;
 }
+.pkResult .footer .btn {
+  padding: 16rpx 0rpx;
+  text-align: center;
+  border-radius: 50rpx;
+  width: 220rpx;
+  font-size: 30rpx;
+  color: white;
+  background-color: #F84041;
+  box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+}
 .pkResult .footer .stBtn {
   padding: 16rpx 0rpx;
   text-align: center;

pages/reading/index.js

@@ -157,6 +157,12 @@ Page({
   },
   // 开始录制
   setCountDown() {
+    let child = this.selectComponent('#readingTips').data
+    // 判断是否有权限朗读 不是vip并且没有朗读机会
+    const isVip = child.vipTime ? true : false
+    if (!isVip && child.userInfo.experienceAmount == 0) {
+      return this.selectComponent('#readingTips').showModal();
+    }
     if (this.data.state) {
       this.finishRecord()
       return

pages/reading/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "uploadFile": "/components/uploadFile/index"
+    "uploadFile": "/components/uploadFile/index",
+    "readingTips": "/components/readingTips/index"
   }
 }

pages/reading/index.wxml

@@ -102,4 +102,5 @@
       <view>挑战结算中</view>
     </view>
   </view>
+  <readingTips id="readingTips"></readingTips>
 </view>