微信小步伐：完善购物车功能，购物车主页面展示，具体页面展示效果
一、效果图1、主页面
根据物品信息进行菜单分类，点击单项购物车图标添加至购物车，记载总购物车数目
https://i-blog.csdnimg.cn/direct/e9ea2359063e4227bde197deb65ab04e.png
2、购物车详情页
根据主页面选择的项，根据背景查询展示到页面，可进行多选，数目加减等
https://i-blog.csdnimg.cn/direct/e9152551ead940c286f7b37088f05c82.png
二、代码
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, // 默认未选中
},
];
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]