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

<template>
	<view class="order-modify-page">
		<!-- 页面头部 -->
		<view class="page-header">
			<text class="header-title">修改订单</text>
		</view>
		
		<!-- 订单内容区域 -->
		<view class="order-modify-content">
			<!-- 订单修改说明 -->
			<view class="modify-notice">
				<view class="notice-item">
					<text class="notice-icon">🐾</text>
					<text class="notice-text">您可以对<text class="highlight-text">未服务或未支付</text>的订单进行修改或取消</text>
				</view>
				<view class="notice-item">
					<text class="notice-icon">🐾</text>
					<text class="notice-text">若需修改已支付的服务项目，如「增加服务时间/服务项目」，可点击下方按钮【<text class="highlight-text">联系客服</text>】寻求帮助，感谢！</text>
				</view>
			</view>
			
			<!-- 服务修改信息 -->
			<view class="modify-info-card">
				<view class="card-title">
					<text>服务修改信息</text>
				</view>
				
				<view class="info-content">
					<view class="info-item">
						<text class="info-label">联系人</text>
						<text class="info-value">{{modifyInfo.contactName}}</text>
					</view>
					
					<view class="info-item">
						<text class="info-label">联系方式</text>
						<text class="info-value">{{modifyInfo.contactPhone}}</text>
					</view>
					
					<view class="info-item payment-method">
						<text class="info-label">销售支持方式</text>
						<view class="info-value payment-value">
							<text>{{modifyInfo.paymentMethod}}</text>
							<text class="arrow-right">></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 修改原因 -->
			<view class="modify-reason-card">
				<view class="card-title">
					<text>修改原因</text>
				</view>
				
				<view class="reason-content">
					<textarea 
						class="reason-input" 
						v-model="modifyReason" 
						placeholder="请输入修改原因（选填）" 
						maxlength="200"
					></textarea>
					<view class="word-count">
						<text>{{modifyReason.length}}/200</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="order-modify-footer">
			<view class="footer-btn cancel-service-btn" @click="$refs.cancelPopup.open()">
				<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 CancelOrderPopup from '../../components/order/CancelOrderPopup.vue';

export default {
	components: {
		CancelOrderPopup
	},
	data() {
		return {
			orderId: '', // 订单ID
			modifyInfo: {
				contactName: '张小二',
				contactPhone: '18888888888',
				paymentMethod: '存子快递宝'
			},
			modifyReason: '', // 修改原因
			showCancelOrderPopup: false // 是否显示取消订单弹窗
		};
	},
	onLoad(options) {
		// 获取路由参数中的订单ID
		if (options.id) {
			this.orderId = options.id;
			// 加载订单数据
			this.loadOrderData();
		}
	},
	methods: {
		// 加载订单数据
		loadOrderData() {
			// 这里应该调用API获取订单详情
			// 示例代码：
			/*
			const params = {
				openId: getOpenIdKey(),
				orderId: this.orderId
			};
			
			getOrderDetail(params).then(res => {
				if (res && res.code === 200) {
					// 设置订单信息
					this.modifyInfo = {
						contactName: res.data.contactName,
						contactPhone: res.data.contactPhone,
						paymentMethod: res.data.paymentMethod
					};
				}
			}).catch(err => {
				console.error('获取订单详情失败', err);
				uni.showToast({
					title: '获取订单信息失败',
					icon: 'none'
				});
			});
			*/
			
			// 这里使用模拟数据
			console.log('加载订单数据，ID:', this.orderId);
		},
		
		// 确认修改订单
		confirmModify() {
			// 这里应该调用API修改订单
			// 示例代码：
			/*
			const params = {
				openId: getOpenIdKey(),
				orderId: this.orderId,
				reason: this.modifyReason
			};
			
			modifyOrder(params).then(res => {
				if (res && res.code === 200) {
					uni.showToast({
						title: '订单修改成功',
						icon: 'success'
					});
					// 修改成功后返回订单详情页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			}).catch(err => {
				console.error('修改订单失败', err);
				uni.showToast({
					title: '修改订单失败',
					icon: 'none'
				});
			});
			*/
			
			// 这里使用模拟数据，显示修改成功提示
			uni.showToast({
				title: '订单修改成功',
				icon: 'success'
			});
			
			// 1.5秒后返回订单详情页
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		},
		
		// 处理取消订单
		handleCancelOrder(orderId) {
			this.hideCancelPopup();
			
			// 这里应该调用API取消订单
			// 示例代码：
			/*
			const params = {
				openId: getOpenIdKey(),
				orderId: this.orderId,
				reason: this.modifyReason
			};
			
			cancelOrder(params).then(res => {
				if (res && res.code === 200) {
					uni.showToast({
						title: '订单已取消',
						icon: 'success'
					});
					// 取消成功后返回订单列表页
					setTimeout(() => {
						uni.navigateBack({delta: 2});
					}, 1500);
				}
			}).catch(err => {
				console.error('取消订单失败', err);
			});
			*/
			
			// 这里使用模拟数据，显示取消成功提示
			uni.showToast({
				title: '订单已取消',
				icon: 'success'
			});
			
			// 1.5秒后返回订单列表页
			setTimeout(() => {
				uni.navigateBack({delta: 2});
			}, 1500);
		}
	}
};
</script>

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

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

.order-modify-content {
	flex: 1;
	padding: 20rpx;
}

.modify-notice {
	background-color: #FFF9F0;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	
	.notice-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.notice-icon {
			margin-right: 10rpx;
			font-size: 28rpx;
		}
		
		.notice-text {
			font-size: 26rpx;
			color: #666;
			line-height: 1.5;
			flex: 1;
			
			.highlight-text {
				color: #FFAA48;
			}
		}
	}
}

.modify-info-card, .modify-reason-card {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	
	&::before {
		content: '';
		display: inline-block;
		width: 8rpx;
		height: 32rpx;
		background-color: #FFAA48;
		margin-right: 16rpx;
		border-radius: 4rpx;
	}
}

.info-content {
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
		
		&:last-child {
			border-bottom: none;
		}
		
		.info-label {
			font-size: 28rpx;
			color: #666;
		}
		
		.info-value {
			font-size: 28rpx;
			color: #333;
		}
		
		&.payment-method {
			.payment-value {
				display: flex;
				align-items: center;
				
				.arrow-right {
					margin-left: 10rpx;
					color: #999;
				}
			}
		}
	}
}

.reason-content {
	.reason-input {
		width: 100%;
		height: 200rpx;
		background-color: #F8F8F8;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	}
	
	.word-count {
		text-align: right;
		margin-top: 10rpx;
		
		text {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.order-modify-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-top: 1px solid #EEEEEE;
	
	.footer-btn {
		padding: 16rpx 30rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		width: 45%;
	}
	
	.cancel-service-btn {
		background-color: #F5F5F5;
		color: #666;
		border: 1px solid #DDDDDD;
	}
	
	.confirm-modify-btn {
		background-color: #FFAA48;
		color: #FFFFFF;
	}
}
</style>