chuangte_bike_newxcx/page_shanghu/guanli/components/InsuranceSelector.vue

<template>
	<view class="insurance-section" v-if="hasInsuranceOffer">
		<view class="section-head">
			<text class="section-title">车辆保险</text>
			<text class="section-tag">可选</text>
		</view>
		<view class="ins-hero">
			<view class="ins-hero-top">
				<view class="ins-icon-wrap">
					<u-icon name="shield" color="#fff" size="32"></u-icon>
				</view>
				<view class="ins-hero-info">
					<text class="ins-hero-name">{{ insuranceDeviceCurrent.insuranceName || '安心骑保障服务' }}</text>
					<text class="ins-hero-price">{{ insurancePriceDisplay }} 元/次</text>
				</view>
			</view>
			<view class="ins-actions">
				<view
					class="ins-opt"
					:class="{ active: selectedInsuranceId === insuranceDeviceCurrent.id }"
					hover-class="app-tap-hover"
					@click="$emit('toggle')"
				>
					<u-icon name="shield" :color="selectedInsuranceId === insuranceDeviceCurrent.id ? '#fff' : '#4C97E7'" size="28"></u-icon>
					<text>购买保障</text>
				</view>
				<view
					class="ins-opt ins-opt-no"
					:class="{ active: selectedInsuranceId === null }"
					hover-class="app-tap-hover"
					@click="$emit('skip')"
				>
					<text>不投保</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'InsuranceSelector',
		props: {
			insuranceDeviceCurrent: {
				type: Object,
				default: null
			},
			selectedInsuranceId: {
				type: [String, Number],
				default: null
			}
		},
		computed: {
			hasInsuranceOffer() {
				const d = this.insuranceDeviceCurrent
				if (d == null || typeof d !== 'object') return false
				return Object.keys(d).length > 0
			},
			insurancePriceDisplay() {
				const d = this.insuranceDeviceCurrent
				if (!d || d.insuranceDepositAmount == null || d.insuranceDepositAmount === '') return '0.25'
				return String(d.insuranceDepositAmount)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './agent-order-theme.scss';

	.insurance-section {
		@include ao-section;
	}

	.section-head {
		@include ao-section-head;
	}

	.section-title {
		@include ao-section-title;
	}

	.section-tag {
		@include ao-section-tag;
	}

	.ins-hero-top {
		@include ao-card;
		display: flex;
		align-items: center;
		padding: 24rpx;
		margin-bottom: 16rpx;
	}

	.ins-icon-wrap {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, $ao-primary, $ao-primary-deep);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(76, 151, 231, 0.24);
	}

	.ins-hero-info {
		margin-left: 20rpx;
		flex: 1;
		min-width: 0;
	}

	.ins-hero-name {
		display: block;
		font-size: 30rpx;
		font-weight: 600;
		color: $ao-ink;
		margin-bottom: 6rpx;
	}

	.ins-hero-price {
		display: block;
		font-size: 28rpx;
		font-weight: 700;
		color: $ao-accent;
	}

	.ins-actions {
		display: flex;
		gap: 16rpx;
	}

	.ins-opt {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		height: 80rpx;
		border-radius: $ao-radius-sm;
		font-size: 28rpx;
		font-weight: 500;
		border: 2rpx solid $ao-primary;
		color: $ao-primary;
		background: #fff;
		transition: all 0.15s;

		&.active {
			background: linear-gradient(135deg, $ao-primary, $ao-primary-deep);
			color: #fff;
			border-color: transparent;
			box-shadow: 0 4rpx 14rpx rgba(76, 151, 231, 0.24);
		}
	}

	.ins-opt-no {
		border-color: $ao-border;
		color: $ao-text-secondary;

		&.active {
			background: #fff;
			color: $ao-text;
			border-color: #D1D5DB;
			box-shadow: none;
		}
	}
</style>