微信小程序云开发项目实战之商城开发日记 04

今天是愉快开发商城项目的第四天了，相信如果大家跟着我能把前两天的前端内容敲完，相信你是有比较大的收货的。

今天的内容是完成购物车的前端代码。

购物车的设计还是比较常规的UI，展示商品的信息，提供选中按钮，提供加减按钮，提供结算按钮，提供一键清空按钮，并在界面底部实时展示目前的购物车已选中的商品的总价。

首先是商品的信息卡片，依然是以flex为核心的布局方式。

<view class="body">

 <view class="product">

  <checkbox-group bindchange="checked" class="left">

   <checkbox ></checkbox>

  </checkbox-group>

  <image src="../../images/apple.png"></image>

  <view class="middle">

   <text>苹果</text>

   <text>进口红富士，又大又甜</text>

   <text>￥6</text>

  </view>

  <view class="right">

   <text>-</text>

   <text>1</text>

   <text>+</text>

  </view>

 </view>

</view>

page {

 background-color: #f3f3f3;

 height: 100%;

}

.product {

 display: flex;

 flex-direction: row;

 width: 100%;

 align-items: center;

 position: relative;

 margin-bottom: 25rpx;

 background-color: #fff;

 padding-bottom: 20rpx;

}

.middle {

 display: flex;

 flex-direction: column;

 margin-left: 40rpx;

 margin-top: 20rpx;

 font-size: 28rpx;

}

.middle :nth-child(1){

 font-weight: bold;

 margin-bottom: 10rpx;

}

.middle :nth-last-child(2){

 color: gray;

 width: 220rpx;

 font-size: 24rpx;

 margin-bottom: 10rpx;

}

.middle :nth-child(3){

 color: red;

}

.product > .left {

 margin-left: 50rpx;

}

.product > image {

 width: 100rpx;

 height: 100rpx;

 padding-left: 40rpx;

}

.product > .right {

 display: flex;

 flex-direction: row;

 border:1rpx solid black;

 font-weight: bold;

 width: 180rpx;

 height:60rpx; 

 line-height: 60rpx;

 text-align: center;

 position: absolute;

 bottom: 20rpx;

 right: 10rpx;

}

.product > .right :nth-child(1){

 height: 60rpx ;

 width: 60rpx;

 border-right:1rpx solid black

}

.product > .right :nth-last-child(2){

 height: 60rpx;

 width: 60rpx;

 border-right: 1rpx solid black;

}

.product > .right :nth-child(3) {

 height: 60rpx;

 width: 60rpx;

}

效果：

基本是这样的样式，我们现在只是写前端内容，所以这个选中和数量加减没效果的。

而且我只写了一组数据，如果大家想多加几组的话，参照前两天的写法，利用wx：for渲染。

接下来写全部删除按钮和底部的内容。

<view class="button">清空购物车</view>

<view class="bottom">

 <view class="bottom_left">

  <text>￥999</text>

 </view>

 <view class="bottom_right">去结算</view>

</view>

.button {

 width: 100rpx;

 padding: 10rpx;

 font-size: 20rpx;

 margin: 0 auto;

 border: 1rpx solid gray;

 margin-top: 30rpx;

}

.bottom {

 display: flex;

 flex-direction: row;

 width: 100%;

 position: fixed;

 bottom: 0;

 height: 100rpx;

 background-color: white;

}

.bottom_left {

 width: 70%;

 line-height: 100rpx;

}

.bottom_left > text {

 text-align: center;

 margin-left: 50rpx;

 color: red;

 font-size: 40rpx;

}

.bottom_right {

 width: 30%;

 text-align: center;

 line-height: 100rpx;

 color: white;

 background-color: green;

}

最终效果：

基本的框架是这样的，大家可以自己多做几组数据，然后按照自己的设计完成布局，每个人都有自己的布局方式，我只是给大家提供一个完成代码的思路。
然后再强调一下，目前我们都是在完成页面的前端内容，不涉及任何后端数据交互，所以我们写的都是死数据，并且尽量不写JS的内容，只写样式。

点赞、关注、收藏都是对作者莫大的鼓励，谢谢！

有任何问题可以联系QQ：505417246

零基础入门微信小程序云开发QQ群：1073011570

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs等实战学习资料