<template>
|
<view class="uni-calendar-item__weeks-box" @click="choiceDate(weeks)"><!-- -->
|
<view class="uni-calendar-item__weeks-box-item" :class="{
|
'uni-calendar-item--disable':weeks.disable && !retract,
|
'uni-calendar-item--isDay': weeks.isDay,
|
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate) ,
|
}">
|
<text class="uni-calendar-item__weeks-box-text" :class="{
|
'uni-calendar-item--isDay-text': weeks.isDay || weeks.isWeekend,
|
'uni-calendar-item--checked-text':(calendar.fullDate === weeks.fullDate) ,
|
'uni-calendar-item--disable':weeks.disable && !retract,
|
}">{{weeks.date}}</text>
|
<text class="uni-calendar-item__weeks-lunar-text" :class="{
|
'uni-calendar-item--isDay-text':weeks.isDay || weeks.isWeekend,
|
'uni-calendar-item--checked-text':(calendar.fullDate === weeks.fullDate) ,
|
'uni-calendar-item--disable':weeks.disable && !retract,
|
}">{{weeks.isDay ? todayText : (lunar?( ( weeks.lunar.Term ? weeks.lunar.Term:(weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn))):'')}}</text>
|
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item--extra-info" :class="{
|
'uni-calendar-item--isDay2':(calendar.fullDate === weeks.fullDate) }"></text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "calendarDateItem",
|
emits:['change'],
|
props: {
|
weeks: {
|
type: Object,
|
default () {
|
return {}
|
}
|
},
|
calendar: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
lunar: {
|
type: Boolean,
|
default: false
|
},
|
retract: {
|
type: Boolean,
|
retract: true
|
},
|
},
|
watch: {
|
lunar(newVal) {
|
console.log("calendar-date-item lunar",newVal)
|
},
|
},
|
computed: {
|
todayText() {
|
return "今天"
|
},
|
},
|
methods: {
|
choiceDate(weeks) {
|
this.$emit('change', weeks)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.uni-calendar-item__weeks-box {
|
flex: 1;
|
display: flex;
|
padding: 2px 2px;
|
}
|
|
.uni-calendar-item__weeks-box-text {
|
margin-top: 2px;
|
font-size: 32rpx;
|
color: black;
|
}
|
|
.uni-calendar-item__weeks-lunar-text {
|
font-size: 20rpx;
|
color: gray;
|
}
|
.uni-calendar-item__weeks-box-item {
|
position: relative;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
height: 90rpx;
|
}
|
.uni-calendar-item--disable {
|
//background-color: rgba(249, 249, 249,160);
|
color: gray;
|
opacity: 0.8;
|
}
|
|
.uni-calendar-item--isDay-text {
|
color: #00aaff;
|
}
|
|
.uni-calendar-item--isDay {
|
border: 1px solid #00c1f140;
|
background-color: #00c3f840;
|
border-radius: 25px;
|
}
|
.uni-calendar-item--isDay2 {
|
background-color: #fff !important;
|
}
|
.uni-calendar-item--extra {
|
color: #00aaff;
|
opacity: 0.8;
|
}
|
.uni-calendar-item--extra-info {
|
background-color: #adadad;
|
border-radius: 2px;
|
position: absolute;
|
bottom: 2px;
|
width: 5px;
|
height: 5px;
|
}
|
.uni-calendar-item--checked {
|
border: 1px solid #00aaff;
|
background-color: #00aaff;
|
border-radius: 25px;
|
color: #fff;
|
|
}
|
.uni-calendar-item--checked-text {
|
color: #fff;
|
}
|
|
</style>
|
