JiangxiMiniProgram/pages/mineEntry/myOrder/detail/detail.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="订单详情"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="consultItem">
					<view class="top_row">
						<view class="flex">
							<view class="tag">学费</view>
							<view class="schoolName">xx模拟驾驶馆</view>
						</view>
						<view class="status">
							<view class="text">尾款待支付</view>
							<view class="icon">
								<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
							</view>
						</view>
					</view>
					<view class="target">
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_chexing.png" mode=""></image>
								</view>
								<view class="lab">学驾车型</view>
							</view>
							<view class="name">C1</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_banxing.png" mode=""></image>
								</view>
								<view class="lab">所选班型</view>
							</view>
							<view class="name">C2自动挡一对一VIP班</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_jiaxiao.png" mode=""></image>
								</view>
								<view class="lab">驾校类型</view>
							</view>
							<view class="name">合作驾校</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_xingshi.png" mode=""></image>
								</view>
								<view class="lab">支付形式</view>
							</view>
							<view class="name">全额支付</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_fangshi.png" mode=""></image>
								</view>
								<view class="lab">支付方式</view>
							</view>
							<view class="name">微信支付</view>
						</view>
						<view class="row">
							<view class="leftLab">
								<view class="icon">
									<image src="@/static/images/car/ic_shijian.png" mode=""></image>
								</view>
								<view class="lab">支付时间</view>
							</view>
							<view class="name">2023/08/08 10:00:00</view>
						</view>
					</view>
					<view class="border_bottom">
						<view class="rows">
							<view class="label">培训费总价</view>
							<!-- <view class="value">￥2000.02</view> -->
						</view>
						<view class="rows">
							<view class="label hui">学驾培训费</view>
							<view class="value hui">￥2000.02</view>
						</view>
						<view class="rows">
							<view class="flex">
								<view class="label hui">代收费</view>
								<view class="feeIcon">
									<image src="@/static/images/car/ic_fangshi.png" mode=""></image>
								</view>
							</view>
							<view class="value hui">￥2000.02</view>
						</view>
					</view>
					<view class="border_bottom">
						<view class="rows">
							<view class="label hui">实际支付</view>
							<view class="value hui">￥2000.02</view>
						</view>
						<view class="rows">
							<view class="label hui">已支付定金</view>
							<view class="value blue">￥1000.02</view>
						</view>
						<view class="rows">
							<view class="label hui">待支付尾款</view>
							<view class="value blue">￥2000.02</view>
						</view>
						<view class="refundBtn">申请退款</view>
					</view>
				</view>
			</view>
			<refundInfo/>
		</view>
	</view>
</template>

<script>
	import refundInfo from './comp/refundInfo.vue'
	export default {
		components: { refundInfo }
	}
</script>

<style lang="scss" scoped>
	@import '../comp/comp.scss';
	.feeIcon {
		width: 28rpx;
		height: 28rpx;
		margin-left: 12rpx;
	}
	.card {
		padding: 20rpx;
	}
	.pad {
		padding-bottom: 60rpx;
	}
	.refundBtn {
		width: 200rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #E8E9EC;
		line-height: 72rpx;
		margin: 24rpx 0 0 0;
		font-size: 28rpx;
		color: #ADADAD;
		text-align: center;
	}
</style>