fix: 手机端新增首页日历功能。

package-lock.json

@@ -22,6 +22,12 @@
         "@dcloudio/uni-mp-weixin": "3.0.0-4000820240401001",
         "@dcloudio/uni-mp-xhs": "3.0.0-4000820240401001",
         "@dcloudio/uni-quickapp-webview": "3.0.0-4000820240401001",
+        "@fullcalendar/core": "^6.1.15",
+        "@fullcalendar/daygrid": "^6.1.15",
+        "@fullcalendar/interaction": "^6.1.15",
+        "@fullcalendar/list": "^6.1.15",
+        "@fullcalendar/timegrid": "^6.1.15",
+        "@fullcalendar/vue3": "^6.1.15",
         "@jridgewell/sourcemap-codec": "^1.4.15",
         "@qiun/wx-ucharts": "2.5.0-20230101",
         "@ttou/uview-typings": "^2.0.5",
@@ -2868,6 +2874,58 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.15",
+      "resolved": "http://npm.ezbim.cn:3038/@fullcalendar/core/-/core-6.1.15.tgz",
+      "integrity": "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.15",
+      "resolved": "http://npm.ezbim.cn:3038/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz",
+      "integrity": "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.15",
+      "resolved": "http://npm.ezbim.cn:3038/@fullcalendar/interaction/-/interaction-6.1.15.tgz",
+      "integrity": "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/list": {
+      "version": "6.1.15",
+      "resolved": "http://npm.ezbim.cn:3038/@fullcalendar/list/-/list-6.1.15.tgz",
+      "integrity": "sha512-U1bce04tYDwkFnuVImJSy2XalYIIQr6YusOWRPM/5ivHcJh67Gm8CIMSWpi3KdRSNKFkqBxLPkfZGBMaOcJYug==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/timegrid": {
+      "version": "6.1.15",
+      "resolved": "http://npm.ezbim.cn:3038/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz",
+      "integrity": "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/vue3": {
+      "version": "6.1.15",
+      "resolved": "http://npm.ezbim.cn:3038/@fullcalendar/vue3/-/vue3-6.1.15.tgz",
+      "integrity": "sha512-ctfTICGrNEIj7gmLHQcUYe0WzDTSW5Vd9hyOnVChxPU75AZU9WqdDMkHwJYnfNxNhT6QQuiMHq/qsRRd5zQwOw==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15",
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/@intlify/core-base": {
       "version": "9.1.9",
       "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.1.9.tgz",
@@ -10787,6 +10845,15 @@
       "resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "http://npm.ezbim.cn:3038/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "http://npm.ezbim.cn:3038/pretty-format/-/pretty-format-27.5.1.tgz",

package.json

@@ -55,6 +55,12 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-4000820240401001",
     "@dcloudio/uni-mp-xhs": "3.0.0-4000820240401001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4000820240401001",
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/list": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
+    "@fullcalendar/vue3": "^6.1.15",
     "@jridgewell/sourcemap-codec": "^1.4.15",
     "@qiun/wx-ucharts": "2.5.0-20230101",
     "@ttou/uview-typings": "^2.0.5",

src/api/invest/accountAnalysis.js

@@ -53,3 +53,13 @@ export function getCreditReportInfo(query) {
     params: query
   })
 }
+
+
+// 首页--日历展示事件
+export function getAccountCalendarInfo(query) {
+  return request({
+    url: '/invest/analysis/getAccountCalendarInfo',
+    method: 'get',
+    params: query
+  })
+}

src/pages.json

@@ -17,10 +17,16 @@
         "navigationBarTitleText": "登录"
       }
     },
+    {
+      "path": "pages/calendar/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    },
     {
       "path": "pages/index",
       "style": {
-        "navigationBarTitleText": "智聪科技记账平台",
+        "navigationBarTitleText": "资产总览",
         "navigationStyle": "custom"
       }
     },
@@ -30,6 +36,7 @@
         "navigationBarTitleText": "工作台"
       }
     },
+    
     {
       "path": "pages/statistic/index",
       "style": {
@@ -795,11 +802,18 @@
     "borderStyle": "white",
     "backgroundColor": "#ffffff",
     "list": [
+     
+      {
+        "pagePath": "pages/calendar/index",
+        "iconPath": "static/images/tabbar/work.png",
+        "selectedIconPath": "static/images/tabbar/work_.png",
+        "text": "首页"
+      },
       {
         "pagePath": "pages/index",
-        "iconPath": "static/images/tabbar/home.png",
+        "iconPath": "static/images/tabbar/assets.png",
-        "selectedIconPath": "static/images/tabbar/home_.png",
+        "selectedIconPath": "static/images/tabbar/assets_.png",
-        "text": "首页"
+        "text": "资产总览"
       },
       {
         "pagePath": "pages/work/index",

src/pages/calendar/index.vue

@@ -0,0 +1,263 @@
+<template>
+<div class="app-container">
+  <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      <view class="search-view">
+        <u--input v-model="calendarTitle" border="false" readonly class="search-input"
+          suffixIcon="calendar" suffixIconStyle="color: #909399">
+        </u--input>
+          <u-icon name="arrow-left" color="#666666" size="25" label="上个月"
+          labelPos="right" labelSize="25rpx" labelColor="#666666" @click="getPrev()"></u-icon>
+          <u-icon name="arrow-right" color="#666666" size="25" style="margin-left:15px" label="下个月"
+          labelPos="left" labelSize="25rpx" labelColor="#666666" @click="getNext()"></u-icon>
+      </view>
+    </u-sticky>
+    <!-- 月视图和周视图显示，列视图显示表格形式 -->
+    <div v-show="type !== '3'" ref="fullcalendar" class="card" />
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
+import { Calendar } from '@fullcalendar/core'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import listPlugin from '@fullcalendar/list'
+import interactionPlugin from '@fullcalendar/interaction'
+import dayjs from 'dayjs'
+import { getAccountCalendarInfo } from '@/api/invest/accountAnalysis.js'
+export default {
+  name: 'PlanManagement',
+  components: {},
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const state = reactive({
+      calendarTitle: new Date().getFullYear() + '年' + Number(new Date().getMonth() + 1) + '月', // 日历头部显示文字
+      dialogVisiable: false,
+      loading: false,
+      type: '1',
+      dialogType: '',
+      detailInfo: {},
+      Tcalendar: null,
+      drawerVisiable: false,
+      drawerType: '',
+      fullcalendar: ref(),
+      nowDate: new Date(),
+      infoList: [] // 日历显示的列信息
+    })
+    onMounted(() => {
+      initCalendar()
+      getCalendarList()
+    })
+    const initCalendar = () => {
+      state.Tcalendar = new Calendar(state.fullcalendar, {
+        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+        initialView: 'dayGridMonth',
+        aspectRatio: 0.9,
+        locale: 'zh-cn',
+        handleWindowResize: true,
+        editable: true, // 允许编辑表格
+        droppable: true,
+        eventDisplay: 'block',
+        // height: 'auto',
+        // 限制事件最大数量
+        dayMaxEvents: 0,
+        // 事件数量超出时更多显示链接汉化
+        moreLinkContent: morLinkFunction,
+        // 显示事件开始时间
+        displayEventTime: false,
+        // 显示事件结束时间
+        displayEventEnd: false,
+        // 关闭全天区域显示
+        allDaySlot: true,
+        // 开始时间段
+        slotMinTime: '00:00:00',
+        // 结束时间段
+        slotMaxTime: '00:00:00',
+        eventOrder: 'type,color,start',
+        eventDurationEditable: true,
+        eventResizableFromStart: true,
+        selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
+        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
+        unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
+        unselectCancel: '.el-drawer',
+        // dayMaxEvents: true,
+        // eventLimit: true,
+        headerToolbar: false,
+        buttonText: {
+          today: '回到今天',
+          month: '月',
+          week: '周',
+          list: '列',
+          day: '日'
+        },
+        allDayText: '全天',
+        events: state.infoList,
+        eventClassNames: function (arg) {
+          // 添加自定义class
+          return [arg.event.extendedProps.class]
+        },
+        eventContent: function (arg) {
+          const italicEl = document.createElement('div')
+          if (arg.event.extendedProps.startDateMinute && state.type === '1') {
+            const childEl = document.createElement('span')
+            childEl.innerHTML = arg.event.extendedProps.startDateMinute
+            italicEl.append(childEl)
+          }
+          italicEl.append(arg.event.title)
+          italicEl.setAttribute('class', `plan_title ${arg.event.extendedProps.class}`)
+          return { domNodes: [italicEl] }
+        }
+        // select: function (info) {}
+      })
+      state.Tcalendar.render()
+    }
+    // 上一月、周、日
+    const getPrev = () => {
+      state.Tcalendar.prev()
+      state.calendarTitle = state.Tcalendar.view.title
+      getCalendarList()
+    }
+    // 下一月、周、日
+    const getNext = () => {
+      state.Tcalendar.next()
+      state.calendarTitle = state.Tcalendar.view.title
+      getCalendarList()
+    }
+    // 回到今天
+    const morLinkFunction = (jsEvent) => {
+      return jsEvent.shortText;
+    }
+    const getCalendarList = () => {
+      const currentEnd = dayjs(state.Tcalendar.view.currentEnd).add(-1, 'day')
+      const params = {
+        startTime: dayjs(state.Tcalendar.view.currentStart).format('YYYY-MM-DD'),
+        endTime: dayjs(currentEnd).format('YYYY-MM-DD'),
+        type: state.type
+      }
+      state.loading = true
+      state.Tcalendar.getEventSources().forEach((item) => {
+        item.remove()
+      })
+
+      getAccountCalendarInfo(params).then((res) => {
+        state.loading = false
+        if (res) {
+          state.infoList = res.data
+          // state.infoList.forEach(item => {
+  
+          // })
+          state.Tcalendar.addEventSource(state.infoList)
+        }
+      })
+    }
+    return {
+      ...toRefs(state),
+      getPrev,
+      getNext,
+      morLinkFunction,
+      getCalendarList
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.calendarHeader {
+  margin: 0px 0px 0px 0px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  .header_select {
+    margin: 0 0 0 10px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+h1 {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 32px;
+  margin: 0 0 0 0;
+  text-align: left;
+  vertical-align: middle;
+  display: inline-block;
+  color: #303133;
+}
+
+.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;
+    }
+  }
+}
+
+
+</style>

src/pages/login.vue

@@ -108,7 +108,7 @@ function loginSuccess(result) {
   // 设置用户信息
   userStore.getInfo().then(res => {
     uni.switchTab({
-      url: '/pages/index'
+      url: '/pages/calendar/index'
     });
   })
 }

yarn.lock

@@ -1453,6 +1453,40 @@
   "resolved" "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz"
   "version" "0.17.19"
 
+"@fullcalendar/core@^6.1.15", "@fullcalendar/core@~6.1.15":
+  "integrity" "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q=="
+  "resolved" "http://npm.ezbim.cn:3038/@fullcalendar/core/-/core-6.1.15.tgz"
+  "version" "6.1.15"
+  dependencies:
+    "preact" "~10.12.1"
+
+"@fullcalendar/daygrid@^6.1.15", "@fullcalendar/daygrid@~6.1.15":
+  "integrity" "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA=="
+  "resolved" "http://npm.ezbim.cn:3038/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz"
+  "version" "6.1.15"
+
+"@fullcalendar/interaction@^6.1.15":
+  "integrity" "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ=="
+  "resolved" "http://npm.ezbim.cn:3038/@fullcalendar/interaction/-/interaction-6.1.15.tgz"
+  "version" "6.1.15"
+
+"@fullcalendar/list@^6.1.15":
+  "integrity" "sha512-U1bce04tYDwkFnuVImJSy2XalYIIQr6YusOWRPM/5ivHcJh67Gm8CIMSWpi3KdRSNKFkqBxLPkfZGBMaOcJYug=="
+  "resolved" "http://npm.ezbim.cn:3038/@fullcalendar/list/-/list-6.1.15.tgz"
+  "version" "6.1.15"
+
+"@fullcalendar/timegrid@^6.1.15":
+  "integrity" "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw=="
+  "resolved" "http://npm.ezbim.cn:3038/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz"
+  "version" "6.1.15"
+  dependencies:
+    "@fullcalendar/daygrid" "~6.1.15"
+
+"@fullcalendar/vue3@^6.1.15":
+  "integrity" "sha512-ctfTICGrNEIj7gmLHQcUYe0WzDTSW5Vd9hyOnVChxPU75AZU9WqdDMkHwJYnfNxNhT6QQuiMHq/qsRRd5zQwOw=="
+  "resolved" "http://npm.ezbim.cn:3038/@fullcalendar/vue3/-/vue3-6.1.15.tgz"
+  "version" "6.1.15"
+
 "@intlify/core-base@9.1.9":
   "integrity" "sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw=="
   "resolved" "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.1.9.tgz"
@@ -5730,6 +5764,11 @@
     "picocolors" "^1.0.0"
     "source-map-js" "^1.2.0"
 
+"preact@~10.12.1":
+  "integrity" "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg=="
+  "resolved" "http://npm.ezbim.cn:3038/preact/-/preact-10.12.1.tgz"
+  "version" "10.12.1"
+
 "pretty-format@^27.5.1":
   "integrity" "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="
   "resolved" "http://npm.ezbim.cn:3038/pretty-format/-/pretty-format-27.5.1.tgz"
@@ -6784,7 +6823,7 @@
     "@vue/language-core" "1.8.27"
     "semver" "^7.5.4"
 
-"vue@^2.0.0 || >=3.0.0", "vue@^2.6.14 || ^3.2.0", "vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.25", "vue@3.4.23":
+"vue@^2.0.0 || >=3.0.0", "vue@^2.6.14 || ^3.2.0", "vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.11", "vue@^3.2.0", "vue@^3.2.25", "vue@3.4.23":
   "integrity" "sha512-X1y6yyGJ28LMUBJ0k/qIeKHstGd+BlWQEOT40x3auJFTmpIhpbKLgN7EFsqalnJXq1Km5ybDEsp6BhuWKciUDg=="
   "resolved" "http://npm.ezbim.cn:3038/vue/-/vue-3.4.23.tgz"
   "version" "3.4.23"