【VUE】微商城(八)----商品列表,商品详情页
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官方文档 找到数字输入框组件,复制其代码
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文件的格式校验
效果:
至此,商品详情页暂时完成。