<template>
	<div class="app-main app-content">
		<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="20%" />
		<!-- <div class="list-wrap" v-for="(item, index) in 4" :key="index" @click="$util.pageTo('/pages/order/detail')">
			<div class="list-top flex-center-between">
				<div class="app-color-3">订单编号：3261515151</div>
				<div class="app-price">等待支付</div>
			</div>
			<div class="list-blo">
				<list-module v-for="(item, subIndex) in 2" :key="subIndex" />
			</div>
			<div class="list-bottom flex-center-between">
				<div>
					<span>应付金额：</span>
					<span class="app-size-30 app-bold">¥580.00</span>
				</div>
				<button class="button-com red">立即付款</button>
			</div>
		</div> -->
	</div>
</template>

<script>
import appTabs from '@/components/plugin/tabs'
import listModule from '@/components/module/app-order-list'
export default {
	name: 'order-list',
	components: {
		listModule,
		appTabs
	},
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: '全部',
					value: 212
				},
				{
					name: '待付款',
					value: 213
				},
				{
					name: '待配送',
					value: 214
				},
				{
					name: '配送中',
					value: 215
				},
				{
					name: '已完结',
					value: 216
				}
			]
		}
	},
	onPullDownRefresh() {
		console.log('fasdfasdf')
	},
	// 加载更多
	onReachBottom() {
		console.log('5151')
	},
	methods: {
		change(e) {
			this.tabIndex = e.index
		}
	}
}
</script>

<style lang="scss" scoped>
</style>

<style lang="scss" scoped>
	.app-content {
		padding-top: 20px;
		padding-bottom: 1px;
		.list-wrap {
			padding: 0 30px;
			background-color: #fff;
			margin-bottom: 20px;
			.list-top,
			.list-bottom {
				padding: 20px 0;
				border-bottom: 1px solid $borderColor;
				.button-com {
					padding-top: 15px;
					padding-bottom: 15px;
				}
			}
		}
	}
</style>
