uniapp实现购物车功能

最新推荐文章于 2025-10-27 17:44:20 发布

原创

最新推荐文章于 2025-10-27 17:44:20 发布 · 6.9k 阅读

54 ·

CC 4.0 BY-SA版权

文章标签：

#npm #node.js #前端

本文介绍了使用uniapp实现购物车功能的详细步骤，包括页面结构搭建、样式设置、模拟数据创建、商品选中状态处理、数量增减功能以及结算金额计算。通过实例代码展示了全选、单选、数量加减及总价计算的逻辑实现。

uniapp实现购物车功能

周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车
在这里插入图片描述

因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。
首先第一步，我们把页面先搭建出来

<template>
	<view>
	//购物车没商品出现的页面
		<view class="empty" v-if="show==false">
			<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309" mode="widthFix" style="width: 400rpx;"></image>
		<view class="empty-text">空空如也的购物</view>
		<view class="empty-button" @click="goshopping">去选购</view>
		</view>
		//购物车加购商品的东西
		<view v-if="show==true">
		//通过循环商品呈现出每个商品
			<view class="goods-detail" v-for="(item,index) in goods" :key="index">
				<view class="detail-left">
					<view class="goods-left">
					//商品的选择框
						<checkbox-group @change="selected(item)">
							<label>
								<checkbox  class="selected" color="#555555" :checked="checked"/>
							</label>
						</checkbox-group>
						  <image :src="item.goodsImage" mode="widthFix" style="width: 150rpx;"></image>
					</view>
					<view class="size">
					    <text style="font-size: 25rpx;">尺码：{
  
  {item.size}}</text>
					    <text class="goods-price">￥{
  
  {item.price}}/件</text>
					</view>
				</view>
				<view class="detail-right">
					<text class="subtract" @click="reduce(item)">-</text>
					<text class="num">{
  
  {item.num}}</text>
					<text @click="add(item)" class="add">+</text>
				</view>
			</view>
		</view>
		//全选总计
		<view class="end">
			<view class="end-left">
				<checkbox-group @change="selectgoods()">
					<label>
						<checkbox  :checked="allchecked" />全选
					</label>
				</checkbox-group>
				<view>
					总计：<text style="color: #f00;font-weight: bold;">￥ {
  
  {totalPrice}}</text>
				</view>
				</view>
				<view class="end-right">
				    结算({
  
  {totalNum}})
				</view>
			
			
		</view>
	</view>
</template>

这是我们页面的结构
其中最开始有一个v-if,大家都知道这是用于条件判断的

<view class="empty" v-if="show==false">
			<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309" mode="widthFix" style="width: 400rpx;"></image>
		<view class="empty-text">空空如也的购物</view>
		<view class="empty-button" @click="goshopping">去选购</view>
		</view>

这一块就是当我们的购物车是空的时候，页面应该呈现的样子。我也给大家截图出来了