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

一、效果图

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, // 默认未选中
  },
];