394 lines
12 KiB
Vue
394 lines
12 KiB
Vue
<template>
|
||
<view class="dateC">
|
||
<view class="yearMonthC flex">
|
||
<view class="btn" @click="clickPreMonth()">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/pre.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="yearMonth flex1">
|
||
<picker mode="date" fields="month" @change="monthChange">
|
||
<view style="display: flex; align-items: center; justify-content: center;">
|
||
<!-- <image style="width: 26rpx; height: 26rpx; margin-right: 10rpx;"
|
||
src="/pagesStock/static/icon/all-icon-2.png" mode="widthFix"></image> -->
|
||
<view style="color: #2B2B2B; font-size: 32rpx; font-weight: bold;">{{selectMonth}}</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="btn" @click="clickNextMonth()">
|
||
<image class="icon" src="/static/icon/home/conceptCenter/next.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 17rpx; margin: 20rpx 0;">
|
||
<view
|
||
style="display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #292621; font-weight: 500;"
|
||
v-for="(item,index) in weekList" :key="index">{{item}}</view>
|
||
</view>
|
||
<view class="monthDateList" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 17rpx;">
|
||
<view class="item" v-for="(item,index) in monthDateList[selectMonthIndex]" :key="index"
|
||
@click="clickSelectDate(item)">
|
||
<block v-if="item.date==selectDateStr">
|
||
<view
|
||
:class="'date select up'">
|
||
{{item.day}}
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<block v-if="!item.isCurrentMonth">
|
||
<view class="date notCurrentMonth">{{item.day}}</view>
|
||
</block>
|
||
<block v-else>
|
||
<view
|
||
:class="'date up'">
|
||
<view>
|
||
{{item.day}}
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "LCCalendar",
|
||
data() {
|
||
return {
|
||
weekList: ['日', '一', '二', '三', '四', '五', '六'],
|
||
monthDateList: [],
|
||
selectMonthIndex: 0, //选中月份下标
|
||
selectMonth: '', //选中年月
|
||
selectDateStr: '', //选中日期
|
||
startDateStr: '', //开始日期
|
||
endDateStr: '', //结束日期
|
||
};
|
||
},
|
||
created() {
|
||
let currentDate = new Date();
|
||
// 获取当前年份
|
||
let currentYear = currentDate.getFullYear();
|
||
let currentMonth = currentDate.getMonth() + 1;
|
||
let currentDay = currentDate.getDate();
|
||
this.selectMonthIndex = 20 * 12 + currentMonth - 1
|
||
this.selectMonth = currentYear + '年' + currentMonth + '月'
|
||
//开始日期默认为当前月份第一天
|
||
this.startDateStr = currentYear + '-' + (currentMonth > 9 ? currentMonth : ('0' + currentMonth)) + '-' + '01'
|
||
//结束日期默认为当前日期
|
||
this.endDateStr = this.selectDateStr = currentYear + '-' + (currentMonth > 9 ? currentMonth : ('0' +
|
||
currentMonth)) + '-' + (currentDay > 9 ? currentDay : ('0' + currentDay))
|
||
// this.getYesterdayDateData()
|
||
this.generateMonthDateListData()
|
||
// 初始化时就派发一次当前日期事件
|
||
this.$emit('date-change', this.selectDateStr)
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取当前时间前一天的数据
|
||
*/
|
||
getYesterdayDateData() {
|
||
let currentDate = new Date();
|
||
let selectDate = new Date(currentDate)
|
||
selectDate.setDate(selectDate.getDate() - 1)
|
||
let selectYear = selectDate.getFullYear();
|
||
let selectMonth = selectDate.getMonth() + 1;
|
||
let selectDay = selectDate.getDate();
|
||
this.selectDateStr = selectYear + '-' + (selectMonth > 9 ? selectMonth : ('0' + selectMonth)) + '-' + (
|
||
selectDay > 9 ? selectDay : ('0' + selectDay))
|
||
// 派发日期变更事件
|
||
this.$emit('date-change', this.selectDateStr)
|
||
},
|
||
/**
|
||
* 生成日期数组
|
||
*/
|
||
generateMonthDateListData() {
|
||
let currentDate = new Date();
|
||
// 获取当前年份
|
||
let currentYear = currentDate.getFullYear();
|
||
let currentMonth = currentDate.getMonth() + 1;
|
||
let currentDay = currentDate.getDate();
|
||
let monthDateList = []
|
||
for (var i = currentYear - 20; i < currentYear + 20; i++) {
|
||
for (var j = 0; j < 12; j++) {
|
||
let date = new Date(i, j + 1, 0)
|
||
let firstDayOfMonth = new Date(i, j + 1, 0);
|
||
firstDayOfMonth.setDate(1);
|
||
//获取当前月天数
|
||
let currentMonthDay = date.getDate()
|
||
let firstDayWeek = firstDayOfMonth.getDay() + 1
|
||
let daysOfMonth = []
|
||
for (var k = 1; k <= currentMonthDay; k++) {
|
||
let newDate = new Date(i, j + 1, 0)
|
||
newDate.setDate(k); // 设置日期为当前月的相应日期
|
||
let newMonth = newDate.getMonth() + 1
|
||
let newDay = newDate.getDate()
|
||
let time = newDate.getTime()
|
||
let date = i + '-' + (newMonth > 9 ? newMonth : ('0' + newMonth)) + '-' + (newDay > 9 ?
|
||
newDay : ('0' + newDay))
|
||
daysOfMonth.push({
|
||
date: date,
|
||
year: i,
|
||
month: newMonth,
|
||
day: newDay,
|
||
isToday: (i == currentYear && newMonth == currentMonth && newDay == currentDay) ?
|
||
true : false,
|
||
isCurrentMonth: true,
|
||
isLastDay: newDay == currentMonthDay ? true : false,
|
||
timestamp: time
|
||
});
|
||
}
|
||
for (var k = 0; k < firstDayWeek - 1; k++) {
|
||
//获取上月天数
|
||
let year = i
|
||
let month = j
|
||
if (j < 1) {
|
||
year = i - 1
|
||
month = 12
|
||
}
|
||
let lastMonthDay = new Date(year, month, 0).getDate()
|
||
//获取上月日期
|
||
let newDate = new Date(year, month - 1, lastMonthDay - k)
|
||
let newMonth = newDate.getMonth() + 1
|
||
let newDay = newDate.getDate()
|
||
let time = newDate.getTime()
|
||
let date = year + '-' + (newMonth > 9 ? newMonth : ('0' + newMonth)) + '-' + (newDay > 9 ?
|
||
newDay : ('0' + newDay))
|
||
daysOfMonth.unshift({
|
||
date: date,
|
||
year: year,
|
||
month: newMonth,
|
||
day: newDay,
|
||
isToday: false,
|
||
isCurrentMonth: false,
|
||
isLastDay: false,
|
||
timestamp: time
|
||
});
|
||
}
|
||
// 下一个月的第一天
|
||
let nextMonthFirstDay = new Date(i, j + 1, 1);
|
||
// 然后减去一天就是当前月的最后一天
|
||
let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
|
||
let lastDayWeek = lastDayOfMonth.getDay() + 1; // 返回0（星期天）到6（星期六）之
|
||
for (var k = 1; k < 8 - lastDayWeek; k++) {
|
||
let year = i
|
||
let month = j
|
||
if (month > 11) {
|
||
month = 0
|
||
year++
|
||
}
|
||
//获取下月日期
|
||
let newDate = new Date(year, month + 1, k)
|
||
let newMonth = newDate.getMonth() + 1
|
||
let newDay = newDate.getDate()
|
||
let time = newDate.getTime()
|
||
let date = year + '-' + (newMonth > 9 ? newMonth : ('0' + newMonth)) + '-' + (newDay > 9 ?
|
||
newDay : ('0' + newDay))
|
||
daysOfMonth.push({
|
||
date: date,
|
||
year: year,
|
||
month: newMonth,
|
||
day: newDay,
|
||
isToday: false,
|
||
isCurrentMonth: false,
|
||
isLastDay: false,
|
||
timestamp: time
|
||
});
|
||
}
|
||
monthDateList.push(daysOfMonth)
|
||
}
|
||
}
|
||
this.monthDateList = monthDateList
|
||
},
|
||
/**
|
||
* 点击上个月
|
||
*/
|
||
clickPreMonth() {
|
||
if (this.selectMonthIndex > 0) {
|
||
this.selectMonthIndex--
|
||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||
let year = ''
|
||
let month = ''
|
||
for (let item of monthList) {
|
||
if (item.isCurrentMonth) {
|
||
year = item.year
|
||
month = item.month
|
||
break
|
||
}
|
||
}
|
||
let lastDay = ''
|
||
for (let item of monthList) {
|
||
if (item.isLastDay) {
|
||
lastDay = item.day
|
||
break
|
||
}
|
||
}
|
||
this.selectMonth = year + '年' + month + '月'
|
||
this.startDateStr = year + '-' + (month > 9 ? month : ('0' + month)) + '-' + '01'
|
||
this.endDateStr = year + '-' + (month > 9 ? month : ('0' + month)) + '-' + lastDay
|
||
|
||
console.log('点击上个月');
|
||
}
|
||
},
|
||
/**
|
||
* 点击下个月
|
||
*/
|
||
clickNextMonth() {
|
||
if (this.selectMonthIndex < this.monthDateList.length - 1) {
|
||
this.selectMonthIndex++
|
||
let monthList = this.monthDateList[this.selectMonthIndex]
|
||
let year = ''
|
||
let month = ''
|
||
for (let item of monthList) {
|
||
if (item.isCurrentMonth) {
|
||
year = item.year
|
||
month = item.month
|
||
break
|
||
}
|
||
}
|
||
let lastDay = ''
|
||
for (let item of monthList) {
|
||
if (item.isLastDay) {
|
||
lastDay = item.day
|
||
break
|
||
}
|
||
}
|
||
this.selectMonth = year + '年' + month + '月'
|
||
this.startDateStr = year + '-' + (month > 9 ? month : ('0' + month)) + '-' + '01'
|
||
this.endDateStr = year + '-' + (month > 9 ? month : ('0' + month)) + '-' + lastDay
|
||
console.log('点击下个月');
|
||
}
|
||
},
|
||
monthChange(e) {
|
||
let currentDate = new Date();
|
||
//当前年份
|
||
let currentYear = currentDate.getFullYear()
|
||
//选中年月
|
||
let yearMonth = e.detail.value
|
||
let selectYear = parseInt(yearMonth.split('-')[0])
|
||
let selectMonth = parseInt(yearMonth.split('-')[1])
|
||
this.selectMonthIndex = (selectYear - (currentYear - 20)) * 12 + selectMonth - 1
|
||
this.selectMonth = selectYear + '年' + selectMonth + '月'
|
||
this.startDateStr = selectYear + '-' + (selectMonth > 9 ? selectMonth : ('0' + selectMonth)) + '-' + '01'
|
||
let lastDayOfMonth = new Date(selectYear, selectMonth, 0);
|
||
this.endDateStr = selectYear + '-' + (selectMonth > 9 ? selectMonth : ('0' + selectMonth)) + '-' +
|
||
lastDayOfMonth.getDate()
|
||
console.log('月份变更');
|
||
},
|
||
/**
|
||
* 点击选择开始日期和结束日期
|
||
* @param {Object} item
|
||
*/
|
||
clickSelectDate(item) {
|
||
if (!item.isCurrentMonth) return
|
||
if (this.selectDateStr != item.date) {
|
||
this.selectDateStr = item.date
|
||
this.chgStockData = item
|
||
console.log('点击某天');
|
||
this.$emit('date-change', this.selectDateStr)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.dateC {
|
||
background-color: white;
|
||
// box-shadow: 0 5rpx 10rpx 0 rgba(127, 127, 127, 0.1);
|
||
box-sizing: border-box;
|
||
|
||
.yearMonthC {
|
||
background-color: #F7F7F7;
|
||
height: 70rpx;
|
||
border-radius: 35rpx;
|
||
|
||
.btn {
|
||
padding: 0 32rpx;
|
||
|
||
.icon {
|
||
width: 13rpx;
|
||
height: auto;
|
||
}
|
||
|
||
}
|
||
|
||
.yearMonth {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #070707;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.weekList {
|
||
.item {
|
||
line-height: 72rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: #A7A7A7;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.monthDateList {
|
||
.item {
|
||
height: 72rpx;
|
||
.date {
|
||
background-color: #f8f8f8;
|
||
padding: 10rpx 0;
|
||
border-radius: 10rpx;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #2A2A2A;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
|
||
.chg {
|
||
font-size: 18rpx;
|
||
}
|
||
|
||
.chg.up {
|
||
color: #EC3440;
|
||
}
|
||
|
||
.chg.down {
|
||
color: #38A169;
|
||
}
|
||
}
|
||
|
||
.date.up {
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
.date.down {
|
||
background-color: #CEF1DE;
|
||
}
|
||
|
||
.date.select.up {
|
||
background-color: #F2C367;
|
||
color: white;
|
||
|
||
.chg {
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.date.select.down {
|
||
background-color: #38A169;
|
||
color: white;
|
||
|
||
.chg {
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.date.notCurrentMonth {
|
||
background-color: #FCFCFC;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |