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

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",
-        "selectedIconPath": "static/images/tabbar/home_.png",
-        "text": "首页"
+        "iconPath": "static/images/tabbar/assets.png",
+        "selectedIconPath": "static/images/tabbar/assets_.png",
+        "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'
     });
   })
 }