-
@@ -210,7 +270,26 @@ export default {
typeSelection: "1", // 1: 套餐, 2: 单项
showCartPopup: false, // 控制预约列表弹窗显示
checkedItems: [], // 控制弹窗中选择的项目
- };
+
+ // 手风琴展开状态管理
+ expandedPackageId: null, // 当前展开的套餐ID
+ packageDetails: {}, // 存储套餐详情数据
+ singleItemMap: {}, // 单项ID到单项数据的映射
+
+ // 单项分类数据处理
+ singleItemCategories: [], // 单项分类数据
+ selectedCategory: '', // 当前选中的分类
+ filteredSingleItems: [], // 根据分类筛选后的单项数据
+ }
+
+ },
+ computed: {
+ // 计算总价格
+ totalPrice() {
+ return this.selectedItemsDetails.reduce((total, item) => {
+ return total + parseFloat(item.price) || 0;
+ }, 0).toFixed(2);
+ }
},
created() {
this.initDateList();
@@ -240,6 +319,51 @@ export default {
this.checkedItems = [...this.selectedItems];
},
+ // 切换套餐展开/收起状态
+ togglePackageExpand(itemId) {
+ if (this.expandedPackageId === itemId) {
+ this.expandedPackageId = null;
+ } else {
+ this.expandedPackageId = itemId;
+ // 获取套餐详情
+ this.getPackageDetails(itemId);
+ }
+ },
+
+ // 选择单项分类
+ selectCategory(category) {
+ this.selectedCategory = category;
+ // 筛选单项数据
+ if (category) {
+ this.filteredSingleItems = this.list.filter(item => item.description === category);
+ } else {
+ this.filteredSingleItems = [...this.list];
+ }
+ },
+
+ // 获取套餐详情
+ getPackageDetails(packageId) {
+ const packageItem = this.list.find(item => item.id === packageId);
+ if (!packageItem) return;
+
+ // 从单项数据中获取套餐项目详情
+ const details = [];
+ // 假设packageItem.programList存储了套餐包含的单项ID列表
+ if (packageItem.programList) {
+ packageItem.programList.forEach(singleItemId => {
+ const singleItem = this.singleItemMap[singleItemId];
+ if (singleItem) {
+ details.push({
+ name: singleItem.explain,
+ price: singleItem.price
+ });
+ }
+ });
+ }
+
+ this.$set(this.packageDetails, packageId, details);
+ },
+
// 打开预约列表弹窗
openCartPopup() {
if (this.selectedItems.length === 0) {
@@ -324,6 +448,26 @@ export default {
Toast.success(`已选择 ${selectedForAppointment.length} 个项目进行预约`);
},
+ // 直接预约(无弹窗)
+ directAppointment() {
+ if (this.selectedItems.length === 0) {
+ Toast('请先选择项目');
+ return;
+ }
+
+ // 提交所有选中的项目
+ const selectedForAppointment = this.selectedItemsDetails;
+
+ this.$router.push({
+ path: 'Zstj_detail',
+ query: {
+ items: JSON.stringify(selectedForAppointment),
+ seldate: this.same_day
+ }
+ });
+ Toast.success(`已选择 ${selectedForAppointment.length} 个项目进行预约`);
+ },
+
handleSearch() {
const keyword = this.searchKeyword.trim().toLowerCase();
if (!keyword) {
@@ -380,6 +524,9 @@ export default {
this.searchKeyword = "";
this.list = [];
this.filteredList = [];
+ this.expandedPackageId = null; // 重置手风琴展开状态
+ this.selectedCategory = ''; // 重置分类选择
+ this.filteredSingleItems = []; // 重置单项筛选数据
const apiDate = this.formatDateForAPI(this.same_day);
const cacheKey = apiDate + '_' + this.typeSelection;
@@ -425,20 +572,119 @@ export default {
name: item.category,
price: item.price,
explain: item.program_name,
- description:item.description,
- type: this.typeSelection// 添加类型标识
+ description: item.description,
+ type: this.typeSelection,
+ programList: item.program_list ? this.parseProgramList(item.program_list) : []
}));
this.filteredList = [...this.list];
+
+ // 套餐类型按program_id排序
+ if (this.typeSelection === '1') {
+ this.filteredList.sort((a, b) => a.id.localeCompare(b.id));
+ }
+
+ // 处理单项数据
+ if (this.typeSelection === '2') {
+ // 构建单项ID到单项数据的映射
+ this.singleItemMap = {};
+ rawData.forEach(item => {
+ this.singleItemMap[item.program_id] = {
+ id: item.program_id,
+ name: item.description, // 使用description作为分类
+ price: item.price,
+ explain: item.program_name,
+ description: item.description
+ };
+ });
+
+ // 提取单项分类(按description)
+ const categories = [...new Set(rawData.map(item => item.description))];
+ this.singleItemCategories = categories;
+
+ // 默认选择第一个分类
+ if (categories.length > 0 && !this.selectedCategory) {
+ this.selectCategory(categories[0]);
+ }
+ } else {
+ // 处理套餐数据时,主动加载单项数据以构建映射
+ this.loadSingleItemData();
+ }
+
this.finished = true; // 一次性加载完成
},
+ // 加载单项数据
+ loadSingleItemData() {
+ const apiDate = this.formatDateForAPI(this.same_day);
+ const singleItemCacheKey = apiDate + '_2';
+
+ // 检查是否已有缓存
+ if (this.allDataCache[singleItemCacheKey]) {
+ const singleItemData = this.allDataCache[singleItemCacheKey];
+ this.buildSingleItemMap(singleItemData);
+ } else {
+ // 如果没有缓存,主动请求单项数据
+ this.fetchSingleItemData();
+ }
+ },
+
+ // 构建单项数据映射
+ buildSingleItemMap(singleItemData) {
+ this.singleItemMap = {};
+ singleItemData.forEach(item => {
+ this.singleItemMap[item.program_id] = {
+ id: item.program_id,
+ name: item.description, // 使用description作为分类
+ price: item.price,
+ explain: item.program_name,
+ description: item.description
+ };
+ });
+ },
+
+ // 请求单项数据
+ async fetchSingleItemData() {
+ const apiDate = this.formatDateForAPI(this.same_day);
+ const singleItemCacheKey = apiDate + '_2';
+
+ try {
+ const res = await apiOpTiQuery({
+ startDate: apiDate,
+ endDate: apiDate,
+ HospitalZone: "",
+ Type: '2' // 单项类型
+ });
+
+ const data = res.data?.data || [];
+ this.allDataCache[singleItemCacheKey] = data;
+ this.buildSingleItemMap(data);
+ } catch (err) {
+ console.error("请求单项数据失败:", err);
+ }
+ },
+
+ // 解析program_list,处理以0开头的数字
+ parseProgramList(programListStr) {
+ try {
+ // 替换所有以0开头的数字为字符串
+ const processedStr = programListStr.replace(/\b0(\d+)\b/g, '"0$1"');
+ return JSON.parse(processedStr);
+ } catch (error) {
+ console.error('解析program_list失败:', error);
+ return [];
+ }
+ },
+
handleTypeChange() {
// 切换类型时重新加载数据
this.list = [];
this.filteredList = [];
this.finished = false;
this.loading = false;
+ this.expandedPackageId = null; // 重置手风琴展开状态
+ this.selectedCategory = ''; // 重置分类选择
+ this.filteredSingleItems = []; // 重置单项筛选数据
const apiDate = this.formatDateForAPI(this.same_day);
if (this.allDataCache[apiDate + '_' + this.typeSelection]) {
@@ -580,21 +826,19 @@ ul.timeSlelct {
padding-bottom: 100px;
}
+.zstj_tc1 ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
.zstj_tc1 ul li {
- margin-bottom: 40px;
- display: flex;
- align-items: center;
+ margin-bottom: 1px;
background: #fff;
border-radius: 24px;
box-sizing: border-box;
- padding: 20px;
- cursor: pointer;
+ // padding: 20px;
transition: all 0.3s;
-
- &.selected {
- border: 2px solid #46c3b0;
- background-color: #f0f9f8;
- }
}
.checkbox-container {
@@ -655,7 +899,7 @@ ul.timeSlelct {
.container-wrapper {
position: fixed;
- top: 4.6rem;
+ top: 5.3rem;
left: 0;
right: 0;
bottom: 1.5rem;
@@ -666,73 +910,59 @@ ul.timeSlelct {
height: 100%;
overflow-y: auto;
background: #f5f5f5;
+ padding: 0 15px;
}
/* 预约列表按钮样式 */
.cart-button-container {
position: fixed;
- bottom: 0.6rem;
- left: 50%;
- transform: translateX(-50%);
+ bottom: 0;
+ left: 0;
+ right: 0;
z-index: 100;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 15px 20px;
+ background: white;
+ box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
}
-.cart-button {
- display: flex;
- align-items: center;
- justify-content: center;
+.total-price {
+ font-size: .6rem;
+ font-weight: bold;
+ color: #333;
+}
+
+.total-price .price {
+ color: #d62e25;
+ margin-left: 5px;
+}
+
+.reserve-button {
background: linear-gradient(135deg, #46c3b0 0%, #3aa897 100%);
color: white;
- padding: 15px 30px;
- border-radius: 50px;
- box-shadow: 0 5px 20px rgba(70, 195, 176, 0.3);
+ padding: 12px 30px;
+ border-radius: 8px;
+ box-shadow: 0 3px 15px rgba(70, 195, 176, 0.3);
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
- font-size: 24px;
- position: relative;
+ // font-size: 20px;
+ white-space: nowrap;
+ margin-right: .76rem;
}
-.cart-button:hover {
+.reserve-button:hover {
transform: translateY(-3px);
- box-shadow: 0 8px 25px rgba(70, 195, 176, 0.4);
+ box-shadow: 0 6px 20px rgba(70, 195, 176, 0.4);
}
-.cart-button:active {
+.reserve-button:active {
transform: translateY(-1px);
}
-.cart-button.empty {
- background: #f5f5f5;
- color: #666;
- box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-}
-
-.cart-button.empty:hover {
- background: #e8e8e8;
-}
-
-.cart-icon {
- font-size: 32px;
- margin-right: 10px;
-}
-
-.cart-count {
- position: absolute;
- top: -10px;
- right: -10px;
- background: #ff4d4f;
- color: white;
- border-radius: 50%;
- width: 30px;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 18px;
- font-weight: bold;
-}
-
/* 预约列表弹窗样式 */
.cart-popup {
height: 100%;
@@ -801,4 +1031,241 @@ ul.timeSlelct {
padding-bottom: env(safe-area-inset-bottom) !important;
}
}
+
+/* 套餐手风琴样式 */
+.package-item {
+ //margin-bottom: 40px;
+ border-radius: 24px;
+ overflow: hidden;
+ background: #fff;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s;
+
+ &.selected {
+ border: 2px solid #46c3b0;
+ background-color: #f0f9f8;
+ }
+}
+
+.package-header {
+ display: flex;
+ align-items: center;
+ padding: 20px;
+ cursor: pointer;
+ transition: all 0.3s;
+ width: auto;
+
+ &:hover {
+ background-color: #f9f9f9;
+ }
+}
+
+.price-arrow {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.arrow {
+ font-size: 16px;
+ color: #999;
+ transition: transform 0.3s;
+
+ &.rotated {
+ transform: rotate(180deg);
+ }
+}
+
+/* 套餐详情部分 */
+.package-details {
+ background-color: #f9f9f9;
+ border-top: 1px solid #eee;
+ animation: slideDown 0.3s ease;
+ width: 100%;
+ position: relative;
+ left: 0;
+ top: 0;
+}
+
+.details-header {
+ display: flex;
+ justify-content: space-between;
+ padding: 25px 20px;
+ background-color: #f0f0f0;
+ font-weight: bold;
+ color: #333;
+ font-size: 40px;
+}
+
+.details-content {
+ padding: 15px 20px 25px;
+}
+
+.detail-item {
+ display: flex;
+ justify-content: space-between;
+ padding: 15px 0;
+ border-bottom: 1px solid #eee;
+ font-size: 36px;
+
+ &:last-child {
+ border-bottom: none;
+ }
+}
+
+/* 单项分类容器样式 - 确保父容器高度固定,子元素可占满 */
+.single-item-container {
+ display: flex;
+ flex-direction: row;
+ height: 600px; /* 固定父容器高度,子元素100%高度生效 */
+ background: #fff;
+ border-radius: 24px;
+ overflow: hidden;
+ margin-bottom: 40px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ width: 100%;
+ list-style: none;
+ flex-wrap: nowrap;
+ /* 移除内边距,避免子元素高度占满后出现空隙 */
+ padding: 0;
+ margin: 0 0 40px 0;
+}
+
+/* 左侧分类列表样式 - 核心修改:占满高度,隐藏滚动条 */
+.category-list {
+ width: 200px;
+ flex-shrink: 0;
+ background-color: #f5f5f5;
+ border-right: 1px solid #eee;
+ overflow-y: auto; /* 保留滚动功能 */
+ height: 100%; /* 占满父容器高度 */
+ box-sizing: border-box; /* 确保内边距不超出高度 */
+ padding: 0; /* 移除内边距,避免高度不足 */
+ margin: 0; /* 移除外边距,避免高度不足 */
+
+ /* 隐藏滚动条 - 兼容所有主流浏览器 */
+ ::-webkit-scrollbar {
+ display: none; /* Chrome、Safari、Edge */
+ }
+ -ms-overflow-style: none; /* IE/Edge 旧版本 */
+ scrollbar-width: none; /* Firefox */
+}
+
+.category-item {
+ padding: 20px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s;
+ border-bottom: 1px solid #eee;
+ font-size: 30px;
+ margin: 0; /* 移除外边距 */
+
+ &:hover {
+ background-color: #e8e8e8;
+ }
+
+ &.active {
+ background-color: #46c3b0;
+ color: white;
+ font-weight: bold;
+ }
+}
+
+/* 右侧单项列表样式 - 核心修改:占满高度 */
+.single-item-list {
+ flex: 1;
+ padding: 20px;
+ overflow-y: auto;
+ height: 100%; /* 占满父容器高度 */
+ box-sizing: border-box; /* 确保内边距不超出高度 */
+ margin: 0; /* 移除外边距 */
+}
+
+/* 单项模板容器样式 */
+.single-item-wrapper {
+ height: 100%;
+ overflow: hidden;
+}
+
+/* 修改单项分类容器样式 */
+.single-item-container {
+ height: 100% !important;
+ margin-bottom: 0 !important;
+}
+
+/* 修改左侧分类列表样式 */
+.category-list {
+ overflow-y: auto !important;
+}
+
+/* 修改右侧单项列表样式 */
+.single-item-list {
+ overflow-y: auto !important;
+}
+
+/* 单项卡片样式 */
+.single-item-card {
+ margin-bottom: 15px;
+ display: flex;
+ align-items: center;
+ background: #f9f9f9;
+ border-radius: 12px;
+ box-sizing: border-box;
+ padding: 15px;
+ cursor: pointer;
+ transition: all 0.3s;
+
+ &.selected {
+ border: 2px solid #46c3b0;
+ background-color: #f0f9f8;
+ }
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+ }
+}
+
+/* 动画效果 */
+@keyframes slideDown {
+ from {
+ max-height: 0;
+ opacity: 0;
+ }
+ to {
+ max-height: 1200px;
+ opacity: 1;
+ }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .category-list {
+ width: 150px; /* 小屏缩小左侧宽度,保持占满高度 */
+ }
+
+ .category-item {
+ padding: 15px;
+ font-size: 20px;
+ }
+
+ .single-item-list {
+ padding: 15px;
+ }
+
+ .single-item-card {
+ padding: 12px;
+ margin-bottom: 12px;
+ }
+
+ .details-header {
+ font-size: 32px;
+ padding: 20px 15px;
+ }
+
+ .detail-item {
+ font-size: 28px;
+ padding: 12px 0;
+ }
+}
\ No newline at end of file
diff --git a/src/views/tui.vue b/src/views/tui.vue
index 4236afa..bc3ffe7 100644
--- a/src/views/tui.vue
+++ b/src/views/tui.vue
@@ -29,6 +29,8 @@
线上退号退费
线上门诊医保退费
线上门诊自费退费
+
线上退钱不退his
+
线上病案退费