底部购物车(美团外卖效果)

1、实现列表数据和底部购物车数据共享:(1)vuex的state添加一个属性,用来存储购物车列表的数据,购物车列表的每一项都是商品对象(2)当点击增加按钮时,往当前商品对象中添加count数据:利用vuex,当点击增加/减少按钮时,将当前物品对象中添加一个count属性,因为是对象的引用关系,如果vuex之前的state状态中已经存在商品列表的数据,无需再添加额外的state状态,当前对象改变属性(利用Vue.set,将对象的新属性交给vue来动态绑定数据),商品列表中的该元素也会相应改变添加count属性后,即可根据加减来改变count属性的值,从而实现获得该商品的数量(3)vuex创建对应的方法来进行第(2)步actions.js中创建方法来调用mutations.js内的方法来使得状态增/减，方法的传入当前对象调用actions.js:this.$store.dispatch('xx',{对象:xx}); actions.js:  xx({commit},{对象}){commit(RECEIVE_XXX,{对象});},mutations.js:[RECEIVE_XXX](state,{对象}){if(对象.count){food.count++;}else{state.购物车列表.push(对象); //增加时往购物车列表添加该商品对象,相同商品只改变了count属性,所以每个商品只需要添加一次Vue.set(对象,'count',1); //让对象新增的数据能够被vue数据绑定,动态更新}}(4)通过state中的购物车列表的内容,实现底部购物车的数据展示因为需要实时更新,且建立在已有数据state上在getters.js中定义计算属性方法,通过遍历购物车列表的每一个对象中的count,来计算数量和总价totalCount(state){return state.购物车列表.reduce((preTotal,food)=>{return preTotal+food.count},0)},totalPrice(state){return state.购物车列表.reduce((preTotal,food)=>{return preTotal+food.count*food.price},0)}(5)将vuex状态引入到组件,实现对应功能(6)清除购物车遍历购物车列表,将所有对象的count属性值置为0，然后将整个列表置空(=[ ])对象的引用:多个对象引用同一个对象,其中一个改变,都会改变多个对象引用同一个对象,其中一个指向另一个对象,其他对象不变

代码示例:
state.js:

export default{address:"", //地址categorys:[],//食品分类shops:[],//商家userInfo:{}, //用户信息goods:[], //商品列表ratings:[], //商家评价info:[] ,//商家信息cartFoods:[] //购物车中的商品列表
}

actions.js

import {RECEIVE_ADDRESS,RECEIVE_CATEGORYS,RECEIVE_SHOPS,RECEIVE_USERINFO,RECEIVE_RESET,RECEIVE_GOODS,RECEIVE_RATINGS,RECEIVE_INFO,RECEIVE_ADD,RECEIVE_DELETE
} from './mutation-types'import axios from 'axios';export default{//同步更新food中的count数量,增加updateFoodCount({commit},{food}){commit(RECEIVE_ADD,{food});},//同步更新food中的counte数量,减少updateFoodCountDelete({commit},{food}){commit(RECEIVE_DELETE,{food});}
}

mutations.js:

import {RECEIVE_ADDRESS,RECEIVE_CATEGORYS,RECEIVE_SHOPS,RECEIVE_USERINFO,RECEIVE_RESET,RECEIVE_GOODS,RECEIVE_RATINGS,RECEIVE_INFO,RECEIVE_ADD,RECEIVE_DELETE
} from './mutation-types'import Vue from 'vue'export default{[RECEIVE_ADD](state,{food}){if(food.count){food.count++;}else{state.cartFoods.push(food); //增加时往购物车列表添加该商品对象,相同商品只改变了count属性,所以每个商品只需要添加一次Vue.set(food,'count',1); //让对象新增的数据能够被vue数据绑定,动态更新}},[RECEIVE_DELETE](state,{food}){if(food.count){food.count--; //对象引用,使得属性值减1if(food.count==0){state.cartFoods.splice(state.cartFoods.indexOf(food),1);}}}}

getters.js:

export default{totalCount(state) //返回数量{return state.cartFoods.reduce((preTotal,food)=>{return preTotal+food.count},0)},totalPrice(state)//返回总价{return state.cartFoods.reduce((preTotal,food)=>{return preTotal+food.count*food.price},0)}
}

页面:

<template><div class='bf'><transition name='wave'><div class='blist' v-show='show'> //展开列表<div class='b1'><span>购物车</span><span>清空</span></div>//展开列表,根据购物车列表的状态中是否有数据来渲染<ul class='b2' v-for='(item,index) in cartFoods' :key='index' ><li class='b3'><span>{{item.name}}</span><div class='b4'><span>￥{{item.price}}</span><div class='lz'><div class='cir' @click='del(item)'>-</div><span class='cp'>{{item.count}}</span><div class='cir' @click='add(item)'>+</div></div></div></li></ul></div></transition><div class='bs'><div class='bl'><div class='bimg' @click='change'><img src="./imgs/1.png" alt=""></div><div class='binfo'><p>￥{{totalPrice}}元</p> //根据vuex的计算属性返回总价<p>另需配送费￥{{info.deliveryPrice}}元</p></div></div><div class='br' :class='{on:totalPrice>=info.minPrice}'>//根据vuex的计算属性计算价钱{{totalPrice?totalPrice>=info.minPrice?'去结算':'还差'+(info.minPrice-totalPrice)+'元起送':`￥${info.minPrice}元起送`}}</div><!-- 购物车图标上的数量提示,根据vuex的购物车列表是否有值显示 --><div class='balert' v-show='totalCount'>{{totalCount}}</div></div></div>
</template><script>import {mapState,mapGetters} from 'vuex';export default {data(){return{show:false}},methods: {change() {this.show=!this.show;},del(food) //减少count{this.$store.dispatch('updateFoodCountDelete',{food})},add(food) //增加count{this.$store.dispatch('updateFoodCount',{food})}},computed: {...mapState(['cartFoods','info']),...mapGetters(['totalCount','totalPrice'])}}</script><style lang='less'>.on{background-color: #44BB00!important;}.bf{width: 100%;position: fixed;bottom: 0px;.blist{background-color:#F3F5F7;.b1{display: flex;justify-content: space-between;padding: 0 20px;height: 40px;line-height: 40px;border: solid 1px #ccc;span:last-child{padding: 0 10px;border-left: solid 1px #ccc;border-right: solid 1px #ccc;}}.b2{padding-bottom: 10px;background-color: white;.b3{height: 30px;line-height: 30px;border-bottom:solid 1px #ccc;padding:0 20px ;display: flex;justify-content: space-between;.b4{display: flex;>span{color:red}.lz{display: flex;width: 70px;justify-content: space-evenly;align-items: center;.cir{text-align: center;line-height: 20px;width: 20px;height: 20px;color: white;background-color: #008000;border-radius: 100px;}.cp{font-size: 10px;}}}}}}.bs{color: white;background-color: #131D29;height: 50px;width: 100%;display: flex;justify-content: space-between;position: relative;.bl{display: flex;.bimg{height: 45px;width: 45px;border-radius: 100px;margin-top: -10px;background-color: #131D29;text-align: center;font-size: 0px;line-height: 45px;margin-left: 20px;img{height: 40px;width: 40px;vertical-align: middle;}}.binfo{display: flex;flex-direction: column;justify-content: space-around;margin-left: 10px;p:last-child{color:#ccc;font-size: 12px;}}}.br{height: 50px;line-height: 50px;background-color: #2B333D;padding:0 10px;color: white;}.balert{background-color: red;height: 20px;width: 20px;line-height: 20px;border-radius: 100px;text-align: center;position: absolute;left: 45px;top:-10px;}}}.wave-enter-to,.wave-leave{transform:translateY(0)}.wave-enter,.wave-leave-to{transform:translateY(100%)}.wave-enter-active,.wave-leave-active{transition: transform 1s;}</style>

效果图:

底部购物车(美团外卖效果)相关推荐

android 美团下拉刷新,美团外卖下拉刷新效果实现方法
美团外卖下拉刷新效果实现方法,我们的下拉刷新的效果是在android-Ultra-Pull-To-Refresh框架上做的扩展,这是一款非常强大的下拉刷新框架,有着默认的下拉刷新动画,当然如果我们要实 ...
DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...
vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车
一.购物车基础 1)购物车状态设计cartFoods+mutation store/state.js // 所有要管理的状态数据:从页面需求分析出来,最好和api/index.js里的命名相同 exp ...
美团外卖饿了么竞品分析：共生存？还是你死我亡？
一.前言: 测试机型:三星S6edge 操作系统:Android6.0.1 测试网络:WiFi 测试版本:饿了么 6.0 美团外卖4.7.1 测试时间:2016年8月8日二.市场分析 1.行业分析 ...
CH12-综合项目—仿美团外卖
文章目录目标一.项目分析目标项目概述开发环境模块说明二.效果展示目标店铺界面店铺详情界面店铺详情界面确认清空购物车的对话框菜品详情界面订单界面和支付界面三.服务器数据准备 ...
React Native在美团外卖客户端的实践
MRN简介 MRN(Meituan React Native) 是基于开源的React Native框架改造并完善而成的一套动态化方案,在开发体验上基本能与原生RN保持一致,同时从业务需求的角度满足从 ...
Android Studio初学者实例：Fragment学习--仿美团外卖界面
本次课程为Fragment为主题,课程的示例仿美团外卖界面,不同于底部导航栏的Fragment案例,此界面分为左侧切换与顶部切换.本文先是发布代码与效果,后续讲解将会在后续补充.先看看效果: 首先是布 ...
Android 高仿美团外卖详情页
目录 1.需求分析 2.具体实现 2.1效果展示 2.2布局分析 2.3代码分析 2.3.1自定义 CoordinatorLayout.Behavior 2.3.2自定义 RecyclerView.I ...
iOS高仿美团外卖店铺主页
高仿美团外卖的店铺主页(包括下拉动画效果,解决各种手势问题,并且cell有列表样式,九宫格样式,卡片样式),各种动画效果纵享丝滑,因为写的比较急,还待优化.! 解决UIScrollView嵌套UISc ...

底部购物车(美团外卖效果)

底部购物车(美团外卖效果)相关推荐

最新文章

热门文章