vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车

2024-05-06 19:38
文章标签 javascript 设计 计算 组件 vue 相关 状态 frontend 底部 滚动 购物车 详情 外卖 vuex 清空 十九 商家

本文主要是介绍vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、购物车基础

1）购物车状态设计cartFoods+mutation

在这里插入图片描述

store/state.js

// 所有要管理的状态数据：从页面需求分析出来，最好和api/index.js里的命名相同
export default{latitude: 40.10038, // 纬度longitude: 116.36867, // 经度address: {}, //地址相关信息对象categorys: [], // 食品分类数组shops: [], // 商家数组userInfo: {}, // 用户信息goods: [], // 商品列表ratings: [], // 商家评价列表info: {}, // 商家信息cartFoods: [], // 【1】购物车中食物的列表}

1.用于存储加入到了购物车中的food对象，即food.count加了此属性的food，放入cartFoods中
2.重点：【1-2】处

src/store/mutations.js

// 加购物车数量[INCREMENT_FOOD_COUNT](state,{food}){if(!food.count){//如果不存在数量属性则加一个// food.count=1//此操作虽能在food中加一个count属性，但视图无法更新/*可更新视图的设置新属性：Vue.set()参数：对象属性名属性值*/Vue.set(food,'count',1)// 【1】把加入了数量的食物，都放入cartFoods的状态中，用于购物车结算state.cartFoods.push(food)}else{//如果存在则直接加1food.count++}},// 减购物车数量[DECREMENT_FOOD_COUNT](state,{food}){if(food.count){//如果购物车数量>0才进行减操作，防止数量为负food.count--// 如果food.count数量减少至0了则从state.cartFoods中删除相应的food// 【2】splice(删除下标,删除数量)；indexOf(food)返回对应对象的下标if(food.count===0){state.cartFoods.splice(state.cartFoods.indexOf(food),1)}}}

2）设计一个新状态用于计算加入购物车食物总数量(totalCount)、总价格(totalPrice)

getters类似computed：处理vuex中现有的状态，生成返回一个所有地方都可调用的新状态
知识点：getters的生成
reduce()函数两种返回累加值写法=>和return

store/getters.js

// getters类似computed：处理vuex中现有的状态，生成返回一个所有地方都可调用的新状态
export default{//【1】返回根据cartFoods中的food.count生成：购物车中食物的总数量，用于结算时使用totalCount(state){return state.cartFoods.reduce((total,food)=>{//【1.1】此处是用非箭头写法，需要返回一下值外面才能收到return total+food.count},0)},//【2】返回根据cartFoods中的food.count生成：购物车中食物总价格totalPrice(state){//【2.1】此处内部直接用=>total+food...代替returnreturn state.cartFoods.reduce((total,food)=>total+food.count*food.price,0)},//或： 【2.2】以上也可用totalCount生成的getter来计算购物车总价：totalPrice2(state,getters){return state.cartFoods.reduce((total,food)=>total+getters.totalCount*food.price,0)}}

3）购物车组件src/components/shopCart/shopCart.vue

<template>
<div><div class="shopcart"><div class="content"><div class="content-left"><div class="logo-wrapper"><!-- 【5】如果购物车里商品有数量则加高亮显示类名highlight --><div class="logo " :class="{highlight:totalCount}"><!-- 【12】点击显示购物车列表 --><i class="iconfont icon-shopping_cart" :class="{highlight:totalCount}"@click="showCarts"></i></div><div class="num">{{totalCount}}</div></div><div class="price" :class="{highlight:totalCount}">￥{{totalPrice}}</div><div class="desc">另需配送费￥{{info.deliveryPrice}} 元</div></div><div class="content-right"><!-- 【6】结合计算属性控制结算按钮颜色(灰/绿)，显示文字(还差xx元起送/去结算) --><div class="pay" :class="payClass">{{payText}}</div></div></div><!-- 【7】显隐购物车列表 需满足2个条件：1.isShow为true；且2.购物车总数不能为0；它们有一个为false就不显示列表，因此要用到计算属性showList对是否显示重新计算 --><div class="shopcart-list" v-show="showList"><div class="list-header"><h1 class="title">购物车</h1><span class="empty">清空</span></div><div class="list-content"><ul><li class="food" v-for="(food,index) in cartFoods" :key="index"><span class="name">{{food.name}}</span><div class="price"><span>￥{{food.price}}</span></div><div class="cartcontrol-wrapper"><div class="cartcontrol"><CartControl :food="food"/></div></div></li></ul></div></div></div><!-- 【8】购物车列表蒙版：用计算属性原因同上 --><div class="list-mask" v-show="showList" @click="showCarts"></div>
</div>
</template><script>//【1】引入状态读取，getters读取助手函数import {mapState,mapGetters} from 'vuex'import CartControl from '../CartControl/CartControl' //购物车加减数量组件export default{data(){return{isShow:false, //【9】显隐购物车列表}},computed:{// 【2】引入需要的state、getters...mapState(['cartFoods','info']), //购物车里的食物对象，商家相关信息如：食物的起送金等其它信息...mapGetters(['totalCount','totalPrice']), //购物车食物总数量，购物车食物总价// 【3】购物车付款结算按钮：购物车总额>起送时显示样式：enough；// 小于时显示样式：not-enough；payClass(){const {totalPrice}=thisconst {minPrice}=this.inforeturn totalPrice>=minPrice ? 'enough' : 'not-enough'},// 【4】购物车付款结算按钮：购物车没东西时显示：xx元起送；// 未达金额时显示：还差xx元起送；达金额则显示：去结算；payText(){const {totalPrice}=thisconst {minPrice}=this.infoif(totalPrice===0){return `${minPrice}元起送`}else if(totalPrice<minPrice){return `还差${minPrice-totalPrice}元起送`}else{     return '去结算'}},// 【11】重新计算isShow，控制是否显示隐藏购物车列表showList(){/* 显示购物车列表条件：列表总数不为0 且 isShow也为true，才会显示购物车列表*/if(this.totalCount===0){/*isShow置否，防止在商家详情列表里点加时满足：count不为0 且 isShow也为true自动显示购物车列表*/this.isShow=false return false //直接返回false让}// 不为0则原样返回return this.isShow},},methods:{//【10】显隐购物车列表showCarts(){// 大于0才显示：防止显示空列表if(this.totalCount>0){       this.isShow=!this.isShow}}},components:{CartControl}}
</script><style lang="stylus" rel="stylesheet/stylus" scoped>@import "../../common/stylus/mixins.styl".shopcartposition fixedleft 0bottom 0z-index 50width 100%height 48px.contentdisplay flexbackground #141d27font-size 0color rgba(255, 255, 255, 0.4).content-leftflex 1.logo-wrapperdisplay inline-blockvertical-align topposition relativetop -10pxmargin 0 12pxpadding 6pxwidth 56pxheight 56pxbox-sizing border-boxborder-radius 50%background #141d27.logowidth 100%height 100%border-radius 50%text-align centerbackground #2b343c&.highlightbackground $green.icon-shopping_cartline-height 44pxfont-size 24pxcolor #80858a&.highlightcolor #fff.numposition absolutetop 0right 0width 24pxheight 16pxline-height 16pxtext-align centerborder-radius 16pxfont-size 9pxfont-weight 700color #ffffffbackground rgb(240, 20, 20)box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.4).pricedisplay inline-blockvertical-align topmargin-top 5pxline-height 24pxpadding-right 12pxbox-sizing border-boxfont-size 16pxfont-weight 700color #fff&.highlightcolor #fff.descdisplay inline-blockvertical-align bottommargin-bottom 15pxmargin-left -45pxfont-size 10px.content-rightflex 0 0 105pxwidth 105px.payheight 48pxline-height 48pxtext-align centerfont-size 12pxfont-weight 700color #fff&.not-enoughbackground #2b333b&.enoughbackground #00b43ccolor #fff.ball-container.ballposition fixedleft 32pxbottom 22pxz-index 200transition all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41).innerwidth 16pxheight 16pxborder-radius 50%background $greentransition all 0.4s linear.shopcart-listposition absoluteleft 0top 0z-index -1width 100%transform translateY(-100%)&.move-enter-active, &.move-leave-activetransition transform .3s&.move-enter, &.move-leave-totransform translateY(0).list-headerheight 40pxline-height 40pxpadding 0 18pxbackground #f3f5f7border-bottom 1px solid rgba(7, 17, 27, 0.1).titlefloat leftfont-size 14pxcolor rgb(7, 17, 27).emptyfloat rightfont-size 12pxcolor rgb(0, 160, 220).list-contentpadding 0 18pxmax-height 217pxoverflow hiddenbackground #fff.foodposition relativepadding 12px 0box-sizing border-boxbottom-border-1px(rgba(7, 17, 27, 0.1)).nameline-height 24pxfont-size 14pxcolor rgb(7, 17, 27).priceposition absoluteright 90pxbottom 12pxline-height 24pxfont-size 14pxfont-weight 700color rgb(240, 20, 20).cartcontrol-wrapperposition absoluteright 0bottom 6px.list-maskposition fixedtop 0left 0width 100%height 100%z-index 40backdrop-filter blur(10px)opacity 1background rgba(7, 17, 27, 0.6)&.fade-enter-active, &.fade-leave-activetransition all 0.5s&.fade-enter, &.fade-leave-toopacity 0background rgba(7, 17, 27, 0)
</style>

4）商家详情调用购物车组件src/pages/shop/goods/goods.vue

...略过
<!-- 底部购物车组件 --><ShopCart /> </div><!-- ref是标识此子组件：用于调用其内部的toggleShow()展示隐藏食物详情;:food向子组件传当前food对象 --><Food :food='food' ref="food" /></div>
</template>import ShopCart from '../../../components/ShopCart/ShopCart.vue' //底购物车按钮export default{
...
components:{CartControl,Food,ShopCart,}
}

5）效果：http://localhost:8080/#/shop/goods

0.点购物车图标显隐购物车列表
并能自动计算相关数值：

  1. 右结算按钮：满xx元配送 / 差xx配送 / 去结算
  2. 总费用计算
  3. 食品总数量计算 左侧红点
  4. 点蒙板也可关闭列表

在这里插入图片描述

二、清空购物车+滚动购物车

0.store/state.js

// 所有要管理的状态数据：从页面需求分析出来，最好和api/index.js里的命名相同
export default{cartFoods: [], // 购物车中食物的列表
}

1.store/mutation-types.js

export const CLEAR_CART = 'clear_cart' // 清空购物车

2.mutations.js

import {//【1】  引入类型CLEAR_CART,
} from './mutation-types.js'
import Vue from 'vue' //用于新增一个状态的属性，并能自动更新视图export default{...略过//【2】清空购物车[CLEAR_CART](state){// 把购物车状态中的count全部置为0state.cartFoods.forEach(food=>food.count=0)// 把购物车清空state.cartFoods=[]}}

3.actions.js

// 控制mutations
import {
略过...CLEAR_CART //【1】
} from './mutation-types.js'
import {
略过... //ajax请求
} from '../api/index.js'export default{略过...// 【2】清空购物车clearCart({commit}){commit(CLEAR_CART)}}

4.调用清空购物车components/shopCart/shopCart.vue

//【1】
<span class="empty" @click="clearCart">清空</span>import { MessageBox } from 'mint-ui' //确认提示框组件methods:{略过...//【1】调用vuex的action触发：mutation清空cartFoods[]和food.count数量[实现清空购物车]clearCart(){/*min-ui组件MessageBox.confirm('确定吗').then(fn1,fn2)fn1是点确定时执行的操作，fn2：取消时操作*/MessageBox.confirm('确认清空购物车吗').then(action=>{this.$store.dispatch('clearCart')},()=>{})    }

5. 购物车列表的滚动better-scroll components/shopCart/shopCart.vue

import BScroll from '@better-scroll/core' //滑动库methods:{
// 【11】重新计算isShow，控制是否显示隐藏购物车列表showList(){/* 显示购物车列表条件：列表总数不为0 且 isShow也为true，才会显示购物车列表*/if(this.totalCount===0){/*isShow置否，防止在商家详情列表里点加时满足：count不为0 且 isShow也为true自动显示购物车列表*/this.isShow=false return false //直接返回false让}//【重点】如果显示了就创建一个Bscroll滑动对象if(this.isShow) {this.$nextTick(() => {// 实现BScroll的实例是一个单例，// 如果创建多个就会导致里面的加减按钮一次加减多个食物数量if(!this.scroll) { //如果滚动对象不存在执行：this.scroll = new BScroll('.list-content', {click: true})} else {// 让滚动条刷新一下: 重新统计内容的高度解决第一次无法滚动问题this.scroll.refresh() }})}// 不为0则原样返回return this.isShow}}

效果：购物车列表即可滚动

这篇关于vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/965192。

相关文章

RecastNavigation之Poly相关类

RecastNavigation之Poly相关类

Poly分成正常的Poly 和 OffMeshPoly。 正常的Poly 又分成 原始的Poly 和 Detail化的Poly，本文介绍这两种。 Poly的边分成三种类型： 1. 正常边：有tile内部的poly与之相邻 2.border边：没有poly与之相邻 3.Portal边：与之相邻的是外部tile的poly   由firstLink索引 得到第一个连接的Poly  通
阅读更多...
计算绕原点旋转某角度后的点的坐标

计算绕原点旋转某角度后的点的坐标

问题： A点（x, y）按顺时针旋转 theta 角度后点的坐标为A1点(x1,y1)  ，求x1 y1坐标用（x，y）和 theta 来表示 方法一： 设 OA 向量和x轴的角度为 alpha ， 那么顺时针转过 theta后 ，OA1 向量和x轴的角度为 (alpha - theta) 。 使用圆的参数方程来表示点坐标。A的坐标可以表示为： \[\left\{ {\begin{ar
阅读更多...
公共筛选组件（二次封装antd）支持代码提示

公共筛选组件（二次封装antd）支持代码提示

如果项目是基于antd组件库为基础搭建，可使用此公共筛选组件 使用到的库 npm i antdnpm i lodash-esnpm i @types/lodash-es -D /components/CommonSearch index.tsx import React from 'react';import { Button, Card, Form } from 'antd'
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
在线装修管理系统的设计

在线装修管理系统的设计

管理员账户功能包括：系统首页，个人中心，管理员管理，装修队管理，用户管理，装修管理，基础数据管理，论坛管理 前台账户功能包括：系统首页，个人中心，公告信息，论坛，装修，装修队 开发系统：Windows 架构模式：B/S JDK版本：Java JDK1.8 开发工具：IDEA(推荐) 数据库版本： mysql5.7 数据库可视化工具： navicat 服务器：SpringBoot自带 ap
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
DDei在线设计器-API-DDeiSheet

DDei在线设计器-API-DDeiSheet

DDeiSheet   DDeiSheet是代表一个页签，一个页签含有一个DDeiStage用于显示图形。   DDeiSheet实例包含了一个页签的所有数据，在获取后可以通过它访问其他内容。DDeiFile中的sheets属性记录了当前文件的页签列表。   一个DDeiFile实例至少包含一个DDeiSheet实例。   本篇最后提供的示例可以在DDei文档直接预览 属性 属性名说明数
阅读更多...
Toolbar+DrawerLayout使用详情结合网络各大神

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作，我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情： 1.创建toolbar布局跟drawerlayout布局 <?xml vers
阅读更多...
js+css二级导航

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2