开发朗读页面购买vip弹窗

components/vipModal/index.js

@@ -24,7 +24,8 @@ Component({
         open({
             type
         }) {
-            if (typeof this.getTabBar === 'function') {
+            console.log(this.getTabBar());
+            if (typeof this.getTabBar === 'function' && this.getTabBar()) {
                 this.getTabBar().setData({
                     mask: true
                 })

pages/my/index.js

@@ -144,7 +144,6 @@ Page({
             signType,
             paySign,
             success: (res) => {
-                console.log(res);
                 this.selectComponent('#vipModal').open({
                     type: 'svip'
                 })

pages/my/index.wxml

@@ -62,7 +62,6 @@
         <view class="tips">请输入学习卡激活码</view>
         <view class="subBtn">激活</view>
     </view>
-
     <view class="payBox" wx:if="{{!vipTime||vipTime=='1'}}">
         <view class="buyBtn" bindtap="toBuy" data-id="{{products[0].id}}">
             {{ !vipTime?'立即开通':'终身使用'}}

pages/reading/buyVip/index.js

@@ -0,0 +1,27 @@
+// pages/reading/buyVip/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        show: false
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        closeModal() {
+            this.setData({
+                show: false
+            })
+        },
+    }
+})

pages/reading/buyVip/index.json

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

pages/reading/buyVip/index.less

@@ -0,0 +1,75 @@
+.buyVip {
+    position: fixed;
+    z-index: 10;
+    left: 0rpx;
+    top: 0rpx;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7);
+
+    .modal {
+        position: relative;
+        width: 677rpx;
+        height: 860rpx;
+        margin: 120rpx auto 0rpx;
+        border-radius: 20rpx;
+        text-align: center;
+        overflow: hidden;
+        background-color: white;
+
+        .header {
+            width: 100%;
+            height: 172rpx;
+            background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
+            text-align: center;
+            font-size: 36rpx;
+            font-weight: bold;
+            border-bottom-left-radius: 100rpx;
+            border-bottom-right-radius: 100rpx;
+            overflow: hidden;
+
+            .h1 {
+                margin: 24rpx 0rpx;
+            }
+        }
+
+        .payBox {
+            position: relative;
+            margin: 46rpx auto 56rpx;
+            width: 480rpx;
+            height: 245rpx;
+            border-radius: 20rpx;
+            background: url(http://reader-wx.ai160.com/images/reader/v3/learn/SVIPpop.png);
+            background-size: cover;
+            -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+
+            .buyBtn {
+                width: 254rpx;
+                text-align: center;
+                position: absolute;
+                left: 90rpx;
+                top: 156rpx;
+                color: #39029B;
+                font-size: 26rpx;
+                font-weight: bold;
+                letter-spacing: 2rpx;
+            }
+        }
+
+        .payBox2 {
+            background: url(http://reader-wx.ai160.com/images/reader/v3/learn/VIPpop.png);
+            background-size: cover;
+            -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+        }
+
+    }
+
+    .close {
+        display: block;
+        margin: 0 auto;
+        padding: 40rpx;
+        width: 54rpx;
+        height: 54rpx;
+    }
+
+}

pages/reading/buyVip/index.wxml

@@ -0,0 +1,21 @@
+<view class="buyVip" wx:if="{{show}}">
+    <view class="modal">
+        <view class="header">
+            <view class="h1">您还不是VIP会员</view>
+            <view>选择下面的会员卡开通后使用！</view>
+        </view>
+        <view class="payBox" wx:if="{{!vipTime||vipTime=='1'}}">
+            <!--   <view class="buyBtn" bindtap="toBuy" data-id="{{products[0].id}}">
+                {{ !vipTime?'立即开通':'终身使用'}}
+            </view> -->
+        </view>
+        <view class="payBox payBox2" wx:if="{{vipTime!='1'}}">
+            <!--    <view class="buyBtn" bindtap="toBuy" data-id="{{products[1].id}}" wx:if="{{!vipTime}}">立即开通
+            </view>
+            <view class="buyBtn" style="font-size: 22rpx;" wx:else>
+                有效期：{{filters.formatDate(vipTime,5)}}
+            </view> -->
+        </view>
+    </view>
+    <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+</view>

pages/reading/buyVip/index.wxss

@@ -0,0 +1,66 @@
+.buyVip {
+  position: fixed;
+  z-index: 10;
+  left: 0rpx;
+  top: 0rpx;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+}
+.buyVip .modal {
+  position: relative;
+  width: 677rpx;
+  height: 860rpx;
+  margin: 120rpx auto 0rpx;
+  border-radius: 20rpx;
+  text-align: center;
+  overflow: hidden;
+  background-color: white;
+}
+.buyVip .modal .header {
+  width: 100%;
+  height: 172rpx;
+  background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
+  text-align: center;
+  font-size: 36rpx;
+  font-weight: bold;
+  border-bottom-left-radius: 100rpx;
+  border-bottom-right-radius: 100rpx;
+  overflow: hidden;
+}
+.buyVip .modal .header .h1 {
+  margin: 24rpx 0rpx;
+}
+.buyVip .modal .payBox {
+  position: relative;
+  margin: 46rpx auto 56rpx;
+  width: 480rpx;
+  height: 245rpx;
+  border-radius: 20rpx;
+  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/SVIPpop.png);
+  background-size: cover;
+  -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+}
+.buyVip .modal .payBox .buyBtn {
+  width: 254rpx;
+  text-align: center;
+  position: absolute;
+  left: 90rpx;
+  top: 156rpx;
+  color: #39029B;
+  font-size: 26rpx;
+  font-weight: bold;
+  letter-spacing: 2rpx;
+}
+.buyVip .modal .payBox2 {
+  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/VIPpop.png);
+  background-size: cover;
+  -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+}
+.buyVip .close {
+  display: block;
+  margin: 0 auto;
+  padding: 40rpx;
+  width: 54rpx;
+  height: 54rpx;
+}

pages/reading/index.json

@@ -1,6 +1,8 @@
 {
-  "usingComponents": {
-    "uploadFile": "/components/uploadFile/index"
-  },
-  "navigationBarTitleText": ""
+    "usingComponents": {
+        "uploadFile": "/components/uploadFile/index",
+        "buyVip": "./buyVip/index",
+        "vipModal": "/components/vipModal/index"
+    },
+    "navigationBarTitleText": ""
 }

pages/reading/index.wxml

@@ -1,142 +1,153 @@
 <view class="readingBox">
-  <!-- 查看全部配音作品 -->
-  <view class="moreWork" wx:if="{{readingType=='public'||readingType=='readMatch'}}">
-    <view class="left">查看全部配音作品</view>
-    <view class="right" bindtap="otherWork" style="width: {{(videoInfo.avatarList.length+1)*42+64}}rpx;">
-      <block wx:for="{{videoInfo.avatarList}}" wx:key="index">
-        <image class="moreImg" style="left: {{(index+1)*40}}rpx;" src="{{item}}"></image>
-      </block>
-      <image src="/static/more.png" class="moreImg" />
-    </view>
-  </view>
-  <view class="videoBox" wx:if="{{!videoInfo.userReadExtend||videoInfo.userReadExtend.resourcesType==0}}">
-    <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state&&!exampleState}}" bindtap="videoPlay" />
-    <image src="/static/play-btn.png" bindtap="videoPlay" wx:if="{{!state&&!exampleState}}" class="playBtn" />
-    <!-- 水印 -->
-    <image src="{{videoInfo.readMaskTemplate.imgPath}}" class="watermark" />
-    <video id="myVideo" src="{{videoPath}}" bindended='videoEnd' show-center-play-btn="{{readingReset}}"
-      custom-cache="{{false}}" controls="{{!state&&!readingReset}}" muted="{{muted}}"></video>
-  </view>
-  <view class="audio" bindtap='videoPlay' wx:else>
-    <!-- <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" /> -->
-    <!-- <view class="mask"></view> -->
-    <view class="audioPlay" style="background-image: url({{videoInfo.userReadExtend.backgroundVirtualImg}});">
-      <image src="/static/audioBg.png" class="audioPlayBg {{state?'circle':''}}" />
-      <image src="/static/zhen.png" class="audioPlayZhen" />
-      <image src="/static/play-btn.png" wx:if="{{!state&&!exampleState}}" class="playBtn" />
-      <image src="{{videoInfo.userRead.coverImg}}" class="cover {{state||exampleState?'circle':''}}" mode="" />
+    <!-- 查看全部配音作品 -->
+    <view class="moreWork" wx:if="{{readingType=='public'||readingType=='readMatch'}}">
+        <view class="left">查看全部配音作品</view>
+        <view class="right" bindtap="otherWork" style="width: {{(videoInfo.avatarList.length+1)*42+64}}rpx;">
+            <block wx:for="{{videoInfo.avatarList}}" wx:key="index">
+                <image class="moreImg" style="left: {{(index+1)*40}}rpx;" src="{{item}}"></image>
+            </block>
+            <image src="/static/more.png" class="moreImg" />
+        </view>
     </view>
-    <view class="progressBar">
-      <image src="{{state||exampleState?'/static/aStop.png':'/static/aPlay.png'}}" class="audioSwitch" />
-      <view class="time">{{silderData.currentTime}}</view>
-      <slider class="slider" value="{{silderData.sliderValue}}" catchtap="false" disabled="{{!state&&!exampleState}}"
-        catchchange="slider" block-size='12' backgroundColor='#ffffff50' selected-color="#ffffff" />
-      <view class="time">{{silderData.endTime}}</view>
+    <view class="videoBox" wx:if="{{!videoInfo.userReadExtend||videoInfo.userReadExtend.resourcesType==0}}">
+        <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state&&!exampleState}}"
+            bindtap="videoPlay" />
+        <image src="/static/play-btn.png" bindtap="videoPlay" wx:if="{{!state&&!exampleState}}" class="playBtn" />
+        <!-- 水印 -->
+        <image src="{{videoInfo.readMaskTemplate.imgPath}}" class="watermark" />
+        <video id="myVideo" src="{{videoPath}}" bindended='videoEnd' show-center-play-btn="{{readingReset}}"
+            custom-cache="{{false}}" controls="{{!state&&!readingReset}}" muted="{{muted}}"></video>
     </view>
-  </view>
-  <view class="contentBox" wx:if="{{!readingReset}}">
-    <view class="articleMask"></view>
-    <scroll-view class="content" scroll-y enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
-      scroll-with-animation>
-      <view style="height: 100rpx;"></view>
-      <view class="row {{currentRow==index?'currentRow':''}}" wx:for="{{article}}" wx:key="id">{{item.text}}
-      </view>
-      <view style="height: {{contentH}}rpx;"></view>
-    </scroll-view>
-  </view>
-  <view class="scoreBoxC" wx:elif="{{readingReset}}">
-    <view class="scoreBox">
-      <!-- 星星区域 -->
-      <view class="lightBox">
-        <image src="/static/{{readDetail.myOverall>=10?'stars-1.png':'stars-2.png'}}" class="stars stars-1" mode="" />
-        <image src="/static/{{readDetail.myOverall>=30?'stars-1.png':'stars-2.png'}}" class="stars stars-2" mode="" />
-        <image src="/static/{{readDetail.myOverall>=50?'stars-1.png':'stars-2.png'}}" class="stars stars-3" mode="" />
-        <image src="/static/{{readDetail.myOverall>=70?'stars-1.png':'stars-2.png'}}" class="stars stars-4" mode="" />
-        <image src="/static/{{readDetail.myOverall>=90?'stars-1.png':'stars-2.png'}}" class="stars stars-5" mode="" />
-        <image src="/static/light.png" class="light" mode="" />
-      </view>
-      <!-- 主体得分区域 -->
-      <view class="score">
-        <view class="avatarBox">
-          <image src="{{userInfo.avatar}}" class="avatar" mode="" />
-        </view>
-        <view class="nickName">
-          {{userInfo.nickName||userInfo.eid}}
+    <view class="audio" bindtap='videoPlay' wx:else>
+        <!-- <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" /> -->
+        <!-- <view class="mask"></view> -->
+        <view class="audioPlay" style="background-image: url({{videoInfo.userReadExtend.backgroundVirtualImg}});">
+            <image src="/static/audioBg.png" class="audioPlayBg {{state?'circle':''}}" />
+            <image src="/static/zhen.png" class="audioPlayZhen" />
+            <image src="/static/play-btn.png" wx:if="{{!state&&!exampleState}}" class="playBtn" />
+            <image src="{{videoInfo.userRead.coverImg}}" class="cover {{state||exampleState?'circle':''}}" mode="" />
         </view>
-        <view class="totalScore">
-          <text>综合得分：</text>
-          <text class="num">{{readDetail.myOverall}}</text>
+        <view class="progressBar">
+            <image src="{{state||exampleState?'/static/aStop.png':'/static/aPlay.png'}}" class="audioSwitch" />
+            <view class="time">{{silderData.currentTime}}</view>
+            <slider class="slider" value="{{silderData.sliderValue}}" catchtap="false"
+                disabled="{{!state&&!exampleState}}" catchchange="slider" block-size='12' backgroundColor='#ffffff50'
+                selected-color="#ffffff" />
+            <view class="time">{{silderData.endTime}}</view>
         </view>
-        <view class="progressBox">
-          <view class="row">
-            <view class="name">完整度</view>
-            <progress class="progress" active percent='{{readDetail.integrity}}' stroke-width="18"
-              activeColor="#70D9FF" />
-            <view class="scoreInfo">
-              {{readDetail.integrity}}/100
-            </view>
-          </view>
-          <view class="row">
-            <view class="name">正确率</view>
-            <progress class="progress" active percent='{{readDetail.accuracy}}' stroke-width="18"
-              activeColor="#918EFD" />
-            <view class="scoreInfo">
-              {{readDetail.accuracy}}/100
+    </view>
+    <view class="contentBox" wx:if="{{!readingReset}}">
+        <view class="articleMask"></view>
+        <scroll-view class="content" scroll-y enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
+            scroll-with-animation>
+            <view style="height: 100rpx;"></view>
+            <view class="row {{currentRow==index?'currentRow':''}}" wx:for="{{article}}" wx:key="id">{{item.text}}
             </view>
-          </view>
-          <view class="row">
-            <view class="name">流利度</view>
-            <progress class="progress" active percent='{{readDetail.fluency}}' stroke-width="18"
-              activeColor="#FE9500" />
-            <view class="scoreInfo">
-              {{readDetail.fluency}}/100
+            <view style="height: {{contentH}}rpx;"></view>
+        </scroll-view>
+    </view>
+    <view class="scoreBoxC" wx:elif="{{readingReset}}">
+        <view class="scoreBox">
+            <!-- 星星区域 -->
+            <view class="lightBox">
+                <image src="/static/{{readDetail.myOverall>=10?'stars-1.png':'stars-2.png'}}" class="stars stars-1"
+                    mode="" />
+                <image src="/static/{{readDetail.myOverall>=30?'stars-1.png':'stars-2.png'}}" class="stars stars-2"
+                    mode="" />
+                <image src="/static/{{readDetail.myOverall>=50?'stars-1.png':'stars-2.png'}}" class="stars stars-3"
+                    mode="" />
+                <image src="/static/{{readDetail.myOverall>=70?'stars-1.png':'stars-2.png'}}" class="stars stars-4"
+                    mode="" />
+                <image src="/static/{{readDetail.myOverall>=90?'stars-1.png':'stars-2.png'}}" class="stars stars-5"
+                    mode="" />
+                <image src="/static/light.png" class="light" mode="" />
             </view>
-          </view>
-          <view class="row">
-            <view class="name">语调</view>
-            <progress class="progress" active percent='{{readDetail.tone}}' stroke-width="18" activeColor="#9BE74B " />
-            <view class="scoreInfo">
-              {{readDetail.tone}}/100
+            <!-- 主体得分区域 -->
+            <view class="score">
+                <view class="avatarBox">
+                    <image src="{{userInfo.avatar}}" class="avatar" mode="" />
+                </view>
+                <view class="nickName">
+                    {{userInfo.nickName||userInfo.eid}}
+                </view>
+                <view class="totalScore">
+                    <text>综合得分：</text>
+                    <text class="num">{{readDetail.myOverall}}</text>
+                </view>
+                <view class="progressBox">
+                    <view class="row">
+                        <view class="name">完整度</view>
+                        <progress class="progress" active percent='{{readDetail.integrity}}' stroke-width="18"
+                            activeColor="#70D9FF" />
+                        <view class="scoreInfo">
+                            {{readDetail.integrity}}/100
+                        </view>
+                    </view>
+                    <view class="row">
+                        <view class="name">正确率</view>
+                        <progress class="progress" active percent='{{readDetail.accuracy}}' stroke-width="18"
+                            activeColor="#918EFD" />
+                        <view class="scoreInfo">
+                            {{readDetail.accuracy}}/100
+                        </view>
+                    </view>
+                    <view class="row">
+                        <view class="name">流利度</view>
+                        <progress class="progress" active percent='{{readDetail.fluency}}' stroke-width="18"
+                            activeColor="#FE9500" />
+                        <view class="scoreInfo">
+                            {{readDetail.fluency}}/100
+                        </view>
+                    </view>
+                    <view class="row">
+                        <view class="name">语调</view>
+                        <progress class="progress" active percent='{{readDetail.tone}}' stroke-width="18"
+                            activeColor="#9BE74B " />
+                        <view class="scoreInfo">
+                            {{readDetail.tone}}/100
+                        </view>
+                    </view>
+                </view>
             </view>
-          </view>
         </view>
-      </view>
     </view>
-  </view>
-  <view class="controller">
-    <!--     <image wx:else src="/static/work.png" class="playImg" bindtap="eeeeee" /> -->
-    <view class="workBox">
-      <view class="vipLogo" wx:if="{{!isVip}}">VIP</view>
-      <image wx:if="{{state}}" src="/static/readingNow.gif" class="readingNow" bindtap="setCountDown" />
-      <image wx:else src="/static/work.png" class="playImg" bindtap="setCountDown" />
-    </view>
-    <view class="text">
-      {{state?'完成录制':readingReset?'点击重录':readingType=='public'||readingType=='readMatch'?'开始朗读':'开始挑战'}}
-    </view>
-    <block wx:if="{{readingReset}}">
-      <uploadFile activityId='{{activityId}}' readingType='{{readingType}}' class="btnPosition"
-        wx:if="{{!uploadHide}}" />
-      <view class="stBtn" bindtap="backReading">退出</view>
-    </block>
-  </view>
-  <view class="playImgBg"></view>
-  <!-- 倒计时 -->
-  <view class="countDownBox" wx:if="{{countDown.state}}">
-    <view class="countDown">
-      <view class="number">{{countDown.num}}</view>
-      <view class="tips">秒后开始</view>
+    <view class="controller">
+        <!--     <image wx:else src="/static/work.png" class="playImg" bindtap="eeeeee" /> -->
+        <view class="workBox">
+            <view class="vipLogo" wx:if="{{!isVip}}">VIP</view>
+            <image wx:if="{{state}}" src="/static/readingNow.gif" class="readingNow" bindtap="setCountDown" />
+            <image wx:else src="/static/work.png" class="playImg" bindtap="setCountDown" />
+        </view>
+        <view class="text">
+            {{state?'完成录制':readingReset?'点击重录':readingType=='public'||readingType=='readMatch'?'开始朗读':'开始挑战'}}
+        </view>
+        <block wx:if="{{readingReset}}">
+            <uploadFile activityId='{{activityId}}' readingType='{{readingType}}' class="btnPosition"
+                wx:if="{{!uploadHide}}" />
+            <view class="stBtn" bindtap="backReading">退出</view>
+        </block>
     </view>
-  </view>
-  <page-container show="{{uploadState}}" bind:beforeleave='beforeleave'>
-    <view class="uploadBox">
-      <view class="upload">
-        <image src="/static/uploadTips.png" class="tipsImg" />
-        <view>{{readingType=='pk'?'挑战结算中,小朋友请耐心等待哦~':'作品上传中,小朋友请耐心等待哦~'}}</view>
-        <view class="speed">
-          {{percent}}%
+    <view class="playImgBg"></view>
+    <!-- 倒计时 -->
+    <view class="countDownBox" wx:if="{{countDown.state}}">
+        <view class="countDown">
+            <view class="number">{{countDown.num}}</view>
+            <view class="tips">秒后开始</view>
         </view>
-      </view>
     </view>
-  </page-container>
-  <canvas id='share' type="2d"> </canvas>
+    <page-container show="{{uploadState}}" bind:beforeleave='beforeleave'>
+        <view class="uploadBox">
+            <view class="upload">
+                <image src="/static/uploadTips.png" class="tipsImg" />
+                <view>{{readingType=='pk'?'挑战结算中,小朋友请耐心等待哦~':'作品上传中,小朋友请耐心等待哦~'}}</view>
+                <view class="speed">
+                    {{percent}}%
+                </view>
+            </view>
+        </view>
+    </page-container>
+    <canvas id='share' type="2d"> </canvas>
+    <buyVip />
+    <vipModal id="vipModal"></vipModal>
+    <canvas id='vip' type="2d"> </canvas>
 </view>