微信小步伐：完善购物车功能，购物车主页面展示，具体页面展示效果 ...

圆咕噜咕噜  论坛元老 | 2025-3-3 12:41:16 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1041|帖子 1041|积分 3123

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
一、效果图 

1、主页面

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

2、购物车详情页

根据主页面选择的项，根据背景查询展示到页面，可进行多选，数目加减等

二、代码

1、主页面

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

  1. <view class="main">
  2.   <view class="topinfo">
  3.     <view class="topinfo_view flex center">
  4.       <view class="topinfo_model1 flex center">
  5.         <view class="topinfo_model1_search">
  6.           <image src="{{search}}"></image>
  7.           <input type="text" placeholder="请输入" placeholder-style="color:#CCCCCC" bindconfirm="search_info" />
  8.         </view>
  9.       </view>
  10.       <view class="topinfo_model2 flex center" >
  11.         <view class="topinfo_model2_circle flex center" bind:tap="shoppingClick">
  12.           <image src="{{ShoppingCarGreen}}" />
  13.           <view class="red_single1 flex center" wx:if="{{shoppingAllCount > 0}}">{{shoppingAllCount}}</view>
  14.         </view>
  15.       </view>
  16.     </view>
  17.   </view>
  18.   <view class="menu">
  19.     <view class="top-menu flex between">
  20.       <block wx:for="{{Menus}}" wx:key="index">
  21.         <view class="topmenu-item flex center {{currentTopMenu === item.topname ? 'topactive' :''}}" data-menu="{{item.topname}}" bind:tap="onTopMenuClick">{{item.topname}}</view>
  22.       </block>
  23.     </view>
  24.     <view class="top-content flex center" wx:if="{{!linenone}}">
  25.       <view class="left-menu">
  26.         <block wx:for="{{LeftMenus}}" wx:key="index">
  27.           <view class="left-menu-item flex center {{currentLeftMenu === item.name ? 'leftactive' : ''}}" bindtap="onLeftMenuClick" data-menu="{{item.name}}">
  28.             <view class="left {{currentLeftMenu === item.name ? 'leftactivegreen' : ''}}"></view>
  29.             <text>{{item.name}}</text>
  30.           </view>
  31.         </block>
  32.       </view>
  33.       <view class="right-content">
  34.         <block wx:for="{{RightInfo}}" wx:key="index">
  35.           <view class="right-content-view flex">
  36.             <view class="content-img flex center">
  37.               <image src="{{item.img}}" mode="aspectFill"/>
  38.             </view>
  39.             <view class="content-info">
  40.               <view class="cinfo-line flex between">
  41.                 <text>标题1：{{item.info1}}</text>
  42.                 <text>标题2：{{item.info2}}</text>
  43.               </view>
  44.               <view class="cinfo-line flex between">
  45.                 <text>标题3：{{item.info3}}</text>
  46.                 <text>标题4：{{item.info4}}</text>
  47.               </view>
  48.               <view class="cinfo-line flex between">标题5：{{item.info5}}</view>
  49.               <view class="cinfo-line flex flex-end">
  50.                 <view class="green-btn flex center" data-id="{{item.id}}" bind:tap="singleSel">
  51.                   <image src="{{ShoppingCarWhite}}" mode=""/>
  52.                   <view class="red_single flex center" wx:if="{{item.isshopping}}">{{item.shoppingCount}}</view>
  53.                 </view>
  54.               </view>
  55.             </view>
  56.           </view>
  57.         </block>
  58.       </view>
  59.     </view>
  60.     <view wx:else class="none">暂无数据</view>
  61.   </view>
  62. </view>
复制代码
wxss代码

主要采用flex布局进行布局
  1. page {
  2.   background-color: #f5f5f5;
  3.   font-size:95%;
  4. }
  6. .flex {
  7.   display: flex;
  8. }
  10. .center {
  11.   justify-content: center;
  12.   align-items: center;
  13. }
  14. .left{
  15.   position: absolute;
  16.   left:0;
  17. }
  18. .flex-end{
  19.   justify-content: flex-end;
  20. }
  21. .between {
  22.   justify-content: space-between;
  23. }
  25. .none {
  26.   text-align: center;
  27.   margin-top: 50rpx;
  28.   color: #969292;
  29. }
  30. /* 顶行搜索栏+购物车 */
  31. /* 搜索框 */
  32. .topinfo_view {
  33.   padding: 4% 0 4% 0;
  34. }
  36. .topinfo_model1 {
  37.   height: 60rpx;
  38.   width: 85%;
  39. }
  41. .topinfo_model1_search {
  42.   display: flex;
  43.   align-items: center;
  44.   height: 100%;
  45.   width: 90%;
  46.   border-radius: 10px;
  47.   padding: 0 20rpx;
  48.   background-color: #fff;
  49. }
  51. .topinfo_model1 image {
  52.   height: 40rpx;
  53.   width: 45rpx;
  54.   margin-right: 10px;
  55. }
  57. .topinfo_view input {
  58.   width: 100%;
  59. }
  61. /* 购物车 */
  62. .topinfo_model2 {
  63.   width: 12%;
  64.   height: 60rpx;
  65. }
  67. .topinfo_model2_circle {
  68.   width: 60rpx;
  69.   height: 60rpx;
  70.   background-color: #fff;
  71.   border-radius: 50%;
  72.   position:relative;
  73. }
  75. .topinfo_model2_circle image {
  76.   width: 40rpx;
  77.   height: 40rpx;
  78. }
  80. /* 顶部菜单栏 */
  81. .menu {
  82.   width: 100%;
  83. }
  85. .topmenu-item {
  86.   width: 100%;
  87.   padding-bottom: 5px;
  88.   border-bottom: 3px solid #f5f5f5;
  89. }
  91. .topactive {
  92.   border-bottom: 3px solid #4cc46b;
  93. }
  95. /* 主体内容 */
  96. .top-content {
  97.   height:83vh;
  98.   padding:10px 0;
  99. }
  101. /* 左侧菜单栏 */
  102. .left-menu {
  103.   width: 25%;
  104.   height:100%;
  105. }
  106. .leftactivegreen{
  107.   width:5px;
  108.   height:80%;
  109.   background-color: #4cc46b;
  110. }
  111. .leftactive {
  112.   background-color:#fff;
  113.   color:#4cc46b;
  114. }
  115. .left-menu-item{
  116.   height:50px;
  117.   position:relative
  118. }
  119. .right-content {
  120.   height:100%;
  121.   width: 75%;
  122.   font-size: 90%;
  123.   background-color: #fff;
  124.   overflow-y: auto;
  125. }
  126. .right-content-view{
  127.   border-bottom:3px solid #f6f6f6;
  128.   width:100%;
  129.   padding:2% 0;
  130. }
  131. .content-img {
  132.   width: 30%;
  133.   margin-right: 2px;
  134.   /* border:1px solid black; */
  135. }
  136. .content-img image {
  137.   width: 95%;
  138.   height: 95%;
  139. }
  140. .content-info{
  141.   width:65%;
  142. }
  143. .cinfo-line{
  144.   width:100%;
  145.   padding:2% 0;
  146. }
  147. .green-btn{
  148.   background-color:#4cc46b ;
  149.   width:50rpx;
  150.   height:50rpx;
  151.   border-radius: 5px;
  152.   margin-top:-4%;
  153.   position:relative;
  154. }
  155. .green-btn image{
  156.   width:35rpx;
  157.   height:35rpx;
  158. }
  159. .red_single{
  160.   border:1px solid #fff;
  161.   color:#fff;
  162.   position:absolute;
  163.   width:25rpx;
  164.   height:25rpx;
  165.   top:-15rpx;
  166.   right:-15rpx;
  167.   border-radius: 50%;
  168.   background-color: red;
  169.   font-size: 10px;
  170. }
  171. .red_single1{
  172.   border:1px solid #fff;
  173.   color:#fff;
  174.   position:absolute;
  175.   width:25rpx;
  176.   height:25rpx;
  177.   top:-12rpx;
  178.   right:-12rpx;
  179.   border-radius: 50%;
  180.   background-color: red;
  181.   font-size: 10px;
  182. }
复制代码
js代码

这里主要展示核心数据部门，具体可参考资源
  1. Menus: [{
  2.     topname: '顶部菜单1',
  3.     leftMenus: [{
  4.         name: '侧边菜单1',
  5.         items: [{
  6.             id: 1,
  7.             info1: '11',
  8.             info2: '22',
  9.             info3: '33',
  10.             info4: '44',
  11.             info5: '55',
  12.             img: '../img/process_2.png'
  13.           },
  14.           {
  15.             id: 2,
  16.             info1: '22',
  17.             info2: '22',
  18.             info3: '22',
  19.             info4: '22',
  20.             info5: '22',
  21.             img: '../img/process_1.png'
  22.           },
  23.         ],
  24.       },
  25.       {
  26.         name: '侧边菜单2',
  27.         items: [{
  28.           id: 3,
  29.           info1: '33',
  30.           info2: '33',
  31.           info3: '33',
  32.           info4: '33',
  33.           info5: '33',
  34.           img: '../img/process_3.png'
  35.         }],
  36.       },
  37.     ]
  38.   },
  39.   {
  40.     topname: '顶部菜单2',
  41.     leftMenus: []
  42.   },
  43.   {
  44.     topname: '顶部菜单3',
  45.     leftMenus: [{
  46.       name: '侧边菜单3',
  47.       items: [{
  48.         id: 4,
  49.         info1: '44',
  50.         info2: '44',
  51.         info3: '44',
  52.         info4: '44',
  53.         info5: '44',
  54.         img: '../img/process_2.png'
  55.       }],
  56.     }],
  57.   },
  58.   {
  59.     topname: '顶部菜单4',
  60.     leftMenus: [{
  61.       name: '侧边菜单4',
  62.       items: [{
  63.         id: 5,
  64.         info1: '55',
  65.         info2: '55',
  66.         info3: '55',
  67.         info4: '55',
  68.         info5: '55',
  69.         img: '../img/process_1.png'
  70.       }],
  71.     }],
  72.   },
  73. ],
复制代码
2、购物车界面

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

实现页面
  1. <view class="main">
  2.   <view class="itemallinfo">
  3.     <view class="item_info flex center" wx:for="{{allinfo}}" wx:key="index" data-id="{{item.id}}">
  4.       <view class="item flex center">
  5.         <view class="sel_checkbox flex center">
  6.           <checkbox value="{{item.id}}" checked="{{item.checked}}" bindtap="handleSelectItem" data-id="{{item.id}}" />
  7.         </view>
  8.         <view class="info_image flex center">
  9.           <image src="{{item.img}}" mode="aspectFill" />
  10.         </view>
  11.         <view class="info_content">
  12.           <view class="info_line1">配件名称：{{item.name}}</view>
  13.           <view class="info_line1">库存数量：{{item.stockQty}}{{item.uom}}</view>
  14.           <view class="info_line1 flex flex-end numbtn">
  15.             <view class="btn_minus flex center" bindtap="handleMinus" data-id="{{item.id}}">-</view>
  16.             <input class="input_count" type="number" value="{{item.count}}" bindinput="handleInputChange" data-id="{{item.id}}" />
  17.             <view class="btn_plus flex center" bindtap="handlePlus" data-id="{{item.id}}">+</view>
  18.           </view>
  19.         </view>
  20.       </view>
  21.     </view>
  22.   </view>
  23.   <view class="footer flex between">
  24.     <view class="select_all flex center">
  25.       <checkbox bindtap="handleSelectAll" checked="{{isAllSelected}}" /> 全选
  26.     </view>
  27.     <view class="bottom2 flex center">
  28.       <view class="delete_btn surebtn flex center" bindtap="handleDelete">删除</view>
  29.     </view>
  30.     <view class="bottom3 flex center">
  31.       <view class="submit_btn surebtn flex center" bindtap="handleSubmit">提交</view>
  32.     </view>
  33.   </view>
  34. </view>
复制代码
wxss代码

  1. page {
  2.   background-color: #f6f6f6;
  3.   font-size: 90%;
  4. }
  6. .flex {
  7.   display: flex;
  8. }
  10. checkbox {
  11.   transform: scale(0.8);
  12. }
  14. .center {
  15.   justify-content: center;
  16.   align-items: center;
  17. }
  19. .flex-end {
  20.   justify-content: flex-end;
  21.   align-items: center;
  22. }
  23. .between{
  24.   justify-content: space-between;
  25. }
  27. /* 列表内容 */
  28. .item_info {
  29.   width: 100%;
  30.   padding: 5px 0;
  31. }
  32. .itemallinfo{
  33.   padding:15px 0 100px 0;
  34. }
  35. .item {
  36.   width: 95%;
  37.   background-color: #fff;
  38.   padding: 2% 0;
  39.   border-radius: 5px;
  40.   box-shadow: 3px 3px 3px rgb(0, 0, 0, 0.1);
  41. }
  43. .sel_radio {
  44.   width: 12%;
  45. }
  47. radio {
  48.   transform: scale(0.8);
  49. }
  51. .info_image {
  52.   width: 20%;
  53. }
  55. .info_image image {
  56.   width: 60px;
  57.   height: 60px;
  58. }
  60. .info_content {
  61.   width: 68%;
  62. }
  64. .info_line1 {
  65.   margin: 2% 0;
  66. }
  68. .numbtn {
  69.   height: 25px;
  70.   align-items: stretch;
  71.   padding-right:2%;
  72. }
  74. .btn_minus,
  75. .btn_plus {
  76.   border: 1px solid #c0c0c0;
  77.   width: 30px;
  78.   /* 设置按钮宽度 */
  79.   height: 100%;
  80.   cursor: pointer;
  81.   /* 可选：设置鼠标指针样式 */
  82. }
  84. .input_count {
  85.   border: 1px solid #c0c0c0;
  86.   width: 50px;
  87.   /* 设置输入框宽度 */
  88.   text-align: center;
  89.   margin: 0 -1px;
  90.   height: 100%;
  91.   border-right:0;
  92.   border-left:0;
  93. }
  95. .footer {
  96.   align-items: center;
  97.   background-color: #fff;
  98.   border-top: 1px solid #eee;
  99.   position:fixed;
  100.   width:100%;
  101.   bottom:0;
  102.   height:70px;
  103. }
  104. .select_all{
  105.   height:100%;
  106.   width:30%;
  107. }
  108. .bottom3,.bottom2{
  109.   height:100%;
  110.   width:35%;
  111. }
  112. .delete_btn {
  113.   background-color: #bebebe;
  114.   color: #fff;
  115. }
  116. .submit_btn {
  117.   background-color: #f3454e;
  118.   color: #fff;
  119. }
  120. .surebtn{
  121.   border-radius: 5px;
  122.   width:80%;
  123.   height:30px;
  124. }
复制代码
js代码

这里主要展示核心数据部门，具体可参考资源
  1. var allinfo = [{
  2.     id: 1,
  3.     info1: '11',
  4.     info2: '22',
  5.     info3: '33',
  6.     info4: '44',
  7.     info5: '55',
  8.     img: '../img/process_2.png',
  9.     count: 1,
  10.     checked: false, // 默认未选中
  11.   },
  12.   {
  13.     id: 3,
  14.     info1: '33',
  15.     info2: '33',
  16.     info3: '33',
  17.     info4: '33',
  18.     info5: '33',
  19.     img: '../img/process_3.png',
  20.     count: 2,
  21.     checked: false, // 默认未选中
  22.   },
  23.   {
  24.     id: 5,
  25.     info1: '55',
  26.     info2: '55',
  27.     info3: '55',
  28.     info4: '55',
  29.     info5: '55',
  30.     img: '../img/process_1.png',
  31.     count: 1,
  32.     checked: false, // 默认未选中
  33.   },
  34. ];
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

圆咕噜咕噜

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表