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

<template>
	<div class="app-main app-content">
		<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" :height="100" @change="change" itemWidth="20%" />
		<div class="list-wrap">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index" @click="$util.pageTo({
					url: '/pages/order/admin/detail',
					query: {
						id: item.id
					}
				})">
					<div class="list-top flex-center-between">
						<div class="app-color-3">订单编号：{{ item.sendNum }}</div>
						<div class="app-price">{{ item.status | constantfilter('ORDER_STATUS') }}</div>
					</div>
					<div class="list-blo">
						<list-module v-for="(item, subIndex) in 2" :key="subIndex" />
					</div>
					<div class="list-bottom">
						<div>
							<span class="freight-text">运费：￥{{ item.sendCost }}</span>
							<span>应付金额：</span>
							<span class="app-size-30 app-bold">¥{{ item.actPrice }}</span>
						</div>
						<div class="list-button">
							<!-- 待配送 -->
							<div v-if="item.status == 2" class="admin-button-com">免发货</div>
							<div v-if="item.status == 2" class="admin-button-com">发货</div>
							<!-- 配送中 -->
							<div v-if="item.status == 2" class="admin-button-com">继续</div>
							<!-- 已完成 -->
							<div v-if="item.status == 5" class="admin-button-com default">查看快递</div>
						</div>
					</div>
				</div>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
	</div>
</template>

<script>
import AppTabs from '@/components/plugin/tabs'
import ListModule from '@/components/module/app-order-list'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import { list } from '@/mixins'
// api
import { getListB } from '@/api/order'
export default {
	name: 'order-list',
	components: {
		ListModule,
		AppTabs,
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: '全部',
					value: 0
				},
				{
					name: '待付款',
					value: 0
				},
				{
					name: '待配送',
					value: 0
				},
				{
					name: '配送中',
					value: 0
				},
				{
					name: '已完结',
					value: 0
				}
			]
		}
	},
	onPullDownRefresh() {
		console.log('fasdfasdf')
	},
	// 加载更多
	onReachBottom() {
		console.log('5151')
	},
	onLoad: function() {
		this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			let status = JSON.parse(JSON.stringify(this.tabIndex))
			status = status == 4 ? 5 : status - 1
			return getListB({
				status: status,
				search: '',
				page: this.list.page
			 }).then(res => {
				this.completes(res)
				if (this.$util.isEmpty(res.data)) return false
				this.tabs[0].value = res.data.asset.totalOrder
				this.tabs[1].value = res.data.asset.unPayOrder
				this.tabs[2].value = res.data.asset.unSendOrder
				this.tabs[3].value = res.data.asset.sendingOrder
				this.tabs[4].value = res.data.asset.finishOrder
			})
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false
			} else {
				this.tabIndex = e.index
				this.resetList()
				this._list()
			}
		}
	}
}
</script>

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

<style lang="scss" scoped>
	.app-content {
		padding-top: 120px;
		padding-bottom: 1px;
		.list-wrap {
			.list {
				padding: 0 30px;
				background-color: #fff;
				margin-bottom: 20px;
				.list-top,
				.list-bottom {
					padding: 26px 0;
					border-bottom: 1px solid $borderColor;
					color: $fontColor3;
					.app-bold {
						color: #333;
					}
					.freight-text {
						margin-right: 60px;
					}
				}
				.list-bottom {
					& > div {
						@include disFlex(center, flex-end);
					}
					.list-button {
						margin-top: 26px;
						.admin-button-com {
							margin-left: 20px;
						}
					}
				}
			}
		}
	}
</style>