<template>
	<view class="paying-box">

		<text class="p-text">支付金额</text>

		<text class="p-total">￥{{props.payTotal||"0.00"}}</text>
		
		<view class="p-zhichi">
			<view class="p-line"></view>
			<text class="p-words">支持以下付款方式</text>
			<view class="p-line"></view>
		</view>

		<view class="p-icons">
			<image class="p-image-pay-icon" src="/static/pay/wx-icon.png" mode="widthFix" />
			<image class="p-image-pay-icon" src="/static/pay/zfb-icon.png" mode="widthFix" />
		</view>

		<image class="p-image-pay-picture" src="/static/pay/pay-picture.png" mode="widthFix" />

		<text class="p-tips">请将付款码对准右下方扫码口</text>

		<view class="p-btn" @click="handle_clickCard">
			<image class="pb-image" src="/static/pay/pay-vip-icon.png" mode="aspectFit" />
			<text class="pb-text">储值卡支付</text>
		</view>


		<view class="p-user">
			<text class="p-txt">猫星人（18316553589）</text>
		</view>
	</view>

</template>

<script setup>
	//触发自定义事件
	const emits = defineEmits(['clickVipCard'])
	const props = defineProps({
		payTotal: {
			type: Number,
			default: 0
		},
	})

	const handle_clickCard = () => {
		console.log("handle_clickCard")
		emits("clickVipCard", "false")
	}
</script>

<style lang="scss" scoped>
	.paying-box {
		width: 750rpx;
		// height: 500rpx;
		@include ctf(center);
		flex-direction: column;

		.p-text {
			margin-top: 161rpx;
			font-weight: 600;
			font-size: 22.22rpx;
			color: #1A1A1A;

		}
	
	.p-total {
			margin-top: 30.67rpx;
			font-weight: 600;
			font-size: 55.56rpx;
			color: #1A1A1A;
		}
		
		.p-zhichi{
			margin-top: 132.67rpx;
			@include ctf(center);
			flex-direction: row;
			.p-line{
				margin: 0 37.5rpx;
				width: 200rpx;
				height: 2rpx;
				background: #E8E8E8;
			}
			.p-words {
				font-weight: 700;
				font-size: 22.22rpx;
				color: #1A1A1A;
				display: block;
			}
		}


		.p-icons {
			margin-top: 19.67rpx;
			@include ctf(center);
			flex-direction: row;

			// width: 750rpx;
			.p-image-pay-icon {
				width: 41.67rpx;
				height: 41.67rpx;
				margin: 0 9rpx;
			}
		}

		.p-image-pay-picture {
			margin-top: 68rpx;
			width: 138.89rpx;
			height: 290.97rpx;
		}

		.p-tips {
			margin-top: 50rpx;
			font-weight: 800;
			font-size: 22.22rpx;
			color: #1A1A1A;
		}

		.p-btn {
			margin-top: 107rpx;
			@include ctf(center);
			flex-direction: row;
			width: 240.97rpx;
			height: 81.94rpx;
			background: #009874;
			box-shadow: 0 0.69rpx 20.83rpx 0 #00987430;
			border-radius: 13.89rpx;

			.pb-image {
				width: 41.9rpx;
				height: 31.25rpx;
			}

			.pb-text {
				margin-left: 17rpx;
				font-weight: 800;
				font-size: 22.22rpx;
				color: #FFFFFF;
			}
		}

		.p-user {
			margin-top: 92rpx;
			margin-left: 67rpx;
			margin-bottom: 92rpx;
			width: 750rpx;
			.p-txt {
				font-weight: 400;
				font-size: 22.22rpx;
				color: #999999;
			}
		}
	}

	.cancel-button {
		@include ctf(center);
		width: 131.94rpx;
		height: 51.39rpx;
		border: 0.69rpx solid #999999;
		border-radius: 6.94rpx;

		.v-text {
			@include flcw(33.33upx, 46.53upx, #fff, 500);
			font-weight: 500;
			font-size: 16.67rpx;
			color: #999999;
		}
	}
</style>
