From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 13:12:48 +0800 Subject: [PATCH] 项目初始化 --- src/pages_qiun/components/uni-calendar/uni-calendar-item.vue | 170 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 170 insertions(+), 0 deletions(-) diff --git a/src/pages_qiun/components/uni-calendar/uni-calendar-item.vue b/src/pages_qiun/components/uni-calendar/uni-calendar-item.vue new file mode 100644 index 0000000..c66a58d --- /dev/null +++ b/src/pages_qiun/components/uni-calendar/uni-calendar-item.vue @@ -0,0 +1,170 @@ +<template> + <view class="uni-calendar-item__weeks-box" :class="{ + 'uni-calendar-item--disable':weeks.disable, + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, + 'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) , + 'uni-calendar-item--before-checked':weeks.beforeMultiple, + 'uni-calendar-item--multiple': weeks.multiple, + 'uni-calendar-item--after-checked':weeks.afterMultiple, + }" + @click="choiceDate(weeks)"> + <view class="uni-calendar-item__weeks-box-item"> + <text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> + <text class="uni-calendar-item__weeks-box-text" :class="{ + 'uni-calendar-item--isDay-text': weeks.isDay, + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay, + 'uni-calendar-item--before-checked':weeks.beforeMultiple, + 'uni-calendar-item--multiple': weeks.multiple, + 'uni-calendar-item--after-checked':weeks.afterMultiple, + 'uni-calendar-item--disable':weeks.disable, + }">{{weeks.date}}</text> + <text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{ + 'uni-calendar-item--isDay-text':weeks.isDay, + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay, + 'uni-calendar-item--before-checked':weeks.beforeMultiple, + 'uni-calendar-item--multiple': weeks.multiple, + 'uni-calendar-item--after-checked':weeks.afterMultiple, + }">浠婂ぉ</text> + <text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{ + 'uni-calendar-item--isDay-text':weeks.isDay, + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay, + 'uni-calendar-item--before-checked':weeks.beforeMultiple, + 'uni-calendar-item--multiple': weeks.multiple, + 'uni-calendar-item--after-checked':weeks.afterMultiple, + 'uni-calendar-item--disable':weeks.disable, + }">{{weeks.isDay?'浠婂ぉ': (weeks.lunar.IDayCn === '鍒濅竴'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text> + <text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{ + 'uni-calendar-item--extra':weeks.extraInfo.info, + 'uni-calendar-item--isDay-text':weeks.isDay, + 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay, + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay, + 'uni-calendar-item--before-checked':weeks.beforeMultiple, + 'uni-calendar-item--multiple': weeks.multiple, + 'uni-calendar-item--after-checked':weeks.afterMultiple, + 'uni-calendar-item--disable':weeks.disable, + }">{{weeks.extraInfo.info}}</text> + </view> + </view> +</template> + +<script> + export default { + props: { + weeks: { + type: Object, + default () { + return {} + } + }, + calendar: { + type: Object, + default: () => { + return {} + } + }, + selected: { + type: Array, + default: () => { + return [] + } + }, + lunar: { + type: Boolean, + default: false + } + }, + methods: { + choiceDate(weeks) { + this.$emit('change', weeks) + } + } + } +</script> + +<style lang="scss" scoped> + .uni-calendar-item__weeks-box { + flex: 1; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: center; + align-items: center; + } + + .uni-calendar-item__weeks-box-text { + font-size: $uni-font-size-base; + color: $uni-text-color; + } + + .uni-calendar-item__weeks-lunar-text { + font-size: $uni-font-size-sm; + color: $uni-text-color; + } + + .uni-calendar-item__weeks-box-item { + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: center; + align-items: center; + width: 100rpx; + height: 100rpx; + } + + .uni-calendar-item__weeks-box-circle { + position: absolute; + top: 5px; + right: 5px; + width: 8px; + height: 8px; + border-radius: 8px; + background-color: $uni-color-error; + + } + + .uni-calendar-item--disable { + background-color: rgba(249, 249, 249, $uni-opacity-disabled); + color: $uni-text-color-disable; + } + + .uni-calendar-item--isDay-text { + color: $uni-color-primary; + } + + .uni-calendar-item--isDay { + background-color: $uni-color-primary; + opacity: 0.8; + color: #fff; + } + + .uni-calendar-item--extra { + color: $uni-color-error; + opacity: 0.8; + } + + .uni-calendar-item--checked { + background-color: $uni-color-primary; + color: #fff; + opacity: 0.8; + } + + .uni-calendar-item--multiple { + background-color: $uni-color-primary; + color: #fff; + opacity: 0.8; + } + .uni-calendar-item--before-checked { + background-color: #ff5a5f; + color: #fff; + } + .uni-calendar-item--after-checked { + background-color: #ff5a5f; + color: #fff; + } +</style> -- Gitblit v1.9.3