front-end/hdApp/src/pagesOrder/ship.vue

<template>
	<view class="app-content">
		<view class="order-info_box">
			<view class="order-info-list">
				<view class="list-item">
					<text>订单号</text>
					<text>{{orderInfo.orderSn}}</text>
				</view>
				<view class="list-item">
					<text>下单时间</text>
					<text>{{orderInfo.addTime}}</text>
				</view>
				<!-- <view class="list-item">
					<text>商品名称</text>
					<text>{{2929323}}</text>
				</view> -->
				<view class="list-item">
					<text>金额</text>
					<text>{{orderInfo.actPrice}}</text>
				</view>
			</view>
			<image
				src="/static/images/default-img.png" mode="scaleToFill">
			</image>
		</view>
		<view class="step-content_box">
			<stepShip
				@sendConfirm="sendConfirm"
				@affirmSend="affirmSend"
				@selfSend="selfSend"
				@sendParcel="sendParcel"
				:orderComData="orderComData">
			</stepShip>
		</view>
		<!-- 快递送 -->
		<modal-module
			:show="showSubmitModel"
			@cancel="modalCancel"
			@click="submitEvent"
			:title="titText"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		>
		</modal-module>
	</view>
</template>

<script>
import stepShip from './components/stepShip'
import { getDetB, orderSendDet, freight, thirdSend, selfSend, reachOrder,sendReach } from '@/api/order'
import ModalModule from "@/components/plugin/modal";
export default {
	name: 'admin-ship',
	components: {
		stepShip,
		ModalModule
	},
	data() {
		return {
			showSubmitModel: false,
			titText:'',
			orderInfo: {},
			orderComData: [],
			shipModal: false,
                form:{
                    sendTime:'',
					sendSide: 2,
					sendCost: 0
                },
                sendSideText:'达达配送',
                deliveryList: [
                    {
                    text: "达达配送",
                    key: 2
					},
					{
                    text: "顺丰同城",
                    key: 3
					},
					{
                    text: "闪送",
                    key: 4
					},
					{
                    text: "美团",
                    key: 5
                    }
				],
				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"]
			  ],
			  currentTitType: {}
		}
	},
	onLoad() {
		// uni.showLoading({
		// 	title: '加载中...',
		// 	mask: true
		// })
		// this.init()
	},
	onShow(){
		this.init()
	},
	methods: {
		init() {
			// this.showIndex = this.option.pageStatus || 0
			this._getDet()
			this._orderComDet()
			// this.freightCount()
		},
		sendConfirm(type){
			console.log(type)
			return sendReach({ id: this.option.id }).then(res => {
				this.init();
			})
		},
		_getDet() {
			// this.option.id
			return getDetB({ id: this.option.id }).then(res => {
				this.orderInfo = res.data
			})
		},
		_orderComDet() {
			orderSendDet({ id: this.option.id }).then(res => {
				this.orderComData = res.data
			})
		},
		// 快递送
		sendParcel(){
			this.pageTo({url: "/pagesOrder/shipInfo",query: {orderId:this.option.id,id: this.orderInfo.customId}});
			console.error('快递送')
			// this.shipModal = true;
		},
		// 计算运费
		freightCount(){
			freight({
				id: this.option.id,
				sendSide: this.form.sendSide,
			}).then(res=>{
				this.form.sendCost = res.data.sndCost
			})
		},
		//发货
		shipModalClick(e){
			if (e.index === 0){
				this.modalCancel()
			}else{
				thirdSend({
					id:this.option.id,
					...this.form
				}).then(res=>{
					this.$msg('发货成功')
					this.init()
					this.modalCancel();
				})
			}

		},//关闭
		modalCancel(){
			this.shipModal = false;
			this.showSubmitModel = false
		}, // 自己送
		selfSend(val){
			let self = this;
			uni.showModal({
				title: '提示',
				content: '确定自己送货？',
				success: function (res) {
					if (res.confirm) {
						selfSend({
							id:self.option.id
						}).then(res=>{
							self.modalCancel()
							self.$msg('发货状态已更新')
							self.init()
						})
					}
				}
			});
			// // return;
			// this.currentTitType = val
			// this.titText = val.text;
			// this.showSubmitModel = true
		}, // 确认
		affirmSend(val){
			this.currentTitType = val
			this.titText = val.text;
			this.showSubmitModel = true
		}, // 确认送达 和 本店送
		submitEvent(e){
			if(e.index === 0) {
				this.modalCancel()
			}else{
				let updateStatue = this.currentTitType.type == 0? selfSend:reachOrder
				updateStatue({
					id:this.option.id
				}).then(res=>{
					this.modalCancel()
					this.$msg('发货状态已更新')
					this.init()
				})
			}
		},
		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;
			// 平台不同运费重新计算
			this.freightCount()
		},
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		// background-color: #fff;
		.ship-modal {
		.line-label {
			width: 140px;
		}
		}
	}
	.order-info_box {
		display: flex;
		padding: 30px;
		background-color: #FFFFFF;
		align-items: center;
		& .order-info-list {
			flex: 1;
			& .list-item {
				font-size: 28px;
				font-weight: 400;
				& > text:nth-child(1) {
					color: #666666;
					display: inline-block;
					width: 140px;
				}
				& > text:nth-child(1) {
					color: #333333;
				}
			}
		}
		& image {
			width: 146px;
			height: 146px;
		}
	}
	.order-fa_box {
		padding:20upx;
		border: 1upx solid #DDDDDD;
		border-radius: 4upx;
		margin-bottom: 20upx;
		& > .order-fa_info {
			padding-left: 20upx;
			& > .order-fa_top {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					width: 40upx;
					height: 40upx;
					line-height: 40upx;
					text-align: center;
					background-color: #3385FF;
					color: #FFFFFF;
					font-size: 24upx;
					margin-right: 20upx;
					border-radius: 50%;
				}
				& > view:nth-child(2) {
					color: #333333;
					font-size: 32upx;
					font-weight: 600;
					color: #333333;

				}
			}
			& > view:nth-child(2) {
				padding-left: 60upx;
				text-align: left;
				color: #999999;
				font-size: 24upx;
				font-weight: 400;
				margin:25upx 0 19upx;
			}
			& > view:nth-child(3) {
				padding-left: 60upx;
				text-align: left;
				color: #333333;
				font-size: 24upx;
				font-weight: 400;
				margin:25upx 0 19upx;
			}
		}
	}
</style>