food_wechat/pages/main/order.vue

<template>
	<view>
		<!-- topbar -->
		<u-navbar title="订单查询" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- tabs -->
		<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		<!-- tabBoxs -->
		<!-- 未付款 -->
		<view v-if="curNow===0">
			<view v-for="item in orderList" :key="item.id" v-if="item.status === 'unpaid' && item.back === 'normal'">
				订单号: {{item.order_sn}}
			</view>
		</view>
		<view v-if="curNow===1">
			<view v-for="item in orderList" :key="item.id" v-if="item.status !== 'unpaid' && item.back === 'normal'">
				订单号: {{item.order_sn}}
			</view>
		</view>
		<view v-if="curNow===2">
			<view v-for="item in orderList" :key="item.id" v-if="item.back !== 'normal'">
				订单号: {{item.order_sn}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['未付款', '已付款', '申请售后'],
				curNow: 0
			}
		},
		computed: {
			orderList() {
				return this.$store.state.orderList
			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			}
		},
		onLoad() {
			this.$store.dispatch('fetchOrderList')
		}
	}
</script>

<style>

</style>