book-hi/pages-sell/components/detail/info-card.vue

<template>
	<view class="info-card">
		<view class="title-row">
			<text class="book-title">{{ product.bookName }}</text>
		</view>

		<view class="price-row">
			<text class="currency">¥</text>
			<text class="price">{{ product.sellPrice || product.price }}</text>
			<view class="balance-tag" v-if="displayBalanceMoney">
				<text>余额价 ¥{{ displayBalanceMoney }}</text>
			</view>
		</view>

		<view class="meta-row">
			<text class="label">原价：</text>
			<text class="original-price">¥{{ product.price }}</text>
		</view>

		<view class="author-row">
			<text class="author">作者：{{ product.author }}</text>
			<view class="works-link" @click="goToAuthorWorks">
				<text>作品</text>
				<u-icon name="arrow-right" size="24" color="#F2950A"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'InfoCard',
	props: {
		product: {
			type: Object,
			default: () => ({})
		}
	},
	computed: {
		displayBalanceMoney() {
			if (this.product.skuList && this.product.skuList.length > 0) {
				// 获取所有sku中的最低余额价
				const goods = this.product.skuList.find(sku => sku.price == this.product.sellPrice);
				return goods.balanceMoney;
			}
			return null;
		}
	},
	methods: {
		goToAuthorWorks() {
			if (!this.product.author) return;
			uni.navigateTo({
				url: `/pages-sell/pages/search-result?keyword=${encodeURIComponent(this.product.author)}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.info-card {
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;

	.title-row {
		margin-bottom: 20rpx;

		.book-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.price-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;

		.currency {
			font-size: 32rpx;
			color: #D81A00;
			font-weight: bold;
		}

		.price {
			font-size: 48rpx;
			color: #D81A00;
			font-weight: bold;
			margin-right: 20rpx;
		}

		.balance-tag {
			background: #38C148;
			border-radius: 20rpx;
			padding: 2rpx 16rpx;

			text {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}

	.meta-row {
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #999;

		.original-price {
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}

	.author-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #F2950A;

		.author {
			flex: 1;
		}

		.works-link {
			display: flex;
			align-items: center;
		}
	}
}
</style>