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>