book-hi/pages-sell/components/detail/product-content.vue

<template>
	<view class="detail-content">
		<!-- Tab 1 Content: Product Details -->
		<view v-show="currentTab === 0">
			<!-- Basic Info List -->
			<view class="section-title">基本信息</view>
			<view class="info-list">
				<view class="info-item"><text class="label">书名：</text><text>{{ product.title }}</text></view>
				<view class="info-item"><text class="label">作者：</text><text>{{ product.authorFull }}</text></view>
				<view class="info-item"><text class="label">出版社：</text><text>{{ product.publisher }}</text></view>
				<view class="info-item"><text class="label">出版日期：</text><text>{{ product.publishDate }}</text></view>
				<view class="info-item"><text class="label">ISBN：</text><text>{{ product.isbn }}</text></view>
				<view class="info-item"><text class="label">纸张：</text><text>胶版纸</text></view>
				<view class="info-item"><text class="label">开本：</text><text>16开</text></view>
			</view>

			<u-gap height="30"></u-gap>
			
			<!-- Intro Section -->
			<view class="section-title">内容简介</view>
			<view class="text-content">
				{{ product.intro }}
			</view>
			
			<u-gap height="30"></u-gap>

			<!-- Catalog Section -->
			<view class="section-title">目录</view>
			<view class="text-content">
				{{ product.catalog }}
			</view>

			<!-- Product Tips Component -->
			<ProductTips :content="tipsContent"></ProductTips>
		</view>
		
		<!-- Tab 2 Content: Related Books -->
		<view v-show="currentTab === 1">
			<RelatedBooks :books="relatedBooksList" @click="onBookClick"></RelatedBooks>
		</view>
	</view>
</template>

<script>
import ProductTips from '../product-tips/index.vue'
import RelatedBooks from '../related-books/index.vue'

export default {
	name: 'ProductContent',
	components: {
		ProductTips,
		RelatedBooks
	},
	props: {
		currentTab: {
			type: Number,
			default: 0
		},
		product: {
			type: Object,
			default: () => ({})
		},
		tipsContent: {
			type: Array,
			default: () => []
		},
		relatedBooksList: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		onBookClick(book) {
			this.$emit('bookClick', book);
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-content {
	background: #fff;
	padding: 30rpx;
	min-height: 500rpx;
	border-radius: 24rpx 24rpx 0 0; /* Added based on context */
	margin-top: 20rpx; /* Added based on context */
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #333;
		position: relative;
		padding-left: 20rpx;
		
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 8rpx;
			width: 6rpx;
			height: 30rpx;
			background: #38C248;
			border-radius: 4rpx;
		}
	}
	
	.info-list {
		.info-item {
			display: flex;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			line-height: 1.5;
			
			.label {
				color: #999;
				width: 150rpx;
				flex-shrink: 0;
			}
			
			text:last-child {
				color: #333;
				flex: 1;
			}
		}
	}
	
	.text-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.8;
		text-align: justify;
	}
}
</style>