jd_logistics/jd_logistics-app/pages/order/order_detail.vue

<template>
	<view class="verification-container">
		<!-- 内容区域 -->
		<view class="content">
			<!-- 用户信息卡片 -->
			<view class="info-card1">
				<view class="address-item">
					<view class="img-status-text">
						<image src="/static/img/icon-send.png" mode="" class="img"></image>
						<!-- <view class="status-text">{{getStatusText}}</view> -->
					</view>
					<view class="user-info">
						<AddressInfo :address="addressSend" />
					</view>
				</view>
				<view class="address-item">
					<view class="img-status-text">
						<image src="/static/img/icon-receive.png" mode="" class="img"></image>
						<!-- <view class="status-text">{{getStatusText}}</view> -->
					</view>
					<view class="user-info">
						<AddressInfo :address="addressReceive" />
					</view>
				</view>
			</view>

			<view class="action-title">运单信息</view>


			<OrderInfo :order-detail="orderInfo"></OrderInfo>

			<view class="action-title">费用信息</view>
			<OrderFeesInfo v-if="details?.feeList?.length" :order-detail="details.feeList" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import OrderInfo from './components/OrderInfo.vue'
	import OrderFeesInfo from './components/OrderFeesInfo.vue'
	import AddressInfo from '@/components/AddressInfo.vue'
	import {
		getOrderDetail,
		getCostDetails
	} from '@/api/order.js'


	import {
		useAppStore
	} from '@/stores/app'
	const appStore = useAppStore()

	const shopOrderId = ref('')

	const addressSend = ref({})
	const addressReceive = ref({})

	const orderInfo = ref({})
	const details = ref({})
	const showOrderCofirmBtn = ref(false)
	const showOrderDispatchBtn = ref(false)
	const showOrderRefundBtn = ref(false)
	const showCallUserBtn = ref(true)


	onLoad((option) => {
		shopOrderId.value = option.waybillId;
		getOrderInfo()
	})

	const getOrderInfo = async () => {
		getOrderDetail(shopOrderId.value).then(res => {
			if (res.code == 200) {
				console.log('getOrderInfoApi=========', res)
				orderInfo.value = res.data;
				addressSend.value = {
					contactName: res.data.senderName,
					contactPhone: res.data.senderPhone,
					provinceName: res.data.senderProvince,
					cityName: res.data.senderCity,
					countyName: res.data.senderCounty,
					detailedAddress: res.data.senderAddress
				}
				addressReceive.value = {
					contactName: res.data.receiverName,
					contactPhone: res.data.receiverPhone,
					provinceName: res.data.receiverProvince,
					cityName: res.data.receiverCity,
					countyName: res.data.receiverCounty,
					detailedAddress: res.data.receiverAddress
				}
			}
		})


		let result = await getCostDetails({
			waybillId: shopOrderId.value
		})
		if (result.code == 200) {
			details.value = result.data;
		}
		console.log(result, '222')
	}

	// 返回按钮点击事件
	const handleBack = () => {
		uni.navigateBack()
	}

	// 确认核销按钮点击事件
	const handleVerification = () => {
		uni.showModal({
			title: '确认核销',
			content: '确定要核销此订单吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '核销成功',
						icon: 'success'
					})
					// 这里可以添加核销成功的后续逻辑
				}
			}
		})
	}


	const makePhoneCall = (phoneNum) => {
		// 这里以拨打10086为例，实际使用时可以替换为动态获取的电话号码

		uni.makePhoneCall({
			phoneNumber: phoneNum, // 电话号码
			success: () => {
				console.log('拨打电话成功')
			},
			fail: (err) => {
				console.log('拨打电话失败：', err)
			}
		})
	}



	//确认订单是去派单状态
	const updateOrderDispatch = () => {
		if (!appStore.userInfo.orderDispatch) {
			uni.showToast({
				title: "当前会员不能使用此功，请升级为SVIP会员",
				icon: "none"
			})
			return
		}
		uni.showModal({
			title: '去派单',
			content: '是否确认去派单？',
			success: (res) => {
				if (res.confirm) {
					const params = {
						shopOrderId: orderInfo.value.shopOrderId,
						dispatchVerifyStatus: "0"
					}
					updateOrderDispatchApi(params).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'success'
							})
							uni.navigateBack()
						}
					})
				}
			}
		})

	}


	//直接核销订单
	const updateOrderVerify = () => {
		const params = {
			shopOrderId: orderInfo.value.shopOrderId
		}
		updateOrderVerifyApi(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '操作成功',
					icon: 'success'
				})
				uni.navigateBack()
			}
		})
	}

	//0 待服务 1 服务中 2 服务完成 3 待接单
	const startServe = () => {

		// 在实际UniApp项目中，使用以下代码：
		uni.scanCode({
			success: (res) => {
				console.log(res, '=============scanCode==startServe=')
				if (res.result == orderInfo.value.shopOrderId) {
					//这里判断 grabId 是否相同 相同的话直接更新
					updateOrderVerify()
				} else {
					uni.showModal({
						content: "服务订单与扫码订单不一致",
						confirmText: "确认",
						showCancel: false
					})
				}
			},
			fail: (err) => {
				uni.showToast({
					title: '扫码失败',
					icon: 'none'
				})
			}
		})

	}


	const handleOrderRefund = (status) => {
		if (status == '2') {
			uni.showModal({
				title: '拒绝退款',
				content: '是否确认拒绝退款？',
				success: (res) => {
					if (res.confirm) {
						updateOrderRefund(status)
					}
				}
			})
			return
		}
		uni.showModal({
			title: '确认退款',
			content: '是否确认退款？',
			success: (res) => {
				if (res.confirm) {
					updateOrderRefundSure(status)
				}
			}
		})
	}


	//处理退款订单  0 待审核 1 审核通过 2 审核拒绝
	const updateOrderRefundSure = (status) => {
		const params = {
			shopOrderId: orderInfo.value.shopOrderId
		}
		updateOrderRefundSureApi(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '操作成功',
					icon: 'success'
				})
				uni.navigateBack()
				// emit('success');
			}
		})
	}

	//处理退款订单  0 待审核 1 审核通过 2 审核拒绝
	const updateOrderRefund = (status) => {
		const params = {
			shopOrderId: orderInfo.value.shopOrderId,
			reviewResult: status
		}
		updateOrderRefundApi(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '操作成功',
					icon: 'success'
				})
				uni.navigateBack()
			}
		})
	}

	// 发布抢单
	const publishOrder = () => {
		uni.navigateTo({
			url: '/pages/dispatchOrders/publishOrder?id=' + orderInfo.value.shopOrderId
		})
	}

	// 直接派单
	const assignOrder = () => {
		uni.navigateTo({
			url: '/pages/dispatchOrders/dispatch?id=' + orderInfo.value.shopOrderId
		})
	}


	const reSetBtnStatus = () => {
		showOrderCofirmBtn.value = false
		showOrderDispatchBtn.value = false
		showOrderRefundBtn.value = false
		showCallUserBtn.value = false
	}


	//orderType: 订单类型（1-全部订单, 2-待确认, 3-待核销, 4-已完成, 5-申请退款, 6-服务中）
	const getStatusText = computed(() => {
		// shop_order_status	 商品订单状态(0 待支付  1 待使用 2 退款中  3 退款成功  4 退款失败   5  服务完成)	
		// shop_evaluate_status  评价状态(0 待评价 1 已评价)	
		// shop_refund_review_status  订单退款审核状态(0 待审核 1 审核通过 2 审核拒绝)			
		// shop_service_status	服务状态：0=待服务，1=正在服务中，2=服务完成	
		// shop_confirm_status	确认状态：0=待确认，1=已确认
		// shop_dispatch_verify_status	派单核销状态：0=待派单，1=待核销，2=已派单，3=已核销

		//dispatchInfo.shopOrderServiceStatus   0 待派单 1 已派单 2 待抢单  3 已抢单
		reSetBtnStatus()


		if (orderInfo.value.shopOrderStatus == '2') {
			showOrderRefundBtn.value = true
			return '申请退款'
		}
		if (orderInfo.value.shopOrderStatus == '3') {
			showCallUserBtn.value = true
			return '退款成功'
		}

		if (orderInfo.value.shopOrderStatus == '4') {
			showCallUserBtn.value = true
			return '退款失败'
		}


		if (orderInfo.value.shopOrderStatus == '0') {
			showCallUserBtn.value = true
			return '待支付'
		}

		if (orderInfo.value.shopConfirmStatus == '0') {
			showOrderCofirmBtn.value = true
			return '待确认'
		}


		if (orderInfo.value.shopOrderStatus == '5') {
			if (orderInfo.value.shopEvaluateStatus == '0') {
				showCallUserBtn.value = true
				return '待评价'
			}
			if (orderInfo.value.shopEvaluateStatus == '1') {
				showCallUserBtn.value = true
				return '已评价'
			}
			return '服务完成'
		}

		//orderDetail.shopConfirmStatus == '1' 的时候才会有下边的状态值
		if (orderInfo.value.shopOrderStatus == '1' && orderInfo.value.shopConfirmStatus == '1') {

			if (orderInfo.value.dispatchInfo && orderInfo.value.dispatchInfo.shopOrderServiceStatus == '2') {
				showCallUserBtn.value = true
				return '待抢单'
			}
			if (orderInfo.value.dispatchInfo && orderInfo.value.dispatchInfo.shopOrderServiceStatus == '3') {
				showCallUserBtn.value = true
				return '已抢单'
			}

			switch (orderInfo.value.shopDispatchVerifyStatus) {
				case '0':
					//这里需要看下是否是有会员 派单权限
					showOrderDispatchBtn.value = true
					return '待派单' // 待派单
				case '1':
					showCallUserBtn.value = true
					return '待核销' // 待核销
				case '2':
					showCallUserBtn.value = true
					return '已派单' // 已派单
				case '3':
					showCallUserBtn.value = true
					return '已核销' // 已核销
			}
			return '待使用'
		}
	})
</script>

<style lang="scss" scoped>
	.verification-container {
		min-height: 100vh;
		background-color: #F5F7FA;
		position: relative;
		padding-bottom: 140rpx;
		/* 为底部固定按钮预留空间 */

		.content {
			padding: 20rpx;
		}

		.verification-status {
			height: 72rpx;
			background: #FFF7EC;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			align-items: center;
			display: flex;
			padding-left: 16rpx;

			image {
				width: 28rpx;
				height: 28rpx;
			}

			.status-text {
				margin-left: 8rpx;
				height: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFAF41;
				line-height: 40rpx;
			}
		}

		.action-title {
			height: 48rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 48rpx;
			margin: 20rpx 0rpx;
		}

		.info-card1 {
			background: #fff;
			border-radius: 32rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;

			// F1F3F8
			.address-item {
				display: flex;

				&:first-child {
					border-bottom: 2rpx solid #F1F3F8;
					padding-bottom: 20rpx;
				}

				&:last-child {
					padding-top: 20rpx;
				}
			}

			.user-info {
				flex: 1;
				margin-left: 26rpx;
			}

			.img-status-text {
				align-self: center;
				text-align: center;
				flex-shrink: 0;

				.img {
					width: 56rpx;
					height: 56rpx;
				}

				.status-text {
					font-size: 24rpx;
					color: #0089FF;
					font-size: 500;
				}
			}
		}


		.info-card {
			background-color: #ffffff;
			border-radius: 16rpx;
			overflow: hidden;
			padding: 16rpx;
			margin-top: 16rpx;

			.card-header {
				display: flex;
				align-items: center;

				image {
					width: 35rpx;
					height: 35rpx;
				}

				.card-title {
					height: 48rpx;
					line-height: 48rpx;
					font-weight: 400;
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-left: 10rpx;
				}
			}

		}

		.verification-card-body {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				margin-top: 16rpx;
				width: 320rpx;
				height: 320rpx;
			}
		}

		.verification-code {
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			.code-label {
				font-size: 28rpx;
				color: #666;
			}

			.code-value {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}

		}

		.fixed-footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

			.footer-buttons {
				display: flex;
				justify-content: center;
				padding: 22rpx;

				.back {
					width: 238rpx;
					height: 88rpx;
					background: rgba(0, 137, 255, 0.1);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #0089FF;
					line-height: 88rpx;
					text-align: center;
				}

				.confirm {
					width: 416rpx;
					height: 88rpx;
					margin-left: 32rpx;
					align-items: center;
					background: #0089FF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-family: PingFang SC Bold, PingFang SC Bold;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
				}

				.call {
					width: 327rpx;
					height: 88rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					line-height: 88rpx;
					text-align: center;
				}

				.call-user {
					width: 100%;
					height: 88rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					line-height: 88rpx;
					text-align: center;
					background: #0089FF;
					color: #FFFFFF;
					margin: 0rpx 32rpx;
				}

				.shop {
					background: rgba(0, 137, 255, 0.1);
					color: #0089FF;
				}

				.user {
					margin-left: 32rpx;
					background: #0089FF;
					color: #FFFFFF;
				}
			}
		}
	}
</style>