(3).获取商品列表数据
1.在data中新增如下的数据节点
data() { return { // 商品列表的数据 goodsList: [], // 总数量，用来实现分页 total: 0 } }
2.在 onLoad 生命周期函数中，调用 getGoodsList 方法获取商品列表数据：
onLoad(options) { // 调用获取商品列表数据的方法 this.getGoodsList() }
3.在methods区域
methods: { // 获取商品列表数据的方法 async getGoodsList() { // 发起请求 const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) if (res.meta.status !== 200) return uni.$showMsg() // 为数据赋值 this.goodsList = res.message.goods this.total = res.message.total } }
(4).渲染商品列表的数据结构
1.在页面中，通过 v-for 指令，循环渲染出商品的 UI 结构
<template> <view> <view class="goods_list"> <block v-for="(item,index) in goodsList" :key="index"> <view class="goods-item"> <!-- 左侧的盒子 图标--> <view class="goods-item-left"> <image :src="item.goods_small_logo || defaultPic " class="goods-pic" mode=""></image> </view> <!-- 右侧的盒子 名字--> <view class="goods-item-right"> <!-- 名字 --> <view class="goods-name"> {{item.goods_name}} </view> <!-- 价格 --> <view class="goods-info-box"> <view class="goods-price"> ￥{{item.goods_price}} </view> </view> </view> </view> </block> </view> </view> </template>
2.为了防止某些商品的图片不存在，需要在 data 中定义一个默认的图片：
data() { return { // 默认的空图片 defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png' } }
并在页面渲染时按需使用：
<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
4.美化商品列表的 UI 结构：
<template> <view> <view class="goods_list"> <block v-for="(item,index) in goodsList" :key="index"> <view class="goods-item"> <!-- 左侧的盒子 图标--> <view class="goods-item-left"> <image :src="item.goods_small_logo || defaultPic " class="goods-pic" mode=""></image> </view> <!-- 右侧的盒子 --> <view class="goods-item-right"> <!-- 名字 --> <view class="goods-name"> {{item.goods_name}} </view> <!-- 价格 --> <view class="goods-info-box"> <view class="goods-price"> ￥{{item.goods_price}} </view> </view> </view> </view> </block> </view> </view> </template>
<style lang="scss"> // 商品列表 .goods-item { // 模块水平对其 display: flex; // 上下间距 padding: 10px 5px; // 底部画线 border-bottom: 1px solid #f0f0f0; // 左侧盒子 .goods-item-left { // 和图片的距离 margin-left: 5px; // 图片大侠 .goods-pic { width: 100px; height: 100px; display: block; } } // 右侧盒子 .goods-item-right { // 垂直对其 display: flex; flex-direction: column; // 两侧对其-上下 justify-content: space-between; .goods-name { font-size: 13px; } .goods-price { color: #C00000; font-size: 16px; } } } </style>
(5).把商品 item 项封装为自定义组件 (提升复用性)
1.创建组件
2.将 goods_list 页面中，关于商品 item 项相关的 UI 结构、样式、data 数据，封装到 my-goods 组件中：
goods_list.vue:父组件绑定数据传送给子组件数据
<template> <view> <view class="goods_list"> <block v-for="(item,index) in goodsList" :key="index"> <!-- 绑定自定义事件 并传递 item数据。 子类接受的名字是 item --> <my-goods :item="item"></my-goods> </block> </view> </view> </template>
my-goods.vue: 子组件接受数据
<template> <view> <view class="goods-item"> <!-- 左侧的盒子 图标--> <view class="goods-item-left"> <image :src="item.goods_small_logo || defaultPic " class="goods-pic" mode=""></image> </view> <!-- 右侧的盒子 --> <view class="goods-item-right"> <!-- 名字 --> <view class="goods-name"> {{item.goods_name}} </view> <!-- 价格 --> <view class="goods-info-box"> <view class="goods-price"> ￥{{item.goods_price}} </view> </view> </view> </view> </view> </template> <script> export default { name: "my-goods", // 儿子接受父亲传递过来的数据 props: { item: { type: Object, default: {} } }, data() { return { // 默认的空图片 defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png' }; } } </script> <style lang="scss"> // 商品列表 .goods-item { // 模块水平对其 display: flex; // 上下间距 padding: 10px 5px; // 底部画线 border-bottom: 1px solid #f0f0f0; // 左侧盒子 .goods-item-left { // 和图片的距离 margin-left: 5px; // 图片大侠 .goods-pic { width: 100px; height: 100px; display: block; } } // 右侧盒子 .goods-item-right { // 垂直对其 display: flex; flex-direction: column; // 两侧对其-上下 justify-content: space-between; .goods-name { font-size: 13px; } .goods-price { color: #C00000; font-size: 16px; } } } </style>
