'vip订购'

app.json

@@ -24,7 +24,9 @@
     "pages/user/myread/myread",
     "pages/user/mycollection/mycollection",
     "pages/user/walletDetails/walletDetails",
-    "pages/user/myworks/myworks"
+    "pages/user/myworks/myworks",
+    "pages/vipPage/vip/vip",
+    "pages/vipPage/vipCode/vipCode"
   ],
   "window": {
     "backgroundTextStyle": "light",

component/my/my.js

@@ -16,7 +16,8 @@ export const myInit = (that) => {
       schoolCity: '',
       schoolName: '',
       user: {},
-      isIOS: app.globalData.isIOS
+      isIOS: app.globalData.isIOS,
+      isVIP: true
     },
     followData:[]
   });
@@ -78,5 +79,13 @@ export const myInit = (that) => {
         url: `../../pages/user/walletDetails/walletDetails?title=资金明细`
       });
     },
+    that.toVIPBuy = function(e) {
+      // wx.navigateTo({
+      //   url: `../../pages/vipPage/vip/vip`
+      // });
+      wx.navigateTo({
+        url: `../../pages/vipPage/vipCode/vipCode`
+      });
+    },
     that.getFollowWorks(1, 3);
 }

component/my/my.wxml

@@ -10,8 +10,12 @@
             <!-- <view class='occupation-title' wx:if="{{myData.user.user.profession}}">{{ myData.user.user.profession }}</view> -->
           </view>
           <view class='avatar-msg' bindtap="toMyEdit">
-            <view class='avatar-nickname'>微信昵称：{{ myData.user.user.wechatName || myData.user.wechatName  }}</view>
-            <view class='avatar-nickname'>宝贝昵称：{{ myData.user.user.nickName || myData.user.nickName  }}</view>
+            <view class='avatar-nickname'>
+              微信昵称：{{ myData.user.user.wechatName || myData.user.wechatName  }}
+            </view>
+            <view class='avatar-nickname'>
+              宝贝昵称：{{ myData.user.user.nickName || myData.user.nickName  }}
+            </view>
             <image class="edit-img" src="../../static/image/edit_new.png" />
             <view class='mine-category'>
               <view class='amount-text'>{{ myData.user.playAmount || 0 }} 播放</view>
@@ -34,18 +38,26 @@
           <text class="flower-last">{{myData.user.unfinishedAmount }}</text>
           个任务福利还没有完成
         </view>
-        <view class="flower-tips" wx:if="{{myData.user.unfinishedAmount <= 0}}">
-          今天任务全部完成，真棒
-        </view>
+        <view class="flower-tips" wx:if="{{myData.user.unfinishedAmount <= 0}}">今天任务全部完成，真棒</view>
       </view>
       <!-- android 显示两个 -->
       <view class="wallet-section" wx:if="{{!myData.isIOS}}">
-        <view class="wallet-box" bindtap="toWalletDetail">
+        <!-- <view class="wallet-box" bindtap="toWalletDetail">
           <view class="grey-point"></view>
           <image class="wallet-icon" src='../../static/image/wallet.png' />
           <view>钱包：{{myData.user.walletAmount / 100  || 0 }}</view>
+        </view> -->
+        <view class="wallet-box" bindtap="toVIPBuy">
+          <view class="grey-point"></view>
+          <image class="wallet-icon" src="{{myData.isIOS ? '../../static/vip/idcard.png' : '../../static/vip/small_crown.png'}}" />
+          <view class="right_vip">
+            <view class="vip_text">VIP限时优惠</view>
+            <view class="{{myData.isVIP ? 'vip': 'grey'}}">
+              {{myData.isVIP ? myData.isIOS ? '已激活': '已开通': myData.isIOS ? '立即激活': '立即开通'}}
+            </view>
+          </view>
         </view>
-        <view class="flower-box"   bindtap="goToFlower">
+        <view class="flower-box" bindtap="goToFlower">
           <view class="grey-point"></view>
           <image class="flower-icon" src='../../static/image/flower_small.png' />
           <view class="flower-text">

component/my/my.wxss

@@ -249,11 +249,43 @@ image {
 }
 
 .wallet-icon {
-  width: 60rpx;
-  height: 63rpx;
-  margin-left: 51rpx;
-  margin-right: 25rpx;
-  margin-top:-7rpx;
+  width: 93rpx;
+height: 83rpx;
+margin-left: 31rpx;
+margin-right: 25rpx;
+margin-top: -7rpx;
+
+}
+.right_vip{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.vip_text{
+  color: #505050;
+  font-size: 30rpx;
+  margin-bottom: 14rpx;
+}
+
+.grey{
+  background-color: #b2b1b1;
+  width: 167rpx;
+  height: 36rpx;
+  border-radius: 16rpx;
+  color: #fff;
+  font-size: 24rpx;
+  line-height: 36rpx;
+  text-align: center;
+}
+.vip{
+    background-color: #ff9313;
+    width: 167rpx;
+    height: 36rpx;
+    border-radius: 16rpx;
+    color: #fff;
+    font-size: 24rpx;
+    line-height: 36rpx;
+    text-align: center;
 }
 
 .flower-icon {

component/myModal/myModal.wxml

@@ -13,6 +13,13 @@
         <cover-view class="paySuccess">恭喜您支付成功</cover-view>
         <cover-view class="btn" bindtap="confirm">确定</cover-view>
     </cover-view>
+    <cover-view class="box" wx:if="{{type === 'androidVIP'}}">
+        <!-- <cover-view class="text" wx:for="{{text}}"></cover-view> -->
+        <cover-image class="androidVIPImg" src="../../static/vip/crown.png"></cover-image>
+        <cover-view class="androidVIPText">快去开通VIP</cover-view>
+        <cover-view class="androidVIPText">享受更多权益吧</cover-view>
+        <cover-view class="btn" bindtap="confirm">确定</cover-view>
+    </cover-view>
     <cover-image class="close" src="../../static/groupImg/cha.png" bindtap="close" wx:if="{{isCloseShow}}">
         <!-- <cover-image src="" /> -->
     </cover-image>

component/myModal/myModal.wxss

@@ -70,4 +70,14 @@
     width: 160rpx;
     height: 160rpx;
     margin: 46rpx auto 14rpx;
+}
+.androidVIPImg{
+    width: 160rpx;
+    height: 160rpx;
+    margin: 0rpx auto 14rpx;
+}
+.androidVIPText{
+    color: #0D0D0D;
+    font-size: 40rpx;
+    text-align: center
 }

pages/social/works/works.js

@@ -37,16 +37,27 @@ Page({
         alertFlag: false,
         modalType: "text",
         noScroll: '',
-        modalText: [{
-                text: '您还不是本课程的会员',
-                type: 'bigOrange'
-            },
-            {
-                text: '您可以开团，拼团成功获得使用权',
-                type: 'normal'
-            }
-        ],
-        modalBtnText: '去开团',
+        modalText: app.globalData.isIOS ?
+            [{
+                    text: '由于相关规范，ios功能暂不可用',
+                    type: 'bigOrange'
+                },
+                {
+                    text: '联系客服解锁哦',
+                    type: 'normal'
+                }
+            ]
+            :
+            [{
+                    text: '快去开通VIP',
+                    type: 'bigOrange'
+                },
+                {
+                    text: '享受更多权益吧',
+                    type: 'normal'
+                }
+            ],
+        modalBtnText: '解锁课程',
         isModalShow: false,
         modalCloseShow: true,
         hide: true,
@@ -99,12 +110,12 @@ Page({
                 id,
                 myUid: this.uid,
                 stackSize
-            },()=>{
+            }, () => {
                 this.getWorks(this.uid, id);
             })
-            
+
         }, (error) => {
-            wx.setStorageSync('userSourseType','reading')
+            wx.setStorageSync('userSourseType', 'reading')
             // this.setData({
             //     hide: !this.data.hide,
             //     onLoadOption: option
@@ -189,8 +200,8 @@ Page({
                     productId: productId
                 })
             });
-            if(this.data.fromReading){
-                setTimeout(()=>{
+            if (this.data.fromReading) {
+                setTimeout(() => {
                     this.openShare()
                 })
             }
@@ -213,7 +224,7 @@ Page({
     },
     onShow() {
         console.log('------------------------------------------------')
-        if(this.data.myUid){
+        if (this.data.myUid) {
             this.setData({
                 replyList: [],
                 pageNo: 1,
@@ -376,6 +387,11 @@ Page({
         // } 
     },
     goToReading: function () {
+        console.log('chulaiba')
+        this.setData({
+            isModalShow: true
+        })
+        return
         const classId = this.data.classId;
         if (this.innerAudioContext && this.videoCtx) {
             this.videoCtx.pause();
@@ -388,14 +404,14 @@ Page({
                 if (res.data.success) {
                     wx.authorize({
                         scope: 'scope.record',
-                        success () {
+                        success() {
                             // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
                             console.log('成功')
                             wx.navigateTo({
                                 url: `../../main/reading/reading?id=${classId}`
                             })
                         },
-                        fail () {
+                        fail() {
                             wx.showModal({
                                 title: '录音前请打开麦克风权限',
                                 content: '点击右上角浮点...，选择：设置-麦克风，点击/打开。',

pages/vipPage/vip/vip.js

@@ -0,0 +1,67 @@
+// pages/user/walletDetails/walletDetails.js
+import Date from '../../../utils/util.js'
+import APIClient from '../../../utils/APIClient.js'
+Page({
+
+  data: {
+    buyBtnText: '立即开通',
+    price: '29',
+    originPrice: '99',
+    productId: 0,
+    modalType: 'image',
+    isModalShow: false,
+  },
+  onLoad: function (options) {
+    if (options.title) {
+      wx.setNavigationBarTitle({
+        title: VIP购买
+      });
+    }
+    APIClient.getProductData().success(res => {
+      this.setData({
+        price: res.data.data.price,
+        productId: res.data.data.id
+      })
+    }).fail(err => {
+      console.log(err);
+    });
+  },
+
+  createOrder() {
+    APIClient.postOrder(this.data.productId).success(res => {
+      this.prePayMap(res.data.data)
+    }).fail(err => {
+      console.log(err);
+    });
+  },
+  prePayMap(prePayMap) {
+    const that = this;
+    wx.requestPayment({
+      'appId': prePayMap.appId,
+      'timeStamp': prePayMap.timeStamp,
+      'nonceStr': prePayMap.nonceStr,
+      'package': prePayMap.package,
+      'signType': 'MD5',
+      'paySign': prePayMap.sign,
+      'success': function (res) {
+        that.setData({
+          isModalShow: true,
+        })
+      },
+      'fail': function (res) {
+        console.log('支付失败', res)
+        that.setData({
+          haveTapMoney: false
+        })
+      }
+    })
+  },
+  modalConfirmHandler() {
+    this.setData({
+      isModalShow: false
+    })
+    wx.redirectTo({
+      url: `/pages/index/index`
+    })
+  },
+})

pages/vipPage/vip/vip.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "myModal": "/component/myModal/myModal",
+        "myToast": "/component/myToast/myToast"
+    } 
+}

pages/vipPage/vip/vip.wxml

@@ -0,0 +1,17 @@
+<view class="vip">
+    <view class="greenHolder"></view>
+    <view class="productItem">
+        <image class="productBg" src="../../../static/vip/product_bg.png" />
+        <view class="productContent">
+            <image class="discountIcon" src="../../../static/vip/discount.png" />
+            <text class="timeLength">12个月会员</text>
+            <view class="price">
+                <text class="priceIcon">￥</text>
+                <text>{{price}}</text>
+            </view>
+            <text class="originPrice">原价{{originPrice}}元/年</text>
+        </view>
+    </view>
+    <view class="buyBtn" bindtap="createOrder">{{buyBtnText}}</view>
+    <myModal id="myModal" type="{{'androidVIP'}}" isCloseShow="{{false}}" wx:if="{{isModalShow}}" bindconfirm="modalConfirmHandler" />
+</view>

pages/vipPage/vip/vip.wxss

@@ -0,0 +1,83 @@
+.vip {}
+
+.greenHolder {
+    width: 100%;
+    height: 132rpx;
+    background: #12c962;
+    position: absolute;
+    top: 0;
+}
+
+.productItem {
+    width: 747rpx;
+    height: 387rpx;
+    margin: 40rpx auto 0;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    justify-content: space-around;
+}
+
+.productBg {
+    width: 747rpx;
+    height: 387rpx;
+    position: absolute;
+    top: 0;
+}
+
+.productContent {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    /* justify-content: space-around; */
+    align-items: center;
+}
+
+.discountIcon {
+    width: 161rpx;
+    height: 41rpx;
+    position: absolute;
+    top: 30rpx;
+    right: 36rpx;
+
+}
+
+.timeLength {
+    font-size: 60rpx;
+    color: #550a0a;
+    margin-top: 71rpx;
+
+}
+
+.price {
+    font-size: 100rpx;
+    color: #fff;
+}
+
+.priceIcon {
+    font-size: 80rpx;
+    margin-right: -2rpx;
+
+}
+
+.originPrice {
+    font-size: 36rpx;
+    color: #fff;
+    margin-top: -20rpx;
+
+}
+
+.buyBtn {
+    width: 401rpx;
+    height: 84rpx;
+    font-size: 36rpx;
+    color: #fff;
+    line-height: 84rpx;
+    text-align: center;
+    margin: 200rpx auto 0;
+    background: #ff9312;
+    border-radius: 48rpx;
+}

pages/vipPage/vipCode/vipCode.js

@@ -0,0 +1,38 @@
+// pages/user/walletDetails/walletDetails.js
+import Date from '../../../utils/util.js'
+import APIClient from '../../../utils/APIClient.js'
+Page({
+
+  data: {
+    buyBtnText: '立即开通',
+    price: '29',
+    originPrice: '99',
+    productId: 0,
+    modalType: 'image',
+    isModalShow: false,
+  },
+  onLoad: function (options) {
+    if (options.title) {
+      wx.setNavigationBarTitle({
+        title: '激活码激活'
+      });
+    }
+  },
+
+  activeVIP() {
+    // APIClient.postOrder(this.data.productId).success(res => {
+    //   this.prePayMap(res.data.data)
+    // }).fail(err => {
+    //   console.log(err);
+    // });
+  },
+
+  modalConfirmHandler() {
+    this.setData({
+      isModalShow: false
+    })
+    wx.redirectTo({
+      url: `/pages/index/index`
+    })
+  },
+})

pages/vipPage/vipCode/vipCode.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "myModal": "/component/myModal/myModal",
+        "myToast": "/component/myToast/myToast"
+    } 
+}

pages/vipPage/vipCode/vipCode.wxml

@@ -0,0 +1,6 @@
+<view class="vipCode">
+    <view class="greenHolder"></view>
+    <input  maxlength="10" class='code' type='number' placeholder='在此处输入或粘贴激活码' ></input>
+    <view class="buyBtn" bindtap="activeVIP">{{buyBtnText}}</view>
+    <myModal id="myModal" type="{{'androidVIP'}}" isCloseShow="{{false}}" wx:if="{{isModalShow}}" bindconfirm="modalConfirmHandler" />
+</view>

pages/vipPage/vipCode/vipCode.wxss

@@ -0,0 +1,43 @@
+.vipCode {
+    background: #edf0f3;
+    width: 100%;
+    height: 100%;
+}
+
+.greenHolder {
+    width: 100%;
+    height: 132rpx;
+    background: #12c962;
+    position: absolute;
+    top: 0;
+}
+
+.code {
+    width: 704rpx;
+    height: 144rpx;
+    border-radius: 40rpx;
+    background: #fff;
+    margin: 60rpx auto 0;
+    position: relative;
+    padding-left: 135rpx;
+    box-sizing: border-box;
+
+}
+
+.code ::placeholder {
+    color: #555;
+    font-size: 30rpx;
+    text-indent: 135rpx;
+}
+
+.buyBtn {
+    width: 401rpx;
+    height: 84rpx;
+    font-size: 36rpx;
+    color: #fff;
+    line-height: 84rpx;
+    text-align: center;
+    margin: 200rpx auto 0;
+    background: #ff9312;
+    border-radius: 48rpx;
+}

utils/APIClient.js

@@ -486,5 +486,22 @@ module.exports = {
     return request.getInstance().header({
       uid: wx.getStorageSync('uid')
     }).url(url).send();
+  },
+  // 获取产品信息
+  getProductData(){
+    let url = getBaseUrl('wx/product');
+    return request.getInstance().header({
+      uid: wx.getStorageSync('uid')
+    }).url(url).send();
+  },
+  // 创建订单
+  postOrder(productId){
+    let url = getBaseUrl('wx/order');
+    return request.getInstance().header({
+      uid: wx.getStorageSync('uid'),
+      'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
+    }).data({
+      productId
+    }).url(url).method('POST').send();
   }
 }

utils/const.js

@@ -2,8 +2,8 @@
 module.exports = {
   // productApi: 'https://reader.lingjiao.cn/readerProduct/',
   // productApi: 'https://readertest.lingjiao.cn/readerProduct/',
-  productApi:  'https://reader-efun.lingjiao.cn/readerProduct/',
+  productApi:  'https://readertest.lingjiao.cn:442/readerProduct/',
   // baseApi: 'https://reader.lingjiao.cn/readerBase/'
   // baseApi: 'https://readertest.lingjiao.cn:442/readerBase/'
-  baseApi: 'https://reader-efun.lingjiao.cn/readerBase/'
+  baseApi: 'https://readertest.lingjiao.cn:442/readerBase/'
 }