zhywpt-sp/subpackage/after-sale/ETC-log-off/etc-log-off-pay.vue

<template>
	<view class="pay-box">
		<view class="head">
			系统检测您的ETC设备已过期，需要支付注销费用。
		</view>
		<view class="card">
			<view class="content">
				<image :src="`${$imgUrl}card1.png`" mode=""></image>
				<view class="content-center">
					<view class="">
						注销ETC
					</view>
					<text>图片仅供参考，以实际产品为准</text>
				</view>
			</view>
			<view class="content-btm">
				<text>合计</text>
				<text class="price"><text stle>￥</text><text style="font-size: 34rpx;">130</text>.00</text>
			</view>
		</view>
		<view class="btns">
			<button class="cancle" @click="toPage()">取消注销</button>
			<button class="pay" @click="pay">支付</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from "vue"
	import {
		navTo
	} from "@/utils/utils"
	import {
		request
	} from "@/utils/network/request.js";
	import {
		CardSignCancellation
	} from "@/utils/network/api.js";
	import {
		stringToJson
	} from "@/utils/network/encryption.js";

	// 卡签注销
	const logoff = (offtype) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				cardId: '', //卡号
				obuId: "", //签号
				serviceType: "1", //注销类型 1-卡注销，2-签注销，3-卡签注销
				operation: offtype, //注销方式  1-有卡注销，2-无卡注销
				orderId: '20230225155521777646302', //订单编号
				ReasonCancellation: ''
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(CardSignCancellation, options)
			.then((res) => {
				stringToJson(res.bizContent)
				if (stringToJson(res.statusCode) == 0) {
				navTo("/subpackage/after-sale/ETC-log-off/log-off-result");
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	const toPage = () => {
		uni.reLaunch({
			url: '/subpackage/after-sale/ETC-log-off/log-off-confirm'
		})
	}

	const pay = () => {
		logoff(2)
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.pay-box {
		width: 100%;
		height: 100%;

		.head {
			margin: 30rpx;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
		}

		.card {
			padding: 30rpx;
			height: 278rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);

			.content {
				display: flex;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #DCDCDC;

				image {
					width: 140rpx;
					height: 130rpx;
				}

				.content-center {
					margin-left: 30rpx;

					view {
						font-size: 30rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #333333;
						margin-bottom: 20rpx;
					}

					text {
						font-size: 24rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.content-btm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				margin-top: 20rpx;

				.price {
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;

				}
			}
		}

		.btns {
			width: 100%;
			position: fixed;
			left: 50%;
			transform: translate(-50%);
			bottom: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.cancle {
				width: 311rpx;
				height: 81rpx;
				background: #FFFFFF;
				border: 1px solid #DCDCDC;
				box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}

			.pay {
				width: 310rpx;
				height: 80rpx;
				background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
				box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}
	}
</style>