【VUE】微商城（八）----商品列表，商品详情页-CFANZ编程社区

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文件的格式校验

效果：

至此，商品详情页暂时完成。