开发朗读页支付

app.js

@@ -35,20 +35,19 @@ App({
         if (uid) {
             let userInfo = await getMyInfo()
             console.log(userInfo,'zzz');
-            this.setUser(userInfo)
-            this.globalData.userInfo = userInfo
+            this.setUser(userInfo.user)
+            this.globalData.userInfo = userInfo.user
             if (getApp().callBack) {
-                getApp().callBack();
+                getApp().callBack(userInfo.users);
             }
         } else {
             let userRes = await androidLogin({extOpenId:'1234567',channel:'3016',grade:'PRIMARY_FIRST_GRADE'})
-            console.log(userRes,'455');
-            this.setUser(userRes)
-            wx.setStorageSync('uid', userRes.uid)
-            wx.setStorageSync('user', userRes)
-            this.globalData.userInfo = userRes
+            this.setUser(userRes.user)
+            wx.setStorageSync('uid', userRes.user.uid)
+            wx.setStorageSync('user', userRes.user)
+            this.globalData.userInfo = userRes.user
             if (getApp().callBack) {
-                getApp().callBack(userRes);
+                getApp().callBack(userRes.user);
             }
         }
     },

components/buyVip/index.js

@@ -1,49 +1,39 @@
 import {
-    getWxQrcode,
-} from '~/api/user'
-const app = getApp()
-
+    getProducts,
+} from '~/api/global'
+let polling
 Component({
-    properties: {},
     data: {
-        show: false,
-        isIos: app.globalData.isIOS,
-        qrCode: '',
+        products: [],
     },
-    methods: {
-        async open() {
-            if (!this.data.isIos) {
-                wx.navigateTo({
-                    url: '/pages/commodity/index',
-                })
-            } else {
-                let qrCode = await getWxQrcode()
-                this.setData({
-                    qrCode: qrCode.ticketUrl
-                })
-                console.log(typeof this.getTabBar === 'function' &&
-                    this.getTabBar());
-                if (typeof this.getTabBar === 'function' &&
-                    this.getTabBar()) {
-                    this.getTabBar().setData({
-                        mask: true
-                    })
-                }
-                this.setData({
-                    show: true,
-                })
-            }
+    lifetimes: {
+        attached() {
+            // this.selectComponent("#popUp").showModal()
+            this.getProducts()
         },
-        closeModal() {
+    },
+    methods: {
+        async getProducts() {
+            let {
+                productList: products,
+            } = await getProducts()
             this.setData({
-                show: false
+                products,
             })
-            if (typeof this.getTabBar === 'function' &&
-                this.getTabBar()) {
-                this.getTabBar().setData({
-                    mask: false
-                })
-            }
         },
+        openDonutBuy({
+            currentTarget
+        }) {
+            let product = currentTarget.dataset.product
+            this.triggerEvent('toBuy',product)
+            this.close()
+        },
+        async open(product) {
+            this.selectComponent("#popUp").showModal()
+        },
+        closeEvent() {},
+        close() {
+            this.selectComponent("#popUp").hideModal()
+        }
     }
 })

components/buyVip/index.json

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

components/buyVip/index.less

@@ -1,47 +1,76 @@
-.buyVip {
-    position: fixed;
-    z-index: 999;
-    left: 0rpx;
-    top: 0rpx;
-    width: 100vw;
-    height: 100vh;
+.box {
+    width: 750rpx;
+    height: 652rpx;
+    padding: 28rpx 0 0;
+    background: #FFFFFF;
+    border-radius: 30rpx 30rpx 0rpx 0rpx;
     display: flex;
-    align-items: center;
-    justify-content: center;
     flex-direction: column;
-    background: rgba(0, 0, 0, 0.7);
+    align-items: center;
 
-    .modal {
+    .header {
+        width: 100%;
         position: relative;
-        border-radius: 20rpx;
+        font-size: 28rpx;
+        color: #000000;
         text-align: center;
-        overflow: hidden;
-    
 
-        .iosVip {
-            margin: 30rpx auto;
-            background: url(https://reader-wx.ai160.com/images/reader/v3/bvmask.png) no-repeat;
+        .close {
+            position: absolute;
+            right: 24rpx;
+            top: -30rpx;
+            line-height: 60rpx;
+            font-size: 50rpx;
+        }
+    }
+    .tips{
+        margin-top: 24rpx;
+        font-size: 22rpx;
+    }
+    .goodList {
+        margin-top: 82rpx;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 0 40rpx;
+        .payBox {
+            position: relative;
+            width: 318rpx;
+            height: 318rpx;
             background-size: cover;
-            width: 580rpx;
-            height: 560rpx;
+            text-align: center;
+            display: inline-block;
             border-radius: 20rpx;
-            overflow: hidden;
-            .qrCode{
-                margin-top: 220rpx;
-                width: 280rpx;
-                height: 280rpx;
-                border: 10rpx solid #FFEA99;
-                border-radius: 20rpx;
+
+            .name {
+                margin-top: 42rpx;
+                font-weight: 500;
+                font-size: 40rpx;
+            }
+
+            .price {
+                margin-top: 22rpx;
+                font-weight: 500;
+                font-size: 56rpx;
+            }
+
+            .originPrice {
+                margin-top: 28rpx;
+                font-size: 24rpx;
+                text-decoration: line-through;
             }
         }
-    }
 
-    .close {
-        display: block;
-        margin: 0 auto;
-        padding: 40rpx;
-        width: 54rpx;
-        height: 54rpx;
-    }
+        .year {
+            background-image: url(https://reader-wx.ai160.com/images/reader/pay/yuedao365.webp);
+            color: #FEF4B5;
+        }
 
+        .month {
+            background-image: url(http://reader-wx.ai160.com/images/reader/pay/yuedao90.webp);
+            color: #7D320A;
+        }
+    }
 }

components/buyVip/index.wxml

@@ -1,9 +1,21 @@
-<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"/>
+<popUp id="popUp" bind:close='closeEvent'>
+    <view class="box">
+        <view class="header">
+            开通会员
+            <view class="close" bindtap="close">
+                ×
+            </view>
+        </view>
+        <view class="tips">
+            购买VIP会员，即可畅读全部资源
+        </view>
+        <view class="goodList">
+            <view wx:for="{{products}}" wx:key="id" class="payBox {{item.payType=='YEAR'?'year':'month'}}"
+                bindtap="openDonutBuy" data-product="{{item}}">
+                <view class="name">{{item.title}}</view>
+                <view class="price">{{item.price/100}}元</view>
+                <view class="originPrice">原价：330元</view>
+            </view>
         </view>
     </view>
-    <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
-</view>
+</popUp>

components/buyVip/index.wxss

@@ -1,42 +1,69 @@
-.buyVip {
-  position: fixed;
-  z-index: 999;
-  left: 0rpx;
-  top: 0rpx;
-  width: 100vw;
-  height: 100vh;
+.box {
+  width: 750rpx;
+  height: 652rpx;
+  padding: 28rpx 0 0;
+  background: #FFFFFF;
+  border-radius: 30rpx 30rpx 0rpx 0rpx;
   display: flex;
-  align-items: center;
-  justify-content: center;
   flex-direction: column;
-  background: rgba(0, 0, 0, 0.7);
+  align-items: center;
 }
-.buyVip .modal {
+.box .header {
+  width: 100%;
   position: relative;
-  border-radius: 20rpx;
+  font-size: 28rpx;
+  color: #000000;
   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;
+.box .header .close {
+  position: absolute;
+  right: 24rpx;
+  top: -30rpx;
+  line-height: 60rpx;
+  font-size: 50rpx;
+}
+.box .tips {
+  margin-top: 24rpx;
+  font-size: 22rpx;
+}
+.box .goodList {
+  margin-top: 82rpx;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 40rpx;
+}
+.box .goodList .payBox {
+  position: relative;
+  width: 318rpx;
+  height: 318rpx;
   background-size: cover;
-  width: 580rpx;
-  height: 560rpx;
+  text-align: center;
+  display: inline-block;
   border-radius: 20rpx;
-  overflow: hidden;
 }
-.buyVip .modal .iosVip .qrCode {
-  margin-top: 220rpx;
-  width: 280rpx;
-  height: 280rpx;
-  border: 10rpx solid #FFEA99;
-  border-radius: 20rpx;
+.box .goodList .payBox .name {
+  margin-top: 42rpx;
+  font-weight: 500;
+  font-size: 40rpx;
+}
+.box .goodList .payBox .price {
+  margin-top: 22rpx;
+  font-weight: 500;
+  font-size: 56rpx;
+}
+.box .goodList .payBox .originPrice {
+  margin-top: 28rpx;
+  font-size: 24rpx;
+  text-decoration: line-through;
+}
+.box .goodList .year {
+  background-image: url(https://reader-wx.ai160.com/images/reader/pay/yuedao365.webp);
+  color: #FEF4B5;
 }
-.buyVip .close {
-  display: block;
-  margin: 0 auto;
-  padding: 40rpx;
-  width: 54rpx;
-  height: 54rpx;
+.box .goodList .month {
+  background-image: url(http://reader-wx.ai160.com/images/reader/pay/yuedao90.webp);
+  color: #7D320A;
 }

components/donutBuy/index.js

@@ -5,9 +5,6 @@ import {
 } from '~/api/global'
 let polling
 Component({
-    properties: {
-
-    },
     data: {
         qrCode: '',
         product: {}
@@ -30,9 +27,11 @@ Component({
                 productId: product.id,
                 channel: wx.getStorageSync('channelCode')
             })
-            this.getTabBar().setData({
-                show: false
-            })
+            if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+                this.getTabBar().setData({
+                    show: false
+                })
+            }
             this.setData({
                 product,
                 qrCode
@@ -47,16 +46,21 @@ Component({
             }, 2000);
         },
         closeEvent() {
-            this.getTabBar().setData({
-                show: true
-            })
+            if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+                this.getTabBar().setData({
+                    show: true
+                })
+            }
             clearInterval(polling)
         },
         close() {
             this.selectComponent("#popUp").hideModal()
-            this.getTabBar().setData({
-                show: true
-            })
+            clearInterval(polling)
+            if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+                this.getTabBar().setData({
+                    show: true
+                })
+            }
         }
     }
 })

components/donutBuy/index.less

@@ -44,16 +44,19 @@
             align-items: center;
             justify-content: center;
             margin-bottom: 20rpx;
+
             .icon {
                 margin: 0 12rpx;
                 font-size: 30rpx;
                 width: 46rpx;
                 height: 46rpx;
             }
-            text{
+
+            text {
                 padding: 0 10rpx;
             }
-            .price{
+
+            .price {
                 font-size: 40rpx;
                 color: #FF0707;
                 font-weight: bold;

pages/index/index.js

@@ -62,7 +62,6 @@ Page({
         })
     },
     async getResource() {
-        console.log(this.data.userInfo);
         let data = await getResourceList({
             grade: this.data.userInfo.grade
         })

pages/reading/index.js

@@ -265,6 +265,7 @@ Page({
     setCountDown() {
         if (!this.data.isVip && !!this.data.free) {
             this.resetReading()
+            console.log('zzz');
             return this.selectComponent('#buyVip').open({
                 isVip: this.data.isVip
             })
@@ -777,51 +778,18 @@ Page({
     async toBuy({
         detail
     }) {
-        wx.showLoading({
-            title: '提交中',
-            mask: true
-        })
-        let res = await buyVip({
-            productId: detail.id
-        }).finally(() => {
-            wx.hideLoading()
+        this.selectComponent('#donutBuy').open(detail)
+    },
+    paySuccess() {
+        this.selectComponent('#vipModal').open()
+        this.setData({
+            isVip: true
         })
+        setTimeout(() => {
+            this.getVipInfo()
+        }, 1500)
         userEvent({
-            action: 'ANDROID_PAY_ACTIVITY',
-        })
-        let {
-            timeStamp,
-            nonceStr,
-            signType,
-            paySign
-        } = res
-        // package保留字
-        wx.requestPayment({
-            timeStamp,
-            nonceStr,
-            package: res.package,
-            signType,
-            paySign,
-            success: (res) => {
-                this.selectComponent('#buyVip').closeModal()
-                this.selectComponent('#vipModal').open()
-                this.setData({
-                    isVip: true
-                })
-                setTimeout(() => {
-                    this.getVipInfo()
-                }, 1500)
-                userEvent({
-                    action: 'ANDROID_PAY_SUCCESS',
-                })
-            },
-            fail(res) {
-                wx.showToast({
-                    title: "支付失败",
-                    icon: "none",
-                    duration: 3000
-                })
-            }
+            action: 'ANDROID_PAY_SUCCESS',
         })
     },
     // 收藏课程

pages/reading/index.json

@@ -3,6 +3,7 @@
         "uploadFile": "/components/uploadFile/index",
         "buyVip": "/components/buyVip/index",
         "Comment": "/components/comment/index",
+        "donutBuy":"/components/donutBuy/index",
         "vipModal": "/components/vipModal/index"
     },
     "navigationBarTitleText": ""

pages/reading/index.wxml

@@ -164,6 +164,7 @@
     <buyVip id="buyVip" bind:toBuy="toBuy" />
     <canvas id='share' type="2d"> </canvas>
     <vipModal id="vipModal"></vipModal>
+    <donutBuy id="donutBuy" bind:paySuccess='paySuccess'></donutBuy>
     <canvas id='vip' type="2d"> </canvas>
     <Comment id="comment" bind:addCommentNum="addCommentNum" />
 </view>