<template>
	<view class="content">
		<view class="r-refund-card">
			<view class="refund-status">
				<view class="status">退款中</view>
				<view class="price">￥25.9</view>
			</view>
			<view class="r-tips">预计04月18日前退回原账户</view>
			<view class="refund-order-card">
				<view class="order-total">
					<view class="total">订单总价（共2件）</view>
					<view class="price">￥25.9</view>
				</view>
				<view class="preferential-list">
					<view class="">团购优惠</view>
					<view class="">-￥2.00</view>
				</view>
				<view class="r-line"></view>
				<view class="r-pay">
					<view class="pay">实付金额</view>
					<view class="price">-￥25.90</view>
				</view>
				<view class="r-pay">
					<view class="pay">退款金额</view>
					<view class="price">-￥25.90</view>
				</view>
			</view>
			<view class="">
				<uni-steps :options="stepsList" active-color="#FDD143" :active="active" direction="column" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const stepsList = ref([
		{
			title: '提交申请',
			desc: '2022-04-18 12:00:00'
		},
		{
			title: '退款受理完成',
			desc: '2022-04-18 12:00:00'
		},
		{
			title: '微信支付到账成功',
			desc: '2022-04-18 12:00:00'
		}
	])
	const active = ref(1)
</script>

<style lang="less" scoped>
	.r-refund-card{
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		.refund-status{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.status{
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
			}
			.price{
				font-weight: 800;
				font-size: 36rpx;
				color: #FB5B5B;
			}
		}
		.r-tips{
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #AAAAAA;
		}
		.refund-order-card{
			margin-top: 20rpx;
			background: #F6F6F6;
			border-radius: 32rpx;
			padding: 20rpx;
			.order-total{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.total{
					font-size: 28rpx;
					color: #222222;
				}
				.price{
					font-size: 28rpx;
					color: #222222;
				}
			}
			.preferential-list{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #FB5B5B;
			}
			.r-line{
				margin-top: 20rpx;
				border: 1rpx solid #FFFFFF;
			}
			.r-pay{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #222222;
			}
		}
	}
</style>