77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
||
<view class="product-card" @click="goDetail">
|
||
<image
|
||
class="product-card__image"
|
||
:src="product.bannerImages[0] || '/static/logo.png'"
|
||
mode="aspectFill"
|
||
/>
|
||
<view class="product-card__info">
|
||
<text class="product-card__name">{{ product.name }}</text>
|
||
<text class="product-card__style">款号：{{ product.styleNo }}</text>
|
||
<view class="product-card__bottom">
|
||
<text class="product-card__price">¥{{ product.basePrice }}</text>
|
||
<text class="product-card__stock">库存 {{ product.stock }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { Product } from '../types'
|
||
|
||
const props = defineProps<{
|
||
product: Product
|
||
}>()
|
||
|
||
function goDetail() {
|
||
uni.navigateTo({ url: `/pages/product/detail?id=${props.product.id}` })
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.product-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
}
|
||
.product-card__image {
|
||
width: 100%;
|
||
height: 340rpx;
|
||
}
|
||
.product-card__info {
|
||
padding: 16rpx;
|
||
}
|
||
.product-card__name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: block;
|
||
}
|
||
.product-card__style {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
display: block;
|
||
}
|
||
.product-card__bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12rpx;
|
||
}
|
||
.product-card__price {
|
||
font-size: 32rpx;
|
||
color: #e4393c;
|
||
font-weight: bold;
|
||
}
|
||
.product-card__stock {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|