【uniapp 开发小程序】购物车功能，实现全选、反选、单选、计算总价

小跳不会Coding

已于 2023-07-14 15:50:44 修改

阅读量2.2k

点赞数 1

文章标签： uni-app 小程序

于 2023-06-26 10:41:59 首次发布

本文链接：https://blog.csdn.net/weixin_48596030/article/details/131392433

版权

文章展示了如何使用uniapp框架开发小程序的购物车功能，包括计算购物车内商品的总价，以及实现全选、反选和单选商品的功能。关键代码涉及`totalPrice.toFixed(2)`用于保留价格的两位小数，以及`checkbox-group`和`change`事件处理商品的选择状态。

摘要由CSDN通过智能技术生成

uniapp 开发小程序，实现购物车功能，实现全选、反选、单选、计算总价

一、计算总价具体代码：

//计算总价
		computed: {
			totalPrice() {
				let totalPrice = 0
				this.goodList.map(item => {
					item.checked ? totalPrice += item.numberBox * item.unitPrice : totalPrice += 0
				})
				return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
			}
		},

关键代码：return totalPrice.toFixed(2); // 保留两位小数
否则会出现多位小数现象：
在这里插入图片描述

二、小程序购物车功能总代码：

<template>
	<view>
		<view class="goodlistItem" v-for="(item,index) in goodList" :key='index'>
			<view class="group">
				<checkbox-group @change="changeitem(item)" checked class="checkbox">
					<checkbox :value="item.unitPrice" :checked="item.checked" />
				</checkbox-group>

				<view class="goods">
					<view class="price">￥{{item.unitPrice}}</view>
					<view class="name">{{item.name}}</view>
					<view class="order-info">
						<view>产地：{{item.home}}</view>
					</view>

					<view class="subtotal">
						<view class="text">
							<view>单品小计：</view>
							<view>￥{{item.subtotal}}</view>
						</view>
						<view class="number">
							<wm-numberBox :value='item.numberBox' model="1"
								@change="addShopCart($event, item, index)"></wm-numberBox>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="allbox">
			<view class="checkbox">
				<checkbox-group @change="selectAll">
					<checkbox :checked="allChecked">全选</checkbox>
				</checkbox-group>
			</view>

			<view class="total-box">
				<view class="total">合计：￥{{totalPrice}}</view>
			</view>

		</view>
	</view>

</template>

<script>
	import url from '../../static/api/url';
	export default {
		data() {
			return {
				goodList: [{
						id: 0,
						unitPrice: '23',
						name: '文具',
						home: '山东',
						subtotal: '23',
						numberBox: 1,
						checked: false
					},
					{
						id: 1,
						unitPrice: '50',
						name: '图书',
						home: '济阳',
						subtotal: '50',
						numberBox: 1,
						checked: false
					}
				],
				checkList: [], //选中值
				allChecked: false, //是否全选

			}
		},

		//计算总价
		computed: {
			totalPrice() {
				let totalPrice = 0
				this.goodList.map(item => {
					item.checked ? totalPrice += item.numberBox * item.unitPrice : totalPrice += 0
				})
				return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
			}
		},
		methods: {
		
			//单选
			changeitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const cartList = this.goodList.every(item => {
						return item.checked === true
					})
					if (cartList) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			
			//全选，全不选
			selectAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.goodList.map(item => {
						item.checked = true
					})
				} else {
					this.goodList.map(item => {
						item.checked = false
					})
				}
			},
		}

	}
</script>