From 80f126c25a6f75279526bc8521342b2b733a075e Mon Sep 17 00:00:00 2001
From: ywyonui <ywyonui@163.com>
Date: Sat, 13 Sep 2025 21:48:00 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E5=A2=9E=E5=8A=A0=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E6=9F=A5=E8=AF=A2=E5=B9=B4=E7=BA=A7=E7=8F=AD=E7=BA=A7?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E7=9A=84=E5=8F=82=E6=95=B0=202?=
 =?UTF-8?q?=E3=80=81=E8=B0=83=E6=95=B4=E6=A0=87=E5=87=86=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BasicNjBjSelect/index.vue      |  29 +-
 src/pages/view/routine/jc/bzList.vue          | 465 ++++++++++++++----
 src/pages/view/routine/jc/components/dm.vue   |  29 +-
 .../view/routine/jc/components/dmList.vue     |  29 +-
 src/pages/view/routine/jc/index.vue           |   2 +-
 5 files changed, 432 insertions(+), 122 deletions(-)

diff --git a/src/components/BasicNjBjSelect/index.vue b/src/components/BasicNjBjSelect/index.vue
index 17086dc..e1b991c 100644
--- a/src/components/BasicNjBjSelect/index.vue
+++ b/src/components/BasicNjBjSelect/index.vue
@@ -199,6 +199,9 @@ const props = withDefaults(defineProps<{
   title?: string
   useKzTree?: boolean // 是否使用不受权限控制的接口
   multiple?: boolean // 是否支持多选
+  onlyConfirmChangeFlag: boolean // 确认选择时才触发 change 事件
+  autoSelectedFirst: boolean // 是否自动选择第一个
+  bjRequired: boolean // 班级是否是必选
 }>(), {
   modelValue: null,
   defaultValue: null,
@@ -209,7 +212,10 @@ const props = withDefaults(defineProps<{
   disabled: false,
   title: '选择班级',
   useKzTree: false,
-  multiple: false
+  multiple: false,
+  onlyConfirmChangeFlag: false,
+  autoSelectedFirst: false,
+  bjRequired: false
 })
 
 // Emits 定义
@@ -307,6 +313,9 @@ const onGradeRadioChange = (event: any) => {
   if (selectedGrade) {
     selectedGrades.value = [selectedGrade]
     selectedClasses.value = []
+    if (props.autoSelectedFirst) {
+      selectedClasses.value = [selectedGrade.children[0]]
+    }
   } else {
     selectedGrades.value = []
     selectedClasses.value = []
@@ -365,7 +374,16 @@ const onClassRadioChange = (event: any) => {
 }
 
 // 更新模型值
-const updateModelValue = () => {
+const updateModelValue = (confirmFlag: boolean = false) => {
+  // 如果不是确认选择，且仅确认选择时才触发 change 事件
+  if (!confirmFlag && props.onlyConfirmChangeFlag) {
+    return;
+  }
+  if (props.bjRequired && selectedClasses.value.length === 0) {
+    uni.showToast({ title: '请选择班级', icon: 'error' });
+    return;
+  }
+
   const result: TreeSelectResult = {
     selectedGrades: [...selectedGrades.value],
     selectedClasses: [...selectedClasses.value],
@@ -390,7 +408,7 @@ const closeSelector = () => {
 
 // 确认选择
 const confirmSelection = () => {
-  updateModelValue()
+  updateModelValue(true)
   closeSelector()
 }
 
@@ -414,6 +432,11 @@ const loadData = async () => {
     if (props.defaultValue) {
       selectedGrades.value = props.defaultValue.selectedGrades || []
       selectedClasses.value = props.defaultValue.selectedClasses || []
+    } else if (props.autoSelectedFirst) {
+      // 默认选中第一个
+      selectedGrades.value = [njList.value[0]]
+      selectedClasses.value = [njList.value[0].children[0]]
+      updateModelValue(true)
     }
   } catch (error) {
     console.error('加载年级班级数据失败:', error)
diff --git a/src/pages/view/routine/jc/bzList.vue b/src/pages/view/routine/jc/bzList.vue
index 5807644..066da59 100644
--- a/src/pages/view/routine/jc/bzList.vue
+++ b/src/pages/view/routine/jc/bzList.vue
@@ -1,149 +1,400 @@
 <template>
-  <view class="bz-list">
-    <!-- 使用 BasicListLayout 包裹记录列表 -->
-    <BasicListLayout @register="register" :fixed="false" class="flex-1">
-      <template #default="{ data }">
-        <view class="bz-card" @click="goToBz(data)">
-          <view class="card-header">
-            <view class="card-title">{{ data.bzMc }}</view>
-          </view>
-          <view class="divider"></view>
-          <view class="card-content">
-            <view class="info-row">
-              <text class="info-label">年级：</text>
-              <text class="info-value">{{ data.njmc }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">说明：</text>
-              <text class="info-value">{{ data.bzSm }}</text>
-            </view>
-          </view>
-          <view class="card-footer">
-            <text class="view-detail">前往点名 →</text>
+  <view class="jc-list-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <text class="page-title">就餐标准列表</text>
+    </view>
+
+    <!-- 就餐列表 -->
+    <view class="section" v-if="jcBzList.length > 0">
+      <!-- 就餐列表 -->
+      <view class="jc-list">
+        <view
+          v-for="bz in jcBzList"
+          :key="bz.id"
+          class="jc-item bg-white r-md p-12"
+          @click="goToBz(bz)"
+        >
+          <view class="jc-header">
+            <view class="jc-title">{{ bz.bzMc }}</view>
           </view>
+          
+           <view class="jc-info">
+             <view class="info-row">
+               <text class="info-label">学期名称：</text>
+               <text class="info-value">{{ bz.xqMc || '未知' }}</text>
+             </view>
+             <view class="info-row">
+               <text class="info-label">年级范围：</text>
+               <text class="info-value">{{ bz.njmc || '全部' }}</text>
+             </view>
+              <view class="info-row">
+                <text class="info-label">说明：</text>
+                <text class="info-value">{{ bz.bzSm }}</text>
+              </view>
+           </view>
         </view>
-      </template>
-    </BasicListLayout>
+      </view>
+    </view>
+
+    <!-- 空状态 -->
+    <view class="empty-state" v-if="!loading && jcBzList.length === 0 && hasSearched">
+      <view class="empty-icon">📚</view>
+      <view class="empty-text">暂无就餐数据</view>
+      <view class="empty-tip">请联系管理员添加就餐信息</view>
+    </view>
+
+    <!-- 加载状态 -->
+    <view class="loading-state" v-if="loading">
+      <view class="loading-text">正在加载...</view>
+    </view>
+    
+    <!-- 滚动加载更多 -->
+    <view class="load-more" v-if="hasMore && !loading">
+      <view class="load-more-text">上拉加载更多</view>
+    </view>
+    
+    <!-- 没有更多数据 -->
+    <view class="no-more" v-if="!hasMore && hasSearched && jcBzList.length > 0">
+      <view class="no-more-text">没有更多数据了</view>
+    </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
-import { jcBzFindPageApi } from "@/api/base/jcApi";
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { jcBzFindPageApi } from '@/api/base/jcApi'
 import { useDataStore } from "@/store/modules/data";
 const { setJcBz } = useDataStore();
 
 // 响应式数据
-const loading = ref(false);
-const bzList = ref<any>([]);
-const total = ref<any>(0);
+const jcBzList = ref<any>([])
+const loading = ref(false)
+const hasSearched = ref(false)
+const hasMore = ref(true)
+const currentPage = ref(1)
+const pageSize = ref(10)
 
-// 使用 BasicListLayout
-const [register, { reload, setParam }] = useLayout({
-  api: async (params: any) => {
-    try {
-      const res = await jcBzFindPageApi(params);
-      console.log("API返回数据:", res); // 调试日志
+// 页面加载
+onLoad(() => {
+  console.log('就餐列表页面加载')
+  loadJcBzList()
+})
 
-      // 确保数据正确赋值
-      if (res && res.rows) {
-        bzList.value = res.rows;
-        total.value = res.records || res.total || 0;
+// 加载就餐列表
+const loadJcBzList = async (isLoadMore = false) => {
+  if (loading.value) return
+  
+  loading.value = true
+  hasSearched.value = true
+
+  try {
+    // 调用后端接口查询就餐列表
+    const response = await jcBzFindPageApi({
+      pageNo: currentPage.value,
+      rows: 10,
+    });
+    
+    console.log('API返回结果:', response)
+    
+    if (response && response.rows) {
+      const newData = response.rows || []
+      
+      if (isLoadMore) {
+        // 加载更多时追加数据
+        jcBzList.value = [...jcBzList.value, ...newData]
       } else {
-        bzList.value = [];
-        total.value = 0;
+        // 首次加载或刷新时替换数据
+        jcBzList.value = newData
       }
-      return res;
-    } catch (error) {
-      console.error("获取数据失败:", error);
-      bzList.value = [];
-      total.value = 0;
-      return { rows: [], total: 0 };
+      
+      // 判断是否还有更多数据
+      hasMore.value = newData.length >= pageSize.value
+    } else {
+      throw new Error('查询失败')
     }
+  } catch (error) {
+    console.error('查询就餐列表失败:', error)
+    uni.showToast({
+      title: '查询失败，请重试',
+      icon: 'none'
+    })
+    if (!isLoadMore) {
+      jcBzList.value = []
+    }
+  } finally {
+    loading.value = false
   }
-});
+}
 
+// 加载更多数据
+const loadMore = () => {
+  if (loading.value || !hasMore.value) {
+    return
+  }
+  
+  currentPage.value++
+  loadJcBzList(true)
+}
+
+// 滚动到底部触发加载更多
+const onReachBottom = () => {
+  loadMore()
+}
+
+// 跳转到就餐标准页面
 const goToBz = (bz: any) => {
   setJcBz(bz);
   uni.navigateTo({ url: "/pages/view/routine/jc/index"});
 };
 
-// 生命周期
-onMounted(() => {
-  // 不自动加载数据，等待用户搜索
-  reload();
-});
+// 获取状态样式类
+const getStatusClass = (status: string) => {
+  switch (status) {
+    case '未开始':
+      return 'status-pending'
+    case '进行中':
+      return 'status-active'
+    case '已结束':
+      return 'status-ended'
+    default:
+      return 'status-unknown'
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>
-.bz-list {
+.jc-list-container {
   min-height: 100vh;
   background-color: #f5f5f5;
-  display: flex;
-  flex-direction: column;
+  padding: 20rpx;
 }
 
-.bz-card {
-  border: 1px solid #f0f0f0;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  margin-bottom: 20rpx;
+.page-header {
   background-color: #fff;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
 
-  .card-header {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 10px;
+.page-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
 
-    .card-title {
-      font-size: 16px;
-      font-weight: bold;
-      color: #333;
-    }
-  }
+.section {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
 
-  .divider {
-    height: 1px;
-    background-color: #eee;
-    margin-bottom: 15px;
-  }
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+}
 
-  .card-content {
-    margin-bottom: 20rpx;
-    padding-bottom: 16rpx;
-    border-bottom: 1px solid #f0f0f0;
-  }
+.jc-list {
+  margin-bottom: 30rpx;
+}
 
-  .info-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 16rpx;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .info-label {
-    font-size: 28rpx;
-    color: #666;
-    font-weight: normal;
-    flex: 0 0 160rpx;
-  }
-
-  .info-value {
-    font-size: 28rpx;
-    color: #333;
-    font-weight: bold;
-    flex: 1;
+.jc-item {
+  margin-bottom: 20rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.2s;
+  position: relative;
+  cursor: pointer;
+  
+  &:hover {
+    transform: translateY(-2rpx);
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
   }
   
-  .card-footer {
-    text-align: right;
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
   }
+}
 
+.jc-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+  padding-bottom: 15rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.jc-actions {
+  display: flex;
+  align-items: center;
+}
+
+.jc-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  flex: 1;
+}
+
+.jc-status {
+  font-size: 24rpx;
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  font-weight: bold;
+  
+  &.status-pending {
+    background-color: #fff7e6;
+    color: #fa8c16;
+    border: 1rpx solid #ffd591;
+  }
+  
+  &.status-active {
+    background-color: #f6ffed;
+    color: #52c41a;
+    border: 1rpx solid #b7eb8f;
+  }
+  
+  &.status-ended {
+    background-color: #fff2f0;
+    color: #ff4d4f;
+    border: 1rpx solid #ffccc7;
+  }
+  
+  &.status-unknown {
+    background-color: #f5f5f5;
+    color: #999;
+    border: 1rpx solid #d9d9d9;
+  }
+}
+
+.more-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  
+  &:hover {
+    background-color: #e6f7ff;
+    transform: scale(1.1);
+  }
+  
+  &:active {
+    background-color: #d9d9d9;
+    transform: scale(0.95);
+  }
+}
+
+.more-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.jc-info {
+  margin-bottom: 20rpx;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 12rpx;
+  font-size: 28rpx;
+}
+
+.info-label {
+  color: #666;
+  margin-right: 10rpx;
+  min-width: 140rpx;
+}
+
+.info-value {
+  color: #333;
+  flex: 1;
+}
+
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 40rpx;
+  
+  .empty-icon {
+    font-size: 120rpx;
+    margin-bottom: 20rpx;
+  }
+  
+  .empty-text {
+    font-size: 32rpx;
+    color: #666;
+    margin-bottom: 10rpx;
+  }
+  
+  .empty-tip {
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 100rpx;
+  
+  .loading-text {
+    font-size: 32rpx;
+    color: #666;
+  }
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.r-md {
+  border-radius: 16rpx;
+}
+
+.p-12 {
+  padding: 24rpx;
+}
+
+/* 滚动加载样式 */
+.load-more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx;
+  
+  .load-more-text {
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+.no-more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx;
+  
+  .no-more-text {
+    font-size: 28rpx;
+    color: #ccc;
+  }
 }
 </style>
diff --git a/src/pages/view/routine/jc/components/dm.vue b/src/pages/view/routine/jc/components/dm.vue
index a402972..ecd6143 100644
--- a/src/pages/view/routine/jc/components/dm.vue
+++ b/src/pages/view/routine/jc/components/dm.vue
@@ -2,9 +2,23 @@
   <view class="start-dm-content">
     <!-- 班级选择器 -->
     <view class="section">
-      <view class="section-title">选择班级</view>
-      <NjBjPicker @change="changeNjBj" icon-arrow="right" :customStyle="{ backgroundColor: '#fff', borderRadius: '0', padding: '12px 15px' }" />
-      
+      <text class="section-title">选择班级</text>
+      <BasicNjBjSelect 
+        :custom-style="{
+          borderRadius: '12rpx',
+          background: 'background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
+          padding: '0rpx 30rpx',
+          border: '1rpx solid #e9ecef',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        }"
+        v-model="selectedNjBj"
+        placeholder="请选择年级班级"
+        :only-confirm-change-flag="true"
+        :auto-selected-first="false"
+        :bj-required="true"
+        @change="changeNjBj"
+      />
       <!-- 班级选择提示 -->
       <view v-if="!curBj" class="class-tip">
         <text class="tip-icon">ℹ️</text>
@@ -59,7 +73,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import NjBjPicker from '@/pages/components/NjBjPicker/index.vue'
+import BasicNjBjSelect from '@/components/BasicNjBjSelect/index.vue'
 import DmJs from './dmJs.vue'
 import DmXs from './dmXs.vue'
 import DmPsComponent from '@/pages/components/dmPs/index.vue'
@@ -73,6 +87,7 @@ const { getJcBz } = useDataStore();
 // 替换 isSubmitting 状态为 useDebounce
 const { isProcessing: isSubmitting, debounce } = useDebounce(2000);
 
+const selectedNjBj = ref<any>(null);
 /**
  * 就餐点名组件
  * 功能：
@@ -106,7 +121,11 @@ const mediaData = ref({
 const dmPsRef = ref<any>(null);
 
 // 改变了年级班级
-const changeNjBj = async (nj: any, bj: any) => { 
+const changeNjBj = (val: any) => { 
+  const njList = val.selectedGrades || [];
+  const nj = njList[0] || {};
+  const bjList = val.selectedClasses || [];
+  const bj = bjList[0] || {};
   curNj.value = nj
   curBj.value = bj
 };
diff --git a/src/pages/view/routine/jc/components/dmList.vue b/src/pages/view/routine/jc/components/dmList.vue
index 0fde5b0..8666879 100644
--- a/src/pages/view/routine/jc/components/dmList.vue
+++ b/src/pages/view/routine/jc/components/dmList.vue
@@ -9,10 +9,21 @@
             <view class="search-item">
               <text class="label">班级：</text>
               <view class="flex-1">
-                <NjBjPicker @change="changeNjBj" icon-arrow="right" :customStyle="{
-                  borderRadius: '0',
-                  padding: '0.5rem 0.625rem',
-                }" />
+                <BasicNjBjSelect 
+                  :custom-style="{
+                    borderRadius: '12rpx',
+                    background: 'background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
+                    padding: '0rpx 30rpx',
+                    border: '1rpx solid #e9ecef',
+                    transition: 'all 0.3s ease',
+                  }"
+                  v-model="selectedNjBj"
+                  placeholder="请选择年级班级"
+                  :only-confirm-change-flag="true"
+                  :auto-selected-first="false"
+                  :bj-required="true"
+                  @change="changeNjBj"
+                />
               </view>
             </view>
           </view>
@@ -83,7 +94,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
 import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
-import NjBjPicker from "@/pages/components/NjBjPicker/index.vue";
+import BasicNjBjSelect from '@/components/BasicNjBjSelect/index.vue'
 import { jcDmFindPageApi } from "@/api/base/jcApi";
 import { useDataStore } from "@/store/modules/data";
 
@@ -108,6 +119,8 @@ const dmRecords = ref<any>([]);
 const totalCount = ref<any>(0);
 const hasSearched = ref(false);
 
+const selectedNjBj = ref<any>(null);
+
 // 使用 BasicListLayout
 const [register, { reload, setParam }] = useLayout({
   api: async (params: any) => {
@@ -138,7 +151,11 @@ const [register, { reload, setParam }] = useLayout({
 });
 
 // 改变了年级班级
-const changeNjBj = async (nj: any, bj: any) => {
+const changeNjBj = (val: any) => { 
+  const njList = val.selectedGrades || [];
+  const nj = njList[0] || {};
+  const bjList = val.selectedClasses || [];
+  const bj = bjList[0] || {};
   selectedClass.value = {
     njId: nj.key,
     bjId: bj.key,
diff --git a/src/pages/view/routine/jc/index.vue b/src/pages/view/routine/jc/index.vue
index bc14266..4fe691c 100644
--- a/src/pages/view/routine/jc/index.vue
+++ b/src/pages/view/routine/jc/index.vue
@@ -39,7 +39,7 @@ import DmComponent from './components/dm.vue'
 import DmListComponent from './components/dmList.vue'
 
 // 响应式数据
-const activeTab = ref('record')
+const activeTab = ref('start')
 const loading = ref(false)
 
 // 方法