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

<template>
	<view class="service-card">
		<view class="service-row" @click="onClick">
			<view class="icon-box">
				<image src="/pages-sell/static/goods/icon-down.png" class="service-icon" mode="aspectFit"></image>
			</view>
			<text class="service-label">可降</text>
			<text class="separator">|</text>
			<text class="service-val red">分享一人助力，可降 {{bookInfo.reducePrice||1}} 元</text>
			<u-icon name="arrow-right" size="24" color="#999" class="arrow"></u-icon>
		</view>
		<view class="service-row">
			<view class="icon-box">
				<image src="/pages-sell/static/goods/icon-fee.png" class="service-icon" mode="aspectFit"></image>
			</view>
			<text class="service-label">运费</text>
			<text class="separator">|</text>
			<text class="service-val green">{{ bookInfo.expressDesc }}（偏远地区除外）</text>
		</view>
		<view class="service-row">
			<view class="icon-box">
				<image src="/pages-sell/static/goods/icon-fire.png" class="service-icon" mode="aspectFit"></image>
			</view>
			<text class="service-label">活动</text>
			<text class="separator">|</text>
			<text class="service-val red">{{ bookInfo.activityDesc }}</text>
		</view>
		<view class="service-row last" @click="openServicePopup">
			<view class="icon-box">
				<image src="/pages-sell/static/goods/icon-service.png" class="service-icon" mode="aspectFit"></image>
			</view>
			<text class="service-label">服务</text>
			<text class="separator">|</text>
			<text class="service-val">破损包赔 · 降价补差 · 24 小时发货</text>
			<u-icon name="arrow-right" size="24" color="#999" class="arrow"></u-icon>
		</view>
		<ServicePopup ref="servicePopup" />
	</view>
</template>

<script>
	import ServicePopup from '@/pages-sell/components/service-popup/index.vue';

	export default {
		name: 'ServiceCard',
		components: {
			ServicePopup
		},
		props: {
			bookInfo: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			onClick() {
				this.$emit('click');
			},
			openServicePopup() {
				this.$refs.servicePopup.open();
			}
		}
	}
</script>

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

		.service-row {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			font-size: 26rpx;
			position: relative;
			border-bottom: 1rpx solid #F5F5F5;

			&.last {
				border-bottom: none;
			}

			.icon-box {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.service-icon {
					width: 100%;
					height: 100%;
				}
			}

			.service-label {
				color: #333;
				font-weight: bold;
				min-width: 60rpx; // Fixed width for 2 characters to ensure alignment
				text-align: justify;
				text-align-last: justify;
				word-break: keep-all;
				white-space: nowrap;
			}

			.separator {
				color: #eee;
				margin: 0 10rpx;
			}

			.service-val {
				color: #666;
				flex: 1; // Allow text to take remaining space
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				&.red {
					color: #D81A00;
				}

				&.green {
					color: #38C248;
				}
			}

			.arrow {
				position: absolute;
				right: 0;
			}
		}
	}
</style>