<template>
	<view class="container">
		<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="transparent" title="我的预约">
		</VNavigationBar>
		<view class="body">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="orderList">
					<reservationOrderVue v-for="(item, index) in orderList" :key="index" :orderInfo="item">
					</reservationOrderVue>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import tabBarVue from '@/components/tabBar/tabBar.vue'
	import reservationOrderVue from '../../components/reservationOrder/reservationOrder.vue'

	export default {
		components: {
			tabBarVue,
			VNavigationBar,
			reservationOrderVue
		},
		data() {
			return {
				orderList: [{
						title: '顺捷汽车维修搭电救援补胎中心',
						status: '1',
						address: '济南市历下区福瑞达历下护理院东南门旁',
						phone: '15726506879',
						busiTypeStr: '汽车维修'
					},
					{
						title: '顺捷汽车维修搭电救援补胎中心',
						status: '1',
						address: '济南市历下区福瑞达历下护理院东南门旁',
						phone: '15726506879',
						busiTypeStr: '汽车维修'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.container {
		height: 100%;
		background: #F3F5F7;
		background: linear-gradient(180deg, #C1DEFF 0%, rgba(#F3F5F7, 0) 100%);
		background-size: 100% 600rpx;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		color: #333333;

		.body {
			flex: 1;
			height: 0;
			padding: 16rpx 0 30rpx;
			overflow: auto;
		}

		.orderList {
			width: 686rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
		}
	}
</style>