需求:显示日历,可前后点击,并且当月之后的不可点击,生成打卡海报页.当月显示已打卡和可补卡
图如下 :
封装成的组件,但是在组件内部操作
<div class="mainBoxcaldar">
<vuecaldar :textTop="['日','一', '二', '三', '四', '五', '六']"
:leavenum="leavenum"
:dateList="dateList"
v-on:changeMonth="changeDate"
:canvasposter="canvasposter"
:sundayStart="true"
:nextinit="nextinit"
@sendDay="sendDay"
ref="Calendar"
typeid="1">
</vuecaldar>
</div>
import vuecaldar from './vuecalendar.vue'
data(){
return{
leavenum: 0, //剩余数量
dateList: [], //当月打卡状态
}
},
components: {
[Popup.name]: Popup,
[PopupTitleBar.name]: PopupTitleBar,
[Button.name]: Button,
[Icon.name]: Icon,
[TabBar.name]: TabBar,
vuecaldar
},
created () {
this.scentry = getStorage('scentry')
this.ossurl = getStorage('ossurl', '')
this.getossurl = config.cdnurl
this.empno = getStorage('empno', {}).empno // 业务员工号
this.suserid = getStorage('u_s', {}).id // 用户的id
// 获取头像
this.head = getStorage('u_s').headimg //业务员头像
this.nickname = getStorage('empno').empname //业务员名字
this.userid = getStorage('u_s', {}).id // 用户的id
this.empnoCard = getStorage('empnoCard', {})
if (this.empnoCard.headimg) {
this.head = this.getossurl + this.empnoCard.headimg
} else {
this.head = getStorage('u_s').headimg
}
const nowTime = new Date() //获取时间
let noeTimeYear = nowTime.getFullYear()// 当前年
let noeTimemonth = nowTime.getMonth() + 1 //当前月
// 左右点击切换月份
if (noeTimemonth < 10) {
noeTimemonth = '0' + noeTimemonth
}
this.params = noeTimeYear + '-' + noeTimemonth
},
methods:{
// 切换月份 ,data日期
changeDate (data) {
const nowTime = new Date() //获取时间
let noeTimemonth = nowTime.getMonth() + 1
// 左右点击切换月份
if (noeTimemonth < 10) {
noeTimemonth = '0' + noeTimemonth
}
let date = data.split('/')
if (date[1] < 10) {
data = date[0] + '-0' + date[1]
} else {
data = date[0] + '-' + date[1]
}
let test = {
date: data
}
this.monthber = Date.parse(test) / 1000
},
async canvasposter (data) {
this.mess()
// 打卡按钮埋点
setSensors('ButtonClick', {
buttonName: '分享打卡海报',
pageName: '叮咚打卡页',
pageChannel: '叮咚打卡页',
pageChannel2: '叮咚打卡'
})
Toast.loading('生成中...')
// 隐藏按钮
document.getElementsByClassName('wh_left')[0].style.opacity = 0
document.getElementsByClassName('wh')[0].style.opacity = 0
// 获取海报图片
let res = await makeImg(document.getElementsByClassName('mainBoxcaldar')[0])
this.canvascaldar = res
this.isposterpop = true
if (this.canvascaldar) {
// this.$nextTick(() => {
const element = document.getElementById("posterbox");
setTimeout(() => {
makeImg(element)
.then(res => {
this.showposter = res
// 行为记录
let data = {
suserid: this.userid,
empno: this.empno,
otype: '03',
subOtype: '00',
btagcode: 'PG',
stagcode: 'dingdongdaka',
sno: 'dakahaibao',
osno: 'dakahaibao',
remark: '合成打卡日历分享海报'
}
insertActionCord(data).then((res) => { })
})
.finally(() => {
document.getElementsByClassName('wh_left')[0].style.opacity = 1
document.getElementsByClassName('wh')[0].style.opacity = 1
})
Toast.hide()
}, 500)
}
},
mess () {
calendarPosterInfo()
.then(res => {
this.posterheadimg = res.data.data.img //头像框
this.dkDay = res.data.data.dkDay //打卡天数
this.posterbg = res.data.data.poster //背景图
this.copywriting = res.data.data.copywriting //提示话语
})
},
nextinit () {
this.init()
},
init () {
// 查看当月打卡数据状态
getRecord({ date: this.params })
.then(res => {
// console.log(res)
if (res.data.code == 200) {
this.leavenum = res.data.data.num //本月剩余可用补卡次数
this.dateList = res.data.data.dateList //当月打卡情况
}
})
this.$forceUpdate()
},
sendDay (value) {
this.params = value
this.init()
},
}
在封装的组件直接操作
<template>
<div>
<section class="wh_container">
<div class="wh_content_all">
<div class="wh_top_changge">
<!-- 上一月 -->
<li @click="PreMonth(myDate,false)">
<img class="wh_left"
:src="getossurl + 'ddzsc/images/dkMedal/left.png'"
alt="">
</li>
<li class="wh_content_li">{{dateTop}}</li>
<!-- 分享 -->
<!-- <li @click="shareMonthhb" >
<img class="wh" :src="getossurl + 'ddzsc/images/dkMedal/share.png'" alt="">
</li> -->
<!-- 点击下一月 -->
<li @click="NextMonth(myDate,false)">
<img class="wh"
v-show="sharebtn"
:src="getossurl + 'ddzsc/images/dkMedal/share.png'"
alt="">
<img class="wh_right"
v-show="!sharebtn"
:src="getossurl + 'ddzsc/images/dkMedal/right.png'"
alt="">
</li>
</div>
<div class="wh_content">
<div class="wh_content_item"
v-for="tag in textTop">
<div class="wh_top_tag">{{tag}}</div>
</div>
</div>
<div class="wh_content">
<div class="wh_content_item"
v-for="(item,index) in list"
@click="clickDay(item,index)">
<div class="wh_item_date"
:style="{'color' : item.date == nowDay ? '#fff' : '','background' : item.date == nowDay ? '#EE9A37' : ''}"
:class="[
{ wh_isMark: item.isMark},
{wh_other_dayhide:item.otherMonth!=='nowMonth'},
{wh_want_dayhide:item.dayHide},
{wh_isToday:item.isToday},
{wh_chose_day:item.chooseDay},
{nodaka:item.type == '0'},
{yesdaka:item.type == '1' && item.date != nowDay },
{buka:item.type == '2' && item.date != nowDay},
setClass(item)]">{{item.id}}</div>
</div>
</div>
</div>
</section>
<!-- 补卡提示 -->
<md-popup v-model="isbukapop">
<md-icon @click="isbukapop = false"
name="close"
size="lg"
style="position: absolute;right: 5%;top: 9%;"></md-icon>
<div class="buka_popbox">
<!-- 标题 -->
<div class="buka_tit">补卡</div>
<div class="buka_readnull"
v-if="leavenum > 0">
是否确认消耗1次补卡次数
</div>
<div class="buka_read"
v-else>{{tip}}</div>
<!-- 内容 -->
<div class="buka_btnnull"
v-if="leavenum > 0">
<div class="daka_true"
@click="change_gobuka">确认打卡</div>
<div class="lemesee"
@click="isbukapop = false">我再想想</div>
</div>
<div class="buka_btn"
v-else
@click="gotofinish">
<img class="hasbuka_btn"
v-if="router != ''"
:src="getossurl + 'ddzsc/images/dkMedal/gofinsh.png'"
alt="">
</div>
</div>
</md-popup>
<!-- 日历中已经打卡海报 -->
<div v-if="isshowDKpop"
class="testbox">
<div class="marks"></div>
<div class="swiper">
<img class="candel"
:src="getossurl+'ddzsc/images/morpunchcard/4@2x.png' "
@click="candel"
alt="">
<swiper :options="swiperTab">
<swiper-slide class="swibox"
v-for="item in showpopimg"
:key="item.conthttp">
<img :src="getossurl+ item.conthttp"
v-if="item.conthttp"
class="borderr"
alt="">
</swiper-slide>
<!-- <swiper-slide class="swibox">
<img src="@/assets/images/newDK/hebeijing.png" alt="">
</swiper-slide> -->
</swiper>
<div v-if="showpopimglength>1"
class="bottext">滑动查看下一张</div>
</div>
<!-- <div class="bottext">滑动查看下一张</div> -->
</div>
</div>
</template>
<script>
import timeUtil from "./calendar";
import config from '@/config'
import {
getImg,
makeCard,
questInfo,
} from '@/api/abt/customerOperation/morpunchcard/index'
import { setSensors, } from '@/lib/util'
import { selectListkG } from '@/api/abt/unifiedinterface/index'
import { Toast } from 'mand-mobile'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
data () {
return {
myDate: [],
list: [],
historyChose: [],
dateTop: "",
sharebtn: false,
newnew: 0,
newmonth: 0,
getossurl: '',
nowDay: '',
isbukapop: false, //补卡提示弹窗
showpopimg: [{
conthttp: 'ddzs/KJ_Source/DDDK/2024-01-12/DDDK202401122125564751745799271959035906.png',
created: '2024-01-12 21:25:56',
dkType: 'night'
}], //已打卡海报弹窗
clicknowday: '', // 点击的年月日
thisToday: '', // 当天
router: '532156', //补卡任务地址 为空表示没有可做任务次数
tip: '', // 补卡弹窗提示语
isshowDKpop: false, //已打卡,
swiperTab: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20,
pagination: {
el: '.swiper-tab',
clickable: true
},
observer: true
},
showpopimglength: 0,
};
},
components: {
},
props: {
nextinit: {
type: Function,
},
leavenum: {
type: Number,
},
dateList: {
type: Array,
},
typeid: {
type: String,
},
markDate: {
type: Array,
default: () => []
},
markDateMore: {
type: Array,
default: () => []
},
textTop: {
type: Array,
default: () => ["一", "二", "三", "四", "五", "六", "日"]
},
sundayStart: {
type: Boolean,
default: () => false
},
agoDayHide: {
type: String,
default: `0`
},
futureDayHide: {
type: String,
default: `2554387200`
},
canvasposter: {
type: Function,
}
},
created () {
this.intStart();
this.myDate = new Date();
this.getossurl = config.cdnurl;
// 获取当天时间
let currentYear = this.myDate.getFullYear();
let year = this.myDate.getMonth() + 1
let day = this.myDate.getDate()
this.nowDay = currentYear + '/' + year + '/' + day
},
methods: {
candel () {
this.isshowDKpop = false
setSensors('AppAllClick', {
ClickName: '弹窗-关闭',
input_item: '弹窗',
pageName: '打卡海报弹窗页',
pageChannel: '叮咚首页',
pageChannel2: '叮咚打卡'
})
},
// 去完成按钮
gotofinish () {
if (this.router) {
// 判断接口返会的路由参数是否为空 携带该路由去跳转 this.router
// generalSkin/skinhome?flush=true
this.$router.push(this.router)
} else {
console.log('没有补卡次数');
}
},
// 确认打卡
change_gobuka () {
// 传点击的年月日
// const formattedDate = this.clicknowday.replace(/\//g, "-");
// console.log(this.clicknowday)
// return
makeCard({ date: this.clicknowday })
.then(res => {
if (res.data.code == 200) {
Toast({
content: '补卡成功',
icon: 'right',
duration: '1000'
})
this.isbukapop = false
}
})
.finally(() => {
this.nextinit()
})
},
intStart () {
timeUtil.sundayStart = this.sundayStart;
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
// 获取下一个月的日期对象
let nextMonthDate = timeUtil.getOtherMonth(currentDate, 'nextMonth')
if (currentYear === nextMonthDate.getFullYear() && (currentDate.getMonth() + 1) === (nextMonthDate.getMonth())) {
this.sharebtn = true
} else {
this.sharebtn = false
}
},
setClass (data) {
let obj = {};
obj[data.markClassName] = data.markClassName;
return obj;
},
clickDay: async function (item, index) {
this.clicknowday = item.date //保存当天日期
if (this.typeid == '1') {
// if (item.date == this.thisToday) return //点击当天
// 已打卡
if (item.type == '1' && item.sign == '1') {
getImg({ param: item.date })
.then(res => {
this.showpopimg = res.data.data
this.showpopimglength = this.showpopimg.length
setSensors('ButtonClick', {
buttonName: '点击-已打卡日期',
pageName: '打卡统计页',
pageChannel: '叮咚首页',
pageChannel2: '叮咚打卡'
})
setSensors('AppOtherPage', {
key_word: item.date + '打卡海报',
pageName: '打卡海报弹窗页',
pageChannel: '叮咚首页',
pageChannel2: '叮咚打卡',
input_item: '弹窗'
})
})
this.isshowDKpop = true
} else if (item.type == '2') {
// 今天
if (!item.isToday) {
// 有没有补卡机会
if (this.leavenum > 0) {
// 有次数//是否确认消耗1次补卡次数补卡
this.isbukapop = true
} else {
// 没次数
// 先查看跳转地址与回显内容
let res = await questInfo({ date: this.clicknowday })
this.tip = res.data.data.tip //提示语
res.data.data.router ? this.router = res.data.data.router : this.router = ''//跳转路由
this.isbukapop = true
}
}
} else {
// console.log('阿斯利康分到哪是');
}
} else {
if (item.otherMonth === "nowMonth" && !item.dayHide) {
this.getList(this.myDate, item.date);
}
}
},
ChoseMonth: function (date, isChosedDay = true) {
date = timeUtil.dateFormat(date);
this.myDate = new Date(date);
this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
if (isChosedDay) {
this.getList(this.myDate, date, isChosedDay);
} else {
this.getList(this.myDate);
}
},
PreMonth: function (date, isChosedDay = true) {
this.sharebtn = false
date = timeUtil.dateFormat(date);
this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
if (isChosedDay) {
this.getList(this.myDate, date, isChosedDay);
} else {
this.getList(this.myDate);
}
this.$emit('sendDay', this.sendDate)
},
shareMonthhb () {
console.log('生成海报');
},
NextMonth: function (date, isChosedDay = true) {
date = timeUtil.dateFormat(date);
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();
// 获取下一个月的日期对象
let nextMonthDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
// 隐藏下一月按钮 变成分享
if (currentYear === nextMonthDate.getFullYear() && nextMonthDate.getMonth() + 1 == currentMonth + 1) {
this.sharebtn = true
}
if (currentYear === nextMonthDate.getFullYear() && (this.myDate.getMonth() + 1) === (nextMonthDate.getMonth())) {
this.list.forEach(item => {
if (item.type == 2) {
item.type = '0'
}
})
this.$nextTick(() => {
this.canvasposter('分享')
let indx = this.list.findIndex(item => {
return item.date == this.thisToday;
})
this.list.forEach(item => {
if (item.otherMonth == "nowMonth") {
// 不这样写会丢失响应式
this.$set(item, 'type', '0') //1 已打卡 0 未打卡 2 可补卡
this.dateList.forEach((el, index) => {
if (index <= indx) {
this.dateList.forEach((el) => {
if (item.date == el.date) {
item.type = el.type
}
})
}
})
}
})
})
return; // 不执行下面的切换逻辑
}
// 更新当前日期为下一个月的日期对象
this.myDate = nextMonthDate;
this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
if (isChosedDay) {
this.getList(this.myDate, date, isChosedDay);
} else {
this.getList(this.myDate);
}
this.$emit('sendDay', this.sendDate)
},
forMatArgs: function () {
let markDate = this.markDate;
let markDateMore = this.markDateMore;
markDate = markDate.map(k => {
return timeUtil.dateFormat(k);
});
markDateMore = markDateMore.map(k => {
k.date = timeUtil.dateFormat(k.date);
return k;
});
return [markDate, markDateMore];
},
getList (date, chooseDay, isChosedDay = true) {
const [markDate, markDateMore] = this.forMatArgs();
this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;
this.sendDate = `${date.getFullYear()}/${date.getMonth() + 1}`;
let arr = timeUtil.getMonthList(this.myDate);
for (let i = 0; i < arr.length; i++) {
let markClassName = "";
let k = arr[i];
k.chooseDay = false;
const nowTime = k.date;
const t = new Date(nowTime).getTime() / 1000;
//看每一天的class
for (const c of markDateMore) {
if (c.date === nowTime) {
markClassName = c.className || "";
}
}
//标记选中某些天 设置class
k.markClassName = markClassName;
k.isMark = markDate.indexOf(nowTime) > -1;
//无法选中某天
k.dayHide = t < this.agoDayHide || t > this.futureDayHide;
if (k.isToday) {
this.$emit("isToday", nowTime);
}
let flag = !k.dayHide && k.otherMonth === "nowMonth";
if (chooseDay && chooseDay === nowTime && flag) {
if (this.typeid != '1') {
this.$emit("choseDay", nowTime);
}
this.historyChose.push(nowTime);
k.chooseDay = true;
} else if (
this.historyChose[this.historyChose.length - 1] === nowTime &&
!chooseDay &&
flag
) {
k.chooseDay = true;
}
}
this.list = arr; //拿到当月数据
}
},
mounted () {
this.getList(this.myDate);
},
watch: {
markDate: {
handler (val, oldVal) {
this.getList(this.myDate);
},
deep: true
},
markDateMore: {
handler (val, oldVal) {
this.getList(this.myDate);
},
deep: true
},
agoDayHide: {
handler (val, oldVal) {
this.getList(this.myDate);
},
deep: true
},
futureDayHide: {
handler (val, oldVal) {
this.getList(this.myDate);
},
deep: true
},
sundayStart: {
handler (val, oldVal) {
this.intStart();
this.getList(this.myDate);
},
deep: true
},
dateList: {
handler (val) {
const today = new Date();
const year = today.getFullYear(); // 获取年份
const month = today.getMonth() + 1; // 获取月份(注意月份是从0开始的,需要加1)
const day = today.getDate(); // 获取日期
this.thisToday = `${year}/${month}/${day}`;
let indx = this.list.findIndex(item => {
return item.date == this.thisToday;
})
this.list.forEach(item => {
// this.$set(item, 'type', '0')
if (item.otherMonth == "nowMonth") {
// 不这样写会丢失响应式
this.$set(item, 'type', '0') //1 已打卡 0 未打卡 2 可补卡
// this.$forceUpdate()
this.dateList.forEach((el, index) => {
this.dateList.forEach((el) => {
if (item.date == el.date) {
item.type = el.type
if (el.sign) {
item.sign = el.sign
}
}
})
})
}
})
console.log('this.list');
}
}
}
};
</script>
<style scoped>
@media screen and (min-width: 460px) {
.wh_item_date:hover {
background: #71c7a5;
cursor: pointer;
}
}
* {
margin: 0;
padding: 0;
}
.wh_container {
/* max-width: 410PX; */
/* margin: auto; */
/* margin: 0.3rem auto;
width: 95%;
border-radius: 0.2rem;
background-color: #fff; */
/* border: 1px solid #dfdfdf;
border-radius: 0.3rem;
background-color: #fff; */
}
li {
list-style-type: none;
}
.wh_top_changge {
display: flex;
margin: 0.5rem auto;
/* padding-top: 0.5rem; */
}
.wh_top_changge li {
cursor: pointer;
display: flex;
color: #fff;
font-size: 18px;
flex: 1;
justify-content: center;
align-items: center;
height: 47px;
}
.wh_top_changge .wh_content_li {
cursor: auto;
flex: 2.5;
}
.wh_content_all {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
background-color: #0fc37c;
width: 100%;
overflow: hidden;
padding-bottom: 8px;
}
.wh_content {
display: flex;
flex-wrap: wrap;
padding: 0 3% 0 3%;
width: 100%;
}
.wh_content:first-child .wh_content_item_tag,
.wh_content:first-child .wh_content_item {
color: #ddd;
font-size: 16px;
}
.wh_content_item,
wh_content_item_tag {
font-size: 15px;
width: 13.4%;
text-align: center;
color: #fff;
position: relative;
}
.wh_content_item {
height: 40px;
}
.wh_top_tag {
width: 40px;
height: 40px;
line-height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.wh_item_date {
/* width: 40PX; */
/* height: 40PX; */
width: 0.79rem;
height: 0.79rem;
line-height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.wh_jiantou1 {
width: 12px;
height: 12px;
border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;
transform: rotate(-45deg);
}
.wh_left {
width: 0.22rem;
height: auto;
}
.wh_jiantou1:active,
.wh_jiantou2:active {
border-color: #ddd;
}
.wh {
width: 0.8rem;
height: auto;
}
.wh_right {
width: 0.22rem;
height: auto;
}
.wh_jiantou2 {
width: 12px;
height: 12px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
transform: rotate(45deg);
}
.wh_content_item > .wh_isMark {
margin: auto;
border-radius: 100px;
background: blue;
z-index: 2;
}
.wh_content_item .wh_other_dayhide {
color: #bfbfbf;
}
.wh_content_item .wh_want_dayhide {
color: #bfbfbf;
}
.wh_content_item .wh_isToday {
background: yellow;
border-radius: 100px;
}
.wh_content_item .wh_chose_day {
background: green;
border-radius: 100px;
}
.wh_content_item .nodaka {
background: none;
color: #a5a5a5;
}
.wh_content_item .yesdaka {
background: none;
color: #ee9a37 !important;
}
.wh_content_item .buka {
background: url('https://gxwx-sit.cpiccdn.com/ddzscs/ddzscs/statics/ ddzsc/images/dkMedal/buka.png');
background-size: 0.8rem 0.8rem;
background-repeat: no-repeat;
font-size: 0 !important;
}
</style>
<style lang="stylus" scoped>
.buka_popbox {
background-color: #fff;
width: 7.7rem;
// height: 6rem;
border-radius: 0.5em;
}
.buka_tit {
font-size: 0.5rem;
font-weight: 600;
padding: 0.3rem 0;
width: fit-content;
margin: 0 auto;
}
.buka_read {
width: 80%;
color: #999;
line-height: 0.5rem;
font-size: 0.35rem;
margin: 0.3rem auto 0.5rem;
letter-spacing: 0.02rem;
width: fit-content;
padding: 0 0.8rem;
}
.buka_readnull {
width: 80%;
color: #999;
line-height: 0.5rem;
font-size: 0.35rem;
margin: 0.6rem auto 1rem;
letter-spacing: 0.02rem;
text-align: center;
}
.buka_btn {
padding-bottom: 0.5rem;
}
.hasbuka_btn {
width: 3.4rem;
height: 1.2rem;
display: block;
margin: 0 auto;
}
.buka_btnnull {
width: 75%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding-bottom: 0.5rem;
}
.daka_true, .lemesee {
height: 1.2rem;
width: 2.5rem;
border-radius: 0.7rem;
text-align: center;
line-height: 1.2rem;
}
.daka_true {
color: #fff;
background-color: #0783d8;
}
.lemesee {
color: #fff;
background-color: #d4d4d4;
}
.testbox {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.marks {
width: 100vw;
height: 100vh;
background-color: black;
opacity: 0.7;
}
.swiper {
position: absolute;
top: 50%;
width: 100vw;
transform: translateY(-50%);
/* height: 100vh; */
}
.swiper-slide {
width: 80%;
}
.candel {
margin-left: 82vw;
margin-bottom: 0.2rem;
width: 1rem;
height: auto;
}
.candel img {
width: 100%;
height: auto;
}
.borderr {
border-radius: 0.3rem;
}
.bottext {
width: 100%;
height: 2rem;
text-align: center;
line-height: 2rem;
color: #fff;
font-size: 0.4rem;
}
</style>
这里面是对封装的组件内部代码直接操作,因为之前是好多人封装的代码,传了个typeid=1,这样就代表是自己的组件了.
export default {
// 当某月的天数
getDaysInOneMonth(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const d = new Date(year, month, 0);
return d.getDate();
},
// 向前空几个
getMonthweek(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const dateFirstOne = new Date(year + '/' + month + '/1');
return this.sundayStart ?
dateFirstOne.getDay() == 0 ? 0 : dateFirstOne.getDay() :
dateFirstOne.getDay() == 0 ? 6 : dateFirstOne.getDay() - 1;
},
/**
* 获取当前日期上个月或者下个月
*/
getOtherMonth(date, str = 'nextMonth') {
const timeArray = this.dateFormat(date).split('/');
const year = timeArray[0];
const month = timeArray[1];
const day = timeArray[2];
let year2 = year;
let month2;
if (str === 'nextMonth') {
month2 = parseInt(month) + 1;
if (month2 == 13) {
year2 = parseInt(year2) + 1;
month2 = 1;
}
} else {
month2 = parseInt(month) - 1;
if (month2 == 0) {
year2 = parseInt(year2) - 1;
month2 = 12;
}
}
let day2 = day;
const days2 = new Date(year2, month2, 0).getDate();
if (day2 > days2) {
day2 = days2;
}
if (month2 < 10) {
month2 = '0' + month2;
}
if (day2 < 10) {
day2 = '0' + day2;
}
const t2 = year2 + '/' + month2 + '/' + day2;
return new Date(t2);
},
// 上个月末尾的一些日期
getLeftArr(date) {
const arr = [];
const leftNum = this.getMonthweek(date);
const num = this.getDaysInOneMonth(this.getOtherMonth(date, 'preMonth')) - leftNum + 1;
const preDate = this.getOtherMonth(date, 'preMonth');
// 上个月多少开始
for (let i = 0; i < leftNum; i++) {
const nowTime = preDate.getFullYear() + '/' + (preDate.getMonth() + 1) + '/' + (num + i);
arr.push({
id: num + i,
date: nowTime,
isToday: false,
otherMonth: 'preMonth',
});
}
return arr;
},
// 下个月末尾的一些日期
getRightArr(date) {
const arr = [];
const nextDate = this.getOtherMonth(date, 'nextMonth');
const leftLength = this.getDaysInOneMonth(date) + this.getMonthweek(date);
const _length = 7 - leftLength % 7;
for (let i = 0; i < _length; i++) {
const nowTime = nextDate.getFullYear() + '/' + (nextDate.getMonth() + 1) + '/' + (i + 1);
arr.push({
id: i + 1,
date: nowTime,
isToday: false,
otherMonth: 'nextMonth',
});
}
return arr;
},
// format日期
dateFormat(date) {
date = typeof date === 'string' ? new Date(date.replace(/\-/g, '/')) : date;
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/'
+ date.getDate();
},
// 获取某月的列表不包括上月和下月
getMonthListNoOther(date) {
const arr = [];
const num = this.getDaysInOneMonth(date);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const toDay = this.dateFormat(new Date());
for (let i = 0; i < num; i++) {
const nowTime = year + '/' + month + '/' + (i + 1);
arr.push({
id: i + 1,
date: nowTime,
isToday: toDay === nowTime,
otherMonth: 'nowMonth',
});
}
return arr;
},
// 获取某月的列表 用于渲染
getMonthList(date) {
return [...this.getLeftArr(date), ...this.getMonthListNoOther(date), ...this.getRightArr(date)];
},
// 默认是周一开始
sundayStart: false,
};
组件日历的方法js文件
点击下个月的方法是NextMonth
里面处理了对当月的右箭头隐藏变成分享按钮,并且点击分享按钮的时候前端生成海报.图片如下
要求带有补字的不能展示在海报中.所以对海报生成做了处理,隐藏左右按钮和补字样式,生成海报后在对图片做生成.
对makeImg做了封装请求
import html2canvas from 'html2canvas'
export const makeImg = function (data) {
var url = ''
return new Promise((resolve, reject) => {
var shareContent = data
const opts = {
height: shareContent.offsetHeight - 6,
width: shareContent.offsetWidth - 1,
useCORS: true, //使用CORS从服务器加载图像
tainttest: true,
allowTaint: false, //许跨原点图像污染画布
scale: 4 //像素比率
}
html2canvas(data, opts).then(function (canvas) {
// url = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
url = canvas.toDataURL('image/png')
resolve(url)
})
})
}