zhywpt-sp/after-sale/refundPage.vue

<template>
	<view class="oderPage">
		<view class="content">
			<text class="title">卡上余额(元)</text>
			<view class="">
				<text style="font-size: 30rpx;">￥</text>123.98
			</view>
		</view>
		<view class="from">
			<view class="from_item">
				<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" v-if="flag">
				<text>联系人姓名:</text>
				<input type="text" name="" id="" placeholder="请输入">
			</view>
			<view class="from_item" v-if="flag">
				<text>手机号：</text>
				<input type="text" name="" id="" value="13821934313">
			</view>
			<view class="from_item" v-if="flag">
				<text>开户行：</text>
				<input type="text" name="" id="" placeholder="请输入开户行">
			</view>
			<view class="from_item" v-if="flag">
				<text>退费银行卡号：</text>
				<input type="text" name="" id="" placeholder="请输入银行卡号">
			</view>
		</view>
	</view>
	<button class="submit">确认退费</button>
</template>

<script setup lang="ts">
	import {
		ref,
		reactive
	} from "vue";

	// 单选数据列表
	const radiolist1 = reactive([{
			name: '卡退费',
			disabled: false
		},
		{
			name: '余额补领',
			disabled: false
		},
	], )
	// 单选默认数据
	const radiovalue1 = ref('卡退费')

	let flag = ref(true)


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

		.content {
		    display: flex;
		    flex-direction: column;
		    /* justify-content: center; */
		    align-items: center;
		    width: 750rpx;
		    height: 266rpx;
		    background-color: #fff;
		    margin-bottom: 30rpx;
		    padding: 75rpx 0;

			.title {
				font-size: 28rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				color: #717171;
				margin-bottom: 40rpx;
			}

			view {
				font-size: 40rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				color: #2A2A2A;
				font-weight: bold;
			}
		}

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

			.from_item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: #DCDCDC 1px solid;
				align-items: center;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;

				input {
					text-align: right;
				}
			}
		}
	}

	.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: 60rpx;
		left: 50%;
		transform: translate(-50%);
	}
</style>