微信小程序：完善购物车功能，购物车主页面展示，详细页面展示效果

一、效果图 

1、主页面

根据物品信息进行菜单分类，点击单项购物车图标添加至购物车，记录总购物车数量

2、购物车详情页

根据主页面选择的项，根据后台查询展示到页面，可进行多选，数量加减等

二、代码

1、主页面

页面展示顶部导航栏，侧边导航栏，以及导航栏执行下的内容，购物车的点击事件，内容单项的点击数量汇总到顶部总购物车总数量

wxml代码

<view class="main"><view class="topinfo"><view class="topinfo_view flex center"><view class="topinfo_model1 flex center"><view class="topinfo_model1_search"><image src="{{search}}"></image><input type="text" placeholder="请输入" placeholder-style="color:#CCCCCC" bindconfirm="search_info" /></view></view><view class="topinfo_model2 flex center" ><view class="topinfo_model2_circle flex center" bind:tap="shoppingClick"><image src="{{ShoppingCarGreen}}" /><view class="red_single1 flex center" wx:if="{{shoppingAllCount > 0}}">{{shoppingAllCount}}</view></view></view></view></view><view class="menu"><view class="top-menu flex between"><block wx:for="{{Menus}}" wx:key="index"><view class="topmenu-item flex center {{currentTopMenu === item.topname ? 'topactive' :''}}" data-menu="{{item.topname}}" bind:tap="onTopMenuClick">{{item.topname}}</view></block></view><view class="top-content flex center" wx:if="{{!linenone}}"><view class="left-menu"><block wx:for="{{LeftMenus}}" wx:key="index"><view class="left-menu-item flex center {{currentLeftMenu === item.name ? 'leftactive' : ''}}" bindtap="onLeftMenuClick" data-menu="{{item.name}}"><view class="left {{currentLeftMenu === item.name ? 'leftactivegreen' : ''}}"></view><text>{{item.name}}</text></view></block></view><view class="right-content"><block wx:for="{{RightInfo}}" wx:key="index"><view class="right-content-view flex"><view class="content-img flex center"><image src="{{item.img}}" mode="aspectFill"/></view><view class="content-info"><view class="cinfo-line flex between"><text>标题1：{{item.info1}}</text><text>标题2：{{item.info2}}</text></view><view class="cinfo-line flex between"><text>标题3：{{item.info3}}</text><text>标题4：{{item.info4}}</text></view><view class="cinfo-line flex between">标题5：{{item.info5}}</view><view class="cinfo-line flex flex-end"><view class="green-btn flex center" data-id="{{item.id}}" bind:tap="singleSel"><image src="{{ShoppingCarWhite}}" mode=""/><view class="red_single flex center" wx:if="{{item.isshopping}}">{{item.shoppingCount}}</view></view></view></view></view></block></view></view><view wx:else class="none">暂无数据</view></view>
</view>

wxss代码

主要采用flex布局进行布局

page {background-color: #f5f5f5;font-size:95%;
}.flex {display: flex;
}.center {justify-content: center;align-items: center;
}
.left{position: absolute;left:0;
}
.flex-end{justify-content: flex-end;
}
.between {justify-content: space-between;
}.none {text-align: center;margin-top: 50rpx;color: #969292;
}
/* 顶行搜索栏+购物车 */
/* 搜索框 */
.topinfo_view {padding: 4% 0 4% 0;
}.topinfo_model1 {height: 60rpx;width: 85%;
}.topinfo_model1_search {display: flex;align-items: center;height: 100%;width: 90%;border-radius: 10px;padding: 0 20rpx;background-color: #fff;
}.topinfo_model1 image {height: 40rpx;width: 45rpx;margin-right: 10px;
}.topinfo_view input {width: 100%;
}/* 购物车 */
.topinfo_model2 {width: 12%;height: 60rpx;
}.topinfo_model2_circle {width: 60rpx;height: 60rpx;background-color: #fff;border-radius: 50%;position:relative;
}.topinfo_model2_circle image {width: 40rpx;height: 40rpx;
}/* 顶部菜单栏 */
.menu {width: 100%;
}.topmenu-item {width: 100%;padding-bottom: 5px;border-bottom: 3px solid #f5f5f5;
}.topactive {border-bottom: 3px solid #4cc46b;
}/* 主体内容 */
.top-content {height:83vh;padding:10px 0;
}/* 左侧菜单栏 */
.left-menu {width: 25%;height:100%;
}
.leftactivegreen{width:5px;height:80%;background-color: #4cc46b;
}
.leftactive {background-color:#fff;color:#4cc46b;
}
.left-menu-item{height:50px;position:relative
}
.right-content {height:100%;width: 75%;font-size: 90%;background-color: #fff; overflow-y: auto;
}
.right-content-view{border-bottom:3px solid #f6f6f6;width:100%;padding:2% 0;
}
.content-img {width: 30%;margin-right: 2px;/* border:1px solid black; */
}
.content-img image {width: 95%;height: 95%;
}
.content-info{width:65%;
}
.cinfo-line{width:100%;padding:2% 0;
}
.green-btn{background-color:#4cc46b ;width:50rpx;height:50rpx;border-radius: 5px;margin-top:-4%;position:relative;
}
.green-btn image{width:35rpx;height:35rpx;
}
.red_single{border:1px solid #fff;color:#fff;position:absolute;width:25rpx;height:25rpx;top:-15rpx; right:-15rpx;border-radius: 50%;background-color: red;font-size: 10px;
} 
.red_single1{border:1px solid #fff;color:#fff;position:absolute;width:25rpx;height:25rpx;top:-12rpx; right:-12rpx;border-radius: 50%;background-color: red;font-size: 10px;
} 

js代码

这里主要展示核心数据部分，详细可参考资源

Menus: [{topname: '顶部菜单1',leftMenus: [{name: '侧边菜单1',items: [{id: 1,info1: '11',info2: '22',info3: '33',info4: '44',info5: '55',img: '../img/process_2.png'},{id: 2,info1: '22',info2: '22',info3: '22',info4: '22',info5: '22',img: '../img/process_1.png'},],},{name: '侧边菜单2',items: [{id: 3,info1: '33',info2: '33',info3: '33',info4: '33',info5: '33',img: '../img/process_3.png'}],},]},{topname: '顶部菜单2',leftMenus: []},{topname: '顶部菜单3',leftMenus: [{name: '侧边菜单3',items: [{id: 4,info1: '44',info2: '44',info3: '44',info4: '44',info5: '44',img: '../img/process_2.png'}],}],},{topname: '顶部菜单4',leftMenus: [{name: '侧边菜单4',items: [{id: 5,info1: '55',info2: '55',info3: '55',info4: '55',info5: '55',img: '../img/process_1.png'}],}],},
],

2、购物车界面

主要完成页面的选中项的展示，根据主页页面传递的id参数可进行数据库的查询，这里没连接后端，所以直接展示的实例数据，循环出数据项后，可对数据项进行多选，数据加减等功能

wxml代码

实现页面

<view class="main"><view class="itemallinfo"><view class="item_info flex center" wx:for="{{allinfo}}" wx:key="index" data-id="{{item.id}}"><view class="item flex center"><view class="sel_checkbox flex center"><checkbox value="{{item.id}}" checked="{{item.checked}}" bindtap="handleSelectItem" data-id="{{item.id}}" /></view><view class="info_image flex center"><image src="{{item.img}}" mode="aspectFill" /></view><view class="info_content"><view class="info_line1">配件名称：{{item.name}}</view><view class="info_line1">库存数量：{{item.stockQty}}{{item.uom}}</view><view class="info_line1 flex flex-end numbtn"><view class="btn_minus flex center" bindtap="handleMinus" data-id="{{item.id}}">-</view><input class="input_count" type="number" value="{{item.count}}" bindinput="handleInputChange" data-id="{{item.id}}" /><view class="btn_plus flex center" bindtap="handlePlus" data-id="{{item.id}}">+</view></view></view></view></view></view><view class="footer flex between"><view class="select_all flex center"><checkbox bindtap="handleSelectAll" checked="{{isAllSelected}}" /> 全选</view><view class="bottom2 flex center"><view class="delete_btn surebtn flex center" bindtap="handleDelete">删除</view></view><view class="bottom3 flex center"><view class="submit_btn surebtn flex center" bindtap="handleSubmit">提交</view></view></view>
</view>

wxss代码

page {background-color: #f6f6f6;font-size: 90%;
}.flex {display: flex;
}checkbox {transform: scale(0.8);
}.center {justify-content: center;align-items: center;
}.flex-end {justify-content: flex-end;align-items: center;
}
.between{justify-content: space-between;
}/* 列表内容 */
.item_info {width: 100%;padding: 5px 0;
}
.itemallinfo{padding:15px 0 100px 0;
}
.item {width: 95%;background-color: #fff;padding: 2% 0;border-radius: 5px;box-shadow: 3px 3px 3px rgb(0, 0, 0, 0.1);
}.sel_radio {width: 12%;
}radio {transform: scale(0.8);
}.info_image {width: 20%;
}.info_image image {width: 60px;height: 60px;
}.info_content {width: 68%;
}.info_line1 {margin: 2% 0;
}.numbtn {height: 25px;align-items: stretch;padding-right:2%;
}.btn_minus,
.btn_plus {border: 1px solid #c0c0c0;width: 30px;/* 设置按钮宽度 */height: 100%;cursor: pointer;/* 可选：设置鼠标指针样式 */
}.input_count {border: 1px solid #c0c0c0;width: 50px;/* 设置输入框宽度 */text-align: center;margin: 0 -1px;height: 100%;border-right:0;border-left:0;
}.footer {align-items: center;background-color: #fff;border-top: 1px solid #eee;position:fixed;width:100%;bottom:0;height:70px;
}
.select_all{height:100%;width:30%;
}
.bottom3,.bottom2{height:100%;width:35%;
}
.delete_btn {background-color: #bebebe;color: #fff;
}
.submit_btn {background-color: #f3454e;color: #fff;
}
.surebtn{border-radius: 5px;width:80%;height:30px;
}

js代码

这里主要展示核心数据部分，详细可参考资源

var allinfo = [{id: 1,info1: '11',info2: '22',info3: '33',info4: '44',info5: '55',img: '../img/process_2.png',count: 1,checked: false, // 默认未选中},{id: 3,info1: '33',info2: '33',info3: '33',info4: '33',info5: '33',img: '../img/process_3.png',count: 2,checked: false, // 默认未选中},{id: 5,info1: '55',info2: '55',info3: '55',info4: '55',info5: '55',img: '../img/process_1.png',count: 1,checked: false, // 默认未选中},
];