refund copy 2.html 33.6 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>绿纤协同平台 - 会员退卡</title>
		<!-- 引入配置文件 -->
		<script src="config.js"></script>
		<!-- 引入认证工具 -->
		<script src="auth-utils.js"></script>
		<style>
			*,
			*::before,
			*::after {
				box-sizing: border-box;
			}

			body {
				font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
				margin: 0;
				min-height: 100vh;
				background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
				padding: 20px;
			}

			.container {
				width: 100%;
				max-width: 480px;
				margin: 0 auto;
			}

			.header {
				background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
				border-radius: 18px;
				padding: 24px;
				text-align: center;
				margin-bottom: 24px;
				box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
			}

			.header-title {
				color: #fff;
				font-size: 1.3em;
				font-weight: bold;
				letter-spacing: 2px;
				margin: 0;
			}

			.form-card {
				background: #fff;
				border-radius: 18px;
				box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
				border: 1.5px solid #c8e6c9;
				overflow: hidden;
			}

			.form-content {
				padding: 24px;
			}

			.form-group {
				margin-bottom: 20px;
			}

			.form-group:last-child {
				margin-bottom: 0;
			}

			label {
				display: block;
				margin-bottom: 8px;
				font-weight: bold;
				color: #388e3c;
				letter-spacing: 1px;
				font-size: 0.95em;
			}

			.input-wrapper {
				position: relative;
			}

			.input-icon {
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
				width: 20px;
				height: 20px;
				color: #6a9c6a;
			}

			input,
			.select-input,
			select,
			textarea {
				width: 100%;
				padding: 12px 12px 12px 12px;
				border: 1.5px solid #c8e6c9;
				border-radius: 10px;
				font-size: 1em;
				transition: all 0.2s ease;
				background: #f9fff9;
				color: #2e7d32;
				font-family: inherit;
			}

			input:focus,
			.select-input:focus,
			select:focus,
			textarea:focus {
				outline: none;
				border-color: #43a047;
				box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
				background: #fff;
			}

			textarea {
				resize: vertical;
				min-height: 80px;
			}

			input:disabled {
				background: #f5f5f5;
				color: #666;
				cursor: not-allowed;
			}

			.select-input {
				cursor: pointer;
				position: relative;
			}

			.select-input::after {
				content: "";
				position: absolute;
				right: 12px;
				top: 50%;
				transform: translateY(-50%);
				color: #6a9c6a;
				font-size: 0.8em;
			}

			/* 优化select下拉框样式 */
			select {
				cursor: pointer;
				appearance: none;
				background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a9c6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
				background-repeat: no-repeat;
				background-position: right 12px center;
				background-size: 16px;
				padding-right: 40px;
			}

			select:hover {
				border-color: #43a047;
				background-color: #fff;
			}

			select option {
				padding: 8px 12px;
				background: #fff;
				color: #2e7d32;
			}

			select option:hover {
				background: #e8f5e9;
			}

			.btn-group {
				display: flex;
				gap: 12px;
				margin-top: 24px;
			}

			.btn {
				flex: 1;
				padding: 14px 20px;
				border: none;
				border-radius: 10px;
				font-size: 1em;
				font-weight: bold;
				cursor: pointer;
				transition: all 0.2s ease;
				letter-spacing: 1px;
			}

			.btn-primary {
				background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
				color: #fff;
				box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
			}

			.btn-primary:hover {
				box-shadow: 0 4px 16px rgba(67, 233, 123, 0.4);
				transform: translateY(-1px);
			}

			.btn-secondary {
				background: #f5f5f5;
				color: #666;
				border: 1.5px solid #ddd;
			}

			.btn-secondary:hover {
				background: #e8e8e8;
				border-color: #ccc;
			}

			/* 弹窗样式 */
			.modal-overlay {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				display: none;
				align-items: center;
				justify-content: center;
				z-index: 1000;
				padding: 20px;
			}

			.modal-content {
				background: #fff;
				border-radius: 18px;
				width: 100%;
				max-width: 400px;
				max-height: 80vh;
				overflow: hidden;
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
			}

			.modal-header {
				background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
				padding: 20px;
				text-align: center;
			}

			.modal-title {
				color: #fff;
				font-size: 1.2em;
				font-weight: bold;
				margin: 0;
				letter-spacing: 1px;
			}

			.modal-body {
				padding: 20px;
			}

			.search-input {
				width: 100%;
				padding: 12px;
				border: 1.5px solid #c8e6c9;
				border-radius: 10px;
				font-size: 1em;
				margin-bottom: 16px;
				background: #f9fff9;
			}

			.search-input:focus {
				outline: none;
				border-color: #43a047;
				box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
			}

			.option-list {
				max-height: 300px;
				overflow-y: auto;
				border: 1px solid #e0e0e0;
				border-radius: 8px;
			}

			.option-item {
				padding: 12px 16px;
				border-bottom: 1px solid #f0f0f0;
				cursor: pointer;
				transition: background 0.2s ease;
			}

			.option-item:hover {
				background: #f5f5f5;
			}

			.option-item:last-child {
				border-bottom: none;
			}

			.option-item.selected {
				background: #e8f5e9;
				color: #2e7d32;
				font-weight: bold;
			}

			.loading-message {
				text-align: center;
				padding: 40px 20px;
				color: #666;
				font-size: 0.95em;
			}

			.loading-spinner {
				display: inline-block;
				width: 20px;
				height: 20px;
				border: 2px solid #e0e0e0;
				border-top: 2px solid #43a047;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-right: 8px;
			}

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

				100% {
					transform: rotate(360deg);
				}
			}

			.modal-footer {
				padding: 16px 20px;
				border-top: 1px solid #e0e0e0;
				display: flex;
				gap: 12px;
			}

			.modal-btn {
				flex: 1;
				padding: 10px 16px;
				border: none;
				border-radius: 8px;
				font-size: 0.95em;
				cursor: pointer;
				transition: all 0.2s ease;
			}

			.modal-btn-primary {
				background: #43a047;
				color: #fff;
			}

			.modal-btn-primary:hover {
				background: #388e3c;
			}

			.modal-btn-secondary {
				background: #f5f5f5;
				color: #666;
				border: 1px solid #ddd;
			}

			.modal-btn-secondary:hover {
				background: #e8e8e8;
			}

			@media (max-width: 520px) {
				.container {
					max-width: 100%;
				}

				.header {
					border-radius: 12px;
					padding: 20px;
				}

				.form-card {
					border-radius: 12px;
				}

				.form-content {
					padding: 20px;
				}

				.btn-group {
					flex-direction: column;
				}
			}

			h2 {
				text-align: center;
				color: #388e3c;
				margin-bottom: 18px;
				letter-spacing: 2px;
			}

			/* 消息提示样式 */
			.message-toast {
				position: fixed;
				top: 20px;
				right: 20px;
				max-width: 300px;
				padding: 16px 20px;
				border-radius: 10px;
				color: #fff;
				font-weight: 500;
				z-index: 2000;
				transform: translateX(200%);
				transition: all 0.3s ease;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
				text-align: center;
			}

			.message-toast.show {
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-100%);
			}

			.message-toast.success {
				background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
			}

			.message-toast.error {
				background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
			}

			.message-toast.warning {
				background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
			}

			.message-toast.info {
				background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
			}


			/* 品项相关样式 */
			.px-container {
				margin-bottom: 16px;
			}

			.px-row {
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin-bottom: 16px;
				padding: 12px;
				border: 1px solid #e0e0e0;
				border-radius: 10px;
				background: #fafafa;
			}

			.px-row-first {
				display: flex;
				gap: 8px;
				align-items: center;
			}

			.px-row-second {
				display: flex;
				gap: 8px;
				align-items: center;
			}

			.px-select {
				flex: 2;
				padding: 12px;
				border: 1.5px solid #c8e6c9;
				border-radius: 10px;
				font-size: 1em;
				background: #f9fff9;
				color: #2e7d32;
				cursor: pointer;
				position: relative;
			}

			.px-select:focus {
				outline: none;
				border-color: #43a047;
				box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
				background: #fff;
			}

			.px-select::after {
				content: "";
				position: absolute;
				right: 12px;
				top: 50%;
				transform: translateY(-50%);
				width: 0;
				height: 0;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-top: 6px solid #6a9c6a;
			}

			.px-input {
				flex: 1;
				padding: 12px;
				border: 1.5px solid #c8e6c9;
				border-radius: 10px;
				font-size: 1em;
				background: #f9fff9;
				color: #2e7d32;
			}

			.px-input:focus {
				outline: none;
				border-color: #43a047;
				box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
				background: #fff;
			}

			.px-delete {
				padding: 12px 16px;
				border: 1.5px solid #ddd;
				border-radius: 10px;
				background: #f5f5f5;
				color: #666;
				cursor: pointer;
				font-size: 0.9em;
				transition: all 0.2s ease;
			}

			.px-delete:hover {
				background: #e8e8e8;
				border-color: #ccc;
			}

			.btn-add-px {
				width: 100%;
				padding: 12px 20px;
				border: 1.5px solid #43a047;
				border-radius: 10px;
				background: #e8f5e9;
				color: #2e7d32;
				cursor: pointer;
				font-size: 1em;
				font-weight: bold;
				transition: all 0.2s ease;
			}

			.btn-add-px:hover {
				background: #c8e6c9;
				border-color: #388e3c;
			}

			/* 数字输入框样式优化 */
			input[type="number"] {
				-moz-appearance: textfield;
				/* Firefox */
			}

			input[type="number"]::-webkit-outer-spin-button,
			input[type="number"]::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}

			input[type="number"]:focus {
				outline: none;
				border-color: #43a047;
				box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
				background: #fff;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h2>会员退卡</h2>

			<div class="form-card">
				<div class="form-content">
					<form id="refundForm">
						<!-- <div class="form-group">
							<label for="md">门店</label>
							<div class="input-wrapper">
								<input type="text" id="md" class="select-input" placeholder="请选择门店" readonly>
							</div>
						</div> -->

						<div class="form-group">
							<label for="hy">会员</label>
							<div class="input-wrapper">
								<input type="text" id="hy" class="select-input" placeholder="请选择会员" readonly>
							</div>
						</div>
						<div class="form-group">
							<label>品项明细</label>
							<div class="px-container" id="pxContainer">
								<!-- 品项行将通过JavaScript动态生成 -->
							</div>
							<button type="button" class="btn-add-px" onclick="addPxRow()">添加品项</button>
						</div>
						<div class="form-group">
							<label for="jks">健康师</label>
							<div class="input-wrapper">
								<input type="text" id="jks" class="select-input" placeholder="请选择健康师" readonly>
							</div>
						</div>


						<div class="form-group">
							<label for="bz">备注</label>
							<div class="input-wrapper">
								<textarea id="bz" placeholder="请输入备注信息" rows="3"></textarea>
							</div>
						</div>

						<div class="btn-group">
							<button type="submit" class="btn btn-primary">提交</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- 消息提示 -->
		<div id="messageToast" class="message-toast"></div>

		<!-- 弹窗选择器 -->
		<div class="modal-overlay" id="selectModal">
			<div class="modal-content">
				<div class="modal-header">
					<h3 class="modal-title" id="modalTitle">选择</h3>
				</div>
				<div class="modal-body">
					<input type="text" class="search-input" id="searchInput" placeholder="请输入搜索内容">
					<div class="option-list" id="optionList">
						<!-- 选项列表将通过JavaScript动态生成 -->
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="modal-btn modal-btn-secondary" onclick="closeModal()">取消</button>
					<button type="button" class="modal-btn modal-btn-primary" onclick="confirmSelection()">确定</button>
				</div>
			</div>
		</div>

		<script>
			// 全局变量
			let currentSelectField = null;
			let currentOptions = [];
			let selectedOption = null;
			let userInfo = null;
			let pxList = []; // 品项列表
			let pxOptions = []; // 品项选项数据

			// 品项相关变量
			let pxRows = [];
			let pxRowCounter = 0;

			// 页面加载完成后初始化
			document.addEventListener("DOMContentLoaded", function() {
				initializePage();
				bindEvents();
			});

			// 初始化页面
			async function initializePage() {
				// 获取当前登录用户
				userInfo = JSON.parse(localStorage.getItem("userInfo"));
				if (!userInfo || Object.keys(userInfo).length === 0) {
					// 没有登录，跳转到登录页面
					window.location.href = "login.html";
					return;
				}
				console.log(userInfo);

				// 添加默认的品项行
				addPxRow();
			}

			// 绑定事件
			function bindEvents() {
				// 绑定选择输入框点击事件
				const selectInputs = document.querySelectorAll(".select-input");
				selectInputs.forEach(input => {
					input.addEventListener("click", function() {
						openSelectModal(this);
					});
				});

				// 绑定表单提交事件
				document.getElementById("refundForm").addEventListener("submit", handleFormSubmit);

				// 绑定搜索输入框事件
				document.getElementById("searchInput").addEventListener("input", handleSearch);
			}

			// 打开选择弹窗
			async function openSelectModal(inputField) {
				currentSelectField = inputField;
				const fieldId = inputField.id;

				// 显示加载状态
				showModal("加载中...", []);

				try {
					let options = [];

					// 根据字段类型获取不同的选项数据
					switch (fieldId) {
						case "md":
							options = await getStoreOptions();
							showModal("选择门店", options);
							break;
						case "hy":
							options = await getMemberOptions();
							showModal("选择会员", options);
							break;
						case "jks":
							options = await getHealthWorkerOptions();
							showModal("选择健康师", options);
							break;
					}
				} catch (error) {
					console.error("获取选项数据失败:", error);
					showModal("加载失败", []);
					// 显示错误提示
					setTimeout(() => {
						showMessage("数据加载失败，请检查网络连接或联系管理员", "error");
					}, 500);
				}
			}

			// 显示弹窗
			function showModal(title, options) {
				currentOptions = options;
				document.getElementById("modalTitle").textContent = title;
				document.getElementById("searchInput").value = "";

				// 如果是加载状态，隐藏搜索框
				const searchInput = document.getElementById("searchInput");
				if (title === "加载中..." || title === "加载失败") {
					searchInput.style.display = "none";
				} else {
					searchInput.style.display = "block";
				}

				// 统一使用单选模式
				renderOptions(options);

				document.getElementById("selectModal").style.display = "flex";
			}

			// 关闭弹窗
			function closeModal() {
				document.getElementById("selectModal").style.display = "none";
				currentSelectField = null;
				currentOptions = [];
				selectedOption = null;
			}

			// 渲染选项列表
			function renderOptions(options) {
				const optionList = document.getElementById("optionList");
				optionList.innerHTML = "";

				if (!options || options.length === 0) {
					const emptyMessage = document.createElement("div");
					emptyMessage.className = "loading-message";
					emptyMessage.innerHTML = "<span class=\"loading-spinner\"></span>暂无数据";
					optionList.appendChild(emptyMessage);
					return;
				}

				options.forEach(option => {
					const optionItem = document.createElement("div");
					optionItem.className = "option-item";
					optionItem.textContent = option.label;
					optionItem.dataset.value = option.value;

					// 存储额外的属性到dataset中
					Object.keys(option).forEach(key => {
						if (key !== "value" && key !== "label") {
							optionItem.dataset[key] = option[key];
						}
					});

					optionItem.addEventListener("click", function() {
						// 移除之前的选中状态
						document.querySelectorAll(".option-item").forEach(item => {
							item.classList.remove("selected");
						});

						// 设置当前选中状态
						this.classList.add("selected");
						selectedOption = {
							value: this.dataset.value,
							label: this.textContent
						};
						// 添加门店特有的属性
						if (this.dataset.mcbh) {
							selectedOption.mcbh = this.dataset.mcbh;
						}
						if (this.dataset.mdmc) {
							selectedOption.mdmc = this.dataset.mdmc;
						}
						// 添加会员特有的属性
						if (this.dataset.hyzh) {
							selectedOption.hyzh = this.dataset.hyzh;
						}
						if (this.dataset.hyxm) {
							selectedOption.hyxm = this.dataset.hyxm;
						}
						// 添加健康师特有的属性
						if (this.dataset.jkszh) {
							selectedOption.jkszh = this.dataset.jkszh;
						}
						if (this.dataset.jksxm) {
							selectedOption.jksxm = this.dataset.jksxm;
						}
						// 添加品项特有的属性
						if (this.dataset.px) {
							selectedOption.px = this.dataset.px;
						}
						if (this.dataset.pxmc) {
							selectedOption.pxmc = this.dataset.pxmc;
						}
					});

					optionList.appendChild(optionItem);
				});
			}

			// 处理搜索
			function handleSearch() {
				const searchTerm = document.getElementById("searchInput").value;
				if (!searchTerm) {
					// 如果搜索词为空，显示所有选项
					renderOptions(currentOptions);
					return;
				}

				const filteredOptions = currentOptions.filter(option =>
					option.label && option.label.toLowerCase().includes(searchTerm.toLowerCase())
				);
				renderOptions(filteredOptions);
			}

			// 添加品项行
			function addPxRow() {
				const container = document.getElementById("pxContainer");
				const rowIndex = pxList.length;

				const rowDiv = document.createElement("div");
				rowDiv.className = "px-row";
				rowDiv.innerHTML = `
        <div class="px-row-first">
          <div class="px-select" onclick="selectPx(${rowIndex})" data-row-index="${rowIndex}">
            选择品项
          </div>
          <button type="button" class="px-delete" onclick="deletePxRow(${rowIndex})">删除</button>
        </div>
        <div class="px-row-second">
          <input type="number" class="px-input" placeholder="退卡金额" min="0" step="0.01"
                 data-row-index="${rowIndex}" oninput="updatePxAmount(${rowIndex}, this.value, 'tkje')">
          <input type="number" class="px-input" placeholder="次数" min="0" step="1"
                 data-row-index="${rowIndex}" oninput="updatePxAmount(${rowIndex}, this.value, 'cs')">
          <input type="number" class="px-input" placeholder="单次核扣" min="0" step="0.01"
                 data-row-index="${rowIndex}" oninput="updatePxAmount(${rowIndex}, this.value, 'dchk')">
        </div>
      `;

				container.appendChild(rowDiv);
				pxList.push({
					px: "",
					mc: "",
					tkje: "",
					cs: "",
					dchk: ""
				});
			}

			// 删除品项行
			function deletePxRow(rowIndex) {
				const container = document.getElementById("pxContainer");
				const rows = container.querySelectorAll(".px-row");

				if (rows.length > 1) {
					rows[rowIndex].remove();
					pxList.splice(rowIndex, 1);

					// 重新渲染所有行，更新索引
					renderPxRows();
				} else {
					showMessage("至少需要保留一个品项", "warning");
				}
			}

			// 重新渲染品项行
			function renderPxRows() {
				const container = document.getElementById("pxContainer");
				container.innerHTML = "";

				pxList.forEach((px, index) => {
					const rowDiv = document.createElement("div");
					rowDiv.className = "px-row";
					rowDiv.innerHTML = `
          <div class="px-row-first">
            <div class="px-select" onclick="selectPx(${index})" data-row-index="${index}">
              ${px.mc || "选择品项"}
            </div>
            <button type="button" class="px-delete" onclick="deletePxRow(${index})">删除</button>
          </div>
          <div class="px-row-second">
            <input type="number" class="px-input" placeholder="退卡金额" min="0" step="0.01"
                   value="${px.tkje}" data-row-index="${index}" oninput="updatePxAmount(${index}, this.value, 'tkje')">
            <input type="number" class="px-input" placeholder="次数" min="0" step="1"
                   value="${px.cs}" data-row-index="${index}" oninput="updatePxAmount(${index}, this.value, 'cs')">
            <input type="number" class="px-input" placeholder="单次核扣" min="0" step="0.01"
                   value="${px.dchk}" data-row-index="${index}" oninput="updatePxAmount(${index}, this.value, 'dchk')">
          </div>
        `;
					container.appendChild(rowDiv);
				});
			}

			// 选择品项
			async function selectPx(rowIndex) {
				currentSelectField = {
					type: 'px',
					rowIndex: rowIndex
				};

				// 显示加载状态
				showModal("加载中...", []);

				try {
					pxOptions = await getPxOptions();
					showModal("选择品项", pxOptions);
				} catch (error) {
					console.error("获取品项列表失败:", error);
					showModal("加载失败", []);
					setTimeout(() => {
						showMessage("数据加载失败，请检查网络连接或联系管理员", "error");
					}, 500);
				}
			}

			// 更新品项金额
			function updatePxAmount(rowIndex, value, field) {
				console.log("更新品项数据:", rowIndex, field, value);
				if (pxList[rowIndex]) {
					pxList[rowIndex][field] = value;
					console.log("更新后的品项数据:", pxList[rowIndex]);
				}
			}

			// 确认选择
			function confirmSelection() {
				if (currentSelectField) {
					if (currentSelectField.type === 'px') {
						// 处理品项选择
						if (selectedOption) {
							const rowIndex = currentSelectField.rowIndex;
							pxList[rowIndex] = {
								px: selectedOption.px,
								mc: selectedOption.pxmc,
								tkje: pxList[rowIndex].tkje || "",
								cs: pxList[rowIndex].cs || "",
								dchk: pxList[rowIndex].dchk || ""
							};

							// 更新显示
							const selectElement = document.querySelector(`[data-row-index="${rowIndex}"].px-select`);
							if (selectElement) {
								selectElement.textContent = selectedOption.pxmc;
							}

							closeModal();
						} else {
							showMessage("请先选择一个品项", "warning");
						}
					} else {
						// 处理其他字段的单选
						if (selectedOption) {
							currentSelectField.value = selectedOption.label;
							currentSelectField.dataset.selectedValue = selectedOption.value;

							// 设置额外的属性到输入框的dataset中
							Object.keys(selectedOption).forEach(key => {
								if (key !== "value" && key !== "label") {
									currentSelectField.dataset[key] = selectedOption[key];
								}
							});

							closeModal();
						} else {
							showMessage("请先选择一个选项", "warning");
						}
					}
				}
			}

			// 获取会员选项（从API获取）
			async function getMemberOptions() {
				try {
					const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKhxx?page=1&pageSize=1000`;
					const response = await fetch(apiUrl, {
						method: "GET",
						headers: {
							"Authorization": `${getAuthToken()}`,
							"Content-Type": "application/json"
						}
					});

					if (response.ok) {
						const result = await response.json();
						if (result.code == 200 && result.data) {
							return result.data.list.map(item => ({
								value: item.id,
								label: `${item.khmc}`,
								hyzh: item.id, // 会员账号
								hyxm: item.khmc // 会员名称
							}));
						}
					}

					// 如果API调用失败，返回默认数据
					console.warn("获取会员列表失败，使用默认数据");
					return getDefaultMemberOptions();
				} catch (error) {
					console.error("获取会员列表出错:", error);
					return getDefaultMemberOptions();
				}
			}

			// 获取门店选项（从API获取）
			async function getStoreOptions() {
				try {
					const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqMdxx?page=1&pageSize=1000&id=${userInfo.mdid}`;
					const response = await fetch(apiUrl, {
						method: "GET",
						headers: {
							"Authorization": `${getAuthToken()}`,
							"Content-Type": "application/json"
						}
					});

					if (response.ok) {
						const result = await response.json();
						if (result.code == 200 && result.data) {
							return result.data.list.map(item => ({
								value: item.id,
								label: item.dm,
								mdbh: item.id, // 门店编号
								mdmc: item.dm // 门店名称
							}));
						}
					}

					// 如果API调用失败，返回默认数据
					console.warn("获取门店列表失败，使用默认数据");
					return getDefaultStoreOptions();
				} catch (error) {
					console.error("获取门店列表出错:", error);
					return getDefaultStoreOptions();
				}
			}

			// 获取健康师选项（从API获取）
			async function getHealthWorkerOptions() {
				try {
					const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/user?page=1&pageSize=1000&mdid=${userInfo.mdid}&gw=健康师`;
					const response = await fetch(apiUrl, {
						method: "GET",
						headers: {
							"Authorization": `${getAuthToken()}`,
							"Content-Type": "application/json"
						}
					});

					if (response.ok) {
						const result = await response.json();
						if (result.code == 200 && result.data) {
							return result.data.list.map(item => ({
								value: item.id,
								label: item.realName,
								jkszh: item.id, // 健康师账号
								jksxm: item.realName // 健康师姓名
							}));
						}
					}

					// 如果API调用失败，返回默认数据
					console.warn("获取健康师列表失败，使用默认数据");
					return getDefaultHealthWorkerOptions();
				} catch (error) {
					console.error("获取健康师列表出错:", error);
					return getDefaultHealthWorkerOptions();
				}
			}

			// 获取品项选项（从API获取）
			async function getPxOptions() {
				try {
					const apiUrl =
						`${APP_CONFIG.getApiBaseUrl()}/api/system/DataInterface/730971133356016901/Actions/Response?n=1757168290`;
					const response = await fetch(apiUrl, {
						method: "GET",
						headers: {
							"Authorization": `${getAuthToken()}`,
							"Content-Type": "application/json"
						}
					});

					if (response.ok) {
						const result = await response.json();
						if (result.code == 200 && result.data) {
							return result.data.map(item => ({
								value: item.id,
								label: item.fullName || item.name || item.label,
								px: item.id,
								pxmc: item.fullName || item.name || item.label
							}));
						}
					}

					// 如果API调用失败，返回默认数据
					console.warn("获取品项列表失败，使用默认数据");
					return getDefaultPxOptions();
				} catch (error) {
					console.error("获取品项列表出错:", error);
					return getDefaultPxOptions();
				}
			}

			// 默认会员选项（API失败时的备用数据）
			function getDefaultMemberOptions() {
				return [{
						value: "MEMBER001",
						label: "张三",
						hyzh: "MEMBER001",
						hyxm: "张三"
					},
					{
						value: "MEMBER002",
						label: "李四",
						hyzh: "MEMBER002",
						hyxm: "李四"
					},
					{
						value: "MEMBER003",
						label: "王五",
						hyzh: "MEMBER003",
						hyxm: "王五"
					},
					{
						value: "MEMBER004",
						label: "赵六",
						hyzh: "MEMBER004",
						hyxm: "赵六"
					}
				];
			}

			// 默认门店选项（API失败时的备用数据）
			function getDefaultStoreOptions() {
				return [{
						value: "MD.101",
						label: "绿纤旗舰店",
						mcbh: "MD.101",
						mdmc: "绿纤旗舰店"
					},
					{
						value: "MD.102",
						label: "绿纤体验店",
						mcbh: "MD.102",
						mdmc: "绿纤体验店"
					},
					{
						value: "MD.103",
						label: "绿纤服务中心",
						mcbh: "MD.103",
						mdmc: "绿纤服务中心"
					},
					{
						value: "MD.104",
						label: "绿纤直营店",
						mcbh: "MD.104",
						mdmc: "绿纤直营店"
					}
				];
			}

			// 默认健康师选项（API失败时的备用数据）
			function getDefaultHealthWorkerOptions() {
				return [{
						value: "JKS001",
						label: "张健康师",
						jkszh: "JKS001",
						jksxm: "张健康师"
					},
					{
						value: "JKS002",
						label: "李健康师",
						jkszh: "JKS002",
						jksxm: "李健康师"
					},
					{
						value: "JKS003",
						label: "王健康师",
						jkszh: "JKS003",
						jksxm: "王健康师"
					}
				];
			}

			// 默认品项选项（API失败时的备用数据）
			function getDefaultPxOptions() {
				return [{
						value: "PX001",
						label: "品项A",
						px: "PX001",
						pxmc: "品项A"
					},
					{
						value: "PX002",
						label: "品项B",
						px: "PX002",
						pxmc: "品项B"
					},
					{
						value: "PX003",
						label: "品项C",
						px: "PX003",
						pxmc: "品项C"
					},
					{
						value: "PX004",
						label: "品项D",
						px: "PX004",
						pxmc: "品项D"
					}
				];
			}

			// 处理表单提交
			async function handleFormSubmit(event) {
				event.preventDefault();

				// if (!document.getElementById("md").dataset.selectedValue) {
				// 	showMessage("请选择门店", "error");
				// 	return;
				// }
				if (!document.getElementById("hy").dataset.selectedValue) {
					showMessage("请选择会员", "error");
					return;
				}
				if (!document.getElementById("jks").dataset.selectedValue) {
					showMessage("请选择健康师", "error");
					return;
				}

				// 验证品项
				if (pxList.length === 0) {
					showMessage("请至少添加一个品项", "error");
					return;
				}

				// 验证每个品项的数据
				for (let i = 0; i < pxList.length; i++) {
					const px = pxList[i];
					console.log(px);
					if (!px.px || !px.mc) {
						showMessage(`第${i + 1}个品项信息不完整，请重新选择`, "error");
						return;
					}
					if (!px.tkje || parseFloat(px.tkje) < 0) {
						showMessage(`第${i + 1}个品项的退卡金额必须大于等于0`, "error");
						return;
					}
					if (!px.cs || parseFloat(px.cs) < 0) {
						showMessage(`第${i + 1}个品项的次数必须大于等于0`, "error");
						return;
					}
					if (!px.dchk || parseFloat(px.dchk) < 0) {
						showMessage(`第${i + 1}个品项的单次核扣必须大于等于0`, "error");
						return;
					}
				}
				let mdinfo = await getStoreOptions()
				// 收集表单数据
				const formData = {
					md: userInfo.mdid || "",
					mcbh: mdinfo && mdinfo.length > 0 ? mdinfo[0].mdbh : "",
					mdmc: mdinfo && mdinfo.length > 0 ? mdinfo[0].mdmc : "",
					hy: document.getElementById("hy").dataset.selectedValue || "",
					hyzh: document.getElementById("hy").dataset.hyzh || "",
					hyxm: document.getElementById("hy").dataset.hyxm || "",
					jks: document.getElementById("jks").dataset.selectedValue || "",
					jkszh: document.getElementById("jks").dataset.jkszh || "",
					jksxm: document.getElementById("jks").dataset.jksxm || "",
					bz: document.getElementById("bz").value || "",
					lqHytkMxList: pxList
				};

				console.log("退卡数据:", formData);

				// 提交数据到API
				submitRefund(formData);
			}

			// 提交退卡数据
			function submitRefund(data) {
				const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqHytkHytk`;

				fetch(apiUrl, {
						method: "POST",
						headers: {
							"Content-Type": "application/json",
							"Authorization": `${getAuthToken()}`
						},
						body: JSON.stringify(data)
					})
					.then(response => response.json())
					.then(result => {
						if (result.code == 200) {
							// 显示成功提示
							showMessage("退卡成功！", "success");
							clearForm();
						} else {
							// 显示失败提示
							showMessage(`退卡失败：${result.message || "未知错误"}`, "error");
						}
					})
					.catch(error => {
						console.error("提交失败:", error);
						showMessage("网络错误，请检查连接后重试", "error");
					});
			}

			// 清空表单
			function clearForm() {
				// document.getElementById("md").value = "";
				// document.getElementById("md").dataset.selectedValue = "";
				// document.getElementById("md").dataset.mcbh = "";
				// document.getElementById("md").dataset.mdmc = "";
				document.getElementById("hy").value = "";
				document.getElementById("hy").dataset.selectedValue = "";
				document.getElementById("hy").dataset.hyzh = "";
				document.getElementById("hy").dataset.hyxm = "";
				document.getElementById("jks").value = "";
				document.getElementById("jks").dataset.selectedValue = "";
				document.getElementById("jks").dataset.jkszh = "";
				document.getElementById("jks").dataset.jksxm = "";
				document.getElementById("bz").value = "";

				// 清空品项列表
				pxList = [];
				document.getElementById("pxContainer").innerHTML = "";
				addPxRow(); // 添加一个默认行
			}

			// 显示消息提示
			function showMessage(message, type = "info") {
				const toast = document.getElementById("messageToast");
				toast.textContent = message;
				toast.className = `message-toast ${type}`;
				toast.classList.add("show");

				setTimeout(() => {
					toast.classList.remove("show");
				}, 3000);
			}
		</script>
	</body>
</html>