feat(event): 事件页筛选抽屉与时间日历重构，tabbar 增加图标
- 新增 components/patched-calendar 本地补丁版日历组件，pages.json easycom 优先匹配 up-calendar，修复弹层嵌套下高度/滚动/底部按钮问题 - 时间筛选改为自绘钉底确定按钮 + pendingRange 临时选择，支持 31 天范围限制 与过去一年动态 monthNum；场所列表改走 /scene/list 接口 - 筛选项选中态高亮、抽屉样式优化，增加空列表提示文案 - pages.json 为三个 tab 配置图标（static/tabbar），mine 页裁剪未开放入口 - manifest 应用名改为 SEC_Warehouse
This commit is contained in:
parent
d1681ee08c
commit
ae767adbdf
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<view class="u-calendar-header u-border-bottom">
|
||||||
|
<text
|
||||||
|
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__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 'uview-plus/libs/mixin/mpMixin';
|
||||||
|
import { mixin } from 'uview-plus/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 []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
name() {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.u-calendar-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: $u-main-color;
|
||||||
|
text-align: center;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $u-main-color;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__weekdays {
|
||||||
|
@include flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&__weekday {
|
||||||
|
font-size: 13px;
|
||||||
|
color: $u-main-color;
|
||||||
|
line-height: 30px;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,632 @@
|
||||||
|
<template>
|
||||||
|
<view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper">
|
||||||
|
<view v-for="(item, index) in months" :key="index" :class="[`u-calendar-month-${index}`]"
|
||||||
|
:ref="`u-calendar-month-${index}`" :id="`month-${index}`">
|
||||||
|
<text v-if="index !== 0" class="u-calendar-month__title">{{ monthTitle(item) }}</text>
|
||||||
|
<view class="u-calendar-month__days">
|
||||||
|
<view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper">
|
||||||
|
<text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="u-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1"
|
||||||
|
:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"
|
||||||
|
:class="[item1.selected && 'u-calendar-month__days__day__select--selected']">
|
||||||
|
<view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
|
||||||
|
<text class="u-calendar-month__days__day__select__info"
|
||||||
|
:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__info--disabled' : '']"
|
||||||
|
:style="[textStyle(item1)]">{{ item1.day }}</text>
|
||||||
|
<text v-if="getBottomInfo(index, index1, item1)"
|
||||||
|
class="u-calendar-month__days__day__select__buttom-info"
|
||||||
|
:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__buttom-info--disabled' : '']"
|
||||||
|
:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>
|
||||||
|
<text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
// 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度
|
||||||
|
const dom = uni.requireNativePlugin('dom')
|
||||||
|
// #endif
|
||||||
|
import { mpMixin } from 'uview-plus/libs/mixin/mpMixin';
|
||||||
|
import { mixin } from 'uview-plus/libs/mixin/mixin';
|
||||||
|
import { addUnit, toast, sleep } from 'uview-plus/libs/function/index';
|
||||||
|
import { colorGradient } from 'uview-plus/libs/function/colorGradient';
|
||||||
|
import test from 'uview-plus/libs/function/test';
|
||||||
|
import defProps from 'uview-plus/libs/config/props';
|
||||||
|
import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
|
||||||
|
import { t } from 'uview-plus/libs/i18n'
|
||||||
|
export default {
|
||||||
|
name: 'u-calendar-month',
|
||||||
|
mixins: [mpMixin, mixin],
|
||||||
|
props: {
|
||||||
|
// 是否显示月份背景色
|
||||||
|
showMark: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 主题色，对底部按钮和选中日期有效
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#3c9cff'
|
||||||
|
},
|
||||||
|
// 月份数据
|
||||||
|
months: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
// 日期选择类型
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'single'
|
||||||
|
},
|
||||||
|
// 日期行高
|
||||||
|
rowHeight: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 58
|
||||||
|
},
|
||||||
|
// mode=multiple时，最多可选多少个日期
|
||||||
|
maxCount: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: Infinity
|
||||||
|
},
|
||||||
|
// mode=range时，第一个日期底部的提示文字
|
||||||
|
startText: {
|
||||||
|
type: String,
|
||||||
|
default: '开始'
|
||||||
|
},
|
||||||
|
// mode=range时，最后一个日期底部的提示文字
|
||||||
|
endText: {
|
||||||
|
type: String,
|
||||||
|
default: '结束'
|
||||||
|
},
|
||||||
|
// 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||||
|
defaultDate: {
|
||||||
|
type: [Array, String, Date],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
// 最小的可选日期
|
||||||
|
minDate: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 最大可选日期
|
||||||
|
maxDate: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 如果没有设置maxDate，则往后推多少个月
|
||||||
|
maxMonth: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 2
|
||||||
|
},
|
||||||
|
// 是否为只读状态，只读状态下禁止选择日期
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.readonly
|
||||||
|
},
|
||||||
|
// 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||||
|
maxRange: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: Infinity
|
||||||
|
},
|
||||||
|
// 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||||
|
rangePrompt: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
|
||||||
|
showRangePrompt: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||||
|
allowSameDay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
forbidDays: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
forbidDaysToast: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 每个日期的宽度
|
||||||
|
width: 0,
|
||||||
|
// 当前选中的日期item
|
||||||
|
item: {},
|
||||||
|
selected: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
selectedChange: {
|
||||||
|
immediate: true,
|
||||||
|
handler(n) {
|
||||||
|
this.setDefaultDate()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
|
||||||
|
selectedChange() {
|
||||||
|
return [this.minDate, this.maxDate, this.defaultDate]
|
||||||
|
},
|
||||||
|
// 性能补丁：选中日期的 O(1) 哈希索引。原实现每次点击要对全部 396+ 个格子
|
||||||
|
// 执行 selected.some(dateSame)（dayjs 逐个比对），复杂度 O(格子数 × 选中天数)，
|
||||||
|
// 选中范围越大越卡。selected 为 YYYY-MM-DD 字符串数组，可直接进 Set。
|
||||||
|
selectedSet() {
|
||||||
|
return new Set(this.selected)
|
||||||
|
},
|
||||||
|
// 性能补丁：range 模式选中区间的时间戳边界，避免每格多次 dayjs 解析比较
|
||||||
|
selectedRange() {
|
||||||
|
if (this.mode === 'range' && this.selected.length >= 2) {
|
||||||
|
const first = this.selected[0]
|
||||||
|
const last = this.selected[this.selected.length - 1]
|
||||||
|
return {
|
||||||
|
first,
|
||||||
|
last,
|
||||||
|
firstTs: dayjs(first).valueOf(),
|
||||||
|
lastTs: dayjs(last).valueOf()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
dayStyle(index1, index2, item) {
|
||||||
|
return (index1, index2, item) => {
|
||||||
|
const style = {}
|
||||||
|
let week = item.week
|
||||||
|
// 不进行四舍五入的形式保留2位小数
|
||||||
|
const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1))
|
||||||
|
// 得出每个日期的宽度
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
style.width = addUnit(dayWidth, 'px')
|
||||||
|
// #endif
|
||||||
|
style.height = addUnit(this.rowHeight, 'px')
|
||||||
|
if (index2 === 0) {
|
||||||
|
// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
|
||||||
|
week = (week === 0 ? 7 : week) - 1
|
||||||
|
style.marginLeft = addUnit(week * dayWidth, 'px')
|
||||||
|
}
|
||||||
|
if (this.mode === 'range') {
|
||||||
|
// 之所以需要这么写，是因为DCloud公司的iOS客户端导致的bug
|
||||||
|
style.paddingLeft = 0
|
||||||
|
style.paddingRight = 0
|
||||||
|
style.paddingBottom = 0
|
||||||
|
style.paddingTop = 0
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
daySelectStyle() {
|
||||||
|
return (index1, index2, item) => {
|
||||||
|
let date = dayjs(item.date).format("YYYY-MM-DD"),
|
||||||
|
style = {}
|
||||||
|
// 判断date是否在selected数组中（哈希查找替代逐个 dayjs 比对）
|
||||||
|
if (this.selectedSet.has(date)) {
|
||||||
|
style.backgroundColor = this.color
|
||||||
|
}
|
||||||
|
if (this.mode === 'single') {
|
||||||
|
if (date === this.selected[0]) {
|
||||||
|
// 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等
|
||||||
|
style.borderTopLeftRadius = '3px'
|
||||||
|
style.borderBottomLeftRadius = '3px'
|
||||||
|
style.borderTopRightRadius = '3px'
|
||||||
|
style.borderBottomRightRadius = '3px'
|
||||||
|
}
|
||||||
|
} else if (this.mode === 'range') {
|
||||||
|
if (this.selected.length >= 2) {
|
||||||
|
// 第一个日期设置左上角和左下角的圆角
|
||||||
|
if (date === this.selectedRange.first) {
|
||||||
|
style.borderTopLeftRadius = '3px'
|
||||||
|
style.borderBottomLeftRadius = '3px'
|
||||||
|
}
|
||||||
|
// 最后一个日期设置右上角和右下角的圆角
|
||||||
|
if (date === this.selectedRange.last) {
|
||||||
|
style.borderTopRightRadius = '3px'
|
||||||
|
style.borderBottomRightRadius = '3px'
|
||||||
|
}
|
||||||
|
// 处于第一和最后一个之间的日期，背景色设置为浅色（时间戳比较替代 dayjs 对象比较）
|
||||||
|
const ts = dayjs(date).valueOf()
|
||||||
|
if (ts > this.selectedRange.firstTs && ts < this.selectedRange.lastTs) {
|
||||||
|
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
|
||||||
|
// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
|
||||||
|
style.opacity = 0.7
|
||||||
|
}
|
||||||
|
} else if (this.selected.length === 1) {
|
||||||
|
// 之所以需要这么写，是因为uni-app的iOS客户端的bug
|
||||||
|
// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现
|
||||||
|
style.borderTopLeftRadius = '3px'
|
||||||
|
style.borderBottomLeftRadius = '3px'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.selectedSet.has(date)) {
|
||||||
|
style.borderTopLeftRadius = '3px'
|
||||||
|
style.borderBottomLeftRadius = '3px'
|
||||||
|
style.borderTopRightRadius = '3px'
|
||||||
|
style.borderBottomRightRadius = '3px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 某个日期是否被选中
|
||||||
|
textStyle() {
|
||||||
|
return (item) => {
|
||||||
|
const date = dayjs(item.date).format("YYYY-MM-DD"),
|
||||||
|
style = {}
|
||||||
|
// 选中的日期，提示文字设置白色
|
||||||
|
if (this.selectedSet.has(date)) {
|
||||||
|
style.color = '#ffffff'
|
||||||
|
}
|
||||||
|
if (this.mode === 'range' && this.selectedRange) {
|
||||||
|
// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色
|
||||||
|
const ts = dayjs(date).valueOf()
|
||||||
|
if (ts > this.selectedRange.firstTs && ts < this.selectedRange.lastTs) {
|
||||||
|
style.color = this.color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取底部的提示文字
|
||||||
|
getBottomInfo() {
|
||||||
|
return (index1, index2, item) => {
|
||||||
|
const date = dayjs(item.date).format("YYYY-MM-DD")
|
||||||
|
const bottomInfo = item.bottomInfo
|
||||||
|
// 当为日期范围模式时，且选择的日期个数大于0时
|
||||||
|
if (this.mode === 'range' && this.selected.length > 0) {
|
||||||
|
if (this.selected.length === 1) {
|
||||||
|
// 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始”
|
||||||
|
if (date === this.selected[0]) return this.startText
|
||||||
|
else return bottomInfo
|
||||||
|
} else {
|
||||||
|
// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期
|
||||||
|
if (date === this.selected[0] && date === this.selected[1]) {
|
||||||
|
// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中
|
||||||
|
return `${this.startText}/${this.endText}`
|
||||||
|
} else if (date === this.selected[0]) {
|
||||||
|
return this.startText
|
||||||
|
} else if (date === this.selected[this.selected.length - 1]) {
|
||||||
|
return this.endText
|
||||||
|
} else {
|
||||||
|
return bottomInfo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return bottomInfo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
emits: ['monthSelected', 'updateMonthTop'],
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
// 初始化默认选中
|
||||||
|
this.$emit('monthSelected', this.selected)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度
|
||||||
|
// 因为nvue下，$nextTick并不是100%可靠的
|
||||||
|
sleep(10).then(() => {
|
||||||
|
this.getWrapperWidth()
|
||||||
|
this.getMonthRect()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
monthTitle(item) {
|
||||||
|
if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
|
||||||
|
return item.year + '年' + (item.month < 10 ? '0' + item.month : item.month) + '月'
|
||||||
|
} else {
|
||||||
|
return (item.month < 10 ? '0' + item.month : item.month) + '/' + item.year
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isForbid(item) {
|
||||||
|
let date = dayjs(item.date).format("YYYY-MM-DD")
|
||||||
|
if (this.mode !== 'range' && this.forbidDays.includes(date)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
// 判断两个日期是否相等
|
||||||
|
dateSame(date1, date2) {
|
||||||
|
return dayjs(date1).isSame(dayjs(date2))
|
||||||
|
},
|
||||||
|
// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
|
||||||
|
getWrapperWidth() {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], res => {
|
||||||
|
this.width = res.size.width
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.$uGetRect('.u-calendar-month-wrapper').then(size => {
|
||||||
|
this.width = size.width
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
getMonthRect() {
|
||||||
|
// 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
|
||||||
|
const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(
|
||||||
|
`u-calendar-month-${index}`))
|
||||||
|
// 一次性返回
|
||||||
|
Promise.all(promiseAllArr).then(
|
||||||
|
sizes => {
|
||||||
|
let height = 1
|
||||||
|
const topArr = []
|
||||||
|
for (let i = 0; i < this.months.length; i++) {
|
||||||
|
// 添加到months数组中，供scroll-view滚动事件中，判断当前滚动到哪个月份
|
||||||
|
topArr[i] = height
|
||||||
|
height += sizes[i].height
|
||||||
|
}
|
||||||
|
// 由于微信下，无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值，所以使用事件形式对外发出
|
||||||
|
this.$emit('updateMonthTop', topArr)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取每个月份区域的尺寸
|
||||||
|
getMonthRectByPromise(el) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://uview-plus.jiangruyi.com/js/getRect.html
|
||||||
|
// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
|
||||||
|
return new Promise(resolve => {
|
||||||
|
this.$uGetRect(`.${el}`).then(size => {
|
||||||
|
resolve(size)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
// nvue下，使用dom模块查询元素高度
|
||||||
|
// 返回一个promise，让调用此方法的主体能使用then回调
|
||||||
|
return new Promise(resolve => {
|
||||||
|
dom.getComponentRect(this.$refs[el][0], res => {
|
||||||
|
resolve(res.size)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// 点击某一个日期
|
||||||
|
clickHandler(index1, index2, item) {
|
||||||
|
if (this.readonly) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.item = item
|
||||||
|
const date = dayjs(item.date).format("YYYY-MM-DD")
|
||||||
|
if (item.disabled) return
|
||||||
|
if (this.isForbid(item)) {
|
||||||
|
uni.showToast({
|
||||||
|
title: this.forbidDaysToast
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// selected 是 YYYY-MM-DD 字符串数组，浅拷贝即可，避免深度克隆的递归开销
|
||||||
|
let selected = this.selected.slice()
|
||||||
|
if (this.mode === 'single') {
|
||||||
|
// 单选情况下，让数组中的元素为当前点击的日期
|
||||||
|
selected = [date]
|
||||||
|
} else if (this.mode === 'multiple') {
|
||||||
|
if (selected.some(item => this.dateSame(item, date))) {
|
||||||
|
// 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果
|
||||||
|
const itemIndex = selected.findIndex(item => item === date)
|
||||||
|
selected.splice(itemIndex, 1)
|
||||||
|
} else {
|
||||||
|
// 如果点击的日期不在数组中，且已有的长度小于总可选长度时，则添加到数组中去
|
||||||
|
if (selected.length < this.maxCount) selected.push(date)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 选择区间形式
|
||||||
|
if (selected.length === 0 || selected.length >= 2) {
|
||||||
|
// 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期
|
||||||
|
selected = [date]
|
||||||
|
} else if (selected.length === 1) {
|
||||||
|
// 如果已经选择了开始日期
|
||||||
|
const existsDate = selected[0]
|
||||||
|
// 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期
|
||||||
|
if (dayjs(date).isBefore(existsDate)) {
|
||||||
|
selected = [date]
|
||||||
|
} else if (dayjs(date).isAfter(existsDate)) {
|
||||||
|
// 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示
|
||||||
|
if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
|
||||||
|
if(this.rangePrompt) {
|
||||||
|
toast(this.rangePrompt)
|
||||||
|
} else {
|
||||||
|
toast(t("up.calendar.daysExceed", { days: this.maxRange }))
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 如果当前日期大于已有日期，将当前的添加到数组尾部
|
||||||
|
selected.push(date)
|
||||||
|
const startDate = selected[0]
|
||||||
|
const endDate = selected[1]
|
||||||
|
const arr = []
|
||||||
|
let i = 0
|
||||||
|
do {
|
||||||
|
// 将开始和结束日期之间的日期添加到数组中
|
||||||
|
arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD"))
|
||||||
|
i++
|
||||||
|
// 累加的日期小于结束日期时，继续下一次的循环
|
||||||
|
} while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)))
|
||||||
|
// 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来
|
||||||
|
arr.push(endDate)
|
||||||
|
selected = arr
|
||||||
|
} else {
|
||||||
|
// 选择区间时，只有一个日期的情况下，且不允许选择起止为同一天的话，不允许选择自己
|
||||||
|
if (selected[0] === date && !this.allowSameDay) return
|
||||||
|
selected.push(date)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setSelected(selected)
|
||||||
|
},
|
||||||
|
// 设置默认日期
|
||||||
|
setDefaultDate() {
|
||||||
|
if (!this.defaultDate) {
|
||||||
|
// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
|
||||||
|
const selected = [dayjs().format("YYYY-MM-DD")]
|
||||||
|
return this.setSelected(selected, false)
|
||||||
|
}
|
||||||
|
let defaultDate = []
|
||||||
|
const minDate = this.minDate || dayjs().format("YYYY-MM-DD")
|
||||||
|
const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD")
|
||||||
|
if (this.mode === 'single') {
|
||||||
|
// 单选模式，可以是字符串或数组，Date对象等
|
||||||
|
if (!test.array(this.defaultDate)) {
|
||||||
|
defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]
|
||||||
|
} else {
|
||||||
|
defaultDate = [this.defaultDate[0]]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 如果为非数组，则不执行
|
||||||
|
if (!test.array(this.defaultDate)) return
|
||||||
|
defaultDate = this.defaultDate
|
||||||
|
}
|
||||||
|
// 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素
|
||||||
|
defaultDate = defaultDate.filter(item => {
|
||||||
|
return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(
|
||||||
|
maxDate).add(1, 'day'))
|
||||||
|
})
|
||||||
|
this.setSelected(defaultDate, false)
|
||||||
|
},
|
||||||
|
setSelected(selected, event = true) {
|
||||||
|
this.selected = selected
|
||||||
|
event && this.$emit('monthSelected', this.selected,'tap')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.u-calendar-month-wrapper {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-calendar-month {
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 42px;
|
||||||
|
height: 42px;
|
||||||
|
color: $u-main-color;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__days {
|
||||||
|
position: relative;
|
||||||
|
@include flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&__month-mark-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
@include flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: 155px;
|
||||||
|
color: rgba(231, 232, 234, 0.83);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__day {
|
||||||
|
@include flex;
|
||||||
|
padding: 2px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
|
||||||
|
width: calc(100% / 7);
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
&__select {
|
||||||
|
flex: 1;
|
||||||
|
@include flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: $u-error;
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttom-info {
|
||||||
|
color: $u-content-color;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5px;
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
&--selected {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
color: #cacbcd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&--selected {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
color: #cacbcd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--selected {
|
||||||
|
background-color: $u-primary;
|
||||||
|
@include flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--range-selected {
|
||||||
|
opacity: 0.3;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--range-start-selected {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--range-end-selected {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,169 @@
|
||||||
|
import { defineMixin } from 'uview-plus/libs/vue'
|
||||||
|
import defProps from 'uview-plus/libs/config/props.js'
|
||||||
|
|
||||||
|
export const props = defineMixin({
|
||||||
|
props: {
|
||||||
|
// 日历顶部标题
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: () => defProps.calendar.title
|
||||||
|
},
|
||||||
|
// 是否显示标题
|
||||||
|
showTitle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.showTitle
|
||||||
|
},
|
||||||
|
// 是否显示副标题
|
||||||
|
showSubtitle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.showSubtitle
|
||||||
|
},
|
||||||
|
// 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: () => defProps.calendar.mode
|
||||||
|
},
|
||||||
|
// mode=range时，第一个日期底部的提示文字
|
||||||
|
startText: {
|
||||||
|
type: String,
|
||||||
|
default: () => defProps.calendar.startText
|
||||||
|
},
|
||||||
|
// mode=range时，最后一个日期底部的提示文字
|
||||||
|
endText: {
|
||||||
|
type: String,
|
||||||
|
default: () => defProps.calendar.endText
|
||||||
|
},
|
||||||
|
// 自定义列表
|
||||||
|
customList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => defProps.calendar.customList
|
||||||
|
},
|
||||||
|
// 主题色，对底部按钮和选中日期有效
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: () => defProps.calendar.color
|
||||||
|
},
|
||||||
|
// 最小的可选日期
|
||||||
|
minDate: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: () => defProps.calendar.minDate
|
||||||
|
},
|
||||||
|
// 最大可选日期
|
||||||
|
maxDate: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: () => defProps.calendar.maxDate
|
||||||
|
},
|
||||||
|
// 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||||
|
defaultDate: {
|
||||||
|
type: [Array, String, Date, null],
|
||||||
|
default: () => defProps.calendar.defaultDate
|
||||||
|
},
|
||||||
|
// mode=multiple时，最多可选多少个日期
|
||||||
|
maxCount: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: () => defProps.calendar.maxCount
|
||||||
|
},
|
||||||
|
// 日期行高
|
||||||
|
rowHeight: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: () => defProps.calendar.rowHeight
|
||||||
|
},
|
||||||
|
// 日期格式化函数
|
||||||
|
formatter: {
|
||||||
|
type: [Function, null],
|
||||||
|
default: () => defProps.calendar.formatter
|
||||||
|
},
|
||||||
|
// 是否显示农历
|
||||||
|
showLunar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.showLunar
|
||||||
|
},
|
||||||
|
// 是否显示月份背景色
|
||||||
|
showMark: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.showMark
|
||||||
|
},
|
||||||
|
// 确定按钮的文字
|
||||||
|
confirmText: {
|
||||||
|
type: String,
|
||||||
|
default: () => defProps.calendar.confirmText
|
||||||
|
},
|
||||||
|
// 确认按钮处于禁用状态时的文字
|
||||||
|
confirmDisabledText: {
|
||||||
|
type: String,
|
||||||
|
default: () => defProps.calendar.confirmDisabledText
|
||||||
|
},
|
||||||
|
// 是否显示日历弹窗
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.show
|
||||||
|
},
|
||||||
|
// 是否允许点击遮罩关闭日历
|
||||||
|
closeOnClickOverlay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.closeOnClickOverlay
|
||||||
|
},
|
||||||
|
// 是否为只读状态，只读状态下禁止选择日期
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.readonly
|
||||||
|
},
|
||||||
|
// 是否展示确认按钮
|
||||||
|
showConfirm: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.showConfirm
|
||||||
|
},
|
||||||
|
// 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||||
|
maxRange: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: () => defProps.calendar.maxRange
|
||||||
|
},
|
||||||
|
// 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||||
|
rangePrompt: {
|
||||||
|
type: String,
|
||||||
|
default: () => defProps.calendar.rangePrompt
|
||||||
|
},
|
||||||
|
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
|
||||||
|
showRangePrompt: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.showRangePrompt
|
||||||
|
},
|
||||||
|
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||||
|
allowSameDay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => defProps.calendar.allowSameDay
|
||||||
|
},
|
||||||
|
// 圆角值
|
||||||
|
round: {
|
||||||
|
type: [Boolean, String, Number],
|
||||||
|
default: () => defProps.calendar.round
|
||||||
|
},
|
||||||
|
// 最多展示月份数量
|
||||||
|
monthNum: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 3
|
||||||
|
},
|
||||||
|
// 星期文案
|
||||||
|
weekText: {
|
||||||
|
type: Array,
|
||||||
|
default: defProps.calendar.weekText
|
||||||
|
},
|
||||||
|
forbidDays: {
|
||||||
|
type: Array,
|
||||||
|
default: defProps.calendar.forbidDays
|
||||||
|
},
|
||||||
|
forbidDaysToast:{
|
||||||
|
type: String,
|
||||||
|
default: defProps.calendar.forbidDaysToast
|
||||||
|
},
|
||||||
|
monthFormat:{
|
||||||
|
type: String,
|
||||||
|
default: defProps.calendar.monthFormat
|
||||||
|
},
|
||||||
|
// 是否页面内展示
|
||||||
|
pageInline:{
|
||||||
|
type: Boolean,
|
||||||
|
default: defProps.calendar.pageInline
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,421 @@
|
||||||
|
<template>
|
||||||
|
<u-popup
|
||||||
|
:show="show"
|
||||||
|
mode="bottom"
|
||||||
|
:closeable="!pageInline"
|
||||||
|
@close="close"
|
||||||
|
:round="round"
|
||||||
|
:pageInline="pageInline"
|
||||||
|
:closeOnClickOverlay="closeOnClickOverlay"
|
||||||
|
>
|
||||||
|
<view class="u-calendar">
|
||||||
|
<uHeader
|
||||||
|
:title="title"
|
||||||
|
:subtitle="subtitle"
|
||||||
|
:showSubtitle="showSubtitle"
|
||||||
|
:showTitle="showTitle"
|
||||||
|
:weekText="weekText"
|
||||||
|
></uHeader>
|
||||||
|
<scroll-view
|
||||||
|
:style="{
|
||||||
|
height: addUnit(listHeight, 'px')
|
||||||
|
}"
|
||||||
|
scroll-y
|
||||||
|
@scroll="onScroll"
|
||||||
|
:scroll-top="scrollTop"
|
||||||
|
:scrollIntoView="scrollIntoView"
|
||||||
|
>
|
||||||
|
<uMonth
|
||||||
|
:color="color"
|
||||||
|
:rowHeight="rowHeight"
|
||||||
|
:showMark="showMark"
|
||||||
|
:months="months"
|
||||||
|
:mode="mode"
|
||||||
|
:maxCount="maxCount"
|
||||||
|
:startText="startText"
|
||||||
|
:endText="endText"
|
||||||
|
:defaultDate="defaultDate"
|
||||||
|
:minDate="innerMinDate"
|
||||||
|
:maxDate="innerMaxDate"
|
||||||
|
:maxMonth="monthNum"
|
||||||
|
:readonly="readonly"
|
||||||
|
:maxRange="maxRange"
|
||||||
|
:rangePrompt="rangePrompt"
|
||||||
|
:showRangePrompt="showRangePrompt"
|
||||||
|
:allowSameDay="allowSameDay"
|
||||||
|
:forbidDays="forbidDays"
|
||||||
|
:forbidDaysToast="forbidDaysToast"
|
||||||
|
:monthFormat="monthFormat"
|
||||||
|
ref="month"
|
||||||
|
@monthSelected="monthSelected"
|
||||||
|
@updateMonthTop="updateMonthTop"
|
||||||
|
></uMonth>
|
||||||
|
</scroll-view>
|
||||||
|
<slot name="footer" v-if="showConfirm">
|
||||||
|
<view class="u-calendar__confirm">
|
||||||
|
<u-button
|
||||||
|
shape="circle"
|
||||||
|
:text="
|
||||||
|
buttonDisabled ? confirmDisabledText : confirmText
|
||||||
|
"
|
||||||
|
:color="color"
|
||||||
|
@click="confirm"
|
||||||
|
:disabled="buttonDisabled"
|
||||||
|
></u-button>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uHeader from './header.vue'
|
||||||
|
import uMonth from './month.vue'
|
||||||
|
import { props } from './props.js'
|
||||||
|
import util from './util.js'
|
||||||
|
import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
|
||||||
|
import Calendar from 'uview-plus/libs/util/calendar.js'
|
||||||
|
import { mpMixin } from 'uview-plus/libs/mixin/mpMixin.js'
|
||||||
|
import { mixin } from 'uview-plus/libs/mixin/mixin.js'
|
||||||
|
import { addUnit, getPx, range, error, padZero } from 'uview-plus/libs/function/index';
|
||||||
|
import test from 'uview-plus/libs/function/test';
|
||||||
|
/**
|
||||||
|
* Calendar 日历
|
||||||
|
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中.
|
||||||
|
* @tutorial https://uview-plus.jiangruyi.com/components/calendar.html
|
||||||
|
*
|
||||||
|
* @property {String} title 标题内容 (默认 日期选择 )
|
||||||
|
* @property {Boolean} showTitle 是否显示标题 (默认 true )
|
||||||
|
* @property {Boolean} showSubtitle 是否显示副标题 (默认 true )
|
||||||
|
* @property {String} mode 日期类型选择 single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围 （ 默认 'single' )
|
||||||
|
* @property {String} startText mode=range时，第一个日期底部的提示文字 (默认 '开始' )
|
||||||
|
* @property {String} endText mode=range时，最后一个日期底部的提示文字 (默认 '结束' )
|
||||||
|
* @property {Array} customList 自定义列表
|
||||||
|
* @property {String} color 主题色，对底部按钮和选中日期有效 (默认 ‘#3c9cff' )
|
||||||
|
* @property {String | Number} minDate 最小的可选日期 (默认 0 )
|
||||||
|
* @property {String | Number} maxDate 最大可选日期 (默认 0 )
|
||||||
|
* @property {Array | String| Date} defaultDate 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||||
|
* @property {String | Number} maxCount mode=multiple时，最多可选多少个日期 (默认 Number.MAX_SAFE_INTEGER )
|
||||||
|
* @property {String | Number} rowHeight 日期行高 (默认 56 )
|
||||||
|
* @property {Function} formatter 日期格式化函数
|
||||||
|
* @property {Boolean} showLunar 是否显示农历 (默认 false )
|
||||||
|
* @property {Boolean} showMark 是否显示月份背景色 (默认 true )
|
||||||
|
* @property {String} confirmText 确定按钮的文字 (默认 '确定' )
|
||||||
|
* @property {String} confirmDisabledText 确认按钮处于禁用状态时的文字 (默认 '确定' )
|
||||||
|
* @property {Boolean} show 是否显示日历弹窗 (默认 false )
|
||||||
|
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭日历 (默认 false )
|
||||||
|
* @property {Boolean} readonly 是否为只读状态，只读状态下禁止选择日期 (默认 false )
|
||||||
|
* @property {String | Number} maxRange 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||||
|
* @property {String} rangePrompt 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||||
|
* @property {Boolean} showRangePrompt 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 (默认 true )
|
||||||
|
* @property {Boolean} allowSameDay 是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false )
|
||||||
|
* @property {Number|String} round 圆角值，默认无圆角 (默认 0 )
|
||||||
|
* @property {Number|String} monthNum 最多展示的月份数量 (默认 3 )
|
||||||
|
* @property {Array} weekText 星期文案 (默认 ['一', '二', '三', '四', '五', '六', '日'] )
|
||||||
|
*
|
||||||
|
* @event {Function()} confirm 点击确定按钮时触发 选择日期相关的返回参数
|
||||||
|
* @event {Function()} close 日历关闭时触发 可定义页面关闭时的回调事件
|
||||||
|
* @example <u-calendar :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm">
|
||||||
|
</u-calendar>
|
||||||
|
* */
|
||||||
|
export default {
|
||||||
|
name: 'u-calendar',
|
||||||
|
mixins: [mpMixin, mixin, props],
|
||||||
|
components: {
|
||||||
|
uHeader,
|
||||||
|
uMonth
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 需要显示的月份的数组
|
||||||
|
months: [],
|
||||||
|
// 在月份滚动区域中，当前视图中月份的index索引
|
||||||
|
monthIndex: 0,
|
||||||
|
// 月份滚动区域的高度
|
||||||
|
listHeight: 0,
|
||||||
|
// month组件中选择的日期数组
|
||||||
|
selected: [],
|
||||||
|
scrollIntoView: '',
|
||||||
|
scrollIntoViewScroll: '',
|
||||||
|
scrollTop:0,
|
||||||
|
// 过滤处理方法
|
||||||
|
innerFormatter: (value) => value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
scrollIntoView: {
|
||||||
|
immediate: true,
|
||||||
|
handler(n) {
|
||||||
|
// console.log('scrollIntoView', n)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectedChange: {
|
||||||
|
immediate: true,
|
||||||
|
handler(n) {
|
||||||
|
this.setMonth()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 打开弹窗时，设置月份数据
|
||||||
|
show: {
|
||||||
|
immediate: true,
|
||||||
|
handler(n) {
|
||||||
|
if (n) {
|
||||||
|
this.setMonth()
|
||||||
|
} else {
|
||||||
|
// 关闭时重置scrollIntoView，否则会出现二次打开日历，当前月份数据显示不正确。
|
||||||
|
// scrollIntoView需要有一个值变动过程，才会产生作用。
|
||||||
|
this.scrollIntoView = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 由于maxDate和minDate可以为字符串(2021-10-10)，或者数值(时间戳)，但是dayjs如果接受字符串形式的时间戳会有问题，这里进行处理
|
||||||
|
innerMaxDate() {
|
||||||
|
return test.number(this.maxDate)
|
||||||
|
? Number(this.maxDate)
|
||||||
|
: this.maxDate
|
||||||
|
},
|
||||||
|
innerMinDate() {
|
||||||
|
return test.number(this.minDate)
|
||||||
|
? Number(this.minDate)
|
||||||
|
: this.minDate
|
||||||
|
},
|
||||||
|
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
|
||||||
|
selectedChange() {
|
||||||
|
return [this.innerMinDate, this.innerMaxDate, this.defaultDate]
|
||||||
|
},
|
||||||
|
subtitle() {
|
||||||
|
// 初始化时，this.months为空数组，所以需要特别判断处理
|
||||||
|
if (this.months.length) {
|
||||||
|
if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
|
||||||
|
return this.months[this.monthIndex].year + '年' + (this.months[this.monthIndex].month < 10 ? '0' + this.months[this.monthIndex].month : this.months[this.monthIndex].month) + '月'
|
||||||
|
} else {
|
||||||
|
return (this.months[this.monthIndex].month < 10 ? '0' + this.months[this.monthIndex].month : this.months[this.monthIndex].month) + '/' + this.months[this.monthIndex].year
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
buttonDisabled() {
|
||||||
|
// 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态
|
||||||
|
if (this.mode === 'range') {
|
||||||
|
if (this.selected.length <= 1) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.start = Date.now()
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
emits: ["confirm", "close"],
|
||||||
|
methods: {
|
||||||
|
addUnit,
|
||||||
|
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||||||
|
setFormatter(e) {
|
||||||
|
this.innerFormatter = e
|
||||||
|
},
|
||||||
|
// month组件内部选择日期后，通过事件通知给父组件
|
||||||
|
monthSelected(e,scene ='init') {
|
||||||
|
this.selected = e
|
||||||
|
if (!this.showConfirm) {
|
||||||
|
// 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还
|
||||||
|
if (
|
||||||
|
this.mode === 'multiple' ||
|
||||||
|
this.mode === 'single' ||
|
||||||
|
(this.mode === 'range' && this.selected.length >= 2)
|
||||||
|
) {
|
||||||
|
if( scene === 'init'){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if( scene === 'tap') {
|
||||||
|
this.$emit('confirm', this.selected)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
// 校验maxDate，不能小于minDate。
|
||||||
|
if (
|
||||||
|
this.innerMaxDate &&
|
||||||
|
this.innerMinDate &&
|
||||||
|
new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
|
||||||
|
) {
|
||||||
|
return error('maxDate不能小于minDate时间')
|
||||||
|
}
|
||||||
|
// 滚动区域的高度
|
||||||
|
let bottomPadding = 0;
|
||||||
|
if (this.pageInline) {
|
||||||
|
bottomPadding = 0
|
||||||
|
} else {
|
||||||
|
bottomPadding = 30
|
||||||
|
}
|
||||||
|
this.listHeight = this.rowHeight * 5 + bottomPadding
|
||||||
|
this.setMonth()
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.$emit('close')
|
||||||
|
},
|
||||||
|
// 点击确定按钮
|
||||||
|
confirm() {
|
||||||
|
if (!this.buttonDisabled) {
|
||||||
|
this.$emit('confirm', this.selected)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获得两个日期之间的月份数
|
||||||
|
getMonths(minDate, maxDate) {
|
||||||
|
const minYear = dayjs(minDate).year()
|
||||||
|
const minMonth = dayjs(minDate).month() + 1
|
||||||
|
const maxYear = dayjs(maxDate).year()
|
||||||
|
const maxMonth = dayjs(maxDate).month() + 1
|
||||||
|
return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1
|
||||||
|
},
|
||||||
|
// 设置月份数据
|
||||||
|
setMonth() {
|
||||||
|
// 最小日期的毫秒数
|
||||||
|
const minDate = this.innerMinDate || dayjs().valueOf()
|
||||||
|
// 如果没有指定最大日期，则往后推3个月
|
||||||
|
const maxDate =
|
||||||
|
this.innerMaxDate ||
|
||||||
|
dayjs(minDate)
|
||||||
|
.add(this.monthNum - 1, 'month')
|
||||||
|
.valueOf()
|
||||||
|
// 最大最小月份之间的共有多少个月份，
|
||||||
|
const months = range(
|
||||||
|
1,
|
||||||
|
this.monthNum,
|
||||||
|
this.getMonths(minDate, maxDate)
|
||||||
|
)
|
||||||
|
// 先清空数组
|
||||||
|
this.months = []
|
||||||
|
for (let i = 0; i < months; i++) {
|
||||||
|
this.months.push({
|
||||||
|
date: new Array(
|
||||||
|
dayjs(minDate).add(i, 'month').daysInMonth()
|
||||||
|
)
|
||||||
|
.fill(1)
|
||||||
|
.map((item, index) => {
|
||||||
|
// 日期，取值1-31
|
||||||
|
let day = index + 1
|
||||||
|
// 星期，0-6，0为周日
|
||||||
|
const week = dayjs(minDate)
|
||||||
|
.add(i, 'month')
|
||||||
|
.date(day)
|
||||||
|
.day()
|
||||||
|
const date = dayjs(minDate)
|
||||||
|
.add(i, 'month')
|
||||||
|
.date(day)
|
||||||
|
.format('YYYY-MM-DD')
|
||||||
|
let bottomInfo = ''
|
||||||
|
if (this.showLunar) {
|
||||||
|
// 将日期转为农历格式
|
||||||
|
const lunar = Calendar.solar2lunar(
|
||||||
|
dayjs(date).year(),
|
||||||
|
dayjs(date).month() + 1,
|
||||||
|
dayjs(date).date()
|
||||||
|
)
|
||||||
|
bottomInfo = lunar.IDayCn
|
||||||
|
}
|
||||||
|
let config = {
|
||||||
|
day,
|
||||||
|
week,
|
||||||
|
// 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态
|
||||||
|
disabled:
|
||||||
|
dayjs(date).isBefore(
|
||||||
|
dayjs(minDate).format('YYYY-MM-DD')
|
||||||
|
) ||
|
||||||
|
dayjs(date).isAfter(
|
||||||
|
dayjs(maxDate).format('YYYY-MM-DD')
|
||||||
|
),
|
||||||
|
// 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理
|
||||||
|
date: new Date(date),
|
||||||
|
bottomInfo,
|
||||||
|
dot: false,
|
||||||
|
month:
|
||||||
|
dayjs(minDate).add(i, 'month').month() + 1
|
||||||
|
}
|
||||||
|
const formatter =
|
||||||
|
this.formatter || this.innerFormatter
|
||||||
|
return formatter(config)
|
||||||
|
}),
|
||||||
|
// 当前所属的月份
|
||||||
|
month: dayjs(minDate).add(i, 'month').month() + 1,
|
||||||
|
// 当前年份
|
||||||
|
year: dayjs(minDate).add(i, 'month').year()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 滚动到默认设置的月份
|
||||||
|
scrollIntoDefaultMonth(selected) {
|
||||||
|
// 查询默认日期在可选列表的下标
|
||||||
|
const _index = this.months.findIndex(({
|
||||||
|
year,
|
||||||
|
month
|
||||||
|
}) => {
|
||||||
|
month = padZero(month)
|
||||||
|
return `${year}-${month}` === selected
|
||||||
|
})
|
||||||
|
if (_index !== -1) {
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollIntoView = `month-${_index}`
|
||||||
|
this.scrollIntoViewScroll = this.scrollIntoView
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
this.scrollTop = this.months[_index].top || 0;
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// scroll-view滚动监听
|
||||||
|
onScroll(event) {
|
||||||
|
// 不允许小于0的滚动值，如果scroll-view到顶了，继续下拉，会出现负数值
|
||||||
|
const scrollTop = Math.max(0, event.detail.scrollTop)
|
||||||
|
// 将当前滚动条数值，除以滚动区域的高度，可以得出当前滚动到了哪一个月份的索引
|
||||||
|
for (let i = 0; i < this.months.length; i++) {
|
||||||
|
if (scrollTop >= (this.months[i].top || this.listHeight)) {
|
||||||
|
this.monthIndex = i
|
||||||
|
this.scrollIntoViewScroll = `month-${i}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 更新月份的top值
|
||||||
|
updateMonthTop(topArr = []) {
|
||||||
|
// 设置对应月份的top值，用于onScroll方法更新月份
|
||||||
|
topArr.map((item, index) => {
|
||||||
|
this.months[index].top = item
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取默认日期的下标
|
||||||
|
if (!this.defaultDate) {
|
||||||
|
// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
|
||||||
|
const selected = dayjs().format("YYYY-MM")
|
||||||
|
this.scrollIntoDefaultMonth(selected)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let selected = dayjs().format("YYYY-MM");
|
||||||
|
// 单选模式，可以是字符串或数组，Date对象等
|
||||||
|
if (!test.array(this.defaultDate)) {
|
||||||
|
selected = dayjs(this.defaultDate).format("YYYY-MM")
|
||||||
|
} else {
|
||||||
|
selected = dayjs(this.defaultDate[0]).format("YYYY-MM");
|
||||||
|
}
|
||||||
|
this.scrollIntoDefaultMonth(selected)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.u-calendar {
|
||||||
|
&__confirm {
|
||||||
|
padding: 7px 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
// 设置月份数据
|
||||||
|
setMonth() {
|
||||||
|
// 月初是周几
|
||||||
|
const day = dayjs(this.date).date(1).day()
|
||||||
|
const start = day == 0 ? 6 : day - 1
|
||||||
|
|
||||||
|
// 本月天数
|
||||||
|
const days = dayjs(this.date).endOf('month').format('D')
|
||||||
|
|
||||||
|
// 上个月天数
|
||||||
|
const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
|
||||||
|
|
||||||
|
// 日期数据
|
||||||
|
const arr = []
|
||||||
|
// 清空表格
|
||||||
|
this.month = []
|
||||||
|
|
||||||
|
// 添加上月数据
|
||||||
|
arr.push(
|
||||||
|
...new Array(start).fill(1).map((e, i) => {
|
||||||
|
const day = prevDays - start + i + 1
|
||||||
|
|
||||||
|
return {
|
||||||
|
value: day,
|
||||||
|
disabled: true,
|
||||||
|
date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
// 添加本月数据
|
||||||
|
arr.push(
|
||||||
|
...new Array(days - 0).fill(1).map((e, i) => {
|
||||||
|
const day = i + 1
|
||||||
|
|
||||||
|
return {
|
||||||
|
value: day,
|
||||||
|
date: dayjs(this.date).date(day).format('YYYY-MM-DD')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
// 添加下个月
|
||||||
|
arr.push(
|
||||||
|
...new Array(42 - days - start).fill(1).map((e, i) => {
|
||||||
|
const day = i + 1
|
||||||
|
|
||||||
|
return {
|
||||||
|
value: day,
|
||||||
|
disabled: true,
|
||||||
|
date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
// 分割数组
|
||||||
|
for (let n = 0; n < arr.length; n += 7) {
|
||||||
|
this.month.push(
|
||||||
|
arr.slice(n, n + 7).map((e, i) => {
|
||||||
|
e.index = i + n
|
||||||
|
|
||||||
|
// 自定义信息
|
||||||
|
const custom = this.customList.find((c) => c.date == e.date)
|
||||||
|
|
||||||
|
// 农历
|
||||||
|
if (this.lunar) {
|
||||||
|
const {
|
||||||
|
IDayCn,
|
||||||
|
IMonthCn
|
||||||
|
} = this.getLunar(e.date)
|
||||||
|
e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...e,
|
||||||
|
...custom
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name" : "smarthome",
|
"name" : "SEC_Warehouse",
|
||||||
"appid" : "",
|
"appid" : "",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.0",
|
"versionName" : "1.0.0",
|
||||||
|
|
|
||||||
13
pages.json
13
pages.json
|
|
@ -57,15 +57,21 @@
|
||||||
"list": [
|
"list": [
|
||||||
{
|
{
|
||||||
"pagePath": "pages/index/index",
|
"pagePath": "pages/index/index",
|
||||||
"text": "首页"
|
"text": "首页",
|
||||||
|
"iconPath": "static/tabbar/home.png",
|
||||||
|
"selectedIconPath": "static/tabbar/home-active.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/event/index",
|
"pagePath": "pages/event/index",
|
||||||
"text": "事件"
|
"text": "事件",
|
||||||
|
"iconPath": "static/tabbar/event.png",
|
||||||
|
"selectedIconPath": "static/tabbar/event-active.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/mine/index",
|
"pagePath": "pages/mine/index",
|
||||||
"text": "我的"
|
"text": "我的",
|
||||||
|
"iconPath": "static/tabbar/mine.png",
|
||||||
|
"selectedIconPath": "static/tabbar/mine-active.png"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -73,6 +79,7 @@
|
||||||
"easycom": {
|
"easycom": {
|
||||||
"autoscan": true,
|
"autoscan": true,
|
||||||
"custom": {
|
"custom": {
|
||||||
|
"^up-calendar$": "@/components/patched-calendar/u-calendar.vue",
|
||||||
"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||||
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
|
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,41 +4,554 @@
|
||||||
<up-navbar title="事件" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
|
<up-navbar title="事件" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
|
||||||
|
|
||||||
<view class="filters">
|
<view class="filters">
|
||||||
<view><up-button size="mini" type="primary" plain text="全部场所" /></view>
|
<view class="filter-cell" @click="openDrawer('scene')">
|
||||||
<view><up-button size="mini" type="primary" plain text="全部状态" /></view>
|
<view class="filter-trigger" :class="{ 'filter-trigger--active': filters.sceneId !== 0 }">
|
||||||
<view><up-button size="mini" type="primary" plain text="时间" /></view>
|
<text class="filter-text">{{ sceneLabel }}</text>
|
||||||
|
<up-icon name="arrow-down" size="13" :color="filters.sceneId !== 0 ? '#12a37a' : '#909399'" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="filter-cell" @click="openDrawer('status')">
|
||||||
|
<view class="filter-trigger" :class="{ 'filter-trigger--active': filters.status !== 0 }">
|
||||||
|
<text class="filter-text">{{ statusLabel }}</text>
|
||||||
|
<up-icon name="arrow-down" size="13" :color="filters.status !== 0 ? '#12a37a' : '#909399'" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="filter-cell" @click="openDrawer('time')">
|
||||||
|
<view class="filter-trigger" :class="{ 'filter-trigger--active': !!filters.startDate }">
|
||||||
|
<text class="filter-text">{{ filters.timeText || '时间' }}</text>
|
||||||
|
<up-icon name="arrow-down" size="13" :color="filters.startDate ? '#12a37a' : '#909399'" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="empty-area">
|
<view class="empty-area">
|
||||||
<up-empty mode="message" text="暂无事件数据" />
|
<up-empty mode="message" text="暂无事件数据" />
|
||||||
</view>
|
</view>
|
||||||
|
<view class="empty-hint">
|
||||||
|
<text>调整筛选条件后的事件列表将在此展示</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 场所抽屉：顶部下拉选项列表 -->
|
||||||
|
<up-popup :show="drawer === 'scene'" mode="top" round="24" :overlay-opacity="0.35" :safe-area-inset-bottom="false" :custom-style="{ width: '100vw' }" @close="closeDrawer">
|
||||||
|
<view class="option-drawer">
|
||||||
|
<view class="option-drawer-header">
|
||||||
|
<text class="option-drawer-title">选择场所</text>
|
||||||
|
<view class="option-drawer-close" @click="closeDrawer">
|
||||||
|
<up-icon name="close" size="20" color="#909399" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="option-drawer-list">
|
||||||
|
<view
|
||||||
|
v-for="opt in sceneOptions"
|
||||||
|
:key="opt.id"
|
||||||
|
class="option-drawer-item"
|
||||||
|
:class="{ 'option-drawer-item--active': filters.sceneId === opt.id }"
|
||||||
|
@click="selectScene(opt.id)"
|
||||||
|
>
|
||||||
|
<text class="option-drawer-item__text">{{ opt.name }}</text>
|
||||||
|
<up-icon v-if="filters.sceneId === opt.id" name="checkmark" size="16" color="#2CCB98" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
|
||||||
|
<!-- 状态抽屉：顶部下拉选项列表 -->
|
||||||
|
<up-popup :show="drawer === 'status'" mode="top" round="24" :overlay-opacity="0.35" :safe-area-inset-bottom="false" :custom-style="{ width: '100vw' }" @close="closeDrawer">
|
||||||
|
<view class="option-drawer">
|
||||||
|
<view class="option-drawer-header">
|
||||||
|
<text class="option-drawer-title">选择状态</text>
|
||||||
|
<view class="option-drawer-close" @click="closeDrawer">
|
||||||
|
<up-icon name="close" size="20" color="#909399" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="option-drawer-list">
|
||||||
|
<view
|
||||||
|
v-for="opt in statusOptions"
|
||||||
|
:key="opt.id"
|
||||||
|
class="option-drawer-item"
|
||||||
|
:class="{ 'option-drawer-item--active': filters.status === opt.id }"
|
||||||
|
@click="selectStatus(opt.id)"
|
||||||
|
>
|
||||||
|
<text class="option-drawer-item__text">{{ opt.name }}</text>
|
||||||
|
<up-icon v-if="filters.status === opt.id" name="checkmark" size="16" color="#2CCB98" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
|
||||||
|
<!-- 时间抽屉：顶部下拉，内嵌日历范围选择 -->
|
||||||
|
<!-- 注意：up-popup 内容区自带 @touchmove.stop.prevent，会吞掉日历内 scroll-view 的滚动手势，
|
||||||
|
所以日历不放在 up-popup 插槽里，而是用条件渲染 + 自绘遮罩实现抽屉 -->
|
||||||
|
<view v-if="drawer === 'time'" class="time-mask" @click="closeDrawer" @touchmove.stop.prevent="noop" />
|
||||||
|
<view v-if="drawer === 'time'" class="time-drawer">
|
||||||
|
<view class="time-drawer-header">
|
||||||
|
<text class="time-drawer-title">选择时间范围</text>
|
||||||
|
<view class="time-drawer-close" @click="closeDrawer">
|
||||||
|
<up-icon name="close" size="20" color="#909399" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="time-drawer-body">
|
||||||
|
<up-calendar
|
||||||
|
:key="calendarKey"
|
||||||
|
mode="range"
|
||||||
|
:show="drawer === 'time'"
|
||||||
|
:page-inline="true"
|
||||||
|
:show-confirm="false"
|
||||||
|
:show-title="false"
|
||||||
|
:show-subtitle="true"
|
||||||
|
:row-height="48"
|
||||||
|
:month-num="calendarMonthNum"
|
||||||
|
:min-date="calendarMinDate"
|
||||||
|
:max-date="calendarMaxDate"
|
||||||
|
:allow-same-day="true"
|
||||||
|
:max-range="31"
|
||||||
|
range-prompt="单次最多选择31天"
|
||||||
|
:show-range-prompt="true"
|
||||||
|
start-text="开始"
|
||||||
|
end-text="结束"
|
||||||
|
color="#2CCB98"
|
||||||
|
:default-date="calendarDefaultDate"
|
||||||
|
@confirm="onCalendarConfirm"
|
||||||
|
@close="closeDrawer"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<!-- 确定按钮：自绘钉底。组件内 footer 在 pageInline 多层嵌套下定位不可控。
|
||||||
|
选满起止日期时 showConfirm=false 的组件会自动 emit confirm（中间态），
|
||||||
|
这里只记录值不关闭抽屉，由这枚按钮确认后才写入筛选 -->
|
||||||
|
<view class="time-drawer-footer">
|
||||||
|
<up-button
|
||||||
|
shape="circle"
|
||||||
|
:text="calendarReady ? '确定' : '请选择起止日期'"
|
||||||
|
color="#2CCB98"
|
||||||
|
:disabled="!calendarReady"
|
||||||
|
@click="onConfirmClick"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 当前为静态页占位，不包含交互逻辑。
|
import { getSceneList } from '@/api/scene'
|
||||||
export default {}
|
|
||||||
|
// 日历可回溯的年数，按需调整（monthNum 会随 minDate 动态计算，无需同步改）
|
||||||
|
const CALENDAR_YEARS_BACK = 1
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
drawer: '', // '' | 'scene' | 'status' | 'time'
|
||||||
|
calendarKey: 0, // 强制重建日历，规避内部 selected 状态残留
|
||||||
|
pendingRange: [], // 日历临时选中的起止日期，点确定按钮才写入 filters
|
||||||
|
filters: {
|
||||||
|
sceneId: 0, // 0 表示全部
|
||||||
|
status: 0,
|
||||||
|
startDate: '',
|
||||||
|
endDate: '',
|
||||||
|
timeText: ''
|
||||||
|
},
|
||||||
|
sceneOptions: [{ id: 0, name: '全部' }],
|
||||||
|
statusOptions: [
|
||||||
|
{ id: 0, name: '全部' },
|
||||||
|
{ id: 1, name: '未处理' },
|
||||||
|
{ id: 2, name: '已处理' },
|
||||||
|
{ id: 3, name: '已忽略' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
sceneLabel() {
|
||||||
|
const hit = this.sceneOptions.find((o) => o.id === this.filters.sceneId)
|
||||||
|
return hit ? hit.name : '全部场所'
|
||||||
|
},
|
||||||
|
statusLabel() {
|
||||||
|
const hit = this.statusOptions.find((o) => o.id === this.filters.status)
|
||||||
|
return hit ? hit.name : '全部状态'
|
||||||
|
},
|
||||||
|
// 日历可选范围：过去一年 ~ 今天（不传 minDate 时组件默认从当月开始，无法回看历史）。
|
||||||
|
calendarMinDate() {
|
||||||
|
const d = new Date()
|
||||||
|
d.setFullYear(d.getFullYear() - CALENDAR_YEARS_BACK)
|
||||||
|
return d.getTime()
|
||||||
|
},
|
||||||
|
calendarMaxDate() {
|
||||||
|
return Date.now()
|
||||||
|
},
|
||||||
|
// up-calendar 的 monthNum 同时参与 maxDate 兜底计算：未传 maxDate 时月份终点是
|
||||||
|
// minDate + monthNum 个月；传了 maxDate 后它又反过来限制可渲染的月份数。
|
||||||
|
// 所以这里动态算出 min~max 实际跨过的月数，保证完整展示过去一年。
|
||||||
|
calendarMonthNum() {
|
||||||
|
return (
|
||||||
|
(new Date(this.calendarMaxDate).getFullYear() -
|
||||||
|
new Date(this.calendarMinDate).getFullYear()) *
|
||||||
|
12 +
|
||||||
|
new Date(this.calendarMaxDate).getMonth() -
|
||||||
|
new Date(this.calendarMinDate).getMonth() +
|
||||||
|
1
|
||||||
|
)
|
||||||
|
},
|
||||||
|
// 日历回显：已选范围作为 defaultDate（range 模式要求数组）。
|
||||||
|
calendarDefaultDate() {
|
||||||
|
const dates = [this.filters.startDate, this.filters.endDate].filter(Boolean)
|
||||||
|
return dates.length === 2 ? dates : []
|
||||||
|
},
|
||||||
|
// 日历当前是否已选满起止日期（pendingRange 在日历选中时更新）。
|
||||||
|
calendarReady() {
|
||||||
|
return this.pendingRange.length >= 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadScenes()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 动态加载场所列表：复用场景接口，后端 /scene/list 就绪后自动走真实请求。
|
||||||
|
// 失败时保留"全部"选项不阻塞筛选（toast 由请求封装统一弹出）。
|
||||||
|
async loadScenes() {
|
||||||
|
try {
|
||||||
|
const data = await getSceneList()
|
||||||
|
const list = Array.isArray(data) ? data : []
|
||||||
|
this.sceneOptions = [{ id: 0, name: '全部' }, ...list]
|
||||||
|
} catch (error) {
|
||||||
|
this.sceneOptions = [{ id: 0, name: '全部' }]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
noop() {},
|
||||||
|
openDrawer(name) {
|
||||||
|
if (name === 'time') {
|
||||||
|
// 重建日历实例：up-calendar 内部选中态不会随 defaultDate 变化重置
|
||||||
|
this.calendarKey += 1
|
||||||
|
// 回显已提交的日期范围，避免重开抽屉时按钮误判为“未选择”
|
||||||
|
const dates = [this.filters.startDate, this.filters.endDate].filter(Boolean)
|
||||||
|
this.pendingRange = dates.length === 2 ? dates : []
|
||||||
|
}
|
||||||
|
this.drawer = name
|
||||||
|
},
|
||||||
|
closeDrawer() {
|
||||||
|
this.drawer = ''
|
||||||
|
},
|
||||||
|
// 场所/状态抽屉点选：写入筛选值并收起抽屉。
|
||||||
|
selectScene(id) {
|
||||||
|
this.filters.sceneId = id
|
||||||
|
this.closeDrawer()
|
||||||
|
this.handle()
|
||||||
|
},
|
||||||
|
selectStatus(id) {
|
||||||
|
this.filters.status = id
|
||||||
|
this.closeDrawer()
|
||||||
|
this.handle()
|
||||||
|
},
|
||||||
|
// 下拉选项变化：触发筛选回调，便于后续接事件列表接口。
|
||||||
|
handle() {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log('[event filters]', { ...this.filters })
|
||||||
|
},
|
||||||
|
// 日历选中变化（showConfirm=false 时组件在选满起止时自动触发 confirm）：
|
||||||
|
// 只记录临时选择，不关闭抽屉——最终提交由底部自绘确定按钮完成。
|
||||||
|
onCalendarConfirm(dateArr) {
|
||||||
|
if (!Array.isArray(dateArr) || dateArr.length < 2) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.pendingRange = dateArr
|
||||||
|
},
|
||||||
|
// 自绘确定按钮：提交临时选择并写入筛选值。
|
||||||
|
// range 模式选满后 confirm 会带完整日期数组（起止之间每一天都在内），
|
||||||
|
// 所以取数组首尾作为起止日期，而非前两个元素。
|
||||||
|
onConfirmClick() {
|
||||||
|
if (!this.calendarReady) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const start = this.pendingRange[0]
|
||||||
|
const end = this.pendingRange[this.pendingRange.length - 1]
|
||||||
|
this.filters.startDate = start
|
||||||
|
this.filters.endDate = end
|
||||||
|
this.filters.timeText = `${start} 至 ${end}`
|
||||||
|
this.closeDrawer()
|
||||||
|
this.handle()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/styles/common.css';
|
@import '@/styles/common.css';
|
||||||
|
|
||||||
.filters {
|
.filters {
|
||||||
> view + view {
|
display: flex;
|
||||||
margin-left: 18rpx;
|
align-items: stretch;
|
||||||
}
|
|
||||||
min-height: 96rpx;
|
min-height: 96rpx;
|
||||||
padding: 16rpx 24rpx;
|
padding: 16rpx 24rpx;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-top: 1rpx solid #ededed;
|
border-top: 1rpx solid #ededed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-cell {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
+ .filter-cell {
|
||||||
|
margin-left: 18rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-trigger {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 64rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #f5f6f8;
|
||||||
|
border: 1rpx solid transparent;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 26rpx;
|
||||||
|
transition: background-color 0.2s, border-color 0.2s;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background: #e9fff3;
|
||||||
|
border-color: #2ccb98;
|
||||||
|
color: #12a37a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-text {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-area {
|
.empty-area {
|
||||||
min-height: 880rpx;
|
min-height: 720rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-hint {
|
||||||
|
margin-top: -40rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #b5b9c0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 场所/状态选项抽屉 */
|
||||||
|
.option-drawer {
|
||||||
|
background: #ffffff;
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-drawer-header {
|
||||||
|
padding: 28rpx 32rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1rpx solid #f0f1f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-drawer-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2a2d33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-drawer-close {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.option-drawer-list {
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-drawer-item {
|
||||||
|
min-height: 96rpx;
|
||||||
|
padding: 0 28rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-radius: 14rpx;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f7f8fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background: #e9fff3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-drawer-item__text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #2a2d33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-drawer-item--active .option-drawer-item__text {
|
||||||
|
color: #2CCB98;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间抽屉：自绘遮罩 + 顶部面板（不经过 up-popup，避免其 touchmove 拦截吞掉日历滚动手势） */
|
||||||
|
.time-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
z-index: 10075;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 66vh; /* 固定高度：日历窗口+按钮填满，按钮钉底 */
|
||||||
|
z-index: 10076;
|
||||||
|
background: #ffffff;
|
||||||
|
border-bottom-left-radius: 32rpx;
|
||||||
|
border-bottom-right-radius: 32rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-header {
|
||||||
|
padding: 20rpx 32rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1rpx solid #f0f1f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2a2d33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-close {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-body {
|
||||||
|
/* 占满抽屉剩余空间；日历内部 scroll-view 通过 calc 抬高到填满 body，
|
||||||
|
组件内的确定按钮再用绝对定位钉回 body 底部，消除按钮下方空白 */
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 日历滚动窗口高度。
|
||||||
|
pageInline 下 up-calendar 内部仍套着 u-popup（.u-popup → .u-transition → .u-popup__content），
|
||||||
|
这几层默认高度都是 auto，导致 scroll-view 的百分比高度无法解析
|
||||||
|
（退化成内容高度=全部月份堆叠、滚动窗口失效）。这里把中间层逐级撑到 100%，
|
||||||
|
再让 scroll-view 用 flex 填满 header 以下的剩余空间，实现自适应、无空隙。 */
|
||||||
|
.time-drawer-body :deep(.u-popup),
|
||||||
|
.time-drawer-body :deep(.u-transition),
|
||||||
|
.time-drawer-body :deep(.u-popup__content) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-body :deep(.u-calendar) {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-body :deep(.u-calendar-header) {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-body :deep(.u-calendar .u-scroll-view),
|
||||||
|
.time-drawer-body :deep(.u-calendar scroll-view) {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确定按钮：不依赖组件内 footer（在多层嵌套里定位/裁切不可控），
|
||||||
|
在 body 底部自绘一枚按钮，选满起止日期后可点 */
|
||||||
|
.time-drawer-footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
|
||||||
|
border-top: 1rpx solid #f0f1f3;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 副标题（当前滚动到的月份）：弱化为居中小胶囊 */
|
||||||
|
.time-drawer-body :deep(.u-calendar-header__subtitle) {
|
||||||
|
align-self: center;
|
||||||
|
margin: 8rpx 0 4rpx;
|
||||||
|
padding: 4rpx 24rpx;
|
||||||
|
background: #f2f3f5;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
height: auto;
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #6b6f76;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 星期行 */
|
||||||
|
.time-drawer-body :deep(.u-calendar-header__weekdays) {
|
||||||
|
padding: 8rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f1f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-body :deep(.u-calendar-header__weekdays__weekday) {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #909399;
|
||||||
|
line-height: 44rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-body :deep(.u-calendar-month-wrapper) {
|
||||||
|
/* 不能加横向 padding：首日偏移用 JS 实测容器宽计算、格子宽用 CSS 百分比，
|
||||||
|
两者对 padding 的包含不同会造成偏差，偏移大的月份首行末尾格子会被挤换行 */
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 每月标题行 */
|
||||||
|
.time-drawer-body :deep(.u-calendar-month__title) {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2a2d33;
|
||||||
|
padding: 16rpx 12rpx;
|
||||||
|
line-height: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 月份背景水印：默认 155px 过大过亮，缩小压淡 */
|
||||||
|
.time-drawer-body :deep(.u-calendar-month__days__month-mark-wrapper__text) {
|
||||||
|
font-size: 110rpx;
|
||||||
|
color: rgba(231, 232, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-drawer-body :deep(.u-calendar-month__days__day) {
|
||||||
|
padding: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 日期字号恢复正常可读尺寸（此前随抽屉缩小被误压） */
|
||||||
|
.time-drawer-body :deep(.u-calendar-month__days__day__select__info) {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2a2d33;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 开始/结束提示小字 */
|
||||||
|
.time-drawer-body :deep(.u-calendar-month__days__day__select__buttom-info) {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #6b6f76;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,8 @@
|
||||||
|
|
||||||
<up-cell-group :border="false" custom-style="margin: 24rpx; border-radius: 24rpx; overflow: hidden; background: #ffffff;">
|
<up-cell-group :border="false" custom-style="margin: 24rpx; border-radius: 24rpx; overflow: hidden; background: #ffffff;">
|
||||||
<up-cell title="设备配置" is-link @click="goConfig" />
|
<up-cell title="设备配置" is-link @click="goConfig" />
|
||||||
<up-cell title="分享的设备" is-link />
|
|
||||||
<up-cell title="场所管理" is-link />
|
<up-cell title="场所管理" is-link />
|
||||||
<up-cell title="接警人管理" is-link />
|
|
||||||
<up-cell title="手机号" :value="phoneText" is-link />
|
<up-cell title="手机号" :value="phoneText" is-link />
|
||||||
<up-cell title="语音广播" is-link />
|
|
||||||
<up-cell title="当前版本" value="2.8.44" />
|
<up-cell title="当前版本" value="2.8.44" />
|
||||||
<up-cell title="退出登录" @click="logout" />
|
<up-cell title="退出登录" @click="logout" />
|
||||||
</up-cell-group>
|
</up-cell-group>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 361 B |
Binary file not shown.
|
After Width: | Height: | Size: 351 B |
Binary file not shown.
|
After Width: | Height: | Size: 559 B |
Binary file not shown.
|
After Width: | Height: | Size: 590 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue