zhywpt-sp/subpackage/after-sale/to-bookkeeping-card/pay-page.vue

<template>
	<!-- 	<navBar title="补办ETC卡"></navBar>
 -->
	<view class="oderPage">

		<view class="addr-box">
			<view class="addr-box-left">
				<view class="text-image">
					林
				</view>
				<view class="content">
					<view class="">
						<text class="item1">林成</text>
						<text class="item2">18227756455</text>
						<text class="item3">默认</text>
					</view>
					<view class="">
						贵州省 昆明市 丽华区 XXX街道XXXXX路 201号
					</view>
				</view>
			</view>
			<view class="edit">
				<image :src="`${$imgUrl}applyCard/edit.png`" mode=""></image>
			</view>
		</view>

		<view class="from">
			<view class="content_top">
				<image :src="`${$imgUrl}equipmentService/card1.png`" mode=""></image>
				<view class="title">
					<view class="row1">补增设备</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"> <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="font-size: 25rpx;"> 暂无优惠卷</text>
			</view>
			<view class="from_item" style="margin-bottom: 30rpx;">
				<text>积分兑换</text>
				<text class="row2" style="font-size: 25rpx;"> 暂无积分</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>198<text
						style="font-size:25rpx;">.00</text></text>
			</view>
		</view>
		<button class="submit" @click="submit">支付</button>

	</view>

</template>

<script setup lang="ts">
	import navBar from "../ETCcancellation/components/nav-bar.vue"
	import {
		ref,
		reactive
	} from "vue";
	import {
		navTo
	} from "@/utils/utils"
	// 单选数据列表
	const radiolist1 = reactive([{
			name: '营业点自提',
			disabled: false
		},
		{
			name: '邮寄',
			disabled: false
		},
	], )
	let show = ref(false)


	const submit = () => {
		uni.showModal({
			title: '模拟两种情况',
			confirmText: '有余额',
			cancelText: '无余额',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					navTo('/subpackage/after-sale/to-bookkeeping-card/refund')
				} else if (res.cancel) {
					console.log('用户点击取消');
					navTo('/subpackage/after-sale/to-bookkeeping-card/base-change-people')
				}
			}
		});
	}

	// 单选
	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%;


		.addr-box {
			margin-top: 20rpx;
			display: flex;
			background: #fff;
			padding: 30rpx;
			justify-content: space-between;
			align-items: center;

			.addr-box-left {
				display: flex;

				.text-image {
					width: 68rpx;
					height: 68rpx;
					background: #00B38B;
					border-radius: 50%;
					text-align: center;
					font-size: 26rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 68rpx;
					margin-right: 30rpx
				}

				.content {
					view {
						font-size: 26rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #333333;

						.item1 {
							font-size: 30rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #333333;
						}

						.item2 {
							font-size: 24rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #999999;
							margin-left: 10rpx;
						}

						.item3 {
							width: 71rpx;
							height: 37rpx;
							background: #FFFFFF;
							border: 1px solid #FF8000;
							border-radius: 6rpx;
							font-size: 22rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #FF8000;
							padding: 3rpx 6rpx;
							margin-left: 10rpx;
						}
					}

				}
			}

			.edit {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.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: 35rpx;

				.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>