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 :order-detail="orderInfo"/>

		</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 {
		useAppStore
	} from '@/stores/app'
	const appStore = useAppStore()

	const shopOrderId = ref('')
	
	const addressSend = ref({
			id: 1,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路97号',
			isDefault: true
		})
	const addressReceive = ref({
			id: 1,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路97号',
			isDefault: true
		})

	const orderInfo = ref({
		createTime: null,
		goodsInfo: null,
		goodsMainImage: null,
		goodsName: "",
		serviceAvatar: null,
		serviceBelongShop: "",
		serviceCommission: "",
		serviceName: "",
		servicePhone: "",
		shopOrderAmount: "",
		shopOrderId: "",
		shopOrderNum: 1,
		userName: "",
		userPhone: "",
		dispatchInfo: {},
		goodsInfo: {},
		grabInfo: {},
		userInfo: {}
	})

	const showOrderCofirmBtn = ref(false)
	const showOrderDispatchBtn = ref(false)
	const showOrderRefundBtn = ref(false)
	const showCallUserBtn = ref(true)


	onLoad((option) => {
		shopOrderId.value = option.id
	})

	onShow(() => {
		// getOrderInfo()
	})

	const getOrderInfo = () => {
		const param = {
			shopOrderId: shopOrderId.value
		}
		getOrderInfoApi(param).then(res => {
			if (res.code == 200) {
				console.log('getOrderInfoApi=========', res)
				orderInfo.value = res.data
			}
		})
	}

	// 返回按钮点击事件
	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>