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

This commit is contained in:
tianyongbao
2024-08-02 15:47:55 +08:00
parent 34425c8273
commit d40824143d
9 changed files with 405 additions and 6 deletions

67
package-lock.json generated
View File

@@ -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",

View File

@@ -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",

View File

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

View File

@@ -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",

View File

@@ -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>

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@@ -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"