zhywpt-sp/subpackage/after-sale/card-supplement/reissuePay.vue

<template>
	<!-- <navBar title="补办ETC卡"></navBar> -->
	<view class="oderPage">
		<view class="from">
			<view class="content_top">
				<image :src="`${$imgUrl}equipmentService/card1.png`" mode=""></image>
				<view class="title">
					<view class="row1">更换ETC设备</view>
					<view class="row2">图片仅供参考，以实际产品为准</view>
				</view>
			</view>
			<view class="from_item">
				<text>设备价格</text>
				<text class="row2"> <text style="font-size: 25rpx;">￥</text>130<text
						style="font-size:25rpx;">.00</text></text>
			</view>
			<view class="from_item">
				<text>服务费</text>
				<text class="row2" style="color: #FF8000;"> <text style="font-size: 25rpx;">￥</text>0<text
						style="font-size:25rpx;">.00</text></text>
			</view>
			<view class="from_item" style="margin-bottom: 30rpx;">
				<text>快递费</text>
				<text class="row2" style="color: #FF8000;"> <text style="font-size: 25rpx;">￥</text>0<text
						style="font-size:25rpx;">.00</text></text>
			</view>
			<view class="hr">

			</view>
			<view class="from_item" style="margin:30rpx 0 0 0;">
				<text>合计</text>
				<text class="row2"> <text style="font-size: 25rpx;">￥</text>0<text
						style="font-size:25rpx;">.00</text></text>
			</view>
		</view>
		<button class="submit">支付</button>

	</view>

</template>

<script setup lang="ts">
	import navBar from "./components/nav-bar.vue"
	import {
		ref,
		reactive
	} from "vue";

	// 单选数据列表
	const radiolist1 = reactive([{
			name: '营业点自提',
			disabled: false
		},
		{
			name: '邮寄',
			disabled: false
		},
	], )
	let show = ref(false)




	// 单选
	const radioChange = (n) => {
		console.log('radioChange', n);
		if (n == '卡退费') {
			flag.value = true
			console.log(flag.value);
		} else {
			flag.value = false
			console.log(flag.value);
		}
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.oderPage {
		flex: 1;
		width: 100%;

		.from {
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx;

			.content_top {
				display: flex;
				margin-bottom: 50rpx;

				.title {
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

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

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

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

			.hr {
				width: 100%;
				height: 1rpx;
				background: #DCDCDC;
			}

			.from_item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				margin-bottom: 60rpx;

				.row2 {
					font-size: 32rpx;
					font-family: Microsoft YaHei;
					font-weight: 600;
					color: #000000;
				}
			}
		}


	}

	.submit {
		width: 670rpx;
		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;
		margin-top: 60rpx;
	}
</style>