更换banner组件,添加用户隐私协议链接
This commit is contained in:
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="u-calendar-header u-border-bottom">
|
||||
<text
|
||||
class="u-calendar-header__title"
|
||||
v-if="showTitle"
|
||||
>{{ title }}</text>
|
||||
<view
|
||||
class="u-calendar-header__subtitle-wrap"
|
||||
v-if="showSubtitle"
|
||||
>
|
||||
<text
|
||||
v-if="showSwitch"
|
||||
class="u-calendar-header__switch"
|
||||
:class="{ 'u-calendar-header__switch--disabled': prevYearDisabled }"
|
||||
@click="prevYear"
|
||||
>«</text>
|
||||
<text
|
||||
v-if="showSwitch"
|
||||
class="u-calendar-header__switch"
|
||||
:class="{ 'u-calendar-header__switch--disabled': prevDisabled }"
|
||||
@click="prev"
|
||||
>‹</text>
|
||||
<text class="u-calendar-header__subtitle">{{ subtitle }}</text>
|
||||
<text
|
||||
v-if="showSwitch"
|
||||
class="u-calendar-header__switch"
|
||||
:class="{ 'u-calendar-header__switch--disabled': nextDisabled }"
|
||||
@click="next"
|
||||
>›</text>
|
||||
<text
|
||||
v-if="showSwitch"
|
||||
class="u-calendar-header__switch"
|
||||
:class="{ 'u-calendar-header__switch--disabled': nextYearDisabled }"
|
||||
@click="nextYear"
|
||||
>»</text>
|
||||
<text
|
||||
v-if="showToday"
|
||||
class="u-calendar-header__today"
|
||||
:class="{ 'u-calendar-header__today--disabled': todayDisabled }"
|
||||
@click="today"
|
||||
>{{ todayText }}</text>
|
||||
</view>
|
||||
<view class="u-calendar-header__weekdays">
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[0] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[1] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[2] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[3] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[4] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[5] }}</text>
|
||||
<text class="u-calendar-header__weekdays__weekday">{{ weekText[6] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mpMixin } from '../../libs/mixin/mpMixin';
|
||||
import { mixin } from '../../libs/mixin/mixin';
|
||||
export default {
|
||||
name: 'u-calendar-header',
|
||||
mixins: [mpMixin, mixin],
|
||||
props: {
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 副标题
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示副标题
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 星期文本
|
||||
weekText: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否显示月份切换按钮
|
||||
showSwitch: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 上个月按钮是否禁用
|
||||
prevDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 下个月按钮是否禁用
|
||||
nextDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 上一年按钮是否禁用
|
||||
prevYearDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 下一年按钮是否禁用
|
||||
nextYearDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示今天按钮
|
||||
showToday: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 今天按钮文案
|
||||
todayText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 今天按钮是否禁用
|
||||
todayDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
prev() {
|
||||
if (!this.prevDisabled) {
|
||||
this.$emit('prev')
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (!this.nextDisabled) {
|
||||
this.$emit('next')
|
||||
}
|
||||
},
|
||||
prevYear() {
|
||||
if (!this.prevYearDisabled) {
|
||||
this.$emit('prevYear')
|
||||
}
|
||||
},
|
||||
nextYear() {
|
||||
if (!this.nextYearDisabled) {
|
||||
this.$emit('nextYear')
|
||||
}
|
||||
},
|
||||
today() {
|
||||
if (!this.todayDisabled) {
|
||||
this.$emit('today')
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.u-calendar-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 4px;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: var(--up-main-color, $u-main-color);
|
||||
text-align: center;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__subtitle-wrap {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--up-main-color, $u-main-color);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
&__switch {
|
||||
width: 44px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: var(--up-main-color, $u-main-color);
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
&__weekdays {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__weekday {
|
||||
font-size: 13px;
|
||||
color: var(--up-main-color, $u-main-color);
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__today {
|
||||
margin-left: 4px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--up-primary, $u-primary);
|
||||
border: 1px solid var(--up-primary, $u-primary);
|
||||
flex-shrink: 0;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user