This commit is contained in:
2026-04-10 16:50:22 +08:00
parent a2fadc57b8
commit 4002f91a54
4 changed files with 157 additions and 520 deletions

View File

@ -1,17 +1,18 @@
<template>
<view class="flex-row-start info-cell good-info" :class="{'good-info-multi' : data.length > 1}">
<template v-if="data.length === 1">
<image class="good-icon" :src="data[0].product_pic" mode="aspectFill" @click="$emit('clickGoodImg', data[0])" />
<view class="good-content" @click="$emit('clickGoodInfo', data[0])">
<view class="goods-row-first">
<view class="goods-name">{{ data[0].goods_name || "" }}</view>
<text class="goods-price">¥{{ data[0].goods_price || data[0].product_actual_price }}</text>
</view>
<view class="goods-row-second">
<view class="goods-spec">
{{ data[0].shuxing_name || "" }}{{ data[0].shuxing_name && data[0].price_name ? ";" : "" }}{{ data[0].price_name || "" }}
<view class="good-wrapper">
<image class="good-icon" :src="data[0].product_pic" mode="aspectFill" @click="$emit('clickGoodImg', data[0])" />
<view class="price-section">
<view class="price-left">
<text class="hand-price-tag">到手价</text>
<text class="current-price">¥{{ data[0].goods_price || data[0].product_actual_price }}</text>
<text class="origin-price" v-if="data[0].product_original_price">原价¥{{ data[0].product_original_price }}</text>
</view>
<text class="goods-count">{{ data[0].number || 1 }}</text>
<text class="goods-count">已售{{ data[0].number || 1 }}</text>
</view>
<view class="goods-name" @click="$emit('clickGoodInfo', data[0])">
{{ data[0].goods_name || "" }}
</view>
</view>
</template>
@ -81,71 +82,67 @@
&.good-info {
padding-top: 20rpx;
align-items: center;
align-items: flex-start;
.good-icon {
width: 100rpx;
height: 100rpx;
border-radius: 8rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.good-content {
flex: 1;
min-width: 0;
overflow: hidden;
.good-wrapper {
width: 100%;
display: flex;
flex-direction: column;
min-height: 100rpx;
}
.goods-row-first {
.good-icon {
width: 100%;
height: 400rpx;
border-radius: 16rpx;
background: #f5f5f5;
}
.price-section {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 20rpx;
.price-left {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8rpx;
align-items: baseline;
.goods-name {
flex: 1;
font-size: 28rpx;
color: #3D3D3D;
line-height: 40rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 20rpx;
.hand-price-tag {
font-size: 24rpx;
color: #fff;
background: linear-gradient(135deg, #FF19A0, #FF6B35);
padding: 4rpx 12rpx;
border-radius: 4rpx;
margin-right: 12rpx;
}
.goods-price {
flex-shrink: 0;
font-size: 28rpx;
color: #3D3D3D;
font-weight: 500;
.current-price {
font-size: 40rpx;
color: #FF19A0;
font-weight: bold;
}
.origin-price {
font-size: 24rpx;
color: #999;
text-decoration: line-through;
margin-left: 12rpx;
}
}
.goods-row-second {
display: flex;
align-items: center;
justify-content: space-between;
.goods-spec {
flex: 1;
font-size: 24rpx;
color: #999;
margin-right: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods-count {
flex-shrink: 0;
font-size: 24rpx;
color: #999;
}
.goods-count {
font-size: 24rpx;
color: #999;
}
}
.goods-name {
font-size: 32rpx;
color: #3D3D3D;
line-height: 44rpx;
font-weight: bold;
margin-top: 16rpx;
}
}
.good-info-more {
@ -177,4 +174,4 @@
}
}
}
</style>
</style>