``` <template> <view style="flex-direction: column;"> <block v-for="(item, index) of pagedData" :key="index"> <view style="flex-direction: column; flex: 1;"> <view style="height: 750rpx;"> <image v-bind:src="item.img" style="width: 100%; height: 100%;"></image> </view> <view style="padding:20rpx; font-size: 30rpx; font-weight: bold;"> {{item.title}}</view> <view style="padding: 20rpx;"> <view> <view> {{item.price}} </view> <view style="padding-left: 20rpx;"> {{item.seller_count}} </view> </view> <view style="flex: 1; justify-content: flex-end;"> <view> <button type="warn" size="mini">購買</button> </view> </view> </view> </view> <view style="background-color: #8F8F94; height: 10rpx;"></view> </block> </view> </template> <script> export default { data() { return { pagedData: [{ img: 'http://via.placeholder.com/750x750', title: '啟蒙積木小汽車小飛機組合套裝兒童益智拼裝積木玩具10小盒展示禮盒裝', price: '￥100', seller_count: '2.13萬人在買' }, { img: 'http://via.placeholder.com/750x750', title: '啟蒙積木小汽車小飛機組合套裝兒童益智拼裝積木玩具10小盒展示禮盒裝', price: '￥100', seller_count: '2.13萬人在買' }, ] } }, async onLoad() { let page = 1; let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${page}&shop_id=682731`; uni.request({ url: url, success: (res) => { console.log(res) const data = res.data; this.pagedData = data.shop_products; } }) } } </script> <style> view { /* margin: 10rpx; border: #8F8F94 solid 1rpx; */ display: flex; flex-direction: row; font-size: 28rpx; } </style> ```