全局购买vip组件

api/global.js

@@ -12,8 +12,6 @@ module.exports = {
     getBannerList: data => request('/v3/banner', 'get', data),
     // 获取官方活动
     getActivities: data => request('/v3/activity', 'get', data),
-    // 获取官方活动（新）
-    getActivitiesNew: data => request('/v3/activity/type', 'get', data),
     // 获取排行榜详情
     getRankingData: data => request(`/v3/activity/${data}`, 'get', data),
     // 获取朗读赛详情

components/activityList/index.js

@@ -1,7 +1,6 @@
 const app = getApp()
 import {
     getActivities,
-    getActivitiesNew
 } from '~/api/global'
 import {
     storeBindingsBehavior
@@ -65,8 +64,8 @@ Component({
             if (this.properties.classify == '3') {
                 return
             } else if (this.properties.classify == '4') {
-                activityList = await getActivitiesNew({
-                    type: 9,
+                activityList = await getActivities({
+                    classify: 3,
                     grade: this.data.userInfo.grade
                 })
             } else {

components/banner/index.js

@@ -22,7 +22,7 @@ Component({
         bannelEvent({
             currentTarget
         }) {
-            //1：图片，2：邀新榜，3：热播榜，4：挑战pk榜，5，朗读赛，6，领取勋章
+            //1：图片，2：邀新榜，3：热播榜，4：挑战pk榜，5，朗读赛，6，领取勋章,8跳购买页
             let {
                 type,
                 content
@@ -39,6 +39,8 @@ Component({
                 wx.navigateTo({
                     url: `/pages/rankIntro/index?img=${content}`,
                 })
+            } else if (type == 8) {
+                this.selectComponent('#buyVip').open()
             } else if (type == 9) {
                 wx.navigateTo({
                     url: '/pages/invite/index',

components/banner/index.json

@@ -1,4 +1,6 @@
 {
-  "component": true,
-  "usingComponents": {}
+    "component": true,
+    "usingComponents": {
+        "buyVip": "/components/buyVip/index"
+    }
 }

components/banner/index.wxml

@@ -1,11 +1,12 @@
 <view class="header">
-  <view class="headerBg"></view>
-  <swiper class="swiper" autoplay circular indicator-dots="{{bannerList.length>1}}" indicator-active-color="#fff"
-    indicator-color='#ecececa1' current="{{current}}">
-    <block wx:for="{{bannerList}}" wx:key="id">
-      <swiper-item bindtap='bannelEvent' data-type='{{item.type}}' data-content="{{item.content}}">
-        <image src="{{item.icon}}" class="swiper-item" mode="" />
-      </swiper-item>
-    </block>
-  </swiper>
+    <view class="headerBg"></view>
+    <swiper class="swiper" autoplay circular indicator-dots="{{bannerList.length>1}}" indicator-active-color="#fff"
+        indicator-color='#ecececa1' current="{{current}}">
+        <block wx:for="{{bannerList}}" wx:key="id">
+            <swiper-item bindtap='bannelEvent' data-type='{{item.type}}' data-content="{{item.content}}">
+                <image src="{{item.icon}}" class="swiper-item" mode="" />
+            </swiper-item>
+        </block>
+    </swiper>
+    <buyVip id="buyVip" bind:toBuy="toBuy" />
 </view>

components/buyVip/index.js

@@ -0,0 +1,35 @@
+import {
+    getWxQrcode,
+} from '~/api/user'
+const app = getApp()
+
+Component({
+    properties: {},
+    data: {
+        show: false,
+        isIos: app.globalData.isIOS,
+        qrCode: '',
+    },
+    methods: {
+        async open() {
+            if (!this.data.isIos) {
+                wx.navigateTo({
+                    url: '/pages/commodity/index',
+                })
+            } else {
+                let qrCode = await getWxQrcode()
+                this.setData({
+                    qrCode: qrCode.ticketUrl
+                })
+                this.setData({
+                    show: true,
+                })
+            }
+        },
+        closeModal() {
+            this.setData({
+                show: false
+            })
+        },
+    }
+})

components/buyVip/index.less

@@ -0,0 +1,44 @@
+.buyVip {
+    position: fixed;
+    z-index: 12;
+    left: 0rpx;
+    top: 0rpx;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7);
+
+    .modal {
+        position: relative;
+        margin: 140rpx auto 0rpx;
+        border-radius: 20rpx;
+        text-align: center;
+        overflow: hidden;
+    
+
+        .iosVip {
+            margin: 30rpx auto;
+            background: url(https://reader-wx.ai160.com/images/reader/v3/bvmask.png) no-repeat;
+            background-size: cover;
+            width: 580rpx;
+            height: 560rpx;
+            border-radius: 20rpx;
+            overflow: hidden;
+            .qrCode{
+                margin-top: 220rpx;
+                width: 280rpx;
+                height: 280rpx;
+                border: 10rpx solid #FFEA99;
+                border-radius: 20rpx;
+            }
+        }
+    }
+
+    .close {
+        display: block;
+        margin: 0 auto;
+        padding: 40rpx;
+        width: 54rpx;
+        height: 54rpx;
+    }
+
+}

components/buyVip/index.wxml

@@ -0,0 +1,9 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+<view class="buyVip" wx:if="{{show}}">
+    <view class="modal">
+        <view wx:if="{{vipTime!='1'&&isIos}}" class="iosVip">
+            <image src="{{qrCode}}" show-menu-by-longpress="true"  class="qrCode"/>
+        </view>
+    </view>
+    <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+</view>

components/buyVip/index.wxss

@@ -0,0 +1,39 @@
+.buyVip {
+  position: fixed;
+  z-index: 12;
+  left: 0rpx;
+  top: 0rpx;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+}
+.buyVip .modal {
+  position: relative;
+  margin: 140rpx auto 0rpx;
+  border-radius: 20rpx;
+  text-align: center;
+  overflow: hidden;
+}
+.buyVip .modal .iosVip {
+  margin: 30rpx auto;
+  background: url(https://reader-wx.ai160.com/images/reader/v3/bvmask.png) no-repeat;
+  background-size: cover;
+  width: 580rpx;
+  height: 560rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+.buyVip .modal .iosVip .qrCode {
+  margin-top: 220rpx;
+  width: 280rpx;
+  height: 280rpx;
+  border: 10rpx solid #FFEA99;
+  border-radius: 20rpx;
+}
+.buyVip .close {
+  display: block;
+  margin: 0 auto;
+  padding: 40rpx;
+  width: 54rpx;
+  height: 54rpx;
+}

pages/reading/buyVip/index.js

@@ -1,57 +0,0 @@
-import {
-    getProducts
-} from '~/api/global'
-import {
-    getWxQrcode,
-} from '~/api/user'
-const app = getApp()
-
-Component({
-    properties: {
-
-    },
-    data: {
-        show: false,
-        products: [],
-        // 是否购买过vip
-        isIos: app.globalData.isIOS,
-        qrCode: '',
-        isPreferential: false
-    },
-    methods: {
-        async open() {
-            if (!this.data.isIos) {
-                this.getProducts()
-            } else {
-                let qrCode = await getWxQrcode()
-                console.log(qrCode);
-                this.setData({
-                    qrCode: qrCode.ticketUrl
-                })
-            }
-            this.setData({
-                show: true,
-            })
-        },
-        closeModal() {
-            this.setData({
-                show: false
-            })
-        },
-        async getProducts() {
-            let {
-                isPreferential,
-                productList: products,
-            } = await getProducts()
-            this.setData({
-                products,
-                isPreferential
-            })
-        },
-        toBuy({
-            currentTarget
-        }) {
-            this.triggerEvent('toBuy', currentTarget.dataset.goods)
-        }
-    }
-})

pages/reading/buyVip/index.less

@@ -1,127 +0,0 @@
-.buyVip {
-    position: fixed;
-    z-index: 12;
-    left: 0rpx;
-    top: 0rpx;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.7);
-
-    .modal {
-        position: relative;
-        width: 677rpx;
-        margin: 140rpx 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;
-            }
-        }
-
-        .goodsList {
-            margin: 50rpx 0 30rpx;
-            width: 100%;
-            height: 310rpx;
-            padding: 0rpx 20rpx;
-            white-space: nowrap;
-
-            .payBox {
-                position: relative;
-                margin-right: 22rpx;
-                width: 268rpx;
-                height: 268rpx;
-                background-size: cover;
-                text-align: center;
-                display: inline-block;
-                border-radius: 20rpx;
-
-                .pay {
-                    position: absolute;
-                    bottom: 24rpx;
-                    left: 50%;
-                    transform: translateX(-50%);
-                    padding: 6rpx 40rpx;
-                    font-size: 26rpx;
-                    font-weight: bold;
-                    border-radius: 50rpx;
-                }
-            }
-
-            .payBox::after {
-                content: '';
-                position: absolute;
-                width: 268rpx;
-                height: 45rpx;
-                left: 0;
-                bottom: -42rpx;
-                background: linear-gradient(180deg, #2A2116 0%, rgba(255, 255, 255, 0) 100%);
-                border-radius: 22rpx 22rpx 0rpx 0rpx;
-                opacity: 0.26;
-            }
-
-            .pbbg1 {
-                background-image: url(http://reader-wx.ai160.com/images/reader/v3/12992x.png);
-
-                .pay {
-                    background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
-                }
-            }
-
-            .pbbg2 {
-                background-image: url(http://reader-wx.ai160.com/images/reader/v3/2992x.png);
-
-                .pay {
-                    background: linear-gradient(285deg, #DFF2EE 0%, #D8E9FD 39%, #BDE6F8 72%, #BAE7F7 100%);
-                }
-            }
-
-
-            .pbbg3 {
-                background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png);
-
-                .pay {
-                    background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
-                }
-            }
-
-        }
-
-        .iosVip {
-            margin: 30rpx auto;
-            background: url(https://reader-wx.ai160.com/images/reader/v3/banner.png) no-repeat;
-            background-size: cover;
-            width: 580rpx;
-            height: 560rpx;
-            border-radius: 20rpx;
-            overflow: hidden;
-            .qrCode{
-                margin-top: 244rpx;
-                width: 280rpx;
-                height: 280rpx;
-            }
-        }
-    }
-
-    .close {
-        display: block;
-        margin: 0 auto;
-        padding: 40rpx;
-        width: 54rpx;
-        height: 54rpx;
-    }
-
-}

pages/reading/buyVip/index.wxml

@@ -1,35 +0,0 @@
-<wxs src="../../../utils/filter.wxs" module="filters" />
-<view class="buyVip" wx:if="{{show}}">
-    <view class="modal">
-        <view class="header" wx:if="{{!isIos}}">
-            <view class="h1">{{!isPreferential?'您还不是VIP会员':'您的VIP会员已到期'}}</view>
-            <view>{{!isPreferential?'选择下面的会员卡开通后使用':'请续费后使用'}}</view>
-        </view>
-        <view class="header" wx:if="{{isIos}}">
-            <view class="h1">暂无开通权益</view>
-            <view>请使用学习卡激活码激活</view>
-        </view>
-        <scroll-view class="goodsList" scroll-x="true" enhanced show-scrollbar="{{false}}"
-            wx:if="{{vipTime!='1'&&!isIos}}">
-            <view class="payBox pbbg2">
-                <view class="pay" bindtap="toBuy" data-goods="{{products[0]}}">
-                    {{isPreferential?'立即续费':'立即开通'}}
-                </view>
-            </view>
-            <view class="payBox pbbg1">
-                <view class="pay" bindtap="toBuy" data-goods="{{products[2]}}">
-                    {{isPreferential?'立即续费':'立即开通'}}
-                </view>
-            </view>
-            <view class="payBox pbbg3">
-                <view class="pay" bindtap="toBuy" data-goods="{{products[1]}}">
-                    {{isPreferential?'立即续费':'立即开通'}}
-                </view>
-            </view>
-        </scroll-view>
-        <view wx:if="{{vipTime!='1'&&isIos}}" class="iosVip">
-            <image src="{{qrCode}}" show-menu-by-longpress="true"  class="qrCode"/>
-        </view>
-    </view>
-    <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
-</view>

pages/reading/buyVip/index.wxss

@@ -1,109 +0,0 @@
-.buyVip {
-  position: fixed;
-  z-index: 12;
-  left: 0rpx;
-  top: 0rpx;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.7);
-}
-.buyVip .modal {
-  position: relative;
-  width: 677rpx;
-  margin: 140rpx 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 .goodsList {
-  margin: 50rpx 0 30rpx;
-  width: 100%;
-  height: 310rpx;
-  padding: 0rpx 20rpx;
-  white-space: nowrap;
-}
-.buyVip .modal .goodsList .payBox {
-  position: relative;
-  margin-right: 22rpx;
-  width: 268rpx;
-  height: 268rpx;
-  background-size: cover;
-  text-align: center;
-  display: inline-block;
-  border-radius: 20rpx;
-}
-.buyVip .modal .goodsList .payBox .pay {
-  position: absolute;
-  bottom: 24rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 6rpx 40rpx;
-  font-size: 26rpx;
-  font-weight: bold;
-  border-radius: 50rpx;
-}
-.buyVip .modal .goodsList .payBox::after {
-  content: '';
-  position: absolute;
-  width: 268rpx;
-  height: 45rpx;
-  left: 0;
-  bottom: -42rpx;
-  background: linear-gradient(180deg, #2A2116 0%, rgba(255, 255, 255, 0) 100%);
-  border-radius: 22rpx 22rpx 0rpx 0rpx;
-  opacity: 0.26;
-}
-.buyVip .modal .goodsList .pbbg1 {
-  background-image: url(http://reader-wx.ai160.com/images/reader/v3/12992x.png);
-}
-.buyVip .modal .goodsList .pbbg1 .pay {
-  background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
-}
-.buyVip .modal .goodsList .pbbg2 {
-  background-image: url(http://reader-wx.ai160.com/images/reader/v3/2992x.png);
-}
-.buyVip .modal .goodsList .pbbg2 .pay {
-  background: linear-gradient(285deg, #DFF2EE 0%, #D8E9FD 39%, #BDE6F8 72%, #BAE7F7 100%);
-}
-.buyVip .modal .goodsList .pbbg3 {
-  background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png);
-}
-.buyVip .modal .goodsList .pbbg3 .pay {
-  background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
-}
-.buyVip .modal .iosVip {
-  margin: 30rpx auto;
-  background: url(https://reader-wx.ai160.com/images/reader/v3/banner.png) no-repeat;
-  background-size: cover;
-  width: 580rpx;
-  height: 560rpx;
-  border-radius: 20rpx;
-  overflow: hidden;
-}
-.buyVip .modal .iosVip .qrCode {
-  margin-top: 244rpx;
-  width: 280rpx;
-  height: 280rpx;
-}
-.buyVip .close {
-  display: block;
-  margin: 0 auto;
-  padding: 40rpx;
-  width: 54rpx;
-  height: 54rpx;
-}

pages/reading/index.json

@@ -1,7 +1,7 @@
 {
     "usingComponents": {
         "uploadFile": "/components/uploadFile/index",
-        "buyVip": "./buyVip/index",
+        "buyVip": "/components/buyVip/index",
         "Comment": "/components/comment/index",
         "vipModal": "/components/vipModal/index"
     },