[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-0bl3zvbT":3,"public-project-articles-0bl3zvbT":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},276,"0bl3zvbT",38,"15. 开发在线点餐功能（二）","## 新建弹窗\n\n```vue\n\u003Cel-dialog v-model=\"data.dialogShow\" title=\"已点餐品\" width=\"800\">\n  \u003Cel-table :data=\"data.orderList\">\n    \u003Cel-table-column label=\"餐品图片\">\n      \u003Ctemplate #default=\"scope\">\n        \u003Cel-image style=\"width: 50px; height: 50px\" :src=\"scope.row.img\" :preview-src-list=\"[scope.row.img]\" preview-teleported>\u003C\u002Fel-image>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fel-table-column>\n    \u003Cel-table-column prop=\"name\" label=\"餐品名称\" \u002F>\n    \u003Cel-table-column prop=\"price\" label=\"餐品价格\" \u002F>\n    \u003Cel-table-column prop=\"num\" label=\"餐品数量\" \u002F>\n  \u003C\u002Fel-table>\n  \u003Ctemplate #footer>\n    \u003Cdiv class=\"dialog-footer\">\n      \u003Cel-button @click=\"data.dialogShow = false\">关闭\u003C\u002Fel-button>\n      \u003Cel-button type=\"primary\" @click=\"save\">下单\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002Fel-dialog>\n```\n\n## 点餐加入购物车\n\n```vue\n\u002F\u002F 点餐的逻辑\nconst addOrder = (foods) => {\n  let f = data.orderList.find(item => item.id === foods.id)  \u002F\u002F 找到菜单里面跟当前点餐同样的餐品\n  if (f) {  \u002F\u002F  存在通用的餐品的情况  就更新餐品的数量\n    f.num += foods.num\n  } else {  \u002F\u002F 不存在  就新增进去\n    let foods1 = JSON.parse(JSON.stringify(foods))\n    data.orderList.push(foods1)\n  }\n  \u002F\u002F 表示对 num字段进行累计求和\n  data.total = data.orderList.map(item => item.num).reduce((acc, cur) => acc + cur, 0)\n}\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719456562687-7abf0bf8-91e9-4326-bb32-d65a3bd001e0.png#averageHue=%23e9e7e6&clientId=u4b32c4d0-01aa-4&from=paste&height=483&id=ue77af0d3&originHeight=604&originWidth=1085&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=111638&status=done&style=none&taskId=u48af5169-f3ec-428a-ac16-f9b0fb82699&title=&width=868)\n\n## 显示已点餐品按钮\n\n```vue\n\u003Cel-button type=\"primary\" plain @click=\"showOrderList\">已点餐品({{ data.total }})\u003C\u002Fel-button>\n```\n\n```vue\nconst showOrderList = () => {\n  data.dialogShow = true\n}\n```","coding",1,609,468,"2024-06-27 12:21:30","2026-05-03 22:49:02","SpringBoot3+Vue3的在线点餐系统","online-ordering",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,55,62,69,76,83,90,97,104,111,118,119],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":14,"project_title":15,"project_slug":16},58,"JOJVoOQd","01. 在线点餐系统介绍",2745,102,"2025-01-09 09:49:39",{"id":28,"uuid":29,"project_id":6,"title":30,"type":9,"status":10,"public_enabled":10,"views":31,"sort":32,"created_at":33,"updated_at":14,"project_title":15,"project_slug":16},59,"Tt7tzqbb","02. 脚手架介绍",2364,103,"2025-01-09 09:54:51",{"id":35,"uuid":36,"project_id":6,"title":37,"type":9,"status":10,"public_enabled":10,"views":38,"sort":39,"created_at":40,"updated_at":14,"project_title":15,"project_slug":16},60,"h74qSg8n","03. 开发登录功能",1974,104,"2024-04-16 02:30:00",{"id":42,"uuid":43,"project_id":6,"title":44,"type":9,"status":10,"public_enabled":10,"views":45,"sort":46,"created_at":47,"updated_at":14,"project_title":15,"project_slug":16},61,"uv8MFWZg","04. 开发后台登录接口",1729,105,"2024-04-16 02:29:56",{"id":49,"uuid":50,"project_id":6,"title":51,"type":9,"status":10,"public_enabled":10,"views":52,"sort":53,"created_at":54,"updated_at":14,"project_title":15,"project_slug":16},62,"jd2xjxUG","05. 开发普通用户登录功能",1145,106,"2024-04-16 02:29:27",{"id":56,"uuid":57,"project_id":6,"title":58,"type":9,"status":10,"public_enabled":10,"views":59,"sort":60,"created_at":61,"updated_at":14,"project_title":15,"project_slug":16},63,"TnvWfP4t","06. 开发普通用户注册功能",861,107,"2024-04-16 02:29:23",{"id":63,"uuid":64,"project_id":6,"title":65,"type":9,"status":10,"public_enabled":10,"views":66,"sort":67,"created_at":68,"updated_at":14,"project_title":15,"project_slug":16},64,"j9QNZGZU","07. 开发管理员后台接口",873,108,"2024-04-16 02:29:17",{"id":70,"uuid":71,"project_id":6,"title":72,"type":9,"status":10,"public_enabled":10,"views":73,"sort":74,"created_at":75,"updated_at":14,"project_title":15,"project_slug":16},65,"Sle0aiDs","08. 开发管理员管理页面并对接后台接口",821,109,"2024-04-16 02:29:13",{"id":77,"uuid":78,"project_id":6,"title":79,"type":9,"status":10,"public_enabled":10,"views":80,"sort":81,"created_at":82,"updated_at":14,"project_title":15,"project_slug":16},66,"msAf9SFh","09. 开发文件上传功能",659,110,"2024-04-16 02:29:09",{"id":84,"uuid":85,"project_id":6,"title":86,"type":9,"status":10,"public_enabled":10,"views":87,"sort":88,"created_at":89,"updated_at":14,"project_title":15,"project_slug":16},67,"8FBiQ4ue","10. 个人资料管理",736,111,"2024-04-16 02:29:06",{"id":91,"uuid":92,"project_id":6,"title":93,"type":9,"status":10,"public_enabled":10,"views":94,"sort":95,"created_at":96,"updated_at":14,"project_title":15,"project_slug":16},252,"hi7dGSTj","11. 顾客信息管理",643,431,"2024-06-20 15:59:16",{"id":98,"uuid":99,"project_id":6,"title":100,"type":9,"status":10,"public_enabled":10,"views":101,"sort":102,"created_at":103,"updated_at":14,"project_title":15,"project_slug":16},253,"2vquH0pr","12. 餐桌管理",879,432,"2024-06-03 22:12:16",{"id":105,"uuid":106,"project_id":6,"title":107,"type":9,"status":10,"public_enabled":10,"views":108,"sort":109,"created_at":110,"updated_at":14,"project_title":15,"project_slug":16},254,"F8DqfdBe","13. 开发餐品管理功能.",731,433,"2024-06-03 22:12:43",{"id":112,"uuid":113,"project_id":6,"title":114,"type":9,"status":10,"public_enabled":10,"views":115,"sort":116,"created_at":117,"updated_at":14,"project_title":15,"project_slug":16},275,"G20uzwaW","14. 开发在线点餐功能（一）",768,467,"2024-06-27 12:21:02",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":14,"project_title":15,"project_slug":16},277,"AUgPvs9x","16. 开发在线点餐功能（三）",716,469,"2024-06-27 12:22:01"]