新增了充值页面

pages.json

@@ -131,6 +131,15 @@
 		{
 			"root": "pagesme",
 			"pages": [
+				{
+					"path": "me/recharge",
+					"style": {
+						"navigationBarTitleText": "我的余额",
+						"backgroundColor": "#F4F5F9",
+						"backgroundColorTop": "#F4F5F9",
+						"navigationBarBackgroundColor": "#F4F5F9"
+					}
+				},
 				{
 					"path": "me/likeList",
 					"style": {

pages/tab/my.vue

@@ -322,7 +322,9 @@ import {setUserProfile} from '../../api/login/index'
 			},
 			whether(i) {
 				if (i == 0) {
-					this.tipMsg = "开源版暂未开放，敬请期待！如需旗舰版，可联系作者微信（MMRWXM）咨询";
+          uni.navigateTo({
+            url: "/pagesme/me/recharge"
+          })
 				} else if (i == 1) {
 					this.updateInformation();
 				} else if (i == 3) {

pagesme/me/recharge.vue

+<template>
+  <view>
+    <view class="money">
+      <text>余额：</text>
+      <text>{{parseFloat(balance).toFixed(2)}}币</text>
+    </view>
+    <view class="recharge">
+      <view>充值</view>
+      <view class="list">
+        <view v-for="(item, index) in 6" :key="index" :class="{active: activeIndex===index}"
+              @click="clickItem(index, item)">
+          <view>{{index+1}}00币</view>
+          <view>￥{{index+1}}00</view>
+        </view>
+      </view>
+    </view>
+    <view class="desc">
+      <view class="desc1">充值说明：</view>
+      <view class="desc2">
+        1.在IOS设备的APP要进行充值后，使用虚拟币消费。<br>
+        2.充值后不能在非IOS设备使用，与安卓版和网站余额不通用。<br>
+        3.充值后没有使用期限，但不可提现、退换、转让和申请发票。<br>
+        4.如遇无法充值、充值失败等问题，可关注[xxx]公众号，联系我们解决。<br>
+      </view>
+    </view>
+    <view class="bottom">
+      <button class="btn" :loading="loading" @click="iosPayHandler">立即充值</button>
+    </view>
+  </view>
+</template>
+<script>
+let iapChannel = null // 苹果内部支付渠道
+export default {
+  data() {
+    return {
+      activeIndex: 0,
+      loading: false, // 是否充值中
+      balance: 0, // 余额
+      moneyList: [], // 充值列表展示金额
+      price: 0, // 支付金额
+      courseIds: [], // 支付的课程ids
+      applePrice: 30, // ios充值金额
+    }
+  },
+  onLoad: function(option) {
+    // // 获取支付金额
+    // if (option.params) {
+    //   const params = JSON.parse(option.params)
+    //   this.price = params.price
+    //   this.courseIds = params.courseIds
+    // }
+    // // 查询余额
+    // this.loadData()
+    // // 获取apple支付渠道实例
+    // plus.payment.getChannels((channels) => {
+    //   console.log("获取到channel" + JSON.stringify(channels))
+    //   for (var i in channels) {
+    //     var channel = channels[i];
+    //     if (channel.id === 'appleiap') {
+    //       iapChannel = channel;
+    //       this.requestOrder();
+    //     }
+    //   }
+    //   if (!iapChannel) {
+    //     this.errorMsg()
+    //   }
+    // }, (error) => {
+    //   this.errorMsg()
+    // });
+  },
+  methods: {
+    requestOrder() {
+      uni.showLoading({
+        title: '检测支付环境...'
+      })
+      //必须调用此方法向Appstore请求有效的商品详情,才能进行 iap 支付，
+      iapChannel.requestOrder(this.moneyList, (orderList) => {
+        console.log('requestOrder success666: ' + JSON.stringify(orderList));
+        uni.hideLoading();
+      }, (e) => {
+        console.log('requestOrder failed: ' + JSON.stringify(e));
+        uni.hideLoading();
+        this.errorMsg()
+      });
+    },
+    iosPayHandler() {
+      this.loading = true;
+      uni.requestPayment({
+        provider: 'appleiap',
+        orderInfo: {
+          productid: this.applePrice // 商品id
+        },
+        success: (e) => {
+          console.log("success", e);
+          uni.showToast({
+            title: "支付成功!"
+          })
+          // 调用接口，立即扣款购买商品
+        },
+        fail: (e) => {
+          console.log("fail", e);
+          uni.showModal({
+            content: "支付失败,原因为: " + e.errMsg,
+            showCancel: false
+          })
+        },
+        complete: () => {
+          this.loading = false;
+        }
+      })
+    },
+    errorMsg() {
+      uni.showModal({
+        content: "暂不支持苹果 iap 支付",
+        showCancel: false
+      })
+    },
+    clickItem(index, item) {
+      this.activeIndex = index
+      this.applePrice = item
+    },
+    async loadData() {
+
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.money {
+  height: 288rpx;
+  background-color: cornflowerblue;
+  color: #FFFFFF;
+  font-size: 88rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text:first-child {
+    color: #e7e4e9;
+    font-size: 30rpx;
+  }
+}
+
+.recharge {
+  margin: 20rpx 0 0 20rpx;
+  color: #999;
+  font-size: 30rpx;
+
+  .list {
+    margin-top: 20rpx;
+    text-align: center;
+
+    >view {
+      float: left;
+      width: 225rpx;
+      margin-right: 10rpx;
+      margin-bottom: 15rpx;
+      background-color: #fff;
+      border-radius: 10rpx;
+      padding: 20rpx 0;
+      border: 1px solid grey;
+      flex-wrap: wrap;
+
+      view:first-child {
+        color: red;
+        font-size: 36rpx;
+      }
+    }
+  }
+}
+
+.active {
+  box-shadow: 0 0 0 .5px red;
+}
+
+.desc {
+  // 清除浮动
+  clear: both;
+  margin-left: 20rpx;
+  margin-right: 20rpx;
+  font-size: 30rpx;
+  line-height: 45rpx;
+  color: #6e6d70;
+  .desc1 {
+    padding-top: 20rpx;
+    padding-bottom: 20rpx;
+    font-weight: bold;
+  }
+}
+
+/* 底部 */
+.bottom {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 50rpx;
+  height: 100rpx;
+  background-color: #FFFFFF;
+  border-top: 1px solid #F1F1F1;
+}
+
+.btn {
+  width: 700rpx;
+  background-color: cornflowerblue;
+  color: #fff;
+  border-radius: 50rpx;
+  line-height: 80rpx;
+  font-size: 30rpx;
+
+  &::after {
+    // 加载中时，隐藏边框
+    border: none;
+  }
+}
+</style>