fix: 首页日历功能优化。

src/pages/calendar/index.vue

@@ -13,6 +13,18 @@
     </u-sticky>
     <!-- 月视图和周视图显示，列视图显示表格形式 -->
     <div v-show="type !== '3'" ref="fullcalendar" class="card" />
+    <u-list height="auto">
+        <u-list-item v-for="(item, index) in  currentInfoList" :key="index">
+          <view class="list-item">
+            <view class="item-header" @click="enterDetails(item)">
+            <u--text suffixIcon="arrow-right" lines="1" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
+              :text="item.start+' '+item.title" size="25rpx" color="#333333" :bold="true"></u--text>
+          </view>
+          </view>
+        </u-list-item>
+        <view>
+        </view>
+      </u-list>
   </div>
 </template>
 
@@ -42,7 +54,8 @@ export default {
       drawerType: '',
       fullcalendar: ref(),
       nowDate: new Date(),
-      infoList: [] // 日历显示的列信息
+      infoList: [], // 日历显示的列信息
+      currentInfoList: [] // 当前
     })
     onMounted(() => {
       initCalendar()
@@ -52,15 +65,16 @@ export default {
       state.Tcalendar = new Calendar(state.fullcalendar, {
         plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
         initialView: 'dayGridMonth',
-        aspectRatio: 0.9,
+        aspectRatio: 1,
         locale: 'zh-cn',
         handleWindowResize: true,
-        editable: true, // 允许编辑表格
+        editable: false, // 允许编辑表格
-        droppable: true,
+        droppable: false,
         eventDisplay: 'block',
         // height: 'auto',
         // 限制事件最大数量
         dayMaxEvents: 0,
+        eventLimit: false,
         // 事件数量超出时更多显示链接汉化
         moreLinkContent: morLinkFunction,
         // 显示事件开始时间
@@ -69,13 +83,16 @@ export default {
         displayEventEnd: false,
         // 关闭全天区域显示
         allDaySlot: true,
+        longPressDelay: 0,
+        selectLongPressDelay: 0,
         // 开始时间段
         slotMinTime: '00:00:00',
+      
         // 结束时间段
         slotMaxTime: '00:00:00',
         eventOrder: 'type,color,start',
-        eventDurationEditable: true,
+        eventDurationEditable: false,
-        eventResizableFromStart: true,
+        eventResizableFromStart: false,
         selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
         firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
         unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
@@ -111,6 +128,10 @@ export default {
       // 点击查看时触发
       handleClick(info)
     },
+    select: function (info) {
+      // 视图选择日期触发
+      handleSelectDate(info)
+    }
         // select: function (info) {}
       })
       state.Tcalendar.render()
@@ -147,13 +168,57 @@ export default {
         state.loading = false
         if (res) {
           state.infoList = res.data
-          // state.infoList.forEach(item => {
+          const today= dayjs(new Date()).format('YYYY-MM-DD')
-  
+          state.infoList.forEach(item => {
-          // })
+            if(today===item.start){
+              state.currentInfoList.push(item)
+            }
+          })
           state.Tcalendar.addEventSource(state.infoList)
         }
       })
     }
+
+    const enterDetails = (info) => {
+      const date = info.start
+  const type = info.type
+  const accountId = info.accountId
+  const billDatePeriod = info.billDatePeriod
+  //信用卡账单日
+  if (type === 1) {
+    const _id = accountId
+    uni.navigateTo({ url: `/pages/calendar/list?accountId=${_id}&billDatePeriod=${billDatePeriod}` })
+  }
+  //贷款已还
+  if (type === 4) {
+    const _id = accountId
+    const billDatePeriod = date+'~'+date
+    uni.navigateTo({ url: `/pages/calendar/list?accountId=${_id}&billDatePeriod=${billDatePeriod}&dealType=1&dealCategory=9` })
+  }
+  //日常支出
+  if (type === 5) {
+    const billDatePeriod =  date+'~'+date
+    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealType=2&dealCategory=1` })
+  }
+
+  //投资收益
+  if (type === 6) {
+    const billDatePeriod =  date+'~'+date
+    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealCategory=2` })
+  }
+  //POS机刷卡
+  if (type === 7) {
+    const billDatePeriod =  date+'~'+date
+    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealType=2&dealCategory=5` })
+  }
+
+  //工资收入
+  if (type === 8) {
+    const billDatePeriod =  date+'~'+date
+    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealCategory=11` })
+
+  }
+    }
     // 点击计划查看
 const handleClick = (info) => {
   const date = info.event.startStr
@@ -195,11 +260,22 @@ const handleClick = (info) => {
 
   }
 }
-
+// 拖拽触发
+const handleSelectDate = (info) => {
+          const selectDate= info.startStr
+          state.currentInfoList=[]
+          state.infoList.forEach(item => {
+            if(selectDate==item.start){
+              state.currentInfoList.push(item)
+            }
+          })
+}
 
     return {
       ...toRefs(state),
       getPrev,
+      handleSelectDate,
+      enterDetails,
       handleClick,
       getNext,
       morLinkFunction,
@@ -210,6 +286,178 @@ const handleClick = (info) => {
 </script>
 <style lang="scss" scoped>
 
+.app-container {
+  .header-con {
+    width: 100%;
+    height: 100px;
+    background-color: #ffffff;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .item {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      align-items: center;
+      margin: 5px;
+      .title {
+        margin-left: 5px;
+        color: rgb(133, 133, 148);
+        margin-bottom: 5px;
+        font-size: 14px;
+      }
+      .num {
+        margin-left: 5px;
+        font-weight: bold;
+        font-size: 14px;
+      }
+    }
+    img {
+      height: 30px;
+      width: 30px;
+    }
+  }
+  .header-title {
+    width: 100%;
+    height: 30px;
+    background-color: #ffffff;
+    margin-bottom: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+  }
+}
+  .btnAdd {
+        width: 146rpx;
+        height: 56rpx;
+        line-height: 56rpx;
+        border-radius: 8rpx;
+        display:float;
+        text-align: center;
+      }
+  
+  .search-view {
+    padding: 12rpx 32rpx;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  
+    .search-input {
+      background: #F5F5F5;
+      color: #333333;
+      margin-right: 36rpx;
+    }
+  
+    .filter-panel {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 96rpx;
+      background-color: rgba(0, 0, 0, 0.5);
+  
+      .filter-panel-content {
+        background-color: #ffff;
+        padding: 0 30rpx 30rpx;
+  
+        .filter-title {
+          color: #000000;
+          font-size: 30rpx;
+          font-weight: 500;
+          padding: 30rpx 0;
+        }
+  
+        .state-list {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-start;
+  
+          .state-item {
+            width: 210rpx;
+            height: 72rpx;
+            border: 1rpx solid rgba(0, 0, 0, 0.25);
+            border-radius: 72rpx;
+            text-align: center;
+            line-height: 72rpx;
+            margin: 0 20rpx 20rpx 0;
+            font-size: 28rpx;
+            color: #000000;
+          }
+  
+          .active {
+            background-color: rgba(222, 241, 255, 1);
+            border: 1rpx solid rgba(22, 119, 255, 1);
+          }
+        }
+      }
+  
+      .btn-box {
+        display: flex;
+        padding: 24rpx 30rpx;
+        background-color: #fff;
+        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      }
+    }
+  }
+  
+  .list-item {
+    margin: 5rpx;
+    padding: 5rpx;
+    background-color: #fff;
+  
+    .item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 5rpx;
+  
+    }
+  
+    .item-row {
+      padding: 0rpx;
+  
+      .row-label {
+        color: rgba(0, 0, 0, 0.55);
+      }
+  
+      .row-value {
+        color: rgba(0, 0, 0, 0.85)
+      }
+    }
+  
+    .operate {
+      display: flex;
+      justify-content: flex-end;
+  
+      .btn {
+        width: 146rpx;
+        height: 56rpx;
+        line-height: 56rpx;
+        border-radius: 8rpx;
+        margin-left: 5rpx;
+        text-align: center;
+      }
+  
+      .circulation {
+        background: rgba(0, 0, 0, 0.04);
+        margin-right: 24rpx;
+        color: rgba(0, 0, 0, 0.85);
+      }
+  
+      .filling {
+        background: #2681FF;
+        border-radius: 8rpx;
+        color: #FFFFFF;
+      }
+    }
+  }
+  </style>
+<style lang="scss" scoped>
+
 .calendarHeader {
   margin: 0px 0px 0px 0px;
   display: flex;

src/pages/calendar/list.vue

@@ -65,6 +65,10 @@
             <text class="row-label">交易类别：</text>
             <text class="row-value">{{ dictStr(item.dealCategory, dealCategoryList) }}</text>
           </view>
+          <view class="item-row" v-show="item.childCategory!=item.dealCategory">
+            <text class="row-label">交易子类别：</text>
+            <text class="row-value">{{ item.childCategoryName }}</text>
+          </view>
           <view class="item-row">
             <text class="row-label">备注：</text>
             <text class="row-value">{{ item.remark }}</text>