“购物车”页面的制作，实现购物车页面的基本功能，包括勾选商品，改变商品数量、“全选”的功能实现。

2024-04-15 12:44
文章标签 实现 数量 功能 页面 商品 制作 改变 包括 基本功能 购物车 全选 勾选

本文主要是介绍“购物车”页面的制作，实现购物车页面的基本功能，包括勾选商品，改变商品数量、“全选”的功能实现。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

素材：

wxml代码：

<view><text class="gwc">购物车</text><text class="gl">管理</text>
</view>
<!-- 生效商品区域 -->
<view class="cart-effect"><block wx:for="{{cartEffectList}}" wx:key="key" wx:for-item="item"><checkbox-group class="check-group" wx:if="{{item.merchandises.length > 0}}"><!-- <checkbox class="check-store-all" data-store="{{item.store}}" bind:tap="checkStoreAll" checked="{{item.checked || item.merchandiseChecked}}"><view class="store">{{item.store}}</view></checkbox> --><block wx:for="{{item.merchandises}}" wx:key="key" wx:for-item="merchandise"><movable-area class="move-area"><movable-view class="move-view" x="{{merchandise.x}}" data-store="{{item.store}}" data-id="{{merchandise.id}}" direction="horizontal" out-of-bounds="true" damping="50" inertia="true" bind:touchstart="touchStart" bind:touchmove="touchMove" bind:touchend="touchEnd" bindchange="touchChange"><view class="info"><checkbox class="merchandise-check" data-store="{{item.store}}" data-merchandise="{{merchandise}}" bind:tap="checkSingle" checked="{{merchandise.checked}}"></checkbox><view class="merchandise"><image class="merchandise-img" src="{{merchandise.imgUrl}}"></image><view class="merchandise-name">{{merchandise.name}}</view><view class="merchandise-price">￥{{merchandise.price}}</view><view class="merchandise-amount"><view class="minus" data-store="{{item.store}}" data-id="{{merchandise.id}}" bind:tap="minusAmount">-</view><view class="amount">{{merchandise.amount}}</view><view class="plus" data-store="{{item.store}}" data-id="{{merchandise.id}}" bind:tap="plusAmount">+</view></view></view></view></movable-view></movable-area></block></checkbox-group></block>
</view>
<!-- 结算 -->
<view class="count"><checkbox class="check-all" bind:tap="checkAll" checked="{{checkedAll}}">全选</checkbox><view class="grand">卷后合计：<text style="color: red;">￥{{total}}</text></view><button class="lapse {{totalCount > 0 ? 'settle-btn' : ''}}" bind:tap="settleBill" hover-class="settle-bill" disabled="{{totalCount == 0}}" loading="{{showLoading}}">去结算({{totalCount}})</button>
</view>

wxss代码：

page {padding: 16rpx;padding-bottom: 172rpx;box-sizing: border-box;
}
.gwc{display: flex;margin-top: 120rpx;margin-left: 30rpx;
}
.gl{display: flex;margin-left: 600rpx;margin-top: -50rpx;
}
checkbox .wx-checkbox-input{width: 40rpx; height: 40rpx; border-radius: 50%;
}
/* 选中后的背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{background: #b0474c;
}
/* 选中后的勾子样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{width: 40rpx;height: 40rpx;line-height: 40rpx;border-radius: 50%;text-align: center;font-size:32rpx; color:#fbfbfd; background: transparent;transform:translate(-50%, -50%) scale(1);-webkit-transform:translate(-50%, -50%) scale(1);
}
/* 生效商品 */
.cart-effect {display: flex;flex-direction: column;
}
.cart-effect .check-group {padding: 16rpx;box-sizing: border-box;border-radius: 32rpx;margin-top: 16rpx;z-index: 11;
}
.cart-effect .check-group .check-store-all {display: flex;justify-content: flex-start;align-items: center;
}
.cart-effect .check-group .store {font-size: 36rpx;font-weight: bolder;margin-left: 8rpx;
}
.cart-effect .check-group .move-area{/* 减去删除部分的宽度 */width: calc(100% - 128rpx);height: 280rpx;position: relative;display: flex;
}
.cart-effect .check-group .move-area .move-view {display: flex;justify-content: center;align-items: center;height: 95%;/* 上面减了多少宽度，下面就要加多少，不然无法起到遮挡作用 */width: calc(100% + 128rpx);border-radius: 3%;background-color: #efeff5;box-sizing: border-box;z-index: 10;padding-right: 12rpx;
}
.cart-effect .check-group .move-area .move-view .info {display: flex;justify-content: center;align-items: center;width: 100vw;overflow: hidden;box-sizing: border-box;}.cart-effect .check-group .move-area .move-view .info .merchandise {display: grid;grid-template-columns: 1fr 2fr 2fr;grid-template-rows: 110rpx 60rpx;grid-column-gap: 12rpx;grid-row-gap: 12rpx;
}.cart-effect .check-group .move-area .move-view .info .merchandise .merchandise-img {width: 180rpx;height: 180rpx;border-radius: 50%;grid-column: 1 / 2;grid-row: 1 / 3;
}
.cart-effect .check-group .move-area .move-view .info .merchandise .merchandise-name {grid-column: 2 / 4;grid-row: 1 / 2;font-size: 32rpx;
}.cart-effect .check-group .move-area .move-view .info .merchandise .merchandise-price {grid-column: 2 / 3;grid-row: 2 / 3;font-size: 32rpx;font-weight: 550;
}.cart-effect .check-group .move-area .move-view .merchandise .merchandise-amount {grid-column: 3 / 4;grid-row: 2 / 3;text-align: right;display: grid;grid-template-columns: repeat(3, 1fr);align-items: center;text-align: center;line-height: 50rpx;
}.cart-effect .check-group .move-area .move-view .merchandise .merchandise-amount .minus {font-size: 42rpx;background-color: #e5e5e5;border-radius: 16rpx;
}.cart-effect .check-group .move-area .move-view .merchandise .merchandise-amount .amount {font-size: 36rpx;
}.cart-effect .check-group .move-area .move-view .merchandise .merchandise-amount .plus {background-color: #e5e5e5;border-radius: 16rpx;font-size: 42rpx;
}.cart-lapse .check-group {background-color: #fbfbfd;padding: 16rpx;box-sizing: border-box;border-radius: 32rpx;margin-top: 16rpx;z-index: 11;
}.cart-lapse .check-group .move-area .move-view {display: flex;justify-content: center;align-items: center;height: 100%;/* 上面减了多少宽度，下面就要加多少，不然无法起到遮挡作用 */width: calc(100% + 128rpx);background-color: #fbfbfd;box-sizing: border-box;z-index: 10;padding-right: 12rpx;
}.cart-lapse .check-group .move-area .move-view .info {display: flex;justify-content: center;align-items: center;width: 100vw;overflow: hidden;box-sizing: border-box;
}.cart-lapse .check-group .move-area .move-view .info .merchandise {display: grid;grid-template-columns: 1fr 2fr 2fr;grid-template-rows: 110rpx 60rpx;grid-column-gap: 12rpx;grid-row-gap: 12rpx;
}.cart-lapse .check-group .move-area .move-view .info .merchandise .sold-out {position: relative;width: 180rpx;height: 180rpx;border-radius: 50%;
}.cart-lapse .check-group .move-area .move-view .info .merchandise .sold-out .merchandise-img {width: 100%;height: 100%;border-radius: 50%;grid-column: 1 / 2;grid-row: 1 / 3;
}.cart-lapse .check-group .move-area .move-view .info .merchandise .sold-out .status{width: 100%;height: 100%;background-color: #1a1a1a90;position: absolute;top: 0;left: 0;text-align: center;display: flex;justify-content: center;align-items: center;border-radius: 50%;color: #fbfbfb;font-size: 36rpx;font-weight: 500;
}.cart-lapse .check-group .move-area .move-view .info .merchandise .merchandise-name {grid-column: 2 / 4;grid-row: 1 / 2;font-size: 32rpx;
}.cart-lapse .check-group .move-area .move-view .info .merchandise .merchandise-price {grid-column: 2 / 3;grid-row: 2 / 3;font-size: 32rpx;font-weight: 550;
}.cart-lapse .check-group .move-area .move-view .merchandise .merchandise-amount {grid-column: 3 / 4;grid-row: 2 / 3;text-align: right;display: grid;grid-template-columns: repeat(3, 1fr);align-items: center;text-align: center;line-height: 60rpx;
}.cart-lapse .check-group .move-area .move-view .merchandise .merchandise-amount .minus {font-size: 42rpx;background-color: #e5e5e5;border-radius: 16rpx;
}.cart-lapse .check-group .move-area .move-view .merchandise .merchandise-amount .amount {font-size: 36rpx;
}.cart-lapse .check-group .move-area .move-view .merchandise .merchandise-amount .plus {background-color: #e5e5e5;border-radius: 16rpx;font-size: 42rpx;
}.count {width: calc(100% - 32rpx);box-sizing: border-box;margin-top: 16rpx;padding: 16rpx;background-color: #fbfbfd;border-radius: 120rpx;position: fixed;bottom: 42rpx;z-index: 99;display: flex;justify-content: space-between;align-items: center;border: 1rpx solid #e5e5e5;
}.count .check-all{font-size: 34rpx;font-weight: 550;
}.count .grand {width: 50%;text-align: right;font-size: 32rpx;font-weight: 550;
}.count .lapse {width: 200rpx;height: 80rpx;color: #fdfdfd;border-radius: 120rpx;font-size: 33rpx;margin: 0;text-align: center;background-color: #65dd6b;padding: 0;line-height: 80rpx;
}.count .settle-btn {background-color: #65dd6b;
}.count .settle-bill {background-color: #d1362f80
}

js代码：

Page({/*** 页面的初始数据*/data: {cartEffectList: [],// 生效商品example: [{store: "龙门客栈",checked: false,merchandiseChecked: false,merchandises: [{id: "1",imgUrl: "../../images/pic1.jpg",name: "车厘茄1kg/盒",price: 17.9,amount: 1,status: 0,x: 0,checked: false,},{id: "2",imgUrl: "../../images/pic2.jpg",name: "小鸡干脆面烧烤鸡肉味16g*12包",price: 13.9,amount: 1,status: 1,x: 0,checked: false,},         ]},   ],},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getCartList();},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 获取用户购物车*/getCartList() {let cartEffectList = this.data.example;wx.setStorageSync('cartEffectList', cartEffectList);this.setData({cartEffectList: cartEffectList,});},/*** 店铺全选* @param {*} e */checkStoreAll(e) {let storeName = e.currentTarget.dataset.store;let cartEffectList = this.data.cartEffectList;let updatedCart = cartEffectList.map(store => {if (store.store === storeName) {// 切换商店的已勾选标记store.checked = !store.checked;// 重置商店的商品已勾选标记store.merchandiseChecked = false;store.merchandises = store.merchandises.map(merch => {// 根据商店的已检查标记更新商品的已选择标记merch.checked = store.checked;return merch;});}return store;});this.setData({cartEffectList: updatedCart});this.grand();},/*** 单个选择* @param {*} e */checkSingle(e) {let storeName = e.currentTarget.dataset.store;let merchandiseData = e.currentTarget.dataset.merchandise;let cartEffectList = this.data.cartEffectList;let updatedCart = cartEffectList.map(store => {if (store.store === storeName) {store.merchandises = store.merchandises.map(merch => {if (merch.id === merchandiseData.id) {// 更改商品的选择状态merch.checked = !merch.checked;// 更改店铺的选中状态store.merchandiseChecked = merch.checked;}return merch;});}return store;});this.setData({cartEffectList: updatedCart});this.grand();},/*** 全选*/checkAll() {let cartEffectList = this.data.cartEffectList;let checkedAll = this.data.checkedAll;// 使用map方法更新每个商店和商品的选中状态let updatedCart = cartEffectList.map(store => {return {...store,checked: !checkedAll,merchandiseChecked: !checkedAll,merchandises: store.merchandises.map(merch => ({...merch,checked: !checkedAll}))};});this.setData({cartEffectList: updatedCart,checkedAll: !checkedAll,});this.grand();},/*** 合计*/grand() {let cartEffectList = this.data.cartEffectList;// 初始化总价和总数量let total = 0;let totalCount = 0;cartEffectList.forEach(store => {store.merchandises.forEach(merch => {if (merch.checked) {total += merch.amount * merch.price;totalCount += merch.amount;}});});this.setData({total: total,totalCount: totalCount,});},/*** 减少数量，下限为1* @param {*} e */minusAmount(e) {let storeName = e.currentTarget.dataset.store;let id = e.currentTarget.dataset.id;let cartEffectList = this.data.cartEffectList;let updatedCart = cartEffectList.map(store => {if (store.store === storeName) {// 更新商店的已选择商品标记store.merchandiseChecked = true;store.merchandises = store.merchandises.map(merch => {if (merch.id === id) {// 更新商品的选择状态merch.checked = true;if (merch.amount > 1) {merch.amount--;} else {wx.showModal({content: '宝贝数量不能再减少了',showCancel: false,});}}return merch;});}return store;});this.setData({cartEffectList: updatedCart});this.grand();},/*** 增加数量，上限为99* @param {*} e */plusAmount(e) {let storeName = e.currentTarget.dataset.store;let id = e.currentTarget.dataset.id;let cartEffectList = this.data.cartEffectList;let updatedCart = cartEffectList.map(store => {if (store.store === storeName) {// 更新店铺的选中状态store.merchandiseChecked = true;store.merchandises = store.merchandises.map(merch => {if (merch.id === id) {// 更新商品的选择状态merch.checked = true; if (merch.amount < 99) {merch.amount++;} else {wx.showModal({content: '宝贝数量不能再增加了',showCancel: false,});}}return merch;});}return store;});this.setData({cartEffectList: updatedCart});this.grand();},/*** 结算*/settleBill() {this.setData({showLoading: true,});// 进行深拷贝let cartEffectList = JSON.parse(JSON.stringify(this.data.cartEffectList));// 筛选出未选中的商店或没有选中商品的商店let filteredStores = cartEffectList.filter(store => {if (store.checked) {// 如果商店被选中，保留它return true; }// 从商店中筛选出未选中的商品store.merchandises = store.merchandises.filter(merch => merch.checked);// 如果筛选后，商店有选中的商品，保留该商店return store.merchandises.length > 0;});wx.navigateTo({url: `/pages/index/settle-bill/settle-bill?chosenList=${JSON.stringify(filteredStores)}`,complete: () => {this.setData({showLoading: false,});}});},})

这篇关于“购物车”页面的制作，实现购物车页面的基本功能，包括勾选商品，改变商品数量、“全选”的功能实现。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/905849。

相关文章

Python的Darts库实现时间序列预测

Python的Darts库实现时间序列预测

《Python的Darts库实现时间序列预测》Darts一个集统计、机器学习与深度学习模型于一体的Python时间序列预测库,本文主要介绍了Python的Darts库实现时间序列预测,感兴趣的可以了解... 目录目录一、什么是 Darts？二、安装与基本配置安装 Darts导入基础模块三、时间序列数据结构与
阅读更多...
Python使用FastAPI实现大文件分片上传与断点续传功能

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现（FastAPI）2.1 运行环境2.2 目录结构建议2.3 serv
阅读更多...
C#实现千万数据秒级导入的代码

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很
阅读更多...
SpringBoot+RustFS 实现文件切片极速上传的实例代码

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot？二、环境准备与部署2.1 安装 RustF
阅读更多...
Nginx部署HTTP/3的实现步骤

Nginx部署HTTP/3的实现步骤

《Nginx部署HTTP/3的实现步骤》本文介绍了在Nginx中部署HTTP/3的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录前提条件第一步：安装必要的依赖库第二步：获取并构建 BoringSSL第三步：获取 Nginx
阅读更多...
MyBatis Plus实现时间字段自动填充的完整方案

MyBatis Plus实现时间字段自动填充的完整方案

《MyBatisPlus实现时间字段自动填充的完整方案》在日常开发中,我们经常需要记录数据的创建时间和更新时间,传统的做法是在每次插入或更新操作时手动设置这些时间字段,这种方式不仅繁琐,还容易遗漏,... 目录前言解决目标技术栈实现步骤1. 实体类注解配置2. 创建元数据处理器3. 服务层代码优化填充机制详
阅读更多...
Python实现Excel批量样式修改器(附完整代码)

Python实现Excel批量样式修改器(附完整代码)

《Python实现Excel批量样式修改器(附完整代码)》这篇文章主要为大家详细介绍了如何使用Python实现一个Excel批量样式修改器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录前言功能特性核心功能界面特性系统要求安装说明使用指南基本操作流程高级功能技术实现核心技术栈关键函
阅读更多...
Java实现字节字符转bcd编码

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码（Binary-Coded Decima
阅读更多...
SpringBoot全局域名替换的实现

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja
阅读更多...
Python实现批量CSV转Excel的高性能处理方案

Python实现批量CSV转Excel的高性能处理方案

《Python实现批量CSV转Excel的高性能处理方案》在日常办公中,我们经常需要将CSV格式的数据转换为Excel文件,本文将介绍一个基于Python的高性能解决方案,感兴趣的小伙伴可以跟随小编一... 目录一、场景需求二、技术方案三、核心代码四、批量处理方案五、性能优化六、使用示例完整代码七、小结一、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2