<template>
    <view class="refund-info">
        <view class="ri-name">退款信息{{ nameKey || '' }}</view>
        <view class="ri-line">
            <view class="ri-name">退款金额：</view>
            <view class="ri-value">{{ refund_price }}</view>
        </view>
        <view class="ri-line">
            <view class="ri-name">退款单号：</view>
            <view class="ri-value">{{ refund_no }}</view>
        </view>
        <view class="ri-line">
            <view class="ri-name">退款时间：</view>
            <view class="ri-value">{{ refund_time }}</view>
        </view>
        <view class="ri-line">
            <view class="ri-name">退款原因：</view>
            <view class="ri-value">{{ refund_reason }}</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        nameKey: { default: '' },
        refund_price: { default: '-' },
        refund_no: { default: '-' },
        refund_time: { default: '-' },
        refund_reason: { default: '-' },
    }
}
</script>

<style lang="scss">
    .refund-info{
        padding: 30upx;
        border-radius: 10upx;
        background: #fff;
        .ri-name{
            flex-shrink: 0;
            @include flcw(28upx, 40upx, #9C9C9F);
            &+.ri-line{
                margin-top: 16upx;
            }
        }
        .ri-line{
            @include ctf(space-between);
            .ri-value{
                flex-grow: 1;
                @include flcw(28upx, 60upx, #1A1A1A);
                @include tHide;
            }
        }
    }
</style>