zhywpt-sp/subpackage/orders/refund-order-balance.vue

<template>
	<nav-bar title="余额补领"></nav-bar>
	<view class="oderPage">
		<view class="details">
			<view class="header">
				<image :src="`${$imgUrl}order/no1.png`" mode=""></image>
				<text>091110019133110</text>
			</view>
			<view class="hr">

			</view>
			<view class="row">
				<view class="">
					订单车牌号：
				</view>
				<text>贵A01234</text>
			</view>
			<view class="row">
				<view class="">
					旧卡号：
				</view>
				<text>1293030566565</text>
			</view>
			<view class="row">
				<view class="">
					旧卡金额：
				</view>
				<text>102.00</text>
			</view>
			<view class="row">
				<view class="">
					换卡时间：
				</view>
				<text>2023-02-12 10:00:00</text>
			</view>
			<view class="row">
				<view class="">
					新卡号：
				</view>
				<text style="color: #00B38B;">10220100001</text>
			</view>
			<view class="line">
			</view>

			<button>余额补领</button>
		</view>

	</view>

</template>

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

	const reason = ref('')

	// 单选数据列表
	const radiolist1 = reactive([{
			name: '退货原因1',
			disabled: false
		},
		{
			name: '退货原因2',
			disabled: false
		},
		{
			name: '退货原因3',
			disabled: false
		},
		{
			name: '退货原因4',
			disabled: false
		},
		{
			name: '退货原因5',
			disabled: false
		},
	], )

	// 单选
	const radioChange = (n) => {
		console.log('radioChange', n);
	}
</script>


<style>
	page {
		/* width: 100%;
		height: 100%; */
		display: flex;
		flex-direction: column;
		background-color: #F3F3F3;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.oderPage {
		background-color: #EEF7F7;
		margin: 30rpx;

		.details {
			position: relative;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			height: 540rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;

			.header {
				align-items: center;
				display: flex;
				padding-bottom: 30rpx;
				// border-bottom: 1px solid #DCDCDC;

				image {
					width: 51rpx;
					height: 31rpx;
				}

				text {
					font-size: 30rpx;
					margin-left: 20rpx;
					font-weight: 600;
				}
			}

			.hr {
				height: 1rpx;
				background: #DCDCDC;
				width: 100%;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
			}

			.row {
				display: flex;
				margin: 34rpx 0;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;

				view {
					font-size: 26rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;

				}
			}

			.line {
				width: 100%;
				height: 1rpx;
				background: #DCDCDC;

			}

			button {
				width: 141rpx;
				height: 61rpx;
				background: #FFFFFF;
				border: 1px solid #00B38B;
				border-radius: 30rpx;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #00B38B;
				line-height: 61rpx;
				position: absolute;
				right: 30rpx;
				bottom: 20rpx;
				padding: 0;
			}
		}

	}
</style>