开发学习卡页面

pages/commodity/index.js

@@ -5,62 +5,20 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    checkedId: '1'
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
   onLoad(options) {
 
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
   onShow() {
 
   },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+  checked({
+    currentTarget
+  }) {
+    console.log(currentTarget);
+    this.setData({
+      checkedId: currentTarget.dataset.id
+    })
   }
 })

pages/commodity/index.less

@@ -4,6 +4,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 34rpx 21rpx;
+    background-color: white;
 
     .vipBox {
       position: relative;
@@ -36,10 +37,9 @@
   .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;
+    box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
   }
 }

pages/commodity/index.wxml

@@ -1,13 +1,15 @@
 <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 class="vipBox" style="background-image: url(http://reader-wx.ai160.com/images/reader/v3/learn/svip.png);"
+      bindtap="checked" data-id="1">
+      <view class="selectBtn {{checkedId=='1'?'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 class="vipBox" style="background-image: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip.png);"
+      bindtap="checked" data-id="2">
+      <view class="selectBtn {{checkedId=='2'?'checked':''}}">✔</view>
     </view>
   </view>
   <view class="introduce">
-    
+
   </view>
 </view>

pages/commodity/index.wxss

@@ -3,6 +3,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 34rpx 21rpx;
+  background-color: white;
 }
 .commodity .cardBox .vipBox {
   position: relative;
@@ -31,9 +32,8 @@
 .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;
+  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
 }