fix: 首页日历功能优化。
This commit is contained in:
tianyongbao
@@ -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, // 允许编辑表格
|
||||
droppable: true,
|
||||
editable: false, // 允许编辑表格
|
||||
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,
|
||||
eventResizableFromStart: true,
|
||||
eventDurationEditable: false,
|
||||
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user