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

<template>
	<view class="upload-box">
		<view class="head-tips">
			检测到您的ETC卡中还剩余额<text>100.00</text>元，我们将于<text>14</text>个工作日争议期后退回到您的银行卡中，这里将收集您的收款信,具体金额可能会出现增多或减少得情况，敬请谅解！
		</view>
<!-- 		<view class="upload-card">
			<view class="card-left">
				<view class="item1">
					ETC卡剪段照片
				</view>
				<view class="item2">
					ETC卡剪段并上传照片
				</view>
				<view class="item3">
					拍摄示例
				</view>
			</view>
			<image src="../../static/image/ETC1.png" mode=""></image>
		</view> -->

		<u-form :model="form" ref="myForm" :error-type="errorType">
			<view class="from">
<!-- 				<u-form-item prop="receiving1">
					<view class="from_item">
						<text><text style="color: red;">*</text>是否寄回设备：</text>
						<u-radio-group v-model="form.receiving2">
							<u-radio :customStyle="{marginBottom: '8px'}" activeColor="#2CE242"
								v-for="(item, index) in radiolist1" :key="index" :label="item.disabled"
								:name="item.name" @change="radioChange">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item prop="region">
					<view class="from_item">
						<text><text style="color: red;">*</text>物流公司:</text>
						<view style="display: flex;" @click="showPicker">
							<u-input v-model="form.region" class="input" disabled placeholder="请选择" />
							<u-icon name="arrow-right" style="margin-left: 10px;"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="phone">
					<view class="from_item">
						<text><text style="color: red;">*</text>物流单号:</text>
						<u-input v-model="form.phone" class="input" />
					</view>
				</u-form-item> -->

				<view class="title">
					请输入退费信息
				</view>
				<u-form-item prop="phone">
					<view class="from_item">
						<text style="color: #777777;"><text style="color: red;">*</text>联系人姓名:</text>
						<u-input v-model="form.phone" class="input" />
					</view>
				</u-form-item>
				<u-form-item prop="phone">
					<view class="from_item">
						<text style="color: #777777;"><text style="color: red;">*</text>手机号:</text>
						<u-input v-model="form.phone" class="input" />
					</view>
				</u-form-item>
				<u-form-item prop="phone">
					<view class="from_item">
						<text style="color: #777777;"><text style="color: red;">*</text>开户行:</text>
						<u-input v-model="form.phone" class="input" />
					</view>
				</u-form-item>
				<u-form-item prop="phone">
					<view class="from_item">
						<text style="color: #777777;"><text style="color: red;">*</text>退费银行卡号:</text>
						<u-input v-model="form.phone" class="input" />
					</view>
				</u-form-item>
	<!-- 			<view class="title">
					请填写注销原因
				</view>
				<u-form-item prop="region">
					<view class="from_item">
						<text><text style="color: red;">*</text>注销原因:</text>
						<view style="display: flex;" @click="showPicker">
							<u-input v-model="form.region" class="input" disabled placeholder="请选择" />
							<u-icon name="arrow-right" style="margin-left: 10px;"></u-icon>
						</view>
					</view>
				</u-form-item> -->
			</view>
		</u-form>
		
		<button class="submit" @click="toPage()">下一步</button>
		<!-- 选择弹窗 -->
	<!-- 	<view>
			<u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
		</view> -->
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from "vue"
	import {
		navTo
	} from "@/utils/utils"

	// 表单数据
	const form = reactive({
		// orderNumber: '2141543454545',
		// carId: '贵A12345',
		// oldCardId: '',
		// status: "",
		// receiving: "营业点自提",
		// name: '许珅',
		// phone: '',
		// region: '',
		// address: '',
		// zipCode: '',
		// remark: ''

	})

	// 单选数据列表
	const radiolist1 = reactive([{
			name: '寄回',
			disabled: false
		},
		{
			name: '不寄回',
			disabled: false
		},
	], )

	const show = ref(false)

	const showPicker = function() {
		show.value = true
	}
	// 确定地区
	const confirm = (e) => {
		console.log(e);
		form.region = e.province.name + e.city.name + e.area.name
	}

	const toPage = () => {
		navTo('/subpackage/after-sale/to-bookkeeping-card/base-change-people')
		// uni.showModal({
		// 	confirmText: '寄回',
		// 	cancelText: '不寄回',
		// 	success: function(res) {
		// 		if (res.confirm) {
		// 			console.log('用户点击确定');
		// 			navTo('/subpackage/after-sale/ETC-log-off/log-off-result')
		// 		} else if (res.cancel) {
		// 			console.log('用户点击取消');
		// 			navTo('/subpackage/after-sale/ETC-log-off/etc-log-off-pay')
		// 		}
		// 	}
		// });
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.upload-box {
		// width: 100%;
		padding: 30rpx;




		.head-tips {
			text-indent: 2rem;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			line-height: 50rpx;
			margin-bottom: 45rpx;

			text {
				color: #FF8000;
			}
		}

		.upload-card {
			margin-bottom: 70rpx;
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;

			.card-left {
				.item1 {
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
					margin-bottom: 30rpx;
				}

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

				.item3 {
					width: 110rpx;
					height: 40rpx;
					background: #ECFBF8;
					/* opacity: 0.2; */
					border-radius: 6rpx;
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					text-align: center;
					line-height: 40rpx;
					color: #0A8F8A;
				}
			}

			image {
				width: 295rpx;
				height: 188rpx;
			}
		}

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

			::v-deep .u-form-item {
				padding: 0;
				line-height: normal;

				.u-form-item__message {
					margin-bottom: 12rpx
				}
			}


			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				margin: 38rpx 0;
			}

			.from_item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				border-bottom: 1rpx solid #DCDCDC;

				::v-deep .input {
					text-align: right;
					flex: 1;
                    background: transparent;
					input {
						text-align: right;
					}
				}
			}

			.from_item1 {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: column;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: #DCDCDC 1px solid;

				input {
					text-align: right;
				}

				.textarea {
					background-color: #F1F1F1;
					width: 100%;
					border-radius: 20rpx;
					margin-top: 10rpx;
					text-indent: 1rem;
					height: 180rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}
			}
		}
		.submit{
			height: 80rpx;
			background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
			margin: 60rpx auto;
		}
	}
</style>