110 lines
2.3 KiB
Vue
110 lines
2.3 KiB
Vue
<template>
|
|
<view class="goods-item" @click="onItemClick">
|
|
<view class="goods-image">
|
|
<image v-if="goodsItem.imgUrl" :src="goodsItem.imgUrl" class="image" mode="aspectFill" />
|
|
</view>
|
|
|
|
<text class="goods-title myZt-500w">{{ goodsItem.title }}</text>
|
|
|
|
<text class="goods-status myZt-300w">现货发售中</text>
|
|
|
|
<view class="goods-price">
|
|
<text class="price-value myZt-500w">￥{{ goodsItem.price }}</text>
|
|
<text class="price-unit myZt-500w">/ 包</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
* 商品项组件
|
|
*/
|
|
import { defineProps, defineEmits } from 'vue';
|
|
|
|
// 组件属性
|
|
const props = defineProps({
|
|
/**
|
|
* 商品信息
|
|
*/
|
|
goodsItem: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
id: '',
|
|
title: '',
|
|
imgUrl: '',
|
|
price: '0',
|
|
type: ''
|
|
})
|
|
}
|
|
});
|
|
|
|
// 事件
|
|
const emit = defineEmits(['click']);
|
|
|
|
/**
|
|
* 点击商品项
|
|
*/
|
|
const onItemClick = () => {
|
|
emit('click', props.goodsItem.id);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.goods-item {
|
|
height: 490.28rpx;
|
|
background-color: #FEF6D6;
|
|
border: 3rpx solid #F9D051;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.goods-image {
|
|
width: 100%;
|
|
height: 320.83rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
overflow: hidden;
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.goods-title {
|
|
width: 280.56rpx;
|
|
margin: 15.28rpx auto;
|
|
font-size: 25rpx;
|
|
color: #685952;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.goods-status {
|
|
font-size: 19.44rpx;
|
|
color: #FF6A6A;
|
|
margin-left: 24.31rpx;
|
|
}
|
|
|
|
.goods-price {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-left: 20.31rpx;
|
|
|
|
.price-value {
|
|
font-size: 29.17rpx;
|
|
color: #87644E;
|
|
}
|
|
|
|
.price-unit {
|
|
font-size: 19.44rpx;
|
|
color: #87644E;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |