[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-7gHUek7z":3,"public-project-articles-7gHUek7z":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},1050,"7gHUek7z",52,"10. 带你实现商品详情页功能","## 详情页面 GoodsDetail.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"front-container\" style=\"width: 50%\">\n    \u003Cdiv class=\"card\" style=\"padding: 20px; display: flex; grid-gap: 20px; margin-bottom: 10px\">\n      \u003Cimg :src=\"data.goods.img\" alt=\"\" style=\"width: 300px; height: 300px\">\n      \u003Cdiv style=\"flex: 1\">\n        \u003Cdiv style=\"display: flex; align-items: flex-start; grid-gap: 20px; margin-bottom: 10px\">\n          \u003Cdiv style=\"font-size: 22px; font-weight: bold; line-height: 25px\">\n            \u003Cel-tag style=\"margin-right: 5px; float: left; background-color: red; color: white\" type=\"danger\" v-if=\"data.goods.recommend === '是'\">推荐\u003C\u002Fel-tag>\n            {{ data.goods.name }}\u003C\u002Fdiv>\n          \u003Cdiv style=\"width: 60px; cursor: pointer; color: #666\">\n            \u003Cel-icon style=\"position: relative; top: 3px\" size=\"18\">\u003CStar \u002F>\u003C\u002Fel-icon>收藏\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv style=\"margin-bottom: 20px\">\n          \u003Cspan style=\"color: red; font-size: 18px\">￥\u003C\u002Fspan>\u003Cb style=\"color: red; font-size: 30px\">{{ data.goods.price }}\u003C\u002Fb>\n          \u003Cspan style=\"color: #666; margin-left: 20px\">累计销量 {{ data.goods.saleCount }}\u003C\u002Fspan>\n          \u003Cspan style=\"color: #666; margin-left: 20px\">剩余库存 {{ data.goods.store }}\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv style=\"margin-bottom: 20px; padding: 10px; border-radius: 5px; background-color: #e8e4e4; line-height: 25px; text-align: justify\">{{ data.goods.description }}\u003C\u002Fdiv>\n        \u003Cdiv>\n          \u003Cel-input-number style=\"width: 150px; height: 40px\" :min=\"1\" v-model=\"data.num\">\u003C\u002Fel-input-number>\n          \u003Cel-button style=\"height: 40px; margin-left: 5px\" type=\"danger\">加入购物车\u003C\u002Fel-button>\n          \u003Cel-button style=\"height: 40px; margin-left: 5px\" type=\"danger\">立即购买\u003C\u002Fel-button>\n        \u003C\u002Fdiv>\n        \u003Cdiv style=\"margin-top: 10px; color: #666\">校园小卖部销售并发货的商品，由小卖部提供发票和相应的售后服务。请您放心购买！\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\" style=\"padding: 20px; margin-bottom: 50px\">\n      \u003Cdiv style=\"font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd\">\n        \u003Cspan @click=\"changeTab('商品详情')\" style=\"cursor: pointer\" :class=\"{'current-active': data.current === '商品详情' }\">商品详情\u003C\u002Fspan>\n        \u003Cspan @click=\"changeTab('商品评论')\" :class=\"{'current-active': data.current === '商品评论' }\" style=\"cursor: pointer; margin-left: 20px\">商品评论\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv v-if=\"data.current === '商品详情'\" style=\"padding: 10px\" v-html=\"data.goods.content\">\u003C\u002Fdiv>\n      \u003Cdiv v-if=\"data.current === '商品评论'\" style=\"min-height: 700px\">\n        \u003Cdiv v-if=\"data.commentList.length === 0\" style=\"padding: 50px; text-align: center; color: #666\">暂无评论...\u003C\u002Fdiv>\n        \u003Cdiv v-if=\"data.commentList.length > 0\" style=\"padding: 20px; text-align: center\">\n\u003C!--          显示评论列表-->\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport router from \"@\u002Frouter\";\nimport request from \"@\u002Futils\u002Frequest\";\n\nconst data = reactive({\n  id: router.currentRoute.value.query.id,\n  goods: {},\n  num: 1,\n  current: '商品详情',\n  commentList: []\n})\n\nconst changeTab = (tabName) => {\n  data.current = tabName\n}\n\nconst load = () => {\n  request.get('\u002Fgoods\u002FselectById\u002F' + data.id).then(res => {\n    data.goods = res.data\n  })\n}\nload()\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.current-active {\n  color: red;\n  border-bottom: 2px solid red;\n  padding-bottom: 10px\n}\n\u003C\u002Fstyle>\n```\n\n","coding",1,2622,2053,"2025-11-26 17:22:20","2026-05-03 22:49:02","青哥带小白做毕设2026所有资料汇总","qingge-code-2026",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,55,62,69,76,83,90,91,98,105,112,119,127,134],{"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},993,"mgoFKmGT","00. 带小白做毕设课程介绍以及脚手架获取",32065,1966,"2026-03-29 19:37: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},998,"1kCk1d2E","01. 导入并运行项目脚手架",14398,1974,"2025-11-11 16:24:50",{"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},1003,"8ZlQ12IX","02. 带你开发一个基础的用户管理模块（上）",12150,1987,"2025-11-12 16:53:01",{"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},1006,"6mmUNf9i","03. 带你开发一个基础的用户管理模块（下）",7782,1994,"2025-11-13 16:48:27",{"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},1011,"3XNG04wA","04. 带你开发用户登录、注册、个人信息、修改密码功能",6474,2003,"2025-11-17 17:03:58",{"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},1017,"LnAAYydZ","05. 带你开发商品分类管理功能",5467,2012,"2025-11-24 17:30: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},1018,"584qohhy","06. 开发商品信息管理功能",4836,2013,"2025-11-24 17:30:12",{"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},1024,"scxsifCZ","07. 开发轮播图信息管理功能",3313,2021,"2025-11-24 17:29:58",{"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},1041,"AjujV8Gq","08. 带你实现前台首页功能",4058,2039,"2025-11-24 17:31:31",{"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},1045,"p6yD8ZxS","09. 带你实现商品搜索、商品分类检索功能",3005,2048,"2025-11-25 16:35:45",{"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":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},1059,"aX7rviTw","11. 带你实现商品收藏功能",2667,2067,"2025-11-28 17:00:21",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},1060,"xcmGXr9E","12. 带你开发用户模拟充值功能",2443,2068,"2026-02-02 14:24:37",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},1065,"z8IN0tX8","13. 带你实现购物车功能",2461,2078,"2025-12-01 17:16:05",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},1069,"NfBIfhVx","14. 带你实现商品下单功能",3131,2086,"2025-12-02 16:57:21",{"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":126,"project_title":15,"project_slug":16},1072,"PDQdczrn","14.1 带你实现订单配送功能",2772,2097,"2025-12-03 16:10:40","2026-05-07 15:36:12.649662+00",{"id":128,"uuid":129,"project_id":6,"title":130,"type":9,"status":10,"public_enabled":10,"views":131,"sort":132,"created_at":133,"updated_at":14,"project_title":15,"project_slug":16},1075,"RYH15Bfu","15. 带你实现订单评价功能",2507,2103,"2025-12-04 17:10:47",{"id":135,"uuid":136,"project_id":6,"title":137,"type":9,"status":10,"public_enabled":10,"views":138,"sort":139,"created_at":140,"updated_at":14,"project_title":15,"project_slug":16},1079,"iUdzrNPu","16. 带你实现后台数据统计功能",2991,2107,"2025-12-05 17:37:57"]