购物车完成

pages/shopping/shopping.js

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

pages/shopping/shopping.json

@@ -0,0 +1,7 @@
+{
+
+  "usingComponents": {
+    "shopping-item":"/components/shopping/shoppingitem/shoppingitem"
+  }
+
+}

pages/shopping/shopping.wxml

@@ -0,0 +1,25 @@
+<view class="shopping">
+   <view class="item">
+      <shopping-item shopname="J`adore - Dior" shopdesc="30支   1.30kg" price="61.78"></shopping-item>
+   </view>
+   <view class="item">
+      <shopping-item shopname="J`adore - Dior" shopdesc="30支   1.30kg" price="61.78"></shopping-item>
+   </view>
+   <view class="item">
+      <shopping-item shopname="J`adore - Dior" shopdesc="30支   1.30kg" price="61.78"></shopping-item>
+   </view>
+   <view class="item">
+      <shopping-item shopname="J`adore - Dior" shopdesc="30支   1.30kg" price="61.78"></shopping-item>
+   </view>
+   <view class="bottom">
+      <view class="left">
+         <view class="select"></view>
+         <text class="selectall">全选</text>
+         <text class="pri">$0.00</text>
+      </view>
+      <view class="right">
+         <text class="del">删除</text>
+         <text class="sub">结算</text>
+      </view>
+   </view>
+</view>

pages/shopping/shopping.wxss

@@ -0,0 +1,48 @@
+    .item {
+        height: 186rpx;
+        margin-left: 46rpx;
+        margin-top: 59rpx;
+    }
+    
+    .bottom {
+        width: 100%;
+        height: 98rpx;
+        position: fixed;
+        bottom: 0;
+        background: linear-gradient(2deg, rgba(250, 250, 250, 0.94), rgba(255, 255, 255, 0.94));
+        display: flex;
+        justify-content: space-between;
+        font-size: 28rpx;
+        line-height: 98rpx;
+    }
+    
+    .left {
+        display: flex;
+        /* line-height: 26rpx; */
+    }
+    
+    .select {
+        width: 26rpx;
+        height: 26rpx;
+        background: rgba(234, 234, 234, 1);
+        border-radius: 50%;
+        margin: auto 0;
+        margin-left: 46rpx;
+        margin-right: 24rpx;
+    }
+    
+    .pri {
+        color: #E0C79D;
+        font-size: 26rpx;
+        margin-left: 19rpx;
+    }
+    
+    .right {
+        color: #BBBBBB;
+        margin-right: 31rpx;
+    }
+    
+    .sub {
+        margin-left: 30rpx;
+        color: #4CC97D;
+    }