pet-front-order/pages_order/order/orderModify.vue

<template>
	<view class="order-modify-container">
		<view class="header">
			<text class="title">修改订单</text>
		</view>
		
		<view class="content">
			<!-- 加载状态 -->
			<view class="loading-container" v-if="loading">
				<view class="loading-circle"></view>
				<text class="loading-text">加载中...</text>
			</view>
			
			<view v-else>
				<view class="info-section">
					<view class="section-title">修改说明</view>
					<view class="info-content">
						<view class="desc-text">修改订单不会额外收取任何费用，如需修改服务内容，请点击"修改服务"按钮。</view>
					</view>
				</view>
				
				<view class="info-section">
					<view class="section-title">修改信息</view>
					<view class="info-content">
						<view class="info-item">
							<text class="info-label">联系人</text>
							<input class="info-value" type="text" v-model="modifyInfo.contactName" placeholder="请输入联系人姓名" />
						</view>
						
						<view class="info-item">
							<text class="info-label">联系方式</text>
							<input class="info-value" type="text" v-model="modifyInfo.contactPhone" placeholder="请输入联系电话" />
						</view>
						
						<view class="info-item payment-method">
							<text class="info-label">销售支持方式</text>
							<view class="info-value payment-value">
								<input type="text" v-model="modifyInfo.paymentMethod" placeholder="请输入支付方式" />
								<text class="arrow-right">></text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="info-section">
					<view class="section-title">修改原因</view>
					<view class="info-content">
						<textarea class="reason-input" v-model="modifyReason" placeholder="请输入修改原因（选填）"></textarea>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="order-modify-footer">
			<view class="footer-btn cancel-service-btn" @click="modifyOrder">
				<text>修改服务</text>
			</view>
			<view class="footer-btn confirm-modify-btn" @click="confirmModify">
				<text>确认修改</text>
			</view>
		</view>
		
		<!-- 取消订单弹窗 -->
		<cancel-order-popup 
			ref="cancelPopup"
			@cancel="handleCancelOrder"
		></cancel-order-popup>
		
		<!-- 客服组件 -->
		<Kefu></Kefu>
	</view>
</template>

<script>
import { getOrderDetail, updateOrder } from '@/api/order/order.js';

export default {
	components: {
	},
	data() {
		return {
			loading: false,
			orderId: null,
			modifyInfo: {
				contactName: '',
				contactPhone: '',
				paymentMethod: '',
			},
			modifyReason: '',
			showCancelOrderPopup: false,
			originalOrderData: null
		}
	},
	onLoad(options) {
		if (options.orderId) {
			this.orderId = options.orderId;
			this.loadOrderData();
		} else {
			uni.showToast({
				title: '订单ID不存在',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	},
	methods: {
		// 加载订单数据
		async loadOrderData() {
			if (!this.orderId) return;
			
			this.loading = true;
			try {
				const res = await getOrderDetail({ id: this.orderId });
				if (res && res.code === 200) {
					const orderData = res.data;
					this.originalOrderData = JSON.parse(JSON.stringify(orderData));
					
					// 初始化修改信息
					this.modifyInfo.contactName = orderData.contactName || '';
					this.modifyInfo.contactPhone = orderData.contactPhone || '';
					this.modifyInfo.paymentMethod = orderData.paymentMethod || '';
				} else {
					uni.showToast({
						title: res.msg || '获取订单信息失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取订单数据失败', error);
				uni.showToast({
					title: '网络异常，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 确认修改
		async confirmModify() {
			// 表单验证
			if (!this.modifyInfo.contactName.trim()) {
				return uni.showToast({
					title: '请输入联系人姓名',
					icon: 'none'
				});
			}
			
			if (!this.modifyInfo.contactPhone.trim()) {
				return uni.showToast({
					title: '请输入联系方式',
					icon: 'none'
				});
			}
			
			// 验证手机号
			const phoneReg = /^1[3-9]\d{9}$/;
			if (!phoneReg.test(this.modifyInfo.contactPhone)) {
				return uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				});
			}
			
			// 检查是否有修改
			const hasChanged = 
				this.modifyInfo.contactName !== this.originalOrderData.contactName ||
				this.modifyInfo.contactPhone !== this.originalOrderData.contactPhone ||
				this.modifyInfo.paymentMethod !== this.originalOrderData.paymentMethod;
				
			if (!hasChanged) {
				return uni.showToast({
					title: '未检测到任何修改',
					icon: 'none'
				});
			}
			
			this.loading = true;
			try {
				const updateData = {
					id: this.orderId,
					contactName: this.modifyInfo.contactName,
					contactPhone: this.modifyInfo.contactPhone,
					paymentMethod: this.modifyInfo.paymentMethod,
					modifyReason: this.modifyReason || '客户修改订单信息'
				};
				
				const res = await updateOrder(updateData);
				if (res && res.code === 200) {
					uni.showToast({
						title: '订单修改成功',
						icon: 'success'
					});
					
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: res.msg || '订单修改失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('订单修改失败', error);
				uni.showToast({
					title: '网络异常，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 修改服务（跳转到下单流程）
		modifyOrder() {
            uni.navigateTo({
                url: `/pages/newOrder/serviceNew?orderId=${this.orderId}&isModify=true`
            });
		},
		
	}
}
</script>

<style lang="scss" scoped>
.order-modify-container {
	background-color: #f5f5f5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.header {
	background-color: #FFAA48;
	padding: 20rpx 30rpx;
	color: #FFFFFF;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
}

.content {
	flex: 1;
	padding: 20rpx;
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 300rpx;
	margin-top: 100rpx;
}

.loading-circle {
	width: 80rpx;
	height: 80rpx;
	border: 4rpx solid #FFAA48;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

.info-section {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	padding: 20rpx;
	border-bottom: 1px solid #EEEEEE;
}

.info-content {
	padding: 20rpx;
}

.desc-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.info-label {
		width: 180rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.info-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		padding: 10rpx;
		border: 1px solid #EEEEEE;
		border-radius: 8rpx;
	}
}

.payment-method {
	.payment-value {
		display: flex;
		align-items: center;
		
		input {
			flex: 1;
			border: none;
			padding: 0;
		}
		
		.arrow-right {
			font-size: 24rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
}

.reason-input {
	width: 100%;
	height: 200rpx;
	font-size: 28rpx;
	padding: 20rpx;
	box-sizing: border-box;
	border: 1px solid #EEEEEE;
	border-radius: 8rpx;
}

.footer {
	padding: 30rpx 20rpx;
	background-color: #FFFFFF;
	border-top: 1px solid #EEEEEE;
	
	.btn-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		
		.btn {
			flex: 1;
			padding: 16rpx 30rpx;
			border-radius: 30rpx;
			text-align: center;
			font-size: 30rpx;
			margin: 0 10rpx;
			
			&:first-child {
				margin-left: 0;
			}
			
			&:last-child {
				margin-right: 0;
			}
			
			&:disabled {
				opacity: 0.6;
			}
		}
		
		.modify-service {
			background-color: #F5F5F5;
			color: #666;
			border: 1px solid #DDDDDD;
		}
		
		.confirm-modify {
			background-color: #FFAA48;
			color: #FFFFFF;
		}
		
		.cancel-order {
			background-color: #F5F5F5;
			color: #666;
			border: 1px solid #DDDDDD;
			width: 100%;
		}
	}
	
	.mt-20 {
		margin-top: 20rpx;
	}
}
</style>