开发页面

pages/commodity/index.js

@@ -20,5 +20,65 @@ Page({
     this.setData({
       checkedId: currentTarget.dataset.id
     })
-  }
+  },
+  async toBuy({
+    currentTarget
+  }) {
+    let productId = currentTarget.dataset.type
+    wx.showLoading({
+      title: '提交中',
+      mask: true
+    })
+    let res = ''
+    if (productId == '1001') {
+      res = await buyVip({
+        productId
+      }).finally(() => {
+        wx.hideLoading()
+      })
+    } else if (productId == '1010') {
+      res = await buyNum({
+        productId
+      }).finally(() => {
+        wx.hideLoading()
+      })
+    } else {
+      wx.hideLoading()
+      wx.showToast({
+        title: "支付失败,请重试",
+        icon: "none",
+        duration: 3000
+      })
+    }
+    let {
+      timeStamp,
+      nonceStr,
+      signType,
+      paySign
+    } = res
+    // package保留字
+    wx.requestPayment({
+      timeStamp,
+      nonceStr,
+      package: res.package,
+      signType,
+      paySign,
+      success(res) {
+        wx.showToast({
+          title: "支付成功",
+          duration: 2500
+        })
+        setTimeout(() => {
+          this.setUserInfo()
+        }, 1500)
+      },
+      fail(res) {
+        wx.showToast({
+          title: "支付失败",
+          icon: "none",
+          duration: 3000
+        })
+      }
+    })
+  },
 })

pages/commodity/index.less

@@ -35,11 +35,88 @@
   }
 
   .introduce {
+    margin: 20rpx 0;
     position: relative;
     z-index: 2;
     width: 100%;
-    height: 300rpx;
+    padding: 0rpx 20rpx 30rpx;
     background-color: white;
-    box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
+    box-shadow: 0 -31rpx 30rpx rgba(255, 255, 255, 1);
+
+    .title {
+      margin-bottom: 20rpx;
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+
+    .price {
+      font-size: 34rpx;
+      font-weight: bold;
+      color: #FF3B00;
+    }
+  }
+
+  .entry {
+    margin-top: 10rpx;
+    padding: 36rpx 0rpx;
+    display: flex;
+    align-items: center;
+    background-color: white;
+    font-size: 30rpx;
+
+    .title {
+      width: 140rpx;
+      text-align: center;
+      color: #666666;
+    }
+
+    .detaild {
+      font-weight: bold;
+    }
+  }
+
+  .remind {
+    padding: 25rpx 36rpx;
+
+    .title {
+      font-weight: bold;
+      color: #212122;
+    }
+
+    .li {
+      margin-top: 20rpx;
+      font-size: 28rpx;
+    }
+  }
+
+  .payBox {
+    position: fixed;
+    width: 100%;
+    bottom: 0px;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 22rpx 36rpx 30rpx;
+    box-sizing: border-box;
+    background-color: white;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
+
+    .left {
+      font-size: 32rpx;
+
+      text {
+        font-size: 36rpx;
+        color: #FF3B00;
+      }
+    }
+
+    .buyBtn {
+      padding: 14rpx 100rpx;
+      background-color: #FF8E20;
+      border-radius: 50rpx;
+      color: white;
+      font-size: 36rpx;
+    }
   }
 }

pages/commodity/index.wxml

@@ -10,6 +10,33 @@
     </view>
   </view>
   <view class="introduce">
-
+    <view class="title">朗读小咖秀 SVIP终身学习卡</view>
+    <view class="price">￥299.00</view>
+  </view>
+  <view class="entry">
+    <view class="title">运费</view>
+    <view class="detaild">无需配送</view>
+  </view>
+  <view class="entry">
+    <view class="title">服务</view>
+    <view class="detaild">此商品不支持申请退款</view>
+  </view>
+  <view class="entry">
+    <view class="title">已选</view>
+    <view class="detaild">SVIP学习卡</view>
+  </view>
+  <view class="remind">
+    <view class="title">购买须知</view>
+    <view class="li">1、支付成功后将自动给您添加权限。同时会给您推送一张学习卡。</view>
+    <view class="li">2、查看使用权限，在“我的”会员栏目查看使用到期日。</view>
+    <view class="li">3、任何问题随时联系官方客服</view>
+  </view>
+  <view class="payBox">
+    <view class="left">
+      合计 <text>￥299.00</text>
+    </view>
+    <view class="buyBtn" bindtap="toBuy">
+      立即购买
+    </view>
   </view>
 </view>

pages/commodity/index.wxss

@@ -30,10 +30,75 @@
   background-color: #30C866;
 }
 .commodity .introduce {
+  margin: 20rpx 0;
   position: relative;
   z-index: 2;
   width: 100%;
-  height: 300rpx;
+  padding: 0rpx 20rpx 30rpx;
   background-color: white;
-  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -31rpx 30rpx #ffffff;
+}
+.commodity .introduce .title {
+  margin-bottom: 20rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.commodity .introduce .price {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #FF3B00;
+}
+.commodity .entry {
+  margin-top: 10rpx;
+  padding: 36rpx 0rpx;
+  display: flex;
+  align-items: center;
+  background-color: white;
+  font-size: 30rpx;
+}
+.commodity .entry .title {
+  width: 140rpx;
+  text-align: center;
+  color: #666666;
+}
+.commodity .entry .detaild {
+  font-weight: bold;
+}
+.commodity .remind {
+  padding: 25rpx 36rpx;
+}
+.commodity .remind .title {
+  font-weight: bold;
+  color: #212122;
+}
+.commodity .remind .li {
+  margin-top: 20rpx;
+  font-size: 28rpx;
+}
+.commodity .payBox {
+  position: fixed;
+  width: 100%;
+  bottom: 0px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22rpx 36rpx 30rpx;
+  box-sizing: border-box;
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
+}
+.commodity .payBox .left {
+  font-size: 32rpx;
+}
+.commodity .payBox .left text {
+  font-size: 36rpx;
+  color: #FF3B00;
+}
+.commodity .payBox .buyBtn {
+  padding: 14rpx 100rpx;
+  background-color: #FF8E20;
+  border-radius: 50rpx;
+  color: white;
+  font-size: 36rpx;
 }