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

<template>
	<div class="sel-confirm-module">
		<!-- 列表 -->
		<time-axis>
			<!-- 完成 -->
			<timeaxis-item class="axis-list axis-first com-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">发货</div>
						<div class="axis-det btn-wrap">
							<button class="admin-button-com big blue confirm-btn" @click="sendSelfFn">自己送</button>
							<button class="admin-button-com big blue confirm-btn" @click="sendShipFn">代送</button>
						</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">打单</div>
						<div class="axis-det">
							<div class="app-color-0 app-bold">{{ orderComData[1].addTime | formatTime }}</div>
							<block v-if="!$util.isEmpty(orderComData[1].receive)">
								<card-name :info="orderComData[1].receive" />
								<div class="btn-wrap-com">
									<button class="admin-button-com default" @click="printOrderFn">重打</button>
								</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">下单</div>
						<div class="axis-det">
							<div class="app-color-0 app-bold">{{ orderComData[1].addTime | formatTime }}</div>
						</div>
					</div>
				</template>
			</timeaxis-item>
		</time-axis>
		<!-- ship -->
		<modal-module :show="shipModal" :maskClosable="false" @cancel="modalCancel" @click="shipModalClick" title="确认发货？" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap ship-modal">
					<!-- <div class="inp-list-line switch-wrap">
						<div class="line-label">快递代送</div>
						<div class="line-input flex-strat">
							<switch :checked="form.sendType == '0' ? false : true" @change="switchChangeFn" />
						</div>
					</div> -->
					<!-- <block v-if="form.sendType == 1"> -->
						<div class="inp-list-line">
							<div class="line-label">送花时间</div>
							<div class="line-input">
								<picker mode="multiSelector" :range="timeList" :value="timeValue" @change="changeTimeFn" class="inp-select">
									<div v-if="form.sendTime">{{ form.sendTime }}</div>
									<div class="tui-placeholder" v-else>请选择</div>
								</picker>
							</div>
						</div>
						<div class="inp-list-line">
							<div class="line-label">配送方</div>
							<div class="line-input">
								<picker mode="selector" :range="deliveryList" @change="changedeliveryFn" range-key="text" class="inp-select">
									<div v-if="form.sendSide">{{ sendSideText }}</div>
									<div class="tui-placeholder" v-else>请选择</div>
								</picker>
							</div>
						</div>
					<!-- </block> -->
				</div>
			</template>
		</modal-module>
		<!-- 删除提示 -->
		<modal-module :show="selfShipModal" @cancel="modalCancel" @click="shipModalClick" content="确认已送达？" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
	</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'
import ModalModule from '@/components/plugin/modal'
// api
import { orderSend, printOrder } from '@/api/order'
export default {
	name: 'sel-confirm-module',
	components: {
		TimeAxis,
		TimeaxisItem,
		CardName,
		ModalModule
	},
	props: {
		query: {
			type: Object,
			default: () => {}
		},
		orderData: {
			type: Object,
			default: () => {}
		},
		orderComData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			shipModal: false,
			form: {
				sendType: 0,
				sendTime: '',
				sendSide: ''
			},
			sendSideText: '',
			// time
			timeList: [
				['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
				['00', '10', '20', '30', '40', '50']
			],
			timeValue: [0, 0],
			// deliveryList
			deliveryList: [
				{
					text: '达达配送',
					key: 1
				}
			],
			// 自己送
			selfShipModal: false
		}
	},
	methods: {
		sendShipFn() {
			this.shipModal = true
			this.form = {
				sendType: 0,
				sendTime: '',
				sendSide: ''
			}
		},
		sendSelfFn() {
			this.selfShipModal = true
			this.form = {
				sendType: 2,
				sendTime: '',
				sendSide: 1
			}
		},
		printOrderFn() {
			printOrder({
				id: this.orderData.id,
				option: 1
			}).then(res => {
				this.$util.pageTo({
					url: '/admin/order/ship',
					query: {
						id: this.orderData.id,
						pageStatus: 7
					}
				})
			})
		},
		// moadl
		switchChangeFn(e) {
			this.form.sendType = e.detail.value ? 1 : 0
		},
		changeTimeFn(e) {
			let oneIndex = e.detail.value[0] || 0
			let twoIndex = e.detail.value[1] || 0
			this.form.sendTime = this.timeList[0][oneIndex] + ':' + this.timeList[1][twoIndex]
		},
		changedeliveryFn(e) {
			this.form.sendSide = this.deliveryList[e.detail.value].key
			this.sendSideText = this.deliveryList[e.detail.value].text
		},
		shipModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				orderSend({
					id: this.query.id,
					option: 1,
					...this.form
				}).then(res => {
					this.modalCancel()
					this.$util.pageTo({
						url: '/admin/order/ship',
						query: {
							id: this.query.id,
							pageStatus: 3
						}
					})
				})
			}
		},
		modalCancel() {
			this.shipModal = false
			this.selfShipModal = false
		}
	}
}
</script>

<style lang="scss" scoped>
	// 完成
	.axis-first {
		.axis-det {
			margin-top: 40px !important;
		}
		.confirm-btn {
			width: 40%;
		}
	}
	// 打单
	.com-wrap {
		.axis-det {
			margin-top: 14px;
			& > div {
				margin-top: 20px;
				&:first-child {
					margin-top: 0;
				}
			}
		}
	}
	// modal
	.ship-modal {
		.line-label {
			width: 140px;
		}
	}
	.btn-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>