zhywpt-sp/subpackage/after-sale/selfDelivery.vue

<template>
	<navBar title="补办ETC卡"></navBar>
	<view class="oderPage">
		<view class="from">
			<view class="from_item">
				<text>新办单号:</text>
				<input type="text" name="" id="" placeholder="请输入">
			</view>
			<view class="from_item">
				<text>订单车牌号:</text>
				<input type="text" name="" id="" value="贵A12345">
			</view>
			<view class="from_item">
				<text>原卡号:</text>
				<input type="text" name="" id="" placeholder="请输入卡号">
			</view>
			<view class="from_item">
				<text>原卡状态:</text>
				<input type="text" name="" id="" placeholder="">
			</view>
			<view class="from_item">
				<text><text style="color: red;">*</text>收货方式：</text>
				<u-radio-group v-model="radiovalue1">
					<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>
		

			<view class="from_item">
				<text><text style="color: red;">*</text>自提：</text>
				<view style="display: flex;">
					<input type="text" name="" id="" placeholder="请选择自提网点">
					<u-icon name="arrow-right" style="margin-left: 10px;"></u-icon>
				</view>
			</view>

			<view class="from_item1">
				<text><text style="color: red;">*</text>补卡原因:</text>
				<textarea name="" id="" placeholder="请输入补卡原因，限制50字以内。"></textarea >
			</view>
		</view>
		<button class="submit">下一步</button>
		<!-- 地区弹窗 -->
<!-- 		<view>
			<u-picker :show="show" ref="uPicker" :columns="columns" @cancel="cancel" @confirm="confirm"
				@change="changeHandler">
			</u-picker>
		</view> -->
	</view>

</template>

<script setup lang="ts">
	import navBar from "../ETCcancellation/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;

			.from_item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 20rpx;
				border-bottom: #DCDCDC 1px solid;

				input {
					text-align: right;
				}
			}

			.from_item1 {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx;
				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 0;
				}
			}
		}
	}

	.submit {
		   background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
		   width: 670rpx;
		   height: 80rpx;
		   line-height: 80rpx;
		   font-size: 32rpx;
		   color: #fff;
		   border-radius: 100rpx;
		   position: fixed;
		   bottom: 10%;
		   left:50%;
		   transform: translate(-50%);
	}
</style>