需引入-moment
和lunar-calendar
npm install moment --save
<template>
<view class="scheduling">
<status-bar title="我的排班"></status-bar>
<view class="topWeek">
<view class="weekBtn row-me column-center margin-bottom30">
<view class="btn" @click="weekClick(-7)">上一周</view>
<view class="font-size30 color202233 margin-left20 margin-right20">
{
{
dayList[0].date.substring(0,4)}}年{
{
dayList[0].date.substring(5,7)}}月
</view>
<view class="btn" @click="weekClick(+7)">下一周</view>
</view>
<view class="row-me row-center wattTxt">
<view class="">一</view>
<view class="">二</view>
<view class="">三</view>
<view class="">四</view>
<view class="">五</view>
<view class="">六</view>
<view class="">日</view>
</view>
<!-- 7天日期数据 -->
<view class="row-me row-center space-between dayTxt">
<view class="box column-me column-center align-center" :class="{'boxBg': item.checked == true}"
v-for="(item,index) in dayList" :key="index" @click="dayClick(item,index)">
<view class="font-bold font-size30 color202233 margin-bottom8">{
{
item.date.substring(8,10)}}</view>
<view class="color6D7984 font-size24">{
{
item.dates}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import lunarCalendar from 'lunar-calendar'
import moment from "moment";
export default {
components: {
},
data() {
return {
description: '我的排班',
nowDate: moment().startOf('week').add(1, 'day'),
dayList: [], //7天的数据
dateDay: '', //当前几号
currentYear: '', // 当前年月日
currentMonth: '', // 当前年月日
currentDay: '', // 当前年月日
// nowDate: moment().startOf('week')
}
},
// 侦听器
watch: {
},
// 计算属性
computed: {
},
//组件创建
created() {
},
// 页面加载
onLoad(e) {
},
// 页面显示
onShow() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate(); //得到日期
month = month >= 9 ? month : '0' + month;
day = day >= 9 ? day : '0' + day;
this.dateDay = year + '-' + month + '-' + day; //当前年月日
this.currentYear = year; // 当前年
this.currentMonth = month; // 当前月
this.currentDay = day; // 当前日
console.log(this.dateDay, '111111');
this.getList(this.nowDate);
},
// 方法
methods: {
tabClick(index) {
this.referIndex = index;
},
changeImg(id) {
if (this.arrList1.includes(id)) {
//includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
//filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
this.arrList1 = this.arrList1.filter(function(ele) {
return ele != id;
});
} else {
this.arrList1.push(id);
}
// this.form.time1 = '';
// this.form.time1 = this.arrList1.join(",");
console.log(this.arrList1, 'this.arrList1');
},
// 点击上一周,下一周
weekClick(num) {
this.nowDate = this.nowDate.add(num, 'd')
this.getList(this.nowDate)
},
getList(firstDayOfWeek) {
const days = [];
for (let i = 0; i < 7; i++) {
let date = moment(firstDayOfWeek).add(i, 'day').format('YYYY-MM-DD')
days.push({
date: date,
dates: lunarCalendar.solarToLunar(date.substring(0, 4), date.substring(5, 7), date
.substring(8,
10)).lunarDayName
});
}
for (let item of days) {
console.log(item, '222222222')
item.checked = false;
if (this.dateDay == item.date) {
item.checked = true;
}
}
this.dayList = days;
console.log(this.dayList, '159最后的时间数组')
},
// 点击清空按钮
emptyClick() {
uni.showModal({
title: '提示',
content: '是否要清空未预约的数据？',
cancelColor: '#353535',
confirmColor: '#215AA0',
cancelText: '取消',
// showCancel: false,
confirmText: '确认',
success: function(res) {
if (res.confirm) {
} else if (res.cancel) {
}
}
})
},
// 点击头部日期
dayClick(item1, index) {
for (let item of this.dayList) {
item.checked = false;
this.dayList[index].checked = true;
}
},
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
},
// 页面上拉触底事件的处理函数
onReachBottom() {
},
}
</script>
<style lang="scss" scoped>
.scheduling {
height: 100vh;
overflow: auto;
background-color: #F6F7F9;
.topWeek {
background-color: #fff;
padding: 30rpx 0;
.weekBtn {
.btn {
width: 111rpx;
height: 40rpx;
line-height: 40rpx;
background: rgba(33, 90, 160, 0.1);
border-radius: 20rpx;
text-align: center;
font-size: 24rpx;
color: #215AA0;
}
}
.wattTxt {
margin: 0 30rpx 10rpx 30rpx;
view {
flex: 1;
text-align: center;
font-size: 24rpx;
color: #202233;
}
}
.dayTxt {
margin: 0 30rpx 10rpx 30rpx;
.box {
// flex: 1;
width: 90rpx;
height: 100rpx;
background: #F6F7F9;
}
.boxBg {
background: #215AA0 !important;
view {
color: #FFFFFF !important;
}
}
}
}
}
</style>