2.20

!--pages/shopList/shopList.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
    <view class="thumb">
        <image src="{{item.images[0]}}"></image>
    </view>
    <view class="information">
        <view class="shoptitle">{{item.name}}</view>
        <view>电话：{{item.phone}}</view>
        <view>地址：{{item.address}}</view>
        <view>营业时间：{{item.businessHours}}</view>
    </view>
</view>

/* pages/shopList/shopList.wxss */
.shop-item {
    display: flex;
    /* 每个图片和边框的距离 */
    padding: 15rpx;
    /* 加个边框 */
    border: 1rpx solid #efefef;
    /* 每个item项之间15rpx距离 */
    margin: 15rpx;
    /* 每一个item项加了一个圆角的效果 */
    border-radius: 8rpx;
    /* 加个盒子阴影，横向纵向扩散分别为1rpx 扩散为15rpx 颜色为灰 */
    box-shadow: 1rpx 1rpx 15rpx #ddd;
}

.thumb image {
    width: 250rpx;
    height: 250rpx;
    /* 图片之间无间隙 */
    display: block;
    /* 图片和文字之间的间隔 */
    margin-right: 12rpx;
}

.information {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 24rpx;
}

.shoptitle {
    font-weight: bold;
}

// pages/shopList/shopList.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        shopList: [],
        page: 1,
        pageSize: 10,
        total: 0,
        title1: '1',
        id: 0
    },
    getShopList() {
        wx.request({
            url: 'https://applet-base-api-t.itheima.net/categories/'+this.data.id+'/shops',
            method: "GET",
            data: {
                _page: this.data.page,
                _limit: this.data.pageSize
            },
            success: (response) => {
                console.log(response)
                this.setData({
                    shopList:[...this.data.shopList,...response.data] ,
                    total:response.header['X-Total-Count']-0,
                })
            }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onl oad(options) {
        this.setData({
            title1: options.name,
            id: options.id
        }),
        this.getShopList()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        wx.setNavigationBarTitle({
            title: this.data.title1,
        })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})