Uniapp + Vue3 + Vite +Uview + Pinia 实现购物车功能(最新附源码保姆级)

Uniapp + Vue3 + Vite +Uview + Pinia 实现购物车功能(最新附源码保姆级)

1、效果展示


2、安装 Pinia 和 Uview


官网

c 复制代码
https://pinia.vuejs.org/zh/getting-started.html

安装命令

c 复制代码
cnpm install pinia

Uiew 的安装以及配置参照我的这篇文章

Uniapp + Vite + Vue3 + uView + Pinia 实现自定义底部 Tabbar(最新保姆级教程)

3、配置 Pinia


  • main.js
js 复制代码
import { createPinia } from 'pinia'
const app = createSSRApp(App);
app.use(pinia);
  • cart.js
js 复制代码
// src/pages/store/cart/cart.js
import { defineStore } from 'pinia';
import { reactive, computed } from 'vue';

export const useCartStore = defineStore('cart', () => {
  // 用 reactive 管理购物车数据
  const state = reactive({
    cartItems: [], // 购物车商品列表
    allChose: false // 全选状态
  });

  // 设置购物车数据
  const setCartItems = (items) => {
    state.cartItems = items.map(item => ({
      ...item,
      isChoose: false, // 初始化为未选中状态
      num: item.num || 1 // 初始化数量
    }));
    saveCartToLocalStorage(); // 每次设置后将数据持久化
  };

  // 计算已选中的商品数量
  const selectedItemsCount = computed(() => {
    return state.cartItems.filter(item => item.isChoose).reduce((count, item) => count + item.num, 0);
  });

  // 计算已选中商品的总价格
  const totalSelectedPrice = computed(() => {
    return state.cartItems.filter(item => item.isChoose).reduce((total, item) => total + item.price * item.num, 0);
  });

  // 切换商品的选中状态
  const toggleItemChoose = (item) => {
    const cartItem = state.cartItems.find(cartItem => cartItem.id === item.id);
    if (cartItem) {
      cartItem.isChoose = !cartItem.isChoose;
    }
    updateAllChoseStatus(); // 每次切换选中状态后更新全选状态
    saveCartToLocalStorage();
  };

  // 修改商品数量
  const changeItemQuantity = (item, quantity) => {
    const cartItem = state.cartItems.find(cartItem => cartItem.id === item.id);
    if (cartItem) {
      cartItem.num = quantity;
    }
    saveCartToLocalStorage();
  };

  // 切换全选状态
  const toggleAllChose = () => {
    state.allChose = !state.allChose;
    state.cartItems.forEach(item => {
      item.isChoose = state.allChose;
    });
    saveCartToLocalStorage();
  };

  // 更新全选状态
  const updateAllChoseStatus = () => {
    state.allChose = state.cartItems.every(item => item.isChoose);
  };

  // 将购物车数据保存到 localStorage
  const saveCartToLocalStorage = () => {
    localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
  };

  // 从 localStorage 中恢复购物车数据
  const loadCartFromLocalStorage = () => {
    const savedCart = localStorage.getItem('cartItems');
    if (savedCart) {
      state.cartItems = JSON.parse(savedCart);
    }
  };

  return {
    state,
    setCartItems, // 暴露 setCartItems 方法
    selectedItemsCount,
    totalSelectedPrice,
    toggleItemChoose,
    changeItemQuantity,
    toggleAllChose,
    loadCartFromLocalStorage
  };
});

4、页面展示


js 复制代码
<template>
	<view class="">
		<view class="card">
			<template v-for="(item, index) in state.cartItems" :key="index">
				<view class="cart-data card-shadow">
					<view>
						<up-checkbox :customStyle="{marginBottom: '8px'}" usedAlone v-model:checked="item.isChoose"
							@change="toggleItemChoose(item)">
						</up-checkbox>
					</view>
					<view class="cart-image">
						<up-image :src="item.image" mode="widthFix" height="200rpx" width="220rpx"
							radius="10"></up-image>
					</view>
					<view>
						<view class="cart-right">
							<view style="margin-bottom: 10rpx;">{{item.title}}</view>
							<view style="margin-bottom: 20rpx;font-size: 26rpx;color: #7d7e80;">{{item.type}}</view>
							<view class="" style="display: flex;align-items: center;">
								<up-text mode="price" :text="item.price"></up-text>
								<view class="" style="width: 10rpx;"></view>
								<up-number-box v-model="item.num" @change="val => changeItemQuantity(item, val.value)"
									min="1"></up-number-box>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="foot card">
			<view class="card-connect">
				<up-checkbox :customStyle="{marginBottom: '8px'}" usedAlone v-model:checked="state.allChose"
					@change="toggleAllChose">
				</up-checkbox>
				<view class="" style="display: flex; align-items: center;">
					<view style="font-size: 28rpx;">全选</view>
					<view style="padding-left: 20rpx;font-size: 24rpx;">已选{{selectedItemsCount}}件,合计</view>
					<view class="" style="display: flex;flex: 1;">
						<up-text mode="price" :text="totalSelectedPrice" color="red" size="18"></up-text>
					</view>
				</view>
				<view class="" style="width: 20rpx;position: relative;">

				</view>
				<view class="" style="position: absolute;right: 40rpx;">
					<view class="" style="display: flex;">
						<up-button type="error" text="去结算" shape="circle" style="width: 150rpx;"></up-button>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch
	} from 'vue';
	import {
		useCartStore
	} from '@/pages/store/cart/cart.js'

	import {
		storeToRefs
	} from "pinia";
	// 使用 Pinia store
	const cartStore = useCartStore();
	// 获取状态和操作
	const {
		state,
		selectedItemsCount,
		totalSelectedPrice,
	} = storeToRefs(cartStore);

	const {
		toggleItemChoose,
		changeItemQuantity,
		toggleAllChose
	} = cartStore;

	onMounted(async () => {
		// 模拟 API 请求获取购物车数据
		const response = await fetchCartData();
		cartStore.setCartItems(response);

	});

	// 模拟 API 请求函数
	async function fetchCartData() {
		return [{
				id: 1,
				isChoose: false,
				image: "https://gw.alicdn.com/imgextra/i3/2218288872763/O1CN01rN6Cn91WHVIflhWLg_!!2218288872763.jpg",
				title: "散装土鸡蛋  360枚 40斤",
				type: "40斤 正负25g",
				price: 29.9,
				num: 1
			},
			{
				id: 2,
				isChoose: false,
				image: "https://gw.alicdn.com/imgextra/i1/2218288872763/O1CN01DipCdH1WHVIqTtCQR_!!0-item_pic.jpg",
				title: "散装土鸡蛋  360枚 40斤",
				type: "40斤 正负25g",
				price: 29.9,
				num: 1
			}
		];
	}
</script>

<style lang="scss" scoped>
	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 90%;
		/* 占据全宽 */
		height: 100rpx;
		/* Tabbar 高度 */
		background-color: #FFF;
		display: flex;
		align-items: center;

		.card-connect {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.card {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #FFF;
		border-radius: 20rpx;
	}

	.card-shadow {
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 10rpx 10rpx rgba(0.2, 0.1, 0.2, 0.2);
	}

	.cart-data {
		margin-bottom: 40rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.cart-image {
			flex: 1;
		}

		.cart-right {
			display: flex;
			flex-direction: column;
		}
	}
</style>
相关推荐
&岁月不待人&12 分钟前
Kotlin by lazy和lateinit的使用及区别
android·开发语言·kotlin
StayInLove15 分钟前
G1垃圾回收器日志详解
java·开发语言
无尽的大道23 分钟前
Java字符串深度解析:String的实现、常量池与性能优化
java·开发语言·性能优化
爱吃生蚝的于勒27 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
binishuaio36 分钟前
Java 第11天 (git版本控制器基础用法)
java·开发语言·git
zz.YE38 分钟前
【Java SE】StringBuffer
java·开发语言
就是有点傻42 分钟前
WPF中的依赖属性
开发语言·wpf
洋2401 小时前
C语言常用标准库函数
c语言·开发语言
进击的六角龙1 小时前
Python中处理Excel的基本概念(如工作簿、工作表等)
开发语言·python·excel
wrx繁星点点1 小时前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式