购物车完成

This commit is contained in:
asd 2019-12-13 11:59:11 +08:00
parent 3bc53a2f29
commit 98859bff90
10 changed files with 279 additions and 1 deletions

View File

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

View File

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

View File

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

View 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>

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

View 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 () {
}
})

View File

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

View 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>

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

View File

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