front-end/mobile-code/src/pages/order/list.vue

<template>
	<div class="app-content">
		<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 ListModule from '@/components/module/app-order-list'
// api
import { getListB } from '@/api/order'
export default {
	name: 'order-list',
	components: {
		ListModule
	},
	data() {
		return {
		}
	},
	onPullDownRefresh() {
		console.log('fasdfasdf')
	},
	// 加载更多
	onReachBottom() {
		console.log('5151')
	},
	onLoad: function() {
		this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			return getList({ status: this.tabIndex }).then(res => {
				this.completes(res)
			})
		}
	}
}
</script>

<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>