zhywpt-sp/subpackage/orders/deductionAccountAssociation.vue

<template>
	<view class="wrapper">
		<navBar title="扣款账户关联"></navBar>
		<image :src="`${$imgUrl}applyCard/bg-nav.png`" style='height: 353rpx;width: 100%;'></image>
		<view class="progress-wrap">
				<view class="item-circle">1</view>
				<view class="item-line-solid"></view>
				<view class="item-circle">2</view>
				<view class="item-line-solid"></view>
				<view class="item-circle">3</view>
				<view class="item-line-solid"></view>
				<view class="item-circle">4</view>
				<view class="item-line-solid"></view>
				<view class="item-circle">5</view>
				<view class="item-line"></view>
				<view class="item-circle-op">
					<view class="item-circle">6</view>
				</view>

		</view>
		<view class="list-wrap">
			<view class="img-pos">
				<view class="img-box">
					<image class="car-img" :src="`${$imgUrl}applyCard/car.png`"></image>
					<image class="flag-img" :src="`${$imgUrl}applyCard/flag.png`"></image>
				</view>
			</view>
			<view class="list-box">
				<view class="list-wrap-title">可选扣款账户列表如下</view>
				<view class="table-wrap">
					<view class="tb-header">
						<view class="name-wrap">
							签约银行
						</view>
						<view class="option">
							操作
						</view>
					</view>
					<view class="tb-body">
						<view class="tb-item">
							<view class="name-wrap height-style">
								<image class="d-img" :src="`${$imgUrl}applyCard/uni.png`"></image>
								<text class="name-text">微信签约</text>
							</view>
							<view class="option height-style">
								<view class="btn-active" v-if="state.selected === 'wx'">选择</view>
								<view class="btn" v-else @click="itemClick('wx')">选择</view>
							</view>
						</view>
						<view class="tb-item">
							<view class="name-wrap height-style">
								<image class="d-img" :src="`${$imgUrl}applyCard/gs.png`"></image>
								<text class="name-text">工行签约</text>
							</view>
							<view class="option ">
								<view class="btn-active" v-if="state.selected === 'gs'">选择</view>
								<view class="btn" v-else @click="itemClick('gs')">选择</view>

							</view>
						</view>
						<view class="tb-item">
							<view class="name-wrap height-style">
								<image class="d-img" :src="`${$imgUrl}applyCard/jh.png`"></image>
								<text class="name-text">建行签约</text>
							</view>
							<view class="option height">
								<view class="btn-active" v-if="state.selected === 'jh'">选择</view>
								<view class="btn" v-else @click="itemClick('jh')">选择</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="code-wrap">
				<view class="code-title">请输入验证码</view>
				<view class="input-wrap"><input class="uni-input" placeholder="需输入签约信息对应手机号的验证码" /></view>
				<view class="input-btn">获取验证码</view>
			</view>
			<view class="sure-wrap">
				<view>
					<radio value="r1" color="#00B38B" style="transform:scale(0.7)" />
				</view>
				<view class="sure-text">
					<text class="sure-text-1">阅读并同意</text>
					<text class="sure-text-2">《用户授权协议》</text>
				</view>
			</view>
			<view class="btn-wrap">
				<view class="btn-value">
					<text class="text-label">应付</text>
					<text class="text-value">300 <text class="text-unit">元</text></text>
				</view>
				<view class="btn-pay">去支付</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import {
		reactive
	} from "vue";
	const state = reactive({
		selected: ""
	})

	function itemClick(val) {
		state.selected = val
	}
</script>
<style lang="scss" scoped>
	.progress-wrap {
		

		.progress-wrap-box {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.item-circle {
			width: 52rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #1BE2C4;
			font-size: 30rpx;
			font-weight: 700;
		}

		.item-line-solid {
			width: 40rpx;
			height: 2rpx;
			background-color: #FFFFFF;
			margin: 0 12rpx;
		}

		.item-line {
			border: 1px dashed rgba(255, 255, 255, 0.5);
			width: 40rpx;
			margin: 0 12rpx;
		}

		.item-circle-op {
			width: 66rpx;
			height: 66rpx;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.list-wrap {
		height: 1014rpx;
		margin-top: -20rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		position: relative;

		.img-pos {
			position: absolute;
			right: 20rpx;
			top: -30rpx;
		}

		.car-img {
			width: 86rpx;
			height: 42rpx;
		}

		.flag-img {
			width: 30rpx;
			height: 35rpx;
			margin-left: -20rpx;
		}

		.list-wrap-title {
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
		}

		.table-wrap {
			margin-top: 35rpx;
			border: 1px solid #DCDCDC;

			.tb-header {
				display: flex;
				height: 59rpx;
				line-height: 59rpx;
				background: #F5F5F5;
			}

			.name-wrap,
			.option {
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1px solid #DCDCDC;
			}

			.height-style {
				height: 68rpx;
				line-height: 68rpx;
			}

			.name-text {
				font-size: 24rpx;
				color: #333333;
			}

			.tb-body {
				border-left: 1px solid #DCDCDC;

				.tb-item {
					display: flex;
					border-bottom: 1px solid #DCDCDC;

					.d-img {
						width: 48rpx;
						height: 48rpx;
					}

					&:nth-child(2n) {
						background: #F6F6F6;
					}
				}

				.btn {
					font-size: 24rpx;
					color: #333333;
					width: 96rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1px solid #DCDCDC;
					border-radius: 17rpx;
				}

				.btn-active {
					font-size: 24rpx;
					color: #00B38B;
					width: 96rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1px solid #00B38B;
					border-radius: 17rpx;
				}
			}
		}

		.code-wrap {
			padding: 45rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			margin-top: 40rpx;

			.code-title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
			}

			.input-wrap {
				margin: 30rpx 0;

				.uni-input {
					width: 100%;
					height: 57rpx;
					background: #FFFFFF;
					border: 1px solid #DCDCDC;
					padding-left: 20rpx;
				}
			}

			.input-btn {
				width: 129rpx;
				height: 40rpx;
				background: rgba(33, 190, 177, 0.2);
				border-radius: 6rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #00B38B;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.sure-wrap {
			display: flex;
			margin-top: 40rpx;

			.sure-text {
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;
			}

			.sure-text-1 {
				color: #777777;
				font-size: 24rpx;
			}

			.sure-text-2 {
				color: #42A2DF;
				font-size: 24rpx;
			}
		}

		.btn-wrap {
			border-top: 1px solid #DCDCDC;
			padding: 47rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.text-label {
				color: #666666;
				font-size: 24rpx;
			}

			.text-value {
				color: #333333;
				font-size: 32rpx;
				font-weight: 700;
				margin-left: 36rpx;
			}

			.text-unit {
				color: #333333;
				font-weight: 400;
				font-size: 24rpx;
			}

			.btn-pay {
				width: 260rpx;
				height: 80rpx;
				background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>