chuangte_bike_newxcx/page_shanghu/guanli/components/AgentOrderConfirmModal.vue

<template>
	<view class="confirm-modal-mask" v-if="visible" @click="$emit('close')">
		<view class="confirm-modal-card" @click.stop>
			<view class="confirm-modal-icon">
				<view class="confirm-modal-icon-circle">
					<u-icon name="scan" color="#fff" size="48"></u-icon>
				</view>
			</view>
			<view class="confirm-modal-title">确认下单</view>
			<view class="confirm-modal-info">
				<view class="confirm-modal-info-row">
					<text class="confirm-modal-info-label">客户</text>
					<text class="confirm-modal-info-value">{{ targetUser ? (targetUser.nickName || targetUser.userName) : '' }}</text>
				</view>
				<view class="confirm-modal-info-row">
					<text class="confirm-modal-info-label">手机号</text>
					<text class="confirm-modal-info-value">{{ targetUser ? targetUser.userName : '' }}</text>
				</view>
				<view class="confirm-modal-info-row">
					<text class="confirm-modal-info-label">套餐</text>
					<text class="confirm-modal-info-value">{{ selectedSuit ? selectedSuit.name : '--' }}</text>
				</view>
				<view class="confirm-modal-info-row" v-if="priceInfo && priceInfo.depositPrice != null">
					<text class="confirm-modal-info-label">应收金额</text>
					<text class="confirm-modal-info-value confirm-modal-info-price">¥{{ displayDeposit }}</text>
				</view>
				<view class="confirm-modal-info-row">
					<text class="confirm-modal-info-label">支付渠道</text>
					<text class="confirm-modal-info-value">{{ selectedChannelObj ? selectedChannelObj.name : '--' }}</text>
				</view>
			</view>
			<view class="confirm-modal-tip">下一步请扫描客户付款码完成收款</view>
			<view class="confirm-modal-btns">
				<view class="confirm-modal-btn-cancel" hover-class="app-tap-hover" @click="$emit('close')">取消</view>
				<view class="confirm-modal-btn-confirm" hover-class="app-tap-hover" @click="$emit('confirm')">
					<u-icon class="confirm-modal-btn-icon" name="scan" color="#fff" size="30"></u-icon>
					<text>去扫码收款</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'AgentOrderConfirmModal',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			targetUser: {
				type: Object,
				default: null
			},
			selectedSuit: {
				type: Object,
				default: null
			},
			displayDeposit: {
				type: [String, Number],
				default: '--'
			},
			selectedChannelObj: {
				type: Object,
				default: null
			},
			priceInfo: {
				type: Object,
				default: null
			}
		}
	}
</script>

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

	.confirm-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.55);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 60rpx 48rpx;
		box-sizing: border-box;
		animation: confirmFadeIn 0.25s ease;
	}

	.confirm-modal-card {
		width: 100%;
		max-width: 620rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 48rpx 40rpx 40rpx;
		box-sizing: border-box;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.18);
		animation: confirmSlideUp 0.3s ease;
	}

	.confirm-modal-icon {
		display: flex;
		justify-content: center;
		margin-bottom: 24rpx;
	}

	.confirm-modal-icon-circle {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, $ao-primary, $ao-primary-deep);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(76, 151, 231, 0.28);
	}

	.confirm-modal-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: 700;
		color: $ao-ink;
		margin-bottom: 28rpx;
	}

	.confirm-modal-info {
		background: #fff;
		border-radius: $ao-radius-sm;
		padding: 24rpx 28rpx;
		margin-bottom: 24rpx;
		border: 1rpx solid $ao-border;
	}

	.confirm-modal-info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 0;
		border-bottom: 1rpx solid #EEF1F6;

		&:last-child {
			border-bottom: none;
		}
	}

	.confirm-modal-info-label {
		font-size: 26rpx;
		color: $ao-text-secondary;
	}

	.confirm-modal-info-value {
		font-size: 26rpx;
		color: $ao-text;
		font-weight: 500;
	}

	.confirm-modal-info-price {
		font-size: 30rpx;
		font-weight: 700;
		color: $ao-accent;
	}

	.confirm-modal-tip {
		text-align: center;
		font-size: 24rpx;
		color: $ao-text-muted;
		margin-bottom: 32rpx;
	}

	.confirm-modal-btns {
		display: flex;
		gap: 20rpx;
	}

	.confirm-modal-btn-cancel,
	.confirm-modal-btn-confirm {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-weight: 500;
	}

	.confirm-modal-btn-cancel {
		flex: 1;
		color: $ao-text-secondary;
		background: #fff;
		border: 2rpx solid $ao-border;
	}

	.confirm-modal-btn-confirm {
		flex: 1.5;
		color: #FFFFFF;
		background: linear-gradient(135deg, $ao-primary, $ao-primary-deep);
		font-weight: 600;
		box-shadow: 0 8rpx 20rpx rgba(76, 151, 231, 0.28);
	}

	.confirm-modal-btn-icon {
		margin-right: 8rpx;
	}

	@keyframes confirmFadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes confirmSlideUp {
		from {
			opacity: 0;
			transform: translateY(60rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>