微商城源码
微商城后端接口项目以及部署说明包含API接口说明文档
1、分类页跳转商品列表
1）、在pages文件夹下创建一个goods文件夹，并且在goods文件夹创建一个GoodsListView.vue
2）、打开router文件夹下的index.js配置GoodsListView.vue路由
3）、进入CategoryView.vue修改二级分类中的a标签为 router-link并添加 to属性跳转到商品列表页
4)、通过路由传参的方式传递分类编号
5）、分类页面将二级分类id传递给路由
6）、商品列表页接收传递过来的二级分类id
2、商品列表展示
1）、根据接口文档 发送请求根据分类编号获取对应商品列表
2）、商品列表页面结构
3）、商品列表CSS样式代码
<style lang="scss" scoped>.goods-list {display: flex;flex-wrap: wrap;padding-left: 10px;.goods-item {width: calc(calc(100% / 2) - 10px);margin: 10px 10px 0 0;background: #fff;display: flex;flex-direction: column;justify-content: space-between;border-radius: 10px;padding: 10px;img {width: 100%;}.title {font-size: 14px;color: #333;margin: 10px 0;}.info {display: flex;justify-content: space-between;margin-bottom: 0;.price {color: red;font-weight: bold;font-size: 16px;}.sell {font-size: 13px;}}}}</style>
效果：
3、商品列表加载更多
1）、在商品列表页 GoodsListView.vue增加加载更多按钮
2）、加载更多功能实现
4、跳转商品详情页
1）、进入pages/goods文件夹下创建GoodsInfoView.vue
2）、配置商品详情页路由
3）、商品列表页跳转商品详情页
4）、商品详情页接收传过来的商品Id参数
5）、发送请求根据商品编号获取对应的商品详情
6）、商品详情页商品购买区域布局
1、打开mui文档 找到卡片视图复制代码
<div class="mui-card"><!--页眉，放置标题--><div class="mui-card-header">页眉</div><!--内容区--><div class="mui-card-content">内容区</div><!--页脚，放置补充信息或支持的操作--><div class="mui-card-footer">页脚</div></div>
2、将上面复制的代码放入商品详情页商品购买区域
3、修改复制进来的内容
7）、商品参数区域布局
8）、商品详情也得CSS样式代码
<style lang="scss" scoped>.goods-info {background: #f1f1ff;overflow: hidden;.price {span {color:red;font-size: 14px;font-weight: bold;}}.go-buy {display: flex;margin: 10px 0 0px;justify-content: center;button {margin: 0 5px;}}.good-desc {background: #fff;padding: 5px;h3 {font-size: 16px;color: #226aff;text-align: center;margin: 15px 0;}.content {font-size: 14px;line-height: 28px;img {width: 100%;}}}}</style>
9）、商品详情页预览图轮播实现
效果：
5、封装并使用购买数量组件
1）、在components文件夹下创建NumboxView.vue文件
2）、打开mui官方文档MUI-最接近原生APP体验的高性能前端框架 找到数字输入框组件，复制其代码
3）、将以上复制的代码粘贴到NumboxView.vue中，并编写相关JS代码
<div class="mui-numbox" data-numbox-min="1" data-numbox-max="9"><button class="mui-btn mui-btn-numbox-minus" type="button">-</button><input id="test" class="mui-input-numbox" type="number" value="5"><button class="mui-btn mui-btn-numbox-plus" type="button">+</button></div>
4）、进入商品详情页使用numbox组件
5）、eslint 忽略对mui.min.js文件的格式校验
效果：
至此，商品详情页暂时完成。
