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

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。

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N
阅读更多...
SpringBoot实现数据库读写分离的3种方法小结

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一：基于AbstractRoutingDataSource实现动态
阅读更多...
Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整
阅读更多...
Java枚举类实现Key-Value映射的多种实现方式

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co
阅读更多...
使用Python实现快速搭建本地HTTP服务器

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》：本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.
阅读更多...
MySQL双主搭建+keepalived高可用的实现

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制，确认复制是否成功4.同
阅读更多...
Java实现文件图片的预览和下载功能

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件（图片）的预览和下载 @ApiOperation("访问文件") @GetMapping("
阅读更多...
使用Sentinel自定义返回和实现区分来源方式

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》：本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定
阅读更多...
Java实现时间与字符串互相转换详解

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串（一）使用预定义格式（二）自定义格式二、字符串解析为日期（一）解析ISO格式字符串（二）解析自定义
阅读更多...
opencv图像处理之指纹验证的实现

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2