开发新vip

pages/my/index.js

@@ -1,9 +1,13 @@
 import {
   getMyInfo,
+  buyVip,
   getVipInfo,
   getLearnCard
 } from '~/api/user'
 import {
+  getProducts
+} from '~/api/global'
+import {
   createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
@@ -17,7 +21,8 @@ Page({
     tasks: [],
     isIos: app.globalData.isIOS,
     activationModal: false,
-    activationRes: {}
+    activationRes: {},
+    products: []
   },
   onLoad() {
     // 手工绑定 
@@ -27,6 +32,7 @@ Page({
         setUser: 'setUser'
       }
     })
+    this.getProducts()
   },
   async onShow() {
     if (typeof this.getTabBar === 'function') {
@@ -53,7 +59,13 @@ Page({
       vipTime,
     })
   },
-
+  async getProducts() {
+    let products = await getProducts()
+    console.log(products);
+    this.setData({
+      products,
+    })
+  },
   activationCode() {
     wx.showModal({
       title: '请输入激活码',
@@ -103,6 +115,50 @@ Page({
       }
     })
   },
+  async toBuy({
+    currentTarget
+  }) {
+    console.log(currentTarget);
+    wx.showLoading({
+      title: '提交中',
+      mask: true
+    })
+    let res = await buyVip({
+      productId: currentTarget.dataset.id
+    }).finally(() => {
+      wx.hideLoading()
+    })
+    let {
+      timeStamp,
+      nonceStr,
+      signType,
+      paySign
+    } = res
+    // package保留字
+    wx.requestPayment({
+      timeStamp,
+      nonceStr,
+      package: res.package,
+      signType,
+      paySign,
+      success: (res) => {
+        console.log(res);
+        this.setData({
+          activationModal: true
+        })
+        /*   setTimeout(() => {
+            this.setUserInfo()
+          }, 1500) */
+      },
+      fail(res) {
+        wx.showToast({
+          title: "支付失败",
+          icon: "none",
+          duration: 3000
+        })
+      }
+    })
+  },
   jump({
     currentTarget
   }) {

pages/my/index.less

@@ -128,6 +128,7 @@
       margin: 0;
     }
   }
+
   .medalBox {
     margin: 30rpx 0rpx;
     padding: 20rpx 30rpx;
@@ -250,6 +251,33 @@
     position: relative;
     margin-top: 36rpx;
     width: 710rpx;
+    height: 224rpx;
+    border-radius: 20rpx;
+    background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-1.png);
+    background-size: cover;
+    -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+
+    .buyBtn {
+      position: absolute;
+      left: 168rpx;
+      top: 156rpx;
+      color: #39029B;
+      font-size: 26rpx;
+      font-weight: bold;
+      letter-spacing: 2rpx;
+    }
+  }
+
+  .payBox2 {
+    margin-top: 70rpx;
+    background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-2.png);
+    background-size: cover;
+  }
+
+  /*   .payBox {
+    position: relative;
+    margin-top: 36rpx;
+    width: 710rpx;
     height: 184rpx;
     border-radius: 20rpx;
     background: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip_center.png);
@@ -281,5 +309,5 @@
       background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
       font-size: 30rpx;
     }
-  }
+  } */
 }

pages/my/index.wxml

@@ -71,6 +71,16 @@
     </view>
   </view>
   <view class="payBox">
+    <view class="buyBtn" bindtap="toBuy" data-id="{{products[0].id}}">
+      立即开通
+    </view>
+  </view>
+  <view class="payBox payBox2">
+    <view class="buyBtn" bindtap="toBuy" data-id="{{products[1].id}}">
+      立即开通
+    </view>
+  </view>
+  <!--  <view class="payBox">
     <view class="copywriting" wx:if="{{!vipTime}}">开通<text>SVIP</text>/<text>VIP</text> 会员权益</view>
     <view class="copywriting" wx:if="{{vipTime}}">
       {{vipTime==1?'终身使用':filters.formatDate(vipTime,4)}}
@@ -78,5 +88,5 @@
     <view wx:if="{{vipTime!='1'}}" class="goPay" bindtap='jump' data-url="/pages/commodity/index">
       {{vipTime!=''?'立即续费':'立即开通'}}
     </view>
-  </view>
+  </view> -->
 </view>

pages/my/index.wxss

@@ -1,5 +1,41 @@
 .container {
   padding: 0rpx 20rpx 30rpx;
+  /*   .payBox {
+    position: relative;
+    margin-top: 36rpx;
+    width: 710rpx;
+    height: 184rpx;
+    border-radius: 20rpx;
+    background: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip_center.png);
+    background-size: cover;
+
+    .copywriting {
+      position: absolute;
+      bottom: 70rpx;
+      left: 30rpx;
+      color: #FBF3CD;
+      font-size: 26rpx;
+      letter-spacing: 2rpx;
+
+      text {
+        margin: 0 6rpx;
+      }
+    }
+
+    .goPay {
+      position: absolute;
+      top: 30rpx;
+      right: 28rpx;
+      border-radius: 50rpx;
+      display: inline-block;
+      padding: 14rpx 36rpx;
+      color: #292020;
+      font-weight: bold;
+      letter-spacing: 2rpx;
+      background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
+      font-size: 30rpx;
+    }
+  } */
 }
 .container .userBox {
   background-color: white;
@@ -213,32 +249,23 @@
   position: relative;
   margin-top: 36rpx;
   width: 710rpx;
-  height: 184rpx;
+  height: 224rpx;
   border-radius: 20rpx;
-  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip_center.png);
+  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-1.png);
   background-size: cover;
+  -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
 }
-.container .payBox .copywriting {
+.container .payBox .buyBtn {
   position: absolute;
-  bottom: 70rpx;
-  left: 30rpx;
-  color: #FBF3CD;
+  left: 168rpx;
+  top: 156rpx;
+  color: #39029B;
   font-size: 26rpx;
-  letter-spacing: 2rpx;
-}
-.container .payBox .copywriting text {
-  margin: 0 6rpx;
-}
-.container .payBox .goPay {
-  position: absolute;
-  top: 30rpx;
-  right: 28rpx;
-  border-radius: 50rpx;
-  display: inline-block;
-  padding: 14rpx 36rpx;
-  color: #292020;
   font-weight: bold;
   letter-spacing: 2rpx;
-  background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
-  font-size: 30rpx;
+}
+.container .payBox2 {
+  margin-top: 70rpx;
+  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-2.png);
+  background-size: cover;
 }