开发学习卡页面

app.json

@@ -23,6 +23,7 @@
     "pages/editUser/index",
     "pages/notice/index",
     "pages/friend/index",
+    "pages/commodity/index",
     "pages/searchFriend/index"
   ],
   "tabBar": {
@@ -36,10 +37,10 @@
     }, {
       "pagePath": "pages/works/index",
       "text": "作品"
-    },  {
+    }, {
       "pagePath": "pages/message/index",
       "text": "消息"
-    },{
+    }, {
       "pagePath": "pages/my/index",
       "text": "我的"
     }]

pages/commodity/index.js

@@ -0,0 +1,66 @@
+// pages/commodity/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/commodity/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "学习卡"
+}

pages/commodity/index.less

@@ -0,0 +1,45 @@
+.commodity {
+  .cardBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 34rpx 21rpx;
+
+    .vipBox {
+      position: relative;
+      width: 340rpx;
+      height: 198rpx;
+      background-size: cover;
+      -webkit-box-reflect: below 0rpx linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.24));
+      -webkit-box-reflect: below 4rpx -webkit-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.24));
+    }
+
+    .selectBtn {
+      position: absolute;
+      bottom: 10rpx;
+      right: 10rpx;
+      width: 52rpx;
+      height: 50rpx;
+      line-height: 50rpx;
+      text-align: center;
+      border-radius: 50%;
+      color: white;
+      font-size: 34rpx;
+      background-color: white;
+    }
+
+    .checked {
+      background-color: #30C866;
+    }
+  }
+
+  .introduce {
+    position: relative;
+    z-index: 2;
+    margin-top: 10rpx;
+    width: 100%;
+    height: 300rpx;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px;
+    background-color: white;
+  }
+}

pages/commodity/index.wxml

@@ -0,0 +1,13 @@
+<view class="commodity">
+  <view class="cardBox">
+    <view class="vipBox" style="background-image: url(http://reader-wx.ai160.com/images/reader/v3/learn/svip.png);">
+      <view class="selectBtn checked">✔</view>
+    </view>
+    <view class="vipBox" style="background-image: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip.png);">
+      <view class="selectBtn"></view>
+    </view>
+  </view>
+  <view class="introduce">
+    
+  </view>
+</view>

pages/commodity/index.wxss

@@ -0,0 +1,39 @@
+.commodity .cardBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 34rpx 21rpx;
+}
+.commodity .cardBox .vipBox {
+  position: relative;
+  width: 340rpx;
+  height: 198rpx;
+  background-size: cover;
+  -webkit-box-reflect: below 0rpx linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.24));
+  -webkit-box-reflect: below 4rpx -webkit-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.24));
+}
+.commodity .cardBox .selectBtn {
+  position: absolute;
+  bottom: 10rpx;
+  right: 10rpx;
+  width: 52rpx;
+  height: 50rpx;
+  line-height: 50rpx;
+  text-align: center;
+  border-radius: 50%;
+  color: white;
+  font-size: 34rpx;
+  background-color: white;
+}
+.commodity .cardBox .checked {
+  background-color: #30C866;
+}
+.commodity .introduce {
+  position: relative;
+  z-index: 2;
+  margin-top: 10rpx;
+  width: 100%;
+  height: 300rpx;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px;
+  background-color: white;
+}

pages/my/index.wxml

@@ -103,7 +103,7 @@
   </view> -->
   <view class="payBox">
     <view class="copywriting">开通<text>SVIP</text>/<text>VIP</text> 会员权益</view>
-    <view class="goPay">
+    <view class="goPay" bindtap='jump' data-url="/pages/commodity/index">
       立即开通
     </view>
   </view>