130 lines
2.6 KiB
Vue
130 lines
2.6 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="title">商品列表示例</view>
|
|
|
|
<!-- 网格布局的列表 -->
|
|
<view class="grid-list">
|
|
<detail-list-item
|
|
v-for="(item, index) in productList"
|
|
:key="item.id || index"
|
|
:item="item"
|
|
@click="onItemClick"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 点击信息展示 -->
|
|
<view class="click-info" v-if="selectedItem">
|
|
<view class="info-title">您点击了：</view>
|
|
<view class="info-content">{{ selectedItem.title }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import DetailListItem from './detail-list-item.vue';
|
|
|
|
export default {
|
|
components: {
|
|
DetailListItem
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
selectedItem: null,
|
|
productList: [
|
|
{
|
|
id: '1',
|
|
imgurl: '/static/img/product1.jpg',
|
|
title: '限定款手办',
|
|
pro: '中奖概率 10%',
|
|
price: '299.00',
|
|
surplus_stock: 10,
|
|
stock: 100,
|
|
shang_info: {
|
|
title: 'SSR',
|
|
color: '#FF5722'
|
|
}
|
|
},
|
|
{
|
|
id: '2',
|
|
imgurl: '/static/img/product2.jpg',
|
|
title: '精美钥匙扣',
|
|
pro: '中奖概率 30%',
|
|
price: '39.00',
|
|
surplus_stock: 50,
|
|
stock: 200,
|
|
shang_info: {
|
|
title: 'SR',
|
|
color: '#9C27B0'
|
|
}
|
|
},
|
|
{
|
|
id: '3',
|
|
imgurl: '/static/img/product3.jpg',
|
|
title: '主题明信片',
|
|
pro: '中奖概率 60%',
|
|
price: '12.00',
|
|
surplus_stock: 0,
|
|
stock: 300,
|
|
shang_info: {
|
|
title: 'R',
|
|
color: '#2196F3'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
// 处理商品点击事件
|
|
onItemClick(item) {
|
|
console.log('点击了商品:', item);
|
|
this.selectedItem = item;
|
|
|
|
// 在实际应用中，这里可以弹出详情框或导航到详情页
|
|
uni.showToast({
|
|
title: `已选择: ${item.title}`,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.grid-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20rpx;
|
|
justify-items: center;
|
|
}
|
|
|
|
.click-info {
|
|
margin-top: 40rpx;
|
|
padding: 20rpx;
|
|
background-color: #f5f5f5;
|
|
border-radius: 12rpx;
|
|
|
|
.info-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.info-content {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
</style> |