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

<template>
	<div class="sel-ship-confirm-module">
		<!-- 列表 -->
		<time-axis v-if="!$util.isEmpty(orderComData)">
			<!-- 完成 -->
			<timeaxis-item class="axis-list axis-first confirm-wrap" 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">{{ orderComData[0].actionName }}</div>
						<div class="axis-det">
							<div class="app-color-0 app-bold">{{ orderComData[0].finishTime | formatTime }}</div>
							<div>订单归类: {{ orderComData[0].classify.category }}</div>
							<div>用途：{{ orderComData[0].classify.usage }}</div>
							<!-- <div>消息推送：已推送</div> -->
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 送达 -->
			<timeaxis-item class="axis-list com-wrap" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">{{ orderComData[1].actionName }}</div>
						<div class="axis-det">
							<div class="app-bold">{{ orderComData[1].addTime | formatTime }}</div>
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 发货 -->
			<timeaxis-item class="axis-list confirm-wrap" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">{{ orderComData[2].actionName}}</div>
						<div class="axis-det">
							<div class="app-color-0 app-bold">{{ orderComData[2].addTime | formatTime }}</div>
							<block v-if="!$util.isEmpty(orderComData[2].sendInfo)">
								<div>配送方：{{ orderComData[2].sendInfo.sendSideName }}</div>
								<div>距离：{{ orderComData[2].sendInfo.sendDistance }}km</div>
								<div>运费：¥{{ orderComData[2].sendInfo.sendCost }}</div>
								<div>小费：¥{{ orderComData[2].sendInfo.sendTip }}</div>
								<div>状态：{{ orderComData[2].sendInfo.sendStatus | constantfilter('SEND_STATUS') }}</div>
							</block>
							<block v-else>
								<div>配送方：自己送</div>
							</block>
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 打单 -->
			<timeaxis-item class="axis-list com-wrap" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">{{ orderComData[3].actionName}}</div>
						<div class="axis-det">
							<div class="app-bold">{{ orderComData[3].addTime | formatTime }}</div>
							<card-name v-if="!$util.isEmpty(orderComData[3].receive)" :info="orderComData[3].receive" />
							<div class="btn-wrap-com">
								<!-- <button class="admin-button-com default">明细</button> -->
								<button class="admin-button-com default" @click="() => { alert('打印功能待开发！') }">打印</button>
							</div>
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 下单 -->
			<timeaxis-item class="axis-list com-wrap" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">{{ orderComData[4].actionName}}</div>
						<div class="axis-det">
							<div class="app-bold">{{ orderComData[4].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'
import CardName from './card-name'
export default {
	name: 'sel-ship-confirm-module',
	components: {
		TimeAxis,
		TimeaxisItem,
		CardName
	},
	props: {
		query: {
			type: Object,
			default: () => {}
		},
		orderData: {
			type: Object,
			default: () => {}
		},
		orderComData: {
			type: Array,
			default: () => []
		}
	}
}
</script>

<style lang="scss" scoped>
	// 发货
	.confirm-wrap {
		.axis-det {
			margin-top: 20px;
			margin-bottom: 10px;
			color: $fontColor2;
			& > div {
				margin-top: 10px;
				&:first-child {
					margin-top: 0;
				}
			}
			.admin-button-com {
				width: 120px;
				margin-top: 20px;
			}
			.modify-btn {
				color: $mainColor;
				font-size: 24px;
				margin-left: 30px;
			}
		}
	}
	// 打单
	.com-wrap {
		.axis-det {
			margin-top: 14px;
			& > div {
				margin-top: 20px;
				&:first-child {
					margin-top: 0;
				}
			}
		}
	}
</style>