购物车完成

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/shopping/shopping",
     "pages/index/index",
     "pages/logs/logs"
   ],

components/shopping/shoppingitem/shoppingitem.js

@@ -0,0 +1,26 @@
+// components/shopping/shoppingitem/shoppingitem.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        shospname: String,
+        shopdesc: String,
+        price: Number,
+        pic: String
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

components/shopping/shoppingitem/shoppingitem.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/shopping/shoppingitem/shoppingitem.wxml

@@ -0,0 +1,16 @@
+<view class="shoppingitem">
+    <view class="select"></view>
+    <view class="pic">
+        <image></image>
+    </view>
+    <view class="shopinfo">
+        <view class="shopname">{{shopname}}</view>
+        <view class="shopdesc">{{shopdesc}}</view>
+        <view class="price">${{price}}</view>
+    </view>
+    <view class="numberset">
+        <view class="reverse"></view>
+        <view class="num">5</view>
+        <view class="add"></view>
+    </view>
+</view>

components/shopping/shoppingitem/shoppingitem.wxss

@@ -0,0 +1,85 @@
+.shoppingitem {
+    width: 639rpx;
+    height: 186rpx;
+    display: flex;
+    justify-content: space-between;
+}
+
+.select {
+    width: 26rpx;
+    height: 26rpx;
+    background: rgba(234, 234, 234, 1);
+    border-radius: 50%;
+    margin: auto 0;
+}
+
+.pic {
+    /* width: 222rpx;
+    height: 222rpx; */
+    width: 186rpx;
+    height: 186rpx;
+    background-color: bisque;
+}
+
+.pic>image {
+    width: 100%;
+    height: 100%;
+}
+
+.shopinfo {
+    width: 186rpx;
+}
+
+.shopname {
+    color: #333333;
+    font-size: 26rpx;
+    font-weight: bold;
+    margin-bottom: 18rpx;
+    margin-top: 35rpx;
+}
+
+.shopdesc {
+    color: #666666;
+    font-size: 22rpx;
+    margin-bottom: 39rpx;
+}
+
+.price {
+    color: #D1D1D1;
+    font-size: 32rpx;
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+.numberset {
+    width: 85rpx;
+    height: 186rpx;
+    border: 1px solid rgba(233, 233, 233, 1);
+    border-radius: 10px;
+    margin-top: 11rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.reverse {
+    width: 19rpx;
+    height: 3rpx;
+    background-color: #97DFB4;
+    margin: 0 auto;
+    margin-top: 25rpx;
+}
+
+.num {
+    color: #242424;
+    font-size: 30rpx;
+    text-align: center;
+}
+
+.add {
+    width: 23rpx;
+    height: 23rpx;
+    background-color: #242424;
+    margin: 0 auto;
+    margin-bottom: 17rpx;
+}

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;
+    }

project.config.json

@@ -16,7 +16,7 @@
 	},
 	"compileType": "miniprogram",
 	"libVersion": "2.9.4",
-	"appid": "wx932dd04d3a7e7341",
+	"appid": "wx5766b7aac7c938b3",
 	"projectname": "deguodaigou",
 	"debugOptions": {
 		"hidedInDevtools": []