购物车完成
This commit is contained in:
		
							parent
							
								
									3bc53a2f29
								
							
						
					
					
						commit
						98859bff90
					
				
							
								
								
									
										1
									
								
								app.json
									
									
									
									
									
								
							
							
						
						
									
										1
									
								
								app.json
									
									
									
									
									
								
							@ -1,5 +1,6 @@
 | 
			
		||||
{
 | 
			
		||||
  "pages": [
 | 
			
		||||
    "pages/shopping/shopping",
 | 
			
		||||
    "pages/index/index",
 | 
			
		||||
    "pages/logs/logs"
 | 
			
		||||
  ],
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										26
									
								
								components/shopping/shoppingitem/shoppingitem.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										26
									
								
								components/shopping/shoppingitem/shoppingitem.js
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,26 @@
 | 
			
		||||
// components/shopping/shoppingitem/shoppingitem.js
 | 
			
		||||
Component({
 | 
			
		||||
    /**
 | 
			
		||||
     * 组件的属性列表
 | 
			
		||||
     */
 | 
			
		||||
    properties: {
 | 
			
		||||
        shospname: String,
 | 
			
		||||
        shopdesc: String,
 | 
			
		||||
        price: Number,
 | 
			
		||||
        pic: String
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * 组件的初始数据
 | 
			
		||||
     */
 | 
			
		||||
    data: {
 | 
			
		||||
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * 组件的方法列表
 | 
			
		||||
     */
 | 
			
		||||
    methods: {
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
})
 | 
			
		||||
							
								
								
									
										4
									
								
								components/shopping/shoppingitem/shoppingitem.json
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										4
									
								
								components/shopping/shoppingitem/shoppingitem.json
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,4 @@
 | 
			
		||||
{
 | 
			
		||||
  "component": true,
 | 
			
		||||
  "usingComponents": {}
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										16
									
								
								components/shopping/shoppingitem/shoppingitem.wxml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										16
									
								
								components/shopping/shoppingitem/shoppingitem.wxml
									
									
									
									
									
										Normal file
									
								
							@ -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>
 | 
			
		||||
							
								
								
									
										85
									
								
								components/shopping/shoppingitem/shoppingitem.wxss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										85
									
								
								components/shopping/shoppingitem/shoppingitem.wxss
									
									
									
									
									
										Normal file
									
								
							@ -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;
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										66
									
								
								pages/shopping/shopping.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										66
									
								
								pages/shopping/shopping.js
									
									
									
									
									
										Normal file
									
								
							@ -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 () {
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
							
								
								
									
										7
									
								
								pages/shopping/shopping.json
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										7
									
								
								pages/shopping/shopping.json
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,7 @@
 | 
			
		||||
{
 | 
			
		||||
 | 
			
		||||
  "usingComponents": {
 | 
			
		||||
    "shopping-item":"/components/shopping/shoppingitem/shoppingitem"
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										25
									
								
								pages/shopping/shopping.wxml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										25
									
								
								pages/shopping/shopping.wxml
									
									
									
									
									
										Normal file
									
								
							@ -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>
 | 
			
		||||
							
								
								
									
										48
									
								
								pages/shopping/shopping.wxss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										48
									
								
								pages/shopping/shopping.wxss
									
									
									
									
									
										Normal file
									
								
							@ -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;
 | 
			
		||||
    }
 | 
			
		||||
@ -16,7 +16,7 @@
 | 
			
		||||
	},
 | 
			
		||||
	"compileType": "miniprogram",
 | 
			
		||||
	"libVersion": "2.9.4",
 | 
			
		||||
	"appid": "wx932dd04d3a7e7341",
 | 
			
		||||
	"appid": "wx5766b7aac7c938b3",
 | 
			
		||||
	"projectname": "deguodaigou",
 | 
			
		||||
	"debugOptions": {
 | 
			
		||||
		"hidedInDevtools": []
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user