外卖项目底部购物车组件编写

秒速五厘米 2023-06-05 08:26 53阅读 0赞

底下购物车一共有三种样式

未选商品样式：

![1693641-20190904150207068-1330974250.png][]

已选商品但未到起送价样式：

![1693641-20190904150248417-152545739.png][]

已经到达起送价的样式

![1693641-20190904150414199-1196219471.png][]

首先这购物车的三种不同的样式，都需要从外部获取数据，也就是拿到food组件选择的商品和商品的总价，由于购物车是food组件的子组件，所以可以在food组件里把起送费和配送费传递进去

![1693641-20190904150439826-998253005.png][]

由于food组件的数据是app.vue这个根组件拿到的数据传递过去的，所以在这里还需要传递seller进去到food组件

![1693641-20190904150628604-1481421176.png][]

在购物车组件中接收这两个参数，并且新建一个由父元素传递进去来被选择的商品，该功能目前未实现，所以使用先用测试数据（组件内部如果接收的是一个数组或者对象，则需要返回一个函数）

![1693641-20190904150722259-962389029.png][]

在计算属性中新建两个方法，计算出被选择的商品的总价和总数

![1693641-20190904151005263-1100884957.png][]

接下里则需要根据这些总价，总数变量来改变购物车的样式，给logo添加一个on的方法，来控制样式的切换

同样购物车右上角的数字也需要通过商品数量来控制是否显示

![1693641-20190904151309038-1944143493.png][]

写好on的样式

![1693641-20190904151340566-864250251.png][]

现在第一步已经实现了

![1693641-20190904151406214-1317937062.png][]

接下来右侧是否到达最低起送费也需要三种不同的样式

![1693641-20190904151505131-154004930.png][]

还差多少达到起送费需要再使用一个计算属性，来通过当前选择商品的总价减去最低起送费来判断，在这里使用一个es6的模板字符串来控制数据的显示

![1693641-20190904151651957-948548356.png][]

![1693641-20190904151734432-813595065.png][]

通过同样的方法来控制展示不同的样式

![1693641-20190904151804190-321412783.png][]

到这里就可以了，可以直接通过改变props模拟的外部数据来测试

![1693641-20190904151909724-939835156.png][]

![1693641-20190904151934889-1946253025.png][]

转载于:https://www.cnblogs.com/rmty/p/11459365.html

[1693641-20190904150207068-1330974250.png]: /images/20230601/bc788428a03842e78c917635acbe37a2.png
[1693641-20190904150248417-152545739.png]: /images/20230601/fa778bd17dd342489dbd22a4fee23f4b.png
[1693641-20190904150414199-1196219471.png]: /images/20230601/51f151fb08a748d897ad1c19455d31f3.png
[1693641-20190904150439826-998253005.png]: /images/20230601/485310aff799418396fa9397a1ea4d8f.png
[1693641-20190904150628604-1481421176.png]: /images/20230601/68065c98b506411aa1587b421a933e83.png
[1693641-20190904150722259-962389029.png]: /images/20230601/677c0d0dac334562b45095ab60051251.png
[1693641-20190904151005263-1100884957.png]: /images/20230601/33886c57c1af46c08be82227dc2b9002.png
[1693641-20190904151309038-1944143493.png]: /images/20230601/f9c2d76faca14967a171c965b7c37408.png
[1693641-20190904151340566-864250251.png]: /images/20230601/1d7e904f81ab4c73940a8d1d59873add.png
[1693641-20190904151406214-1317937062.png]: /images/20230601/0296baed296648c19f331cf1ad51a9bc.png
[1693641-20190904151505131-154004930.png]: /images/20230601/c1c659d34b954669b8d8809c780d9b90.png
[1693641-20190904151651957-948548356.png]: /images/20230601/1b67786cd34b450b833a63613e089a94.png
[1693641-20190904151734432-813595065.png]: /images/20230601/77123600992f4fd88dd5b9758934009c.png
[1693641-20190904151804190-321412783.png]: /images/20230601/5cbfa5f9ff3e47be926aea2a1cfb5208.png
[1693641-20190904151909724-939835156.png]: /images/20230601/8d26c021b6eb49dfbd68380078877205.png
[1693641-20190904151934889-1946253025.png]: /images/20230601/79e94043ea8543a191c4a92fdd9f51de.png