<template>
<view class="page">
<view class="uni-product-list">
<view class="uni-product" v-for="(item,index) in productList" :key="index">
<view class="image-view">
<image v-if="renderImage" class="uni-product-image" :src="item.image"></image>
</view>
<view class="uni-product-title">{{item.title}}</view>
<view class="uni-product-price">
<text class="uni-product-price-favour">¥{{item.originalPrice}}</text>
<text class="uni-product-price-original">¥{{item.favourPrice}}</text>
<text class="uni-product-tip">{{item.tip}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
productList: [],
renderImage: false
};
},
methods: {
getList() {
uni.request({
url: 'http://localhost:3000/goods',
success: (res) => {
console.log(res.data);
this.productList = res.data.goodslist;
}
});
}
},
onLoad() {
this.getList();
this.renderImage = true;
},
};
</script>
<style>
</style>
good.js
let data = {
"goodslist":[
{
image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
title: 'Apple iPhone X 256GB 深空灰色 移动联通电信4G手机',
originalPrice: 9999,
favourPrice: 8888,
tip: '自营'
},
{
image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg',
title: 'Apple iPad 平板电脑 2018年新款9.7英寸',
originalPrice: 3499,
favourPrice: 3399,
tip: '优惠'
},
{
image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product3.jpg',
title: 'Apple MacBook Pro 13.3英寸笔记本电脑(2017款Core i5处理器/8GB内存/256GB硬盘 MupxT2CH/A)',
originalPrice: 12999,
favourPrice: 10688,
tip: '秒杀'
},
{
image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product4.jpg',
title: 'Kindle Paperwhite电纸书阅读器 电子书墨水屏 6英寸wifi 黑色',
originalPrice: 999,
favourPrice: 958,
tip: '秒杀'
},
{
image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product5.jpg',
title: '微软(Microsoft)新Surface Pro 二合一平板电脑笔记本 12.3英寸(i5 8G内存 256G存储)',
originalPrice: 8888,
favourPrice: 8288,
tip: '优惠'
},
{
image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product6.jpg',
title: 'Apple Watch Series 3智能手表(GPS款 42毫米 深空灰色铝金属表壳 黑色运动型表带 MQL12CH/A)',
originalPrice: 2899,
favourPrice: 2799,
tip: '自营'
}
],
}
module.exports = {
data: data
}
运行模拟接口数据如下
渲染效果: