front-end/mobile-code-back/src/admin/order/components/sel-order.vue

<template>
	<div class="sel-order-module">
		<!-- 列表 -->
		<time-axis>
			<!-- 打单 -->
			<timeaxis-item class="axis-list axis-first print-order" bgcolor="none">
				<template v-slot:node>
					<div class="tui-node node-big">
						<div class="node-small"></div>
					</div>
				</template>
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">打单</div>
						<div class="axis-det">
							<button class="admin-button-com big blue" @click="hasSendOrderFn">有配送单</button>
							<button class="admin-button-com big blue" @click="pageTo({
						url: '/admin/order/fill-form',
						query: {
							id: orderData.id
						}
							})">去填单</button>
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 下单 -->
			<timeaxis-item class="axis-list down-order" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">下单</div>
						<div class="axis-det">
							<div>{{ orderData.addTime | formatTime }}</div>
						</div>
					</div>
				</template>
			</timeaxis-item>
		</time-axis>
	</div>
</template>

<script>
import TimeAxis from '@/admin/home/components/plugin/time-axis'
import TimeaxisItem from '@/admin/home/components/plugin/timeaxis-item'
// api
import { printOrder } from '@/api/order'
export default {
	name: 'sel-order-module',
	components: {
		TimeAxis,
		TimeaxisItem
	},
	props: {
		query: {
			type: Object,
			default: () => {}
		},
		orderData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			data: {}
		}
	},
	mounted() {
	},
	methods: {
		hasSendOrderFn() {
			printOrder({
				id: this.orderData.id,
				option: 1
			}).then(res => {
				this.$util.pageTo({
					url: '/admin/order/ship',
					query: {
						id: this.orderData.id,
						pageStatus: 7
					}
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	// 打单
	.print-order {
		.axis-slot-wrap {
			top: -4px !important;
		}
		.axis-det {
			@include disFlex(center, space-between);
			margin-top: 50px;
			margin-bottom: 10px;
			.admin-button-com {
				width: 48%;
			}
		}
	}
	// 下单
	.down-order {
		.axis-det {
			margin-top: 14px;
		}
	}
</style>