antissoft / lvqianmeiye_ERP

<template>
	<view class="container">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading">
			<text>正在加载详情...</text>
		</view>
		
		<!-- 错误状态 -->
		<view v-else-if="error" class="error-state">
			<text>{{ error }}</text>
			<button class="retry-btn" @click="retryLoad">重试</button>
		</view>
		
		<!-- 详情内容 -->
		<view v-else-if="appointmentDetail" class="detail-card">
			<!-- 详情头部 -->
			<view class="detail-header">
				<view class="customer-name">{{ appointmentDetail.gkxm }}</view>
				<view class="customer-phone">{{ getProjectName(appointmentDetail.yytyxm) }}</view>
			</view>
			
			<!-- 详情内容 -->
			<view class="detail-content">
				<!-- 基本信息 -->
				<view class="detail-section">
					<view class="section-title">基本信息</view>
					<view class="detail-row">
						<text class="detail-label">门店</text>
						<text class="detail-value">{{ appointmentDetail.djmdName }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">项目名称</text>
						<text class="detail-value">{{ getProjectName(appointmentDetail.yytyxm) }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">客户姓名</text>
						<text class="detail-value">{{ appointmentDetail.gkxm }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">客户类型</text>
						<text class="detail-value">{{ appointmentDetail.gklx }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">预约健康师</text>
						<text class="detail-value">{{appointmentDetail.yyjksName}}</text>
					</view>
					<view class="detail-row" v-if="appointmentDetail.InviteId">
						<text class="detail-label">关联邀约号:</text>
						<text class="detail-value" style="color: #43a047;" @click.stop="goToInvite(appointmentDetail.InviteId)">{{ appointmentDetail.InviteId || '无' }}</text>
					</view>
				</view>
				
				<!-- 预约信息 -->
				<view class="detail-section">
					<view class="section-title">预约信息</view>
					<view class="detail-row">
						<text class="detail-label">预约时间</text>
						<text class="detail-value">{{ formatAppointmentTime(appointmentDetail.yysj, appointmentDetail.yyjs) }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">操作时间</text>
						<text class="detail-value">{{ utils.formatTime(appointmentDetail.czsj) }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">预约人</text>
						<text class="detail-value">{{ appointmentDetail.yyrName }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">预约状态</text>
						<text class="detail-value">
							<text class="status-badge" :class="appointmentDetail.F_Status=='已确认'?'success':appointmentDetail.F_Status=='已取消'?'failed':appointmentDetail.F_Status=='已预约'?'pending':'pending'">
								{{ getStatusText(appointmentDetail.F_Status) }}
							</text>
						</text>
					</view>
				</view>
				<!-- 说明信息 -->
				<view class="detail-section" v-if="appointmentDetail.NoDealRemark">
					<view class="section-title">说明信息</view>
					<view class="detail-row">
						<text class="detail-label">说明内容</text>
						<text class="detail-value">{{ appointmentDetail.NoDealRemark }}</text>
					</view>
				</view>
				<!-- 操作按钮 -->
				<view v-if="appointmentDetail.F_Status === '已预约'" class="action-buttons">
					<button class="action-btn secondary" @click="cancelAppointment">取消预约</button>
					<button class="action-btn primary" @click="confirmAppointment">确认预约</button>
				</view>
				<view class="action-buttons" v-if="appointmentDetail.F_Status === '已确认'">
					<button class="action-btn primary" @click="open('/pagesA/member-consume/member-consume')">耗卡</button>
					<button class="action-btn primary" @click="open('/pagesA/lx/lx')">开单</button>
					<button class="action-btn primary" @click="open('/pagesA/lx/lx','1')">活动开单</button>
				</view>
				<!--  v-if="appointmentDetail.F_Status === '已取消'" -->
				<view class="action-buttons">
					<button class="action-btn primary" @click="openRemarkDialog">补充说明</button>
				</view>
			</view>
		</view>
		
		<!-- 自定义提示弹窗 -->
		<view v-if="showAlert" class="custom-alert" @click="hideAlert">
			<view class="alert-content" @click.stop>
				<view class="alert-icon" :class="alertConfig.type">
					<text>{{ getAlertIcon(alertConfig.type) }}</text>
				</view>
				<view class="alert-title">{{ alertConfig.title }}</view>
				<view class="alert-message">{{ alertConfig.message }}</view>
				<view class="alert-buttons">
					<button v-if="alertConfig.showCancel" class="alert-btn secondary" @click="handleAlertCancel">
						{{ alertConfig.cancelText }}
					</button>
					<button class="alert-btn primary" @click="handleAlertConfirm">
						{{ alertConfig.confirmText }}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 加载遮罩 -->
		<view v-if="showLoadingOverlay" class="loading-overlay">
			<view class="loading-spinner"></view>
		</view>
		
		<!-- 补充说明输入弹窗 -->
		<view v-if="showRemarkDialog" class="dialog-overlay" @click="closeRemarkDialog">
			<view class="remark-dialog" @click.stop>
				<view class="dialog-header">
					<text class="dialog-title">补充说明</text>
					<view class="dialog-close" @click="closeRemarkDialog">
						<text class="close-icon">✕</text>
					</view>
				</view>
				<view class="dialog-content">
					<view class="remark-section">
						<text class="remark-label">说明内容：</text>
						<textarea 
							v-model="remarkContent" 
							class="remark-input" 
							placeholder="请输入补充说明..."
							maxlength="500"
							:show-count="true"
						></textarea>
					</view>
				</view>
				<view class="dialog-buttons">
					<button class="dialog-btn cancel-dialog-btn" @click="closeRemarkDialog">取消</button>
					<button 
						class="dialog-btn confirm-dialog-btn" 
						@click="submitRemark"
						:disabled="!remarkContent.trim() || remarkSubmitting"
						:loading="remarkSubmitting"
					>
						确定
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/service/request.js'
	import config from '@/common/config.js'
	import appointmentApi from '@/apis/modules/appointment.js'
	
	export default {
		data() {
			return {
				loading: true,
				error: null,
				appointmentDetail: null,
				storeData: {},
				projectData: {},
				customerData: {},
				healthWorkerData: {},
				userData: {},
				showAlert: false,
				showLoadingOverlay: false,
				alertConfig: {
					type: 'info',
					title: '',
					message: '',
					confirmText: '确定',
					cancelText: '取消',
					showCancel: false,
					onConfirm: null,
					onCancel: null
				},
				showRemarkDialog: false,
				remarkContent: '',
				remarkSubmitting: false
			}
		},
		onLoad(options) {
			this.initializePage(options);
		},
		methods: {
			open(url,type) {
				if(type == '1') {
					uni.navigateTo({
						url: url+'?appointmentId='+this.appointmentDetail.id+'&gk='+this.appointmentDetail.gk+'&type=1'
					});
				} else{
					uni.navigateTo({
						url: url+'?appointmentId='+this.appointmentDetail.id+'&gk='+this.appointmentDetail.gk
					});
				}
			},
			goToInvite(inviteId) {
				uni.navigateTo({
					url: '/pages/invite-detail/invite-detail?id='+inviteId
				});
			},
			// 初始化页面
			async initializePage(options) {
				try {
					// 检查登录状态
					await this.checkLoginStatus();
					
					// 获取预约ID
					const appointmentId = options.id;
					if (!appointmentId) {
						this.error = '缺少预约ID参数';
						return;
					}
					
					// 加载预约详情
					await this.loadAppointmentDetail(appointmentId);
				} catch (error) {
					console.error('页面初始化失败:', error);
					this.error = '页面初始化失败，请刷新重试';
				}
			},
			
			// 检查登录状态
			async checkLoginStatus() {
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || Object.keys(userInfo).length === 0) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}
			},
			
			// 格式化预约时间
			formatAppointmentTime(startTime, endTime) {
				if (!startTime || !endTime) return '未设置';
				try {
					const start = new Date(startTime);
					const end = new Date(endTime);
					const startStr = uni.$u.timeFormat(start,'yyyy-mm-dd hh:MM')
					const endStr = uni.$u.timeFormat(end,'hh:MM')
					return `${startStr} - ${endStr}`;
				} catch (error) {
					return `${startTime} - ${endTime}`;
				}
			},
			
		
			
			// 获取状态文本
			getStatusText(fStatus) {
				if (fStatus === '已确认') return '已确认';
				if (fStatus === '已取消') return '已取消';
				if (fStatus === '已预约') return '已预约';
				return fStatus || '待确认';
			},
			
			// 获取门店名称
			getStoreName(storeId) {
				return this.storeData[storeId] || this.appointmentDetail?.dm || '未知门店';
			},
			
			// 获取项目名称
			getProjectName(projectId) {
				return this.projectData[projectId] || this.appointmentDetail?.xmmc || '未知项目';
			},
			
			// 获取健康师名称
			getHealthWorkerName(healthWorkerId) {
				return this.healthWorkerData[healthWorkerId] || this.appointmentDetail?.yyjks || '未分配';
			},
			
			
			// 加载预约详情
			async loadAppointmentDetail(appointmentId) {
				try {
					this.loading = true;
					this.error = null;
					
					// 尝试通过单个详情API获取
					const response = await appointmentApi.getAppointmentDetail(appointmentId);
					
					if (response && response.code === 200 && response.data) {
						this.appointmentDetail = response.data;
						this.loadFromListAPI()
					} 
					
				} catch (error) {
					console.error('加载预约详情失败:', error);
				} finally {
					this.loading = false;
				}
			},
			
			// 从列表API中查找详情
			async loadFromListAPI(appointmentId) {
				try {
					await this.loadRelatedData();
					
				} catch (error) {
					console.error('从列表API加载详情失败:', error);
					this.error = '加载详情失败，请重试';
				}
			},
			
			// 加载相关数据
			async loadRelatedData() {
				try {
					// 并行加载所有相关数据
					await Promise.all([
						// this.loadStoreData(this.appointmentDetail.djmd),
						this.loadProjectData(this.appointmentDetail.yytyxm),
						// this.loadCustomerData(this.appointmentDetail.gkxm),
						// this.loadHealthWorkerData(this.appointmentDetail.yyjks),
						// this.loadUserData(this.appointmentDetail.yyr)
					]);
				} catch (error) {
					console.error('加载相关数据失败:', error);
				}
			},
			
			// 加载门店数据
			async loadStoreData(storeId) {
				try {
					let response;
					if (storeId) {
						response = await request.get(`/api/Extend/LqMdxx/${storeId}`);
					} else {
						response = await request.get('/api/Extend/LqMdxx', {
							page: 1,
							pageSize: 1000
						});
					}
					
					if (response && response.code === 200 && response.data) {
						this.storeData = {};
						if (storeId && response.data) {
							this.storeData[response.data.id] = response.data.dm;
						} else if (response.data.list) {
							response.data.list.forEach(item => {
								this.storeData[item.id] = item.dm;
							});
						}
					}
				} catch (error) {
					console.error('获取门店数据出错:', error);
				}
			},
			
			// 加载项目数据
			async loadProjectData(projectId) {
				try {
					let response;
					if (projectId) {
						response = await request.get(`/api/Extend/LqXmzl/${projectId}`);
					} else {
						response = await appointmentApi.getProjectList({
							page: 1,
							pageSize: 1000
						});
					}
					
					if (response && response.code === 200 && response.data) {
						this.projectData = {};
						if (projectId && response.data) {
							this.projectData[response.data.id] = response.data.xmmc;
						} else if (response.data.list) {
							response.data.list.forEach(item => {
								this.projectData[item.id] = item.xmmc;
							});
						}
					}
				} catch (error) {
					console.error('获取项目数据出错:', error);
				}
			},
			
			// 加载客户数据
			async loadCustomerData(customerId) {
				try {
					let response;
					if (customerId) {
						response = await request.get(`/api/Extend/LqKhxx/${customerId}`);
					} else {
						response = await appointmentApi.getCustomerList({
							page: 1,
							pageSize: 1000
						});
					}
					
					if (response && response.code === 200 && response.data) {
						this.customerData = {};
						if (customerId && response.data) {
							this.customerData[response.data.id] = {
								name: response.data.khmc,
								type: response.data.khlx
							};
						} else if (response.data.list) {
							response.data.list.forEach(item => {
								this.customerData[item.id] = {
									name: item.khmc,
									type: item.khlx
								};
							});
						}
					}
				} catch (error) {
					console.error('获取客户数据出错:', error);
				}
			},
			
			// 加载健康师数据
			async loadHealthWorkerData(healthWorkerId) {
				try {
					let response;
					if (healthWorkerId) {
						response = await request.get(`/api/permission/Users/${healthWorkerId}`);
					} else {
						response = await appointmentApi.getHealthWorkerList({
							page: 1,
							pageSize: 1000
						});
					}
					
					if (response && response.code === 200 && response.data) {
						this.healthWorkerData = {};
						if (healthWorkerId && response.data) {
							this.healthWorkerData[response.data.id] = response.data.realName;
						} else if (response.data.list) {
							response.data.list.forEach(item => {
								this.healthWorkerData[item.id] = item.realName;
							});
						}
					}
				} catch (error) {
					console.error('获取健康师数据出错:', error);
				}
			},
			
			// 加载用户数据
			async loadUserData(userId) {
				try {
					if (!userId) return;
					
					const response = await request.get(`/api/permission/Users/${userId}`);
					
					if (response && response.code === 200 && response.data) {
						this.userData = response.data;
					}
				} catch (error) {
					console.error('获取用户数据出错:', error);
				}
			},
			
			// 取消预约
			cancelAppointment() {
				this.showCustomAlert({
					type: 'warning',
					title: '取消预约',
					message: '确定要取消这个预约吗？',
					showCancel: true,
					onConfirm: () => this.performCancelAppointment()
				});
			},
			
			// 执行取消预约操作
			async performCancelAppointment() {
				try {
					this.showLoadingOverlay = true;
					
					const response = await request.put(`/api/Extend/lqyyjl/${this.appointmentDetail.id}`, {
						f_Status: "已取消",
						id: this.appointmentDetail.id
					});
					
					this.showLoadingOverlay = false;
					
					if (response && response.code === 200) {
						this.showSuccessAlert('预约已成功取消', '操作成功');
						// 重新加载详情
						await this.loadAppointmentDetail(this.appointmentDetail.id);
					} else {
						this.showErrorAlert(response?.message || '取消预约失败', '操作失败');
					}
				} catch (error) {
					this.showLoadingOverlay = false;
					console.error('取消预约失败:', error);
					this.showErrorAlert('取消预约失败，请重试', '操作失败');
				}
			},
			
			// 确认预约
			confirmAppointment() {
				this.showCustomAlert({
					type: 'warning',
					title: '确认预约',
					message: '确定要确认这个预约吗？',
					showCancel: true,
					onConfirm: () => this.performConfirmAppointment()
				});
			},
			
			// 执行确认预约操作
			async performConfirmAppointment() {
				try {
					this.showLoadingOverlay = true;
					
					const response = await request.put(`/api/Extend/lqyyjl/${this.appointmentDetail.id}`, {
						f_Status: "已确认",
						id: this.appointmentDetail.id
					});
					
					this.showLoadingOverlay = false;
					
					if (response && response.code === 200) {
						this.showSuccessAlert('预约已成功确认', '操作成功');
						// 重新加载详情
						await this.loadAppointmentDetail(this.appointmentDetail.id);
					} else {
						this.showErrorAlert(response?.message || '确认预约失败', '操作失败');
					}
				} catch (error) {
					this.showLoadingOverlay = false;
					console.error('确认预约失败:', error);
					this.showErrorAlert('确认预约失败，请重试', '操作失败');
				}
			},
			
			// 显示自定义提示弹窗
			showCustomAlert(options) {
				this.alertConfig = {
					type: 'info',
					title: '',
					message: '',
					confirmText: '确定',
					cancelText: '取消',
					showCancel: false,
					onConfirm: null,
					onCancel: null,
					...options
				};
				this.showAlert = true;
			},
			
			// 隐藏弹窗
			hideAlert() {
				this.showAlert = false;
			},
			
			// 处理弹窗确认
			handleAlertConfirm() {
				this.hideAlert();
				if (this.alertConfig.onConfirm) {
					this.alertConfig.onConfirm();
				}
			},
			
			// 处理弹窗取消
			handleAlertCancel() {
				this.hideAlert();
				if (this.alertConfig.onCancel) {
					this.alertConfig.onCancel();
				}
			},
			
			// 获取弹窗图标
			getAlertIcon(type) {
				const icons = {
					success: '✓',
					error: '✕',
					warning: '⚠',
					info: 'ℹ'
				};
				return icons[type] || icons.info;
			},
			
			// 成功提示
			showSuccessAlert(message, title = '操作成功') {
				this.showCustomAlert({
					type: 'success',
					title: title,
					message: message,
					confirmText: '确定'
				});
			},
			
			// 错误提示
			showErrorAlert(message, title = '操作失败') {
				this.showCustomAlert({
					type: 'error',
					title: title,
					message: message,
					confirmText: '确定'
				});
			},
			
			// 重试加载
			retryLoad() {
				const appointmentId = this.appointmentDetail?.id;
				if (appointmentId) {
					this.loadAppointmentDetail(appointmentId);
				}
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			// 打开补充说明弹窗
			openRemarkDialog() {
				this.remarkContent = this.appointmentDetail?.NoDealRemark || '';
				this.showRemarkDialog = true;
			},
			
			// 关闭补充说明弹窗
			closeRemarkDialog() {
				this.showRemarkDialog = false;
				this.remarkContent = '';
			},
			
			// 提交补充说明
			async submitRemark() {
				if (!this.remarkContent.trim()) {
					this.showErrorAlert('请输入说明内容', '提示');
					return;
				}
				
				try {
					this.remarkSubmitting = true;
					
					const response = await request.post('/api/Extend/lqyyjl/AddNoDealRemark', {
						id: this.appointmentDetail.id,
						noDealRemark: this.remarkContent.trim()
					});
					
					this.remarkSubmitting = false;
					
					if (response && response.code === 200) {
						this.showSuccessAlert('补充说明已成功保存', '操作成功');
						this.closeRemarkDialog();
						// 重新加载详情
						await this.loadAppointmentDetail(this.appointmentDetail.id);
					} else {
						this.showErrorAlert(response?.msg || '保存失败', '操作失败');
					}
				} catch (error) {
					this.remarkSubmitting = false;
					console.error('提交补充说明失败:', error);
					this.showErrorAlert('保存失败，请重试', '操作失败');
				}
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 20px;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	
	.back-btn {
		background: #fff;
		border: none;
		border-radius: 12px;
		padding: 8px 12px;
		color: #388e3c;
		font-size: 0.9em;
		box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
	}
	
	.title {
		text-align: center;
		color: #388e3c;
		margin: 10px 0;
		letter-spacing: 2px;
		font-size: 1.2em;
		font-weight: bold;
	}
	
	.detail-card {
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1);
		overflow: hidden;
		margin-bottom: 20px;
	}
	
	.detail-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 20px;
		color: #fff;
		text-align: center;
	}
	
	.customer-name {
		font-size: 1.3em;
		font-weight: bold;
		margin-bottom: 8px;
	}
	
	.customer-phone {
		font-size: 1em;
		opacity: 0.9;
	}
	
	.detail-content {
		padding: 20px;
	}
	
	.detail-section {
		margin-bottom: 24px;
	}
	
	.detail-section:last-child {
		margin-bottom: 0;
	}
	
	.section-title {
		font-size: 1.1em;
		font-weight: 600;
		color: #2e7d32;
		margin-bottom: 12px;
		padding-bottom: 8px;
		border-bottom: 2px solid #e8f5e9;
		letter-spacing: 1px;
	}
	
	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.detail-row:last-child {
		border-bottom: none;
	}
	
	.detail-label {
		color: #6a9c6a;
		font-weight: 500;
		font-size: 0.95em;
		min-width: 80px;
	}
	
	.detail-value {
		color: #2e7d32;
		font-weight: 500;
		text-align: right;
		flex: 1;
		margin-left: 16px;
	}
	
	.status-badge {
		padding: 4px 12px;
		border-radius: 12px;
		font-size: 0.85em;
		font-weight: 500;
	}
	
	.status-badge.success {
		background: #e8f5e9;
		color: #2e7d32;
	}
	
	.status-badge.failed {
		background: #ffebee;
		color: #c62828;
	}
	
	.status-badge.pending {
		background: #fff3e0;
		color: #ef6c00;
	}
	
	.loading {
		text-align: center;
		padding: 60px 20px;
		color: #6a9c6a;
		font-size: 1.1em;
	}
	
	.error-state {
		text-align: center;
		padding: 60px 20px;
		color: #c62828;
	}
	
	.retry-btn {
		background: #43a047;
		color: #fff;
		border: none;
		border-radius: 8px;
		padding: 12px 24px;
		margin-top: 16px;
		font-size: 1em;
	}
	
	.action-buttons {
		display: flex;
		gap: 12px;
		margin-top: 20px;
	}
	
	.action-btn {
		flex: 1;
		padding: 8px 12px;
		border: none;
		border-radius: 8px;
		font-size: 0.9em;
		font-weight: 500;
	}
	
	.action-btn.primary {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		box-shadow: 0 4px 16px rgba(67, 233, 123, 0.3);
	}
	
	.action-btn.secondary {
		background: #f5f5f5;
		color: #666;
		border: 1px solid #ddd;
	}
	
	/* 自定义提示弹窗样式 */
	.custom-alert {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.alert-content {
		background: #fff;
		border-radius: 12px;
		padding: 24px;
		max-width: 280px;
		width: 85%;
		text-align: center;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	}
	
	.alert-icon {
		width: 50px;
		height: 50px;
		margin: 0 auto 16px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
	}
	
	.alert-icon.success {
		background: #e8f5e9;
		color: #43a047;
	}
	
	.alert-icon.error {
		background: #ffebee;
		color: #c62828;
	}
	
	.alert-icon.warning {
		background: #fff3e0;
		color: #ef6c00;
	}
	
	.alert-title {
		font-size: 1.1em;
		font-weight: 600;
		color: #333;
		margin-bottom: 10px;
	}
	
	.alert-message {
		color: #666;
		line-height: 1.4;
		margin-bottom: 20px;
		font-size: 0.95em;
	}
	
	.alert-buttons {
		display: flex;
		gap: 12px;
		justify-content: center;
	}
	
	.alert-btn {
		padding: 8px 20px;
		border: none;
		border-radius: 6px;
		font-size: 0.9em;
		font-weight: 500;
		min-width: 70px;
	}
	
	.alert-btn.primary {
		background: #43a047;
		color: #fff;
	}
	
	.alert-btn.secondary {
		background: #f5f5f5;
		color: #666;
		border: 1px solid #ddd;
	}
	
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	
	.loading-spinner {
		width: 40px;
		height: 40px;
		border: 4px solid #e8f5e9;
		border-radius: 50%;
		border-top-color: #43a047;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		to { transform: rotate(360deg); }
	}
	
	/* 补充说明弹窗样式 */
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1001;
	}
	
	.remark-dialog {
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		width: 85%;
		max-width: 500px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	}
	
	.dialog-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 20px 24px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.dialog-title {
		color: #fff;
		font-size: 1.1em;
		font-weight: 600;
		letter-spacing: 1px;
	}
	
	.dialog-close {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		transition: background 0.3s;
	}
	
	.dialog-close:hover {
		background: rgba(255, 255, 255, 0.3);
	}
	
	.close-icon {
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}
	
	.dialog-content {
		padding: 24px;
	}
	
	.remark-section {
		display: flex;
		flex-direction: column;
	}
	
	.remark-label {
		font-size: 0.95em;
		color: #2e7d32;
		font-weight: 500;
		margin-bottom: 12px;
	}
	
	.remark-input {
		width: 100%;
		min-height: 120px;
		padding: 12px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		font-size: 0.9em;
		color: #333;
		background: #fafafa;
		resize: none;
		box-sizing: border-box;
	}
	
	.remark-input:focus {
		border-color: #43a047;
		background: #fff;
		outline: none;
	}
	
	.dialog-buttons {
		display: flex;
		gap: 12px;
		padding: 16px 24px;
		border-top: 1px solid #f0f0f0;
	}
	
	.dialog-btn {
		flex: 1;
		padding: 10px 20px;
		border: none;
		border-radius: 8px;
		font-size: 0.95em;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s;
	}
	
	.dialog-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	
	.cancel-dialog-btn {
		background: #f5f5f5;
		color: #666;
		border: 1px solid #ddd;
	}
	
	.cancel-dialog-btn:active {
		background: #e0e0e0;
	}
	
	.confirm-dialog-btn {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		box-shadow: 0 4px 12px rgba(67, 233, 123, 0.3);
	}
	
	.confirm-dialog-btn:active:not(:disabled) {
		transform: translateY(1px);
		box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
	}
</style>