通过一个完整的项目案例，综合运用UniApp开发技能。
<template>
<view class="product-list">
<view class="search-box">
<uni-search-bar @confirm="search" placeholder="搜索商品"></uni-search-bar>
</view>
<scroll-view class="scroll-view" scroll-y>
<view class="product-item" v-for="product in productList" :key="product.id" @click="goToDetail(product.id)">
<image class="product-image" :src="product.image" mode="aspectFill"></image>
<view class="product-info">
<text class="product-name">{{product.name}}</text>
<text class="product-price">¥{{product.price}}</text>
<text class="product-sales">已售{{product.sales}}件</text>
</view>
<button class="add-cart-btn" @click.stop="addToCart(product)">加入购物车</button>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
productList: [],
searchKeyword: ''
}
},
onLoad() {
this.loadProducts();
},
methods: {
async loadProducts() {
try {
const res = await uni.request({
url: '/api/products',
method: 'GET'
});
this.productList = res.data;
} catch (error) {
console.error('加载商品失败:', error);
}
},
search(e) {
this.searchKeyword = e.value;
this.loadProducts();
},
addToCart(product) {
// 添加到购物车逻辑
uni.showToast({
title: '添加成功'
});
},
goToDetail(id) {
uni.navigateTo({
url: `/pages/product/detail?id=${id}`
});
}
}
}
</script>
提示： 这是一个重要的概念，需要特别注意理解和掌握。
注意： 这是一个常见的错误点，请避免犯同样的错误。