商城小程序(7.加入购物车)

这篇具有很好参考价值的文章主要介绍了商城小程序(7.加入购物车)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、配置vuex

新建store目录,并创建store.js文件用于管理vuex相关内容
商城小程序(7.加入购物车),小程序,vue.js,javascript
在store.js中 初始化store的实例对象

// 1.导入vue和vuex
import {createStore} from 'vuex'
// 导入购物车的vue模块
import moduleCart from '@/store/cart.js'



// 3.创建store的实例对象
const store = createStore({
	modules: {
		// 购物车的vuex模块,模块内成员的访问路径被调整为m_cart
		'm_cart': moduleCart
	}
})

// 4.向外共享store的实例对象
export default store

在main.js 中导入store实例对象并挂载到vue的实例上

商城小程序(7.加入购物车),小程序,vue.js,javascript

二、创建购物车的store模块

同样目录下创建cart.js模块
商城小程序(7.加入购物车),小程序,vue.js,javascript

在cart.js中,初始化如下的vuex模块

export default {
	// 为当前模块开启命名空间
	namespaced: true,
	
	
	// 模块的state数据
	state: () => ({
		//购物车数组,用来存储购物车中每个商品的信息对象
		//每个商品的信息对象,都包含如下6个属性:
		//{goods_id  goods_name  goods_price  goods_count  goods_small_logo  goods_state}
		cart: []
	}),
	
	//模块的mutations方法
	mutations: {},
	
	// 模块的getters属性
	getters: {}
}

在store/store.js 模块中,导入并挂载购物车中的vue模块

商城小程序(7.加入购物车),小程序,vue.js,javascript

三、在商品详情页中使用store模块

商品详情页面测试,是否能成功调用:

商城小程序(7.加入购物车),小程序,vue.js,javascript
商城小程序(7.加入购物车),小程序,vue.js,javascript

四、实现购加入购物车功能

在store目录下的cart.js模块中,封装一个将商品信息加入购物车的mutations方法,名为addToCart

	//模块的mutations方法
	mutations: {
		addToCart(state, goods){
			// 根据提交的商品Id,查询购物车中是否存在这个商品
			const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
			// 如果不存在,则findResult 为 undefined 否则,为查找到的商品信息对象
			if(!findResult) {
				//如果购物车中没有这件商品,则直接push
				state.cart.push(goods)
			} else {
				// 如果购物车中有这件商品,则只更新数量即可
				findResult.goods_count++
			}
		}
	},

在商品详细页面中,通过mapMutations这个辅助方法,把vuex中的m_cart模块下的addToCart方法映射到当前页面:
商城小程序(7.加入购物车),小程序,vue.js,javascript

为商品导航组件 uni-goods-nav 绑定 @buttonClick=“buttonClick”事件处理函数:

商城小程序(7.加入购物车),小程序,vue.js,javascript

五、动态统计购物车中商品的总数量

在cart.js模块中,在getters节点中定义一个total方法,用于统计购物车中商品的总数量

	// 模块的getters属性
	getters: {
		//统计购物车中商品的总数量
		total(state) {
			let c = 0
			//循环统计商品的数量,累加到变量c中
			state.cart.forEach(goods => c += goods.goods_count)
			return c
		}
	}

在商品详情页面的script标签中,按需导入mapGetters方法并进行使用
商城小程序(7.加入购物车),小程序,vue.js,javascript

通过watch侦听器,监听计算属性total值的变化,从而动态为购物车按钮的徽标赋值

商城小程序(7.加入购物车),小程序,vue.js,javascript

点击加入购物车 实现添加功能
商城小程序(7.加入购物车),小程序,vue.js,javascript
商城小程序(7.加入购物车),小程序,vue.js,javascript

六、持久化存储购物车的商品

商城小程序(7.加入购物车),小程序,vue.js,javascript

修改cart.js 模块中的state函数,读取本地存储的购物车数据,对cart数组进行初始化
商城小程序(7.加入购物车),小程序,vue.js,javascript

七、优化商品详情页的total侦听器

商城小程序(7.加入购物车),小程序,vue.js,javascript
商城小程序(7.加入购物车),小程序,vue.js,javascript

重新加载页面,就能成功回显

商城小程序(7.加入购物车),小程序,vue.js,javascript

八、动态为tabBar页面设置数据徽标

把store中的total映射到cart.vue中使用:

商城小程序(7.加入购物车),小程序,vue.js,javascript
在页面刚显示出来的时候,立即调用setBadge方法,为tabBar设置数字徽标
商城小程序(7.加入购物车),小程序,vue.js,javascript

在methods中,声明setBadge方法,通过uni.setTabBarBadge()为tabBar设置数字徽记
商城小程序(7.加入购物车),小程序,vue.js,javascript
点击进入购物车页面
商城小程序(7.加入购物车),小程序,vue.js,javascript

九、将设置tabBar徽标的代码抽离为mixins

商城小程序(7.加入购物车),小程序,vue.js,javascript
商城小程序(7.加入购物车),小程序,vue.js,javascript

选中首页,分类等界面也会反应出购物车徽标
商城小程序(7.加入购物车),小程序,vue.js,javascript文章来源地址https://www.toymoban.com/news/detail-788139.html

到了这里,关于商城小程序(7.加入购物车)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信电商小程序购买/加入购物车组件设计

    作为一名常常摆烂,一蹶不振的大学生,最近接到了开发电商小程序的小任务,既然是电商,总得有购买加车功能吧?经过n个坤年的拜读微信小程序开发者文档还有别的大佬的指点,奉上我自己的理解,欢迎各位大佬指点改正,学习交流,共同进步。该文章适合微信小程序初

    2024年02月09日
    浏览(46)
  • 商城小程序(8.购物车页面)

    本章主要完成pages下的cart购物页面编写 定义如下UI结构 美化样式 通过 mapState 辅助函数,将Store中的cart数组映射到当前页面中使用: 在UI结构中,通过v-for渲染自定义组件my-goods 打开my-goods.vue组件,为商品左侧图片区域添加radio足迹 并美化UI ,使radio组件和image组件左右布局

    2024年01月23日
    浏览(62)
  • 微信小程序 - 商城项目 - 购物车

      引入 WeUI:

    2023年04月22日
    浏览(51)
  • 前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容

    前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13183 效果图如下: 使用方法 使用注意: 该插件需引用cc-radioBtnBox插件和cc-numbox插件两个插件库 cc-radioBtnBox插件地址:https://ext.dcloud.net

    2024年02月10日
    浏览(48)
  • 微信小程序商城开发-商品详情页跳转购物车

    微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转)   点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错 微信小程序开发需要跳转tabbar页面的话,有固定的跳转方式,不是开发中所有的跳转方式都适用于tabbar跳转

    2024年02月17日
    浏览(60)
  • 记录--仿加入购物车飞入动画效果

    近期对管理后台相关功能进行优化,其中导出功能涉及到查询数据过多导致查询很慢问题,决定采用点击后加入到下载中心方式,既解决了接口慢等待问题,也方便后期各种文件的重复下载,一举多得~ 功能上很好实现,调接口就可以了,主要涉及到一个小球飞入效果,基础

    2024年02月08日
    浏览(59)
  • 使用Vue.js框架的指令和事件绑定实现一个购物车的页面布局

    使用了v-model指令来实现全选/全不选的功能,当全选框被点击时,isAllChecked的值会被改变。 使用了v-if指令来判断购物车中是否有商品,如果有商品则渲染商品列表,否则显示购物车为空的提示。 使用了v-for指令来遍历datalist数组,渲染每个商品项。 使用了@change事件来监听商

    2024年02月12日
    浏览(55)
  • 实现蛋糕商城购物车功能代码实现实验报告

    一、实验目的 1、熟悉HttpSession接口中常用方法 2、熟悉Session 对象的生命周期 3、熟悉两种方法返回与当前请求相关的HttpSession对象。 4、学会如何使用Session 技术模拟用户登录的功能 二、实验内容 实现购物车 1、在chapler05 项目下新建一个名称为 cn.itcast.session.entity 的包,在该

    2024年02月09日
    浏览(49)
  • 【JavaScript】实现简易购物车

    💻【JavaScript】实现简易购物车 🏠专栏:有趣实用案例 👀个人主页:繁星学编程🍁 🧑个人简介:一个不断提高自我的平凡人🚀 🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀 👊格言:☀️没有走不通的路,只有不敢走的人!☀️ 👉让我们一起进步,一起成

    2024年02月04日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包