feat：转账插件

uni_modules/uview-plus/components/u-calendar/header.vue

@@ -4,10 +4,42 @@
 			class="u-calendar-header__title"
 			v-if="showTitle"
 		>{{ title }}</text>
-		<text
-			class="u-calendar-header__subtitle"
-			v-if="showSubtitle"
-		>{{ subtitle }}</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>
@@ -51,25 +83,86 @@
 			weekText: {
 				type: Array,
 				default: () => {
-					return ['一', '二', '三', '四', '五', '六', '日']
+					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: {
-			name() {
-
-			}
-		},
-	}
+			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>
-	@import "../../libs/css/components.scss";
 
 	.u-calendar-header {
 		display: flex;
@@ -78,33 +171,70 @@
 
 		&__title {
 			font-size: 16px;
-			color: $u-main-color;
+			color: var(--up-main-color, $u-main-color);
 			text-align: center;
 			height: 42px;
 			line-height: 42px;
 			font-weight: bold;
 		}
 
-		&__subtitle {
-			font-size: 14px;
-			color: $u-main-color;
+		&__subtitle-wrap {
+			@include flex;
+			align-items: center;
+			justify-content: center;
 			height: 40px;
-			text-align: center;
-			line-height: 40px;
-			font-weight: bold;
 		}
 
-		&__weekdays {
-			@include flex;
-			justify-content: space-between;
+		&__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: $u-main-color;
+				color: var(--up-main-color, $u-main-color);
 				line-height: 30px;
 				flex: 1;
-				text-align: center;
-			}
-		}
-	}
-</style>
+				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>