购物车完成
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…
Reference in New Issue
Block a user