zhywpt-sp/subpackage/personal-center/components/popup-pay-undertake.vue

<!-- 支付承诺弹窗 -->
<template>
	<view class="box">
		<view class="title">承诺书</view>
		<view class="content">
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本单位因工作需求，请贵单位协助办理贵州省制式警车ETC通行卡，在此郑重承诺： </p>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一、仅在贵州省辖区内高速公路有效使用该卡片。</p>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二、涉及出省行驶计划时，上高速前一定取下贵州省制式警车ETC通行卡，走人工车道领复合通行卡行驶高速。 </p>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三、若因我单位对贵州省制式警车ETC通行卡使用不当，造成了该卡出省记录并对外省联网收费系统产生异常通行费记录的，由我单位全数补缴当次通行费用。</p>
		</view>
		<view class="btn" @click="tpPay">确认并支付</view>
	</view>
</template>

<script setup lang="ts">
	import { msg } from '@/utils/utils';
	const emit = defineEmits(['paySuccess'])
	const tpPay = () => {
		uni.showLoading({
			title:'支付中...'
		})
		setTimeout(()=>{
			msg('支付成功');
			uni.hideLoading();
			emit('paySuccess');
		},1000)
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 530rpx;
		padding: 60rpx 45rpx 40rpx;
		border-radius: 20rpx;
		background-color: white;
		color: #333333;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
		}
		.content{
			font-size: 28rpx;
			margin-top: 45rpx;
			line-height: 40rpx;
			letter-spacing: 4rpx;
		}
		.btn{
			border-radius: 40rpx;
			background: linear-gradient(to right,#13E7C1,#43A1E0);
			color: white;
			font-size: 32rpx;
			// width: 406rpx;
			height: 80rpx;
			margin: 50rpx 17rpx 0px;
			text-align: center;
			line-height: 80rpx;
			letter-spacing: 2rpx;
		}
	}
</style>