scout666/chat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增聊天设置页搜索指定聊天记录的按日期搜索，并调整日期选择组件样式；新增群公告页面

Browse Source
This commit is contained in:
wangyifeng 2025-01-03 18:57:37 +08:00
parent 0db50f2216
commit 85de077ae0
14 changed files with 1525 additions and 789 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/chatSettings/index.js
View File

@ -9,3 +9,21 @@ export const ServeQueryGroupInfo = (data) => {
data,
})
}
// 查看群成员
export const ServeQueryGroupMembers = (data) => {
return request({
url: '/api/v1/group/member/list',
method: 'GET',
data,
})
}
// 群公告查询
export const ServeQueryGroupNotice = (data) => {
return request({
url: '/api/v1/group/notice/list',
method: 'GET',
data,
})
}

9
src/api/search/index.js
View File

@ -36,3 +36,12 @@ export const ServeTalkRecord = (data) => {
data,
})
}
//查看存在聊天记录的天数
export const ServeTalkDate = (data) => {
return request({
url: '/api/v1/talk/date',
method: 'POST',
data,
})
}

16
src/pages.json
View File

@ -83,6 +83,14 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/search/searchByCondition/index",
"type": "page",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/chatSettings/index",
"type": "page",
@ -90,6 +98,14 @@
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/chatSettings/groupManage/manageNotice",
"type": "page",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {

14
src/pages/chatSettings/components/settingFormItem.vue
View File

@ -4,7 +4,7 @@
<div class="item-main-label">
<span class="text-[32rpx] font-regular">{{ item.label }}</span>
</div>
<div class="item-main-value">
<div class="item-main-value" @click="toManagePage(item)">
<span class="text-[32rpx] font-regular" v-if="item.value">
{{ item.value }}
</span>
@ -28,7 +28,7 @@
</div>
</template>
<script setup>
import { defineProps } from 'vue'
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
item: {
type: Object,
@ -37,6 +37,10 @@ const props = defineProps({
},
},
})
const emits = defineEmits(['toManagePage'])
const toManagePage = (item) => {
emits('toManagePage', item.label)
}
</script>
<style lang="scss" scoped>
.setting-form-item {
@ -46,12 +50,18 @@ const props = defineProps({
align-items: center;
justify-content: space-between;
.item-main-label {
flex-shrink: 0;
span {
line-height: 44rpx;
color: $theme-text;
}
}
.item-main-value {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
span {
line-height: 44rpx;
color: #747474;

95
src/pages/chatSettings/groupManage/manageNotice.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div class="outer-layer manage-notice-page">
<div class="root">
<ZPaging ref="zPaging" :show-scrollbar="false">
<template #top>
<tm-navbar :hideBack="true" hideHome title="" :leftWidth="220">
<template #left>
<div class="nav-bar-cancel-btn">
<span class="text-[34rpx] font-regular" @click="toPrevPage">
{{ $t('cancel') }}
</span>
</div>
</template>
<div class="navBar-title flex flex-col items-center justify-center">
<span class="text-[34rpx] font-medium">
{{ $t('chat.settings.groupNotice') }}
</span>
</div>
<template #right>
<div class="nav-bar-done-btn">
<span class="text-[34rpx] font-regular">
{{ $t('button.text.done') }}
</span>
</div>
</template>
</tm-navbar>
</template>
<div class="notice-text-area">
<wd-textarea
v-model="state.groupNotice"
:placeholder="$t('input.placeholder.enter')"
:maxlength="500"
:show-word-limit="true"
@input="inputGroupNotice"
/>
</div>
</ZPaging>
</div>
</div>
</template>
<script setup>
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { reactive } from 'vue'
const state = reactive({
groupNotice: '', //群公告
})
//点击返回上一页
const toPrevPage = () => {
uni.navigateBack({
delta: 1,
})
}
//输入群公告
const inputGroupNotice = (e) => {
state.groupNotice = e
}
</script>
<style scoped lang="scss">
.outer-layer {
flex: 1;
background-image: url('@/static/image/clockIn/z3280@3x.png');
background-size: cover;
background-repeat: no-repeat;
}
.manage-notice-page {
.nav-bar-cancel-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 0 0 42rpx;
span {
line-height: 40rpx;
}
}
.nav-bar-done-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0 36rpx 0 0;
padding: 6rpx 24rpx;
background-color: #f3f3f3;
border-radius: 8rpx;
span {
color: #bababa;
line-height: 40rpx;
}
}
}
</style>

246
src/pages/chatSettings/index.vue
View File

@ -23,8 +23,24 @@
{{ '（' + groupNum + '）' }}
</span>
</div>
<div class="base-info-tag">
<span class="text-[24rpx] font-medium">{{ groupType }}</span>
<div
class="base-info-tag"
:style="{
borderColor:
groupTypeMapping[state?.groupInfo?.group_type]
?.result_type_color,
}"
>
<span
class="text-[24rpx] font-medium"
:style="{
color:
groupTypeMapping[state?.groupInfo?.group_type]
?.result_type_color,
}"
>
{{ groupType }}
</span>
</div>
</div>
<div class="base-info-edit">
@ -41,13 +57,20 @@
<div class="group-member-list">
<div
class="group-member-list-each"
v-for="(memberItem, memberIndex) in item?.memberList"
v-for="(memberItem, memberIndex) in state?.memberList"
>
<div class="group-member-each" v-if="memberIndex < 15">
<div class="group-member-avatar">
<img />
<span class="text-[24rpx] font-bold">
{{ memberItem.avatar }}
<img v-if="memberItem.avatar" :src="memberItem.avatar" />
<span
v-if="!memberItem.avatar"
class="text-[24rpx] font-bold"
>
{{
memberItem.nickname.length >= 2
? memberItem.nickname.slice(-2)
: memberItem.nickname
}}
</span>
</div>
<div class="group-member-tag" v-if="memberIndex < 3">
@ -57,7 +80,7 @@
</div>
<div class="group-member-name">
<span class="text-[24rpx] font-regular">
{{ memberItem.name }}
{{ memberItem.nickname }}
</span>
</div>
</div>
@ -71,7 +94,10 @@
v-for="(item, index) in state.chatGroupInfos"
:key="index"
>
<settingFormItem :item="item"></settingFormItem>
<settingFormItem
:item="item"
@toManagePage="toManagePage"
></settingFormItem>
</div>
</div>
<div class="chat-records-search chat-settings-card">
@ -88,6 +114,7 @@
class="record-search-types-each"
v-for="(item, index) in state.recordSearchTypeList"
:key="index"
@click="toSearchByConditionPage(index)"
>
<img class="record-search-types-icon" :src="item.typeIcon" />
<span class="text-[24rpx] font-regular">{{ item.value }}</span>
@ -135,6 +162,10 @@
</div>
</template>
<script setup>
import zu4992 from '@/static/image/chatList/zu4992@2x.png'
import zu4991 from '@/static/image/chatList/zu4991@2x.png'
import zu4989 from '@/static/image/chatList/zu4989@2x.png'
import zu5296 from '@/static/image/chatList/zu5296@2x.png'
import recordSearchTypeIcon_groupMember from '@/static/image/chatSettings/recordSearchTypeGroupMembers.png'
import recordSearchTypeIcon_date from '@/static/image/chatSettings/recordSearchTypeDate.png'
import recordSearchTypeIcon_imgAndVideo from '@/static/image/chatSettings/recordSearchTypeImgAndVideo.png'
@ -144,7 +175,11 @@ import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import settingFormItem from './components/settingFormItem.vue'
import { computed, onMounted, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { ServeQueryGroupInfo } from '@/api/chatSettings/index'
import {
ServeQueryGroupInfo,
ServeQueryGroupMembers,
ServeQueryGroupNotice,
} from '@/api/chatSettings/index'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
@ -153,60 +188,25 @@ onLoad((options) => {
console.log(options.groupId)
state.groupId = Number(options.groupId)
getGroupInfo()
getGroupMembers()
getGroupNotice()
}
})
const state = reactive({
chatGroupMembers: [], //群成员
chatGroupMembers: [], //群成员form-item
chatGroupInfos: [], //群聊信息
recordSearchTypeList: [], //聊天记录搜索类型
chatSettings: [], //群聊设置
chatManagement: [], //群聊管理
groupId: '', //群id
groupInfo: null, //群信息
memberList: [], //群成员列表
groupNotice: [], //群公告
})
onMounted(() => {
let memberList = []
for (let i = 0; i < 18; i++) {
memberList.push({
name: '姜雪辞',
avatar: '雪辞',
})
}
state.chatGroupMembers = [
{
label: t('chat.settings.groupMember'),
hasPointer: true,
value: '全部（' + groupNum.value + '）',
subValue: '',
customInfo: '',
memberList: memberList,
},
]
state.chatGroupInfos = [
{
label: t('chat.settings.groupName'),
hasPointer: true,
value: groupName,
subValue: '',
customInfo: '',
},
{
label: t('chat.settings.groupNotice'),
hasPointer: true,
value: '',
subValue: '数字科技中心啊撒salads阿萨达撒的啊撒…',
customInfo: '',
},
{
label: t('chat.settings.groupType'),
hasPointer: false,
value: '公司群',
subValue: '',
customInfo: '',
},
]
updateGroupInfos()
state.recordSearchTypeList = [
{
value: t('chat.settings.groupMember'),
@ -265,7 +265,10 @@ onMounted(() => {
//群头像
const groupAvatar = computed(() => {
return ''
return (
state?.groupInfo?.avatar ||
groupTypeMapping[state?.groupInfo?.group_type]?.defaultImg
)
})
//群名称
@ -275,12 +278,37 @@ const groupName = computed(() => {
//群人数
const groupNum = computed(() => {
return 600
return state?.groupInfo?.group_num || 0
})
// 映射表-根据groupType设置对应值
const groupTypeMapping = {
0: {
defaultImg: 'textImg',
},
1: {
defaultImg: zu4992,
},
2: {
result_type: t('index.mine.department'),
result_type_color: '#377EC6',
defaultImg: zu4989,
},
3: {
result_type: t('index.mine.project'),
result_type_color: '#C1681C',
defaultImg: zu4991,
},
4: {
result_type: t('index.type.company'),
result_type_color: '#7A58DE',
defaultImg: zu5296,
},
}
//群类型
const groupType = computed(() => {
return '公司'
return groupTypeMapping[state?.groupInfo?.group_type]?.result_type || ''
})
//查询群信息
@ -294,12 +322,111 @@ const getGroupInfo = () => {
console.log(data)
if (code == 200) {
state.groupInfo = data
updateGroupInfos()
} else {
}
})
resp.catch(() => {})
}
//查看群成员
const getGroupMembers = () => {
let params = {
group_id: state.groupId,
}
const resp = ServeQueryGroupMembers(params)
console.log(resp)
resp.then(({ code, data }) => {
console.log(data)
if (code == 200) {
state.memberList = data.items
} else {
}
})
resp.catch(() => {})
}
//群公告查询
const getGroupNotice = () => {
let params = {
group_id: state.groupId,
}
const resp = ServeQueryGroupNotice(params)
console.log(resp)
resp.then(({ code, data }) => {
console.log(data)
if (code == 200) {
state.groupNotice = data.items
updateGroupInfos()
} else {
}
})
resp.catch(() => {})
}
//更新群信息
const updateGroupInfos = () => {
state.chatGroupMembers = [
{
label: t('chat.settings.groupMember'),
hasPointer: true,
value: '全部（' + groupNum.value + '）',
subValue: '',
customInfo: '',
},
]
state.chatGroupInfos = [
{
label: t('chat.settings.groupName'),
hasPointer: true,
value: groupName.value,
subValue: '',
customInfo: '',
},
{
label: t('chat.settings.groupNotice'),
hasPointer: true,
value: '',
subValue: state.groupNotice[0],
customInfo: '',
},
{
label: t('chat.settings.groupType'),
hasPointer: false,
value: groupType.value + '群',
subValue: '',
customInfo: '',
},
]
}
//点击跳转到管理页面
const toManagePage = (label) => {
console.log(label)
if (label && label === t('chat.settings.groupNotice')) {
uni.navigateTo({
url: '/pages/chatSettings/groupManage/manageNotice',
})
}
}
//点击跳转到按条件搜索页
const toSearchByConditionPage = (flag) => {
let condition = ''
if (flag == 1) {
condition = 'date'
}
uni.navigateTo({
url:
'/pages/search/searchByCondition/index?condition=' +
condition +
'&receiver_id=' +
state.groupId,
})
}
</script>
<style scoped lang="scss">
.outer-layer {
@ -407,16 +534,24 @@ const getGroupInfo = () => {
.group-member-each {
margin: 32rpx 0 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
.group-member-avatar {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(to right, #674bbc, #46299d);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
span {
line-height: 34rpx;
@ -426,7 +561,6 @@ const getGroupInfo = () => {
.group-member-tag {
position: absolute;
top: 58rpx;
left: 0;
display: flex;
flex-direction: row;
align-items: center;
@ -445,9 +579,13 @@ const getGroupInfo = () => {
align-items: center;
justify-content: center;
margin: 8rpx 0 0;
width: 100%;
span {
overflow: hidden;
text-overflow: ellipsis;
line-height: 34rpx;
color: #919191;
white-space: nowrap;
}
}
}

241
src/pages/search/searchByCondition/index.vue Normal file
View File

@ -0,0 +1,241 @@
<template>
<div class="outer-layer search-by-condition-page">
<div class="root">
<ZPaging ref="zPaging" :show-scrollbar="false">
<template #top>
<tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
<div class="navBar-title flex flex-col items-center justify-center">
<span class="text-[34rpx] font-medium">
{{ state.pageTitle }}
</span>
</div>
</tm-navbar>
</template>
<div v-if="state.condition === 'date'" class="search-by-date">
<tm-time-picker
:show="state.showMonthPicker"
:showDetail="{
year: true,
month: true,
day: false,
hour: false,
minute: false,
second: false,
am_pm: false,
}"
:showSuffix="{
year: '',
month: '',
}"
:defaultValue="state.nowDate"
format="YYYY年MM月"
start=""
:end="state.maxDate"
@confirm="confirmSelectedMonth"
:round="0"
:title="$t('search.condition.date_pickerTitle')"
>
<div class="search-date-picker">
<span class="text-[28rpx] font-regular">
{{ state.selectedMonth }}
</span>
<img src="/src/static/image/search/down-pointer.png" />
</div>
</tm-time-picker>
<tm-calendar-view
:show="true"
:hideTool="true"
:hideButton="true"
:dateStyle="state.dateStyle"
:defaultValue="state.selectedDateArray"
v-model="state.selectedDateArray"
:disabledDate="state.disabledDateArray"
@click="selectDate"
model="day"
:end="state.maxDate"
@getDArray="getDArray"
:showDefault="false"
></tm-calendar-view>
</div>
</ZPaging>
</div>
</div>
</template>
<script setup>
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import searchList from '../components/searchList.vue'
import { parseTime } from '@/utils/datetime'
import { onMounted, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { ServeTalkDate } from '@/api/search/index'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
let nowDay = new Date().setHours(0, 0, 0, 0)
const state = reactive({
receiver_id: '', //目标人id
pageTitle: '', //页面标题
dateStyle: [], //日期样式
nowDate: new Date(nowDay), //当前时间
maxDate: new Date(nowDay), //可选择最大时间
selectedDateArray: Array(new Date(nowDay)), //选择的月份数组
showMonthPicker: false, //是否显示月份选择
selectedMonth: new Date(nowDay), //当前选择的月份
disabledDateArray: [], //被禁用的日期数组
dArray: [], //日历日期数组
})
onLoad((options) => {
console.log(options)
if (options.receiver_id) {
state.receiver_id = Number(options.receiver_id)
}
if (options.condition) {
state.condition = options.condition
if (options.condition === 'date') {
state.pageTitle = t('search.condition.date')
ServeQueryTalkDate(parseTime(state.nowDate, '{y}{m}'))
}
}
})
onMounted(() => {
state.selectedMonth = parseTime(state.selectedMonth, '{y}年{m}月')
state.dateStyle = [
{
date: state.nowDate, //日期
text: false, //浅色背景。
color: '#46299D', //主题色.
extra: '今天', //额外的内容，在日期下方显示的文本。
},
]
})
//查看存在聊天记录的天数
const ServeQueryTalkDate = (month) => {
let params = {
month: month,
talk_type: 2, //1私聊2群聊
receiver_id: state.receiver_id, //目标人id
}
const resp = ServeTalkDate(params)
console.log(resp)
resp.then(({ code, data }) => {
console.log(data)
if (code == 200) {
if (data && data.length > 0) {
const formattedData = data.map(
(item) =>
item.substring(0, 4) +
'/' +
item.substring(4, 6) +
'/' +
item.substring(6, 8),
)
let disabledDateArray = state.dArray.filter(
(dIt) => !formattedData.includes(dIt),
)
disabledDateArray = disabledDateArray.map((item) =>
item.replace(/\//g, '-'),
)
console.log(disabledDateArray)
state.disabledDateArray = disabledDateArray
} else {
state.disabledDateArray = state.dArray
}
} else {
}
})
resp.catch(() => {})
}
//点击选择日期
const selectDate = (e) => {
if (e == parseTime(state.nowDate, '{y}/{m}/{d}')) {
console.log('==今日')
state.dateStyle = [
{
date: state.nowDate, //日期
text: false, //浅色背景。
color: '#46299D', //主题色.
extra: '今天', //额外的内容，在日期下方显示的文本。
},
]
} else {
state.dateStyle = [
{
date: state.nowDate, //日期
text: false, //浅色背景。
color: '', //主题色.
extra: '今天', //额外的内容，在日期下方显示的文本。
},
{
date: new Date(e), //日期
text: false, //浅色背景。
color: '#46299D', //主题色.
},
]
}
}
//点击确认选择月份
const confirmSelectedMonth = (e) => {
console.log(e)
state.selectedMonth = parseTime(e, '{y}年{m}月')
// console.log()
let newDate = new Date(e)
newDate.setHours(0, 0, 0, 0)
newDate.setDate(1)
state.selectedDateArray = Array(new Date(newDate))
state.dateStyle = [
{
date: state.nowDate, //日期
text: false, //浅色背景。
color: '', //主题色.
extra: '今天', //额外的内容，在日期下方显示的文本。
},
]
ServeQueryTalkDate(parseTime(e, '{y}{m}'))
}
//获取日历日期数组
const getDArray = (dArray) => {
state.dArray = dArray
}
</script>
<style scoped lang="scss">
.search-by-date {
.search-date-picker {
padding: 20rpx 32rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
span {
line-height: 40rpx;
color: $theme-hint-text;
}
img {
width: 18rpx;
height: 11rpx;
margin: 0 0 0 26rpx;
}
}
}
body::v-deep .text-overflow-1 {
color: #666666 !important;
line-height: 44rpx !important;
font-size: 32rpx !important;
font-weight: bold !important;
}
body::v-deep .tmicon-times-circle-fill {
width: 37rpx;
height: 37rpx;
}
body::v-deep .round-3 {
background: linear-gradient(to right, #674bbc, #46299d);
}
</style>

BIN
src/static/image/search/down-pointer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 B

765
src/uni_modules/tmui/components/tm-calendar-view/month-day.vue
View File

@ -1,82 +1,149 @@
<template>
<view class="flex flex-col relative">
<tm-sheet v-if="!props.hideTool" :shadow="0" :round="0" :height="88" :margin="[0, 0]" :padding="[0, 0]" _class="flex flex-col">
<view class="flex flex-row flex-row-center-center" style="height: 88rpx">
<view @click.stop="prevYear" class="px-16">
<tm-icon :userInteractionEnabled="false" :font-size="22" name="tmicon-angle-double-left"></tm-icon>
</view>
<view @click.stop="prevMonth" class="px-16">
<tm-icon :userInteractionEnabled="false" :font-size="22" name="tmicon-angle-left"></tm-icon>
</view>
<view class="px-12">
<tm-text :userInteractionEnabled="false" _class="text-weight-b" :font-size="32" :label="_nowDate"></tm-text>
</view>
<view @click.stop="nextMonth" class="px-16">
<tm-icon :userInteractionEnabled="false" :font-size="22" name="tmicon-angle-right"></tm-icon>
</view>
<view @click.stop="nextYear" class="px-16">
<tm-icon :userInteractionEnabled="false" :font-size="22" name="tmicon-angle-double-right"></tm-icon>
</view>
</view>
<view
@click="nowWeekClick"
class="absolute t-0 r--6 zIndex-10 round-12 py-4 flex flex-row flex-row-center-center"
style="width: 90rpx; height: 88rpx"
>
<tm-text :userInteractionEnabled="false" color="grey" _class="text-align-center" :font-size="28" :label="props.textUnit[8]"></tm-text>
</view>
</tm-sheet>
<view class="flex flex-row flex-row-center-center py-12" :style="[{ height: '74rpx' }]">
<view class="flex-1 flex-center" v-for="(item, index) in weekStr" :key="index">
<view style="width: 62rpx" class="flex-center flex-col">
<tm-text :font-size="24" :label="item"></tm-text>
</view>
</view>
</view>
<view class="flex flex-col">
<view class="flex flex-row flex-row-center-center" :style="[{ height: '94rpx' }]" v-for="(item, index) in _data" :key="index">
<view @click="clickWeek(item2)" class="flex-1 flex flex-row flex-row-center-center" v-for="(item2, index2) in item" :key="index2">
<tm-sheet
:userInteractionEnabled="false"
:height="90"
:width="90"
:shadow="0"
:round="24"
:border="item2.extra.color && isSelected(item2.dateStr) ? 1 : 0"
_class="flex-row"
:transprent="item2.extra.color || !isSelected(item2.dateStr)"
:color="item2.extra.color ? item2.extra.color : isSelected(item2.dateStr) ? _color : 'white'"
:margin="[0, 0]"
:padding="[0, 0]"
>
<view
:userInteractionEnabled="false"
style="width: 62rpx"
:class="[!item2.isNowIn ? 'opacity-6' : '']"
class="flex-1 flex-center"
>
<view style="width: 62rpx" class="flex-center flex-col" :style="[{ opacity: item2.disabled ? '0.3' : '1' }]">
<tm-text :font-size="28" :label="item2.date"></tm-text>
<tm-text _class="flex-center" v-if="item2.extra.extra" :font-size="22" :label="item2.extra.extra"></tm-text>
</view>
</view>
</tm-sheet>
</view>
</view>
</view>
<view class="flex flex-col relative">
<tm-sheet
v-if="!props.hideTool"
:shadow="0"
:round="0"
:height="88"
:margin="[0, 0]"
:padding="[0, 0]"
_class="flex flex-col"
>
<view class="flex flex-row flex-row-center-center" style="height: 88rpx;">
<view @click.stop="prevYear" class="px-16">
<tm-icon
:userInteractionEnabled="false"
:font-size="22"
name="tmicon-angle-double-left"
></tm-icon>
</view>
<view @click.stop="prevMonth" class="px-16">
<tm-icon
:userInteractionEnabled="false"
:font-size="22"
name="tmicon-angle-left"
></tm-icon>
</view>
<view class="px-12">
<tm-text
:userInteractionEnabled="false"
_class="text-weight-b"
:font-size="32"
:label="_nowDate"
></tm-text>
</view>
<view @click.stop="nextMonth" class="px-16">
<tm-icon
:userInteractionEnabled="false"
:font-size="22"
name="tmicon-angle-right"
></tm-icon>
</view>
<view @click.stop="nextYear" class="px-16">
<tm-icon
:userInteractionEnabled="false"
:font-size="22"
name="tmicon-angle-double-right"
></tm-icon>
</view>
</view>
<view
@click="nowWeekClick"
class="absolute t-0 r--6 zIndex-10 round-12 py-4 flex flex-row flex-row-center-center"
style="width: 90rpx; height: 88rpx;"
>
<tm-text
:userInteractionEnabled="false"
color="grey"
_class="text-align-center"
:font-size="28"
:label="props.textUnit[8]"
></tm-text>
</view>
</tm-sheet>
<view
class="flex flex-row flex-row-center-center py-12"
:style="[{ height: '74rpx' }]"
>
<view
class="flex-1 flex-center"
v-for="(item, index) in weekStr"
:key="index"
>
<view style="width: 62rpx;" class="flex-center flex-col">
<tm-text :font-size="24" :label="item"></tm-text>
</view>
</view>
</view>
<view class="flex flex-col">
<view
class="flex flex-row flex-row-center-center"
:style="[{ height: '94rpx' }]"
v-for="(item, index) in _data"
:key="index"
>
<view
@click="clickWeek(item2)"
class="flex-1 flex flex-row flex-row-center-center"
v-for="(item2, index2) in item"
:key="index2"
>
<tm-sheet
:userInteractionEnabled="false"
:height="90"
:width="90"
:shadow="0"
:round="24"
:border="item2.extra.color && isSelected(item2.dateStr) ? 1 : 0"
_class="flex-row"
:transprent="item2.extra.color || !isSelected(item2.dateStr)"
:color="
item2.extra.color
? item2.extra.color
: isSelected(item2.dateStr)
? _color
: 'white'
"
:margin="[0, 0]"
:padding="[0, 0]"
>
<view
:userInteractionEnabled="false"
style="width: 62rpx;"
:class="[!item2.isNowIn ? 'opacity-6' : '']"
class="flex-1 flex-center"
>
<view
style="width: 62rpx;"
class="flex-center flex-col"
:style="[{ opacity: item2.disabled ? '0.3' : '1' }]"
>
<tm-text :font-size="28" :label="item2.date"></tm-text>
<tm-text
_class="flex-center"
v-if="item2.extra.extra"
:font-size="22"
:label="item2.extra.extra"
></tm-text>
</view>
</view>
</tm-sheet>
</view>
</view>
</view>
<tm-button
:followTheme="props.followTheme"
v-if="!props.hideButton"
:linear="props.linear"
:linear-deep="props.linearDeep"
:color="props.color"
@click="confirm"
block
:label="_confirmText"
:margin="[0, 16]"
></tm-button>
</view>
<tm-button
:followTheme="props.followTheme"
v-if="!props.hideButton"
:linear="props.linear"
:linear-deep="props.linearDeep"
:color="props.color"
@click="confirm"
block
:label="_confirmText"
:margin="[0, 16]"
></tm-button>
</view>
</template>
<script lang="ts" setup>
@ -103,88 +170,116 @@ const store = useTmpiniaStore()
* click-day 日期被选中时触发，注意禁用的日期不会触发 。
* change 当切换年或者月的时候触发。
*/
const emits = defineEmits(['update:modelValue', 'confirm', 'click-day', 'change'])
const emits = defineEmits([
'update:modelValue',
'confirm',
'click-day',
'change',
'getDArray',
])
const props = defineProps({
followTheme: {
type: Boolean,
default: true
},
//默认显示的日期
defaultValue: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => []
},
//当前的周时间段
modelValue: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => []
},
color: {
type: String,
default: 'primary'
},
linear: {
type: String,
default: ''
},
linearDeep: {
type: String,
default: 'light'
},
//指的是：有效的可选时间，小于此时间，不允许选中。
start: {
type: [String, Number, Date],
default: ''
},
//指的是：有效的可选时间，大于此时间，不允许选中。
end: {
type: [String, Number, Date],
default: ''
},
//被禁用的日期数组。如果["2022-1-1","2022-5-1"]
//被禁用的日期将无法选中。
disabledDate: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => []
},
//是否允许多选。
multiple: {
type: Boolean,
default: false
},
//设定单个日期的样式。
dateStyle: {
type: Array as PropType<Array<dateItemStyle>>,
default: () => []
},
//当multiple=true时，可以选择的最大日期数量。
max: {
type: Number,
default: 999
},
//隐藏头部操作栏
hideTool: {
type: Boolean,
default: false
},
//隐藏底部确认按钮
hideButton: {
type: Boolean,
default: false
},
confirmText: {
type: String,
default: '确认'
},
//周次，本日、本季、本年、本月、本周的文字请按顺序提供文本，方便定义其它语言。
textUnit: {
type: Array as PropType<string[]>,
default: ['周次','一','二','三','四','五','六','日','本日','本周','本月','本季度','本年','月','第${x}季度','年']
}
followTheme: {
type: Boolean,
default: true,
},
//默认显示的日期
defaultValue: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => [],
},
//当前的周时间段
modelValue: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => [],
},
color: {
type: String,
default: 'primary',
},
linear: {
type: String,
default: '',
},
linearDeep: {
type: String,
default: 'light',
},
//指的是：有效的可选时间，小于此时间，不允许选中。
start: {
type: [String, Number, Date],
default: '',
},
//指的是：有效的可选时间，大于此时间，不允许选中。
end: {
type: [String, Number, Date],
default: '',
},
//被禁用的日期数组。如果["2022-1-1","2022-5-1"]
//被禁用的日期将无法选中。
disabledDate: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => [],
},
//是否允许多选。
multiple: {
type: Boolean,
default: false,
},
//设定单个日期的样式。
dateStyle: {
type: Array as PropType<Array<dateItemStyle>>,
default: () => [],
},
//当multiple=true时，可以选择的最大日期数量。
max: {
type: Number,
default: 999,
},
//隐藏头部操作栏
hideTool: {
type: Boolean,
default: false,
},
//隐藏底部确认按钮
hideButton: {
type: Boolean,
default: false,
},
confirmText: {
type: String,
default: '确认',
},
//周次，本日、本季、本年、本月、本周的文字请按顺序提供文本，方便定义其它语言。
textUnit: {
type: Array as PropType<string[]>,
default: [
'周次',
'一',
'二',
'三',
'四',
'五',
'六',
'日',
'本日',
'本周',
'本月',
'本季度',
'本年',
'月',
'第${x}季度',
'年',
],
},
showDefault: {
//是否显示被选中的默认样式
type: Boolean,
default: true,
},
})
const _color = computed(() => {
if (props.followTheme && store.tmStore.color) return store.tmStore.color
return props.color
if (props.followTheme && store.tmStore.color) return store.tmStore.color
return props.color
})
const _confirmText = computed(() => props.confirmText)
@ -194,7 +289,7 @@ DayJs.extend(isSameOrBefore)
DayJs.extend(isBetween)
//当前选中的时间数组。
const _value = ref(props.defaultValue)
const weekStr = props.textUnit.slice(1,8)
const weekStr = props.textUnit.slice(1, 8)
//当前需要展示的年月。
const showOpenDate: Ref<dayjs.Dayjs> = ref(setShowopenDate())
@ -202,233 +297,251 @@ const showOpenDate: Ref<dayjs.Dayjs> = ref(setShowopenDate())
const _data: Ref<Array<Array<monthDayItem>>> = ref([])
//可选中开始时间
const _start_date = computed(() => {
let isv = DayJs(props.start).isValid()
return isv ? DayJs(props.start) : DayJs('1980-1-1')
let isv = DayJs(props.start).isValid()
return isv ? DayJs(props.start) : DayJs('1980-1-1')
})
//可选中的结束时间
const _end_date = computed(() => {
let isv = DayJs(props.end).isValid()
return isv ? DayJs(props.end) : DayJs('2450-1-1')
let isv = DayJs(props.end).isValid()
return isv ? DayJs(props.end) : DayJs('2450-1-1')
})
//当前展示的年月日期。
const _nowDate = computed(() => {
return showOpenDate.value.format('YYYY-MM')
return showOpenDate.value.format('YYYY-MM')
})
_data.value = getWeekOfMonthArray()
watch(
[() => props.modelValue, () => props.dateStyle, () => props.disabledDate, () => props.start, () => props.end],
() => {
_value.value = props.modelValue
showOpenDate.value = setShowopenDate()
_data.value = getWeekOfMonthArray()
},
{ deep: true }
[
() => props.modelValue,
() => props.dateStyle,
() => props.disabledDate,
() => props.start,
() => props.end,
],
() => {
_value.value = props.modelValue
showOpenDate.value = setShowopenDate()
_data.value = getWeekOfMonthArray(true)
},
{ deep: true },
)
//设置当前需要展示的月份。
function setShowopenDate() {
//从当前选中的第一个日期开始。如果没有就显示当前本地时间的月。
//从当前选中的第一个日期开始。如果没有就显示当前本地时间的月。
if (_value.value.length == 0) {
return DayJs()
}
let n = _value.value[0] || DayJs()
n = typeof n == 'undefined' || n == null ? DayJs() : n
return DayJs(n)
if (_value.value.length == 0) {
return DayJs()
}
let n = _value.value[0] || DayJs()
n = typeof n == 'undefined' || n == null ? DayJs() : n
return DayJs(n)
}
function nowWeekClick() {
if (isDisabledDate(DayJs())) {
uni.showToast({ title: '无法选中', icon: 'none' })
return
}
selected(DayJs().format('YYYY/MM/DD'))
showOpenDate.value = DayJs()
_data.value = getWeekOfMonthArray()
emits('click-day', DayJs().format('YYYY/MM/DD'))
if (isDisabledDate(DayJs())) {
uni.showToast({ title: '无法选中', icon: 'none' })
return
}
selected(DayJs().format('YYYY/MM/DD'))
showOpenDate.value = DayJs()
_data.value = getWeekOfMonthArray()
emits('click-day', DayJs().format('YYYY/MM/DD'))
}
function clickWeek(wk: monthDayItem) {
if (wk.disabled) {
uni.showToast({ title: '无法选中', icon: 'none' })
return
}
selected(wk.dateStr)
emits('click-day', wk.dateStr)
if (wk.disabled) {
if (props.showDefault) {
uni.showToast({ title: '无法选中', icon: 'none' })
}
return
}
selected(wk.dateStr)
emits('click-day', wk.dateStr)
}
//选中日期。相同需要减去。重复需要去除。
function selected(item: string | dayjs.Dayjs | number) {
let fr = _value.value.filter((el) => DayJs(el).isSame(item))
if (!props.multiple) {
_value.value = [DayJs(item).format('YYYY/MM/DD')]
return
}
let fr = _value.value.filter((el) => DayJs(el).isSame(item))
if (!props.multiple) {
_value.value = [DayJs(item).format('YYYY/MM/DD')]
return
}
if (fr.length > 0) {
_value.value = _value.value.filter((el) => !DayJs(el).isSame(item))
} else {
if (_value.value.length >= props.max) {
uni.showToast({ title: '只可选择' + props.max + '天', icon: 'none' })
return
}
_value.value.push(DayJs(item).format('YYYY/MM/DD'))
}
if (fr.length > 0) {
_value.value = _value.value.filter((el) => !DayJs(el).isSame(item))
} else {
if (_value.value.length >= props.max) {
uni.showToast({ title: '只可选择' + props.max + '天', icon: 'none' })
return
}
_value.value.push(DayJs(item).format('YYYY/MM/DD'))
}
}
function nextYear() {
showOpenDate.value = showOpenDate.value.add(1, 'year')
let dys = getWeekOfMonthArray()
emits('change', showOpenDate.value.format('YYYY/MM/DD'))
nextTick(() => {
_data.value = [...dys]
})
showOpenDate.value = showOpenDate.value.add(1, 'year')
let dys = getWeekOfMonthArray()
emits('change', showOpenDate.value.format('YYYY/MM/DD'))
nextTick(() => {
_data.value = [...dys]
})
}
function nextMonth() {
showOpenDate.value = showOpenDate.value.add(1, 'month')
let dys = getWeekOfMonthArray()
emits('change', showOpenDate.value.format('YYYY/MM/DD'))
nextTick(() => {
_data.value = [...dys]
})
showOpenDate.value = showOpenDate.value.add(1, 'month')
let dys = getWeekOfMonthArray()
emits('change', showOpenDate.value.format('YYYY/MM/DD'))
nextTick(() => {
_data.value = [...dys]
})
}
function prevMonth() {
showOpenDate.value = showOpenDate.value.subtract(1, 'month')
let dys = getWeekOfMonthArray()
emits('change', showOpenDate.value.format('YYYY/MM/DD'))
nextTick(() => {
_data.value = [...dys]
})
showOpenDate.value = showOpenDate.value.subtract(1, 'month')
let dys = getWeekOfMonthArray()
emits('change', showOpenDate.value.format('YYYY/MM/DD'))
nextTick(() => {
_data.value = [...dys]
})
}
function prevYear() {
showOpenDate.value = showOpenDate.value.subtract(1, 'year')
let dys = getWeekOfMonthArray()
emits('change', showOpenDate.value.format('YYYY/MM/DD'))
nextTick(() => {
_data.value = [...dys]
})
showOpenDate.value = showOpenDate.value.subtract(1, 'year')
let dys = getWeekOfMonthArray()
emits('change', showOpenDate.value.format('YYYY/MM/DD'))
nextTick(() => {
_data.value = [...dys]
})
}
//设置当前选中的日期范围，参数必须为有效的时间数组。
function setDefault(data: Array<String | Number | Date> = []) {
_value.value = data.length > 0 ? data : props.modelValue
showOpenDate.value = setShowopenDate()
_data.value = getWeekOfMonthArray()
_value.value = data.length > 0 ? data : props.modelValue
showOpenDate.value = setShowopenDate()
_data.value = getWeekOfMonthArray()
}
//获取本月按周分组的时间段。
function getWeekOfMonthArray() {
let nowMonth: dayjs.Dayjs = showOpenDate.value.date(1)
let startStatickDay = nowMonth.startOf('month')
let endStatickDay = nowMonth.endOf('month')
function getWeekOfMonthArray(needDarray = false) {
let nowMonth: dayjs.Dayjs = showOpenDate.value.date(1)
let startStatickDay = nowMonth.startOf('month')
let endStatickDay = nowMonth.endOf('month')
///当前月份有多少天。
let nowMonthDayNum = nowMonth.daysInMonth()
//第一个日期需要补齐1-7天的。
let startOfday = startStatickDay.isoWeekday() - 1
///当前月份有多少天。
let nowMonthDayNum = nowMonth.daysInMonth()
//第一个日期需要补齐1-7天的。
let startOfday = startStatickDay.isoWeekday() - 1
startStatickDay = nowMonth.subtract(Math.abs(startOfday), 'day')
//最后一个日期也要补齐1-7天。
let endOfday = 7 - endStatickDay.isoWeekday()
if (endOfday > 0) {
endStatickDay = nowMonth.date(nowMonthDayNum).add(Math.abs(endOfday), 'day')
}
startStatickDay = nowMonth.subtract(Math.abs(startOfday), 'day')
//最后一个日期也要补齐1-7天。
let endOfday = 7 - endStatickDay.isoWeekday()
if (endOfday > 0) {
endStatickDay = nowMonth.date(nowMonthDayNum).add(Math.abs(endOfday), 'day')
}
let startd = DayJs(startStatickDay)
let arOfmonth: Array<number> = [] //本月的周次。
let ar: Array<monthDayItem> = []
function setAr() {
let dy = props.dateStyle.map((el) => {
el.date = DayJs(el.date).format('YYYY/MM/DD')
return el
})
let dyObj = {}
dy.forEach((el) => {
dyObj[el.date] = el
})
let dySet = Object.keys(dyObj)
while (startd.isSameOrBefore(endStatickDay)) {
let idate = startd.format('YYYY/MM/DD')
let ext = dySet.includes(idate) ? dyObj[idate] : {}
ar.push({
dateStr: idate,
date: startd.date() < 10 ? '0' + startd.date() : startd.date(),
day: startd.isoWeekday(),
week: startd.isoWeek(),
isNowIn: isInNowMonth(nowMonth, startd),
disabled: isDisabledDate(startd),
extra: {
date: idate,
text: false,
color: '',
extra: '',
...ext
}
})
arOfmonth.push(startd.isoWeek())
startd = startd.add(1, 'day')
}
}
setAr()
// 再检查当前展示时段内有没有满足6*7 42天没有也要补上剩余的天数。
if (ar.length < 42) {
let chaJi = 42 - ar.length
endStatickDay = endStatickDay.add(chaJi, 'day')
setAr()
}
let startd = DayJs(startStatickDay)
let arOfmonth: Array<number> = [] //本月的周次。
let ar: Array<monthDayItem> = []
function setAr() {
let dy = props.dateStyle.map((el) => {
el.date = DayJs(el.date).format('YYYY/MM/DD')
return el
})
let dyObj = {}
dy.forEach((el) => {
dyObj[el.date] = el
})
let dySet = Object.keys(dyObj)
while (startd.isSameOrBefore(endStatickDay)) {
let idate = startd.format('YYYY/MM/DD')
let ext = dySet.includes(idate) ? dyObj[idate] : {}
ar.push({
dateStr: idate,
date: startd.date() < 10 ? '0' + startd.date() : startd.date(),
day: startd.isoWeekday(),
week: startd.isoWeek(),
isNowIn: isInNowMonth(nowMonth, startd),
disabled: isDisabledDate(startd),
extra: {
date: idate,
text: false,
color: '',
extra: '',
...ext,
},
})
arOfmonth.push(startd.isoWeek())
startd = startd.add(1, 'day')
}
}
setAr()
// 再检查当前展示时段内有没有满足6*7 42天没有也要补上剩余的天数。
if (ar.length < 42) {
let chaJi = 42 - ar.length
endStatickDay = endStatickDay.add(chaJi, 'day')
setAr()
}
arOfmonth = [...new Set(arOfmonth)]
let dArray: Array<Array<monthDayItem>> = []
let index = 0
dArray.push([])
ar.forEach((el) => {
if (el.week == arOfmonth[index]) {
dArray[index].push(el)
} else {
index += 1
dArray.push([])
dArray[index].push(el)
}
})
return dArray
arOfmonth = [...new Set(arOfmonth)]
let dArray: Array<Array<monthDayItem>> = []
let index = 0
dArray.push([])
ar.forEach((el) => {
if (el.week == arOfmonth[index]) {
dArray[index].push(el)
} else {
index += 1
dArray.push([])
dArray[index].push(el)
}
})
if (needDarray) {
let datesArr: Array<String> = []
ar.forEach((it) => {
datesArr.push(it.dateStr)
})
emits('getDArray', datesArr)
}
return dArray
}
// 检测now日期是否在某个日期的月份中.
function isInNowMonth(date: string | dayjs.Dayjs | number = '', now: string | dayjs.Dayjs | number = '') {
let startStatickDay = DayJs(date).startOf('month').format('YYYY/MM/DD')
let endStatickDay = DayJs(date).endOf('month').format('YYYY/MM/DD')
return DayJs(now).isBetween(startStatickDay, endStatickDay, 'day', '[]')
function isInNowMonth(
date: string | dayjs.Dayjs | number = '',
now: string | dayjs.Dayjs | number = '',
) {
let startStatickDay = DayJs(date).startOf('month').format('YYYY/MM/DD')
let endStatickDay = DayJs(date).endOf('month').format('YYYY/MM/DD')
return DayJs(now).isBetween(startStatickDay, endStatickDay, 'day', '[]')
}
//检测某个日期，是否在禁用中。
function isDisabledDate(date: string | dayjs.Dayjs | number = '') {
let valdate = DayJs(date)
let isds = false
isds = !valdate.isBetween(_start_date.value, _end_date.value, 'day', '[]')
for (let i = 0; i < props.disabledDate.length; i++) {
let item = props.disabledDate[i]
if (DayJs(item).isSame(valdate)) {
isds = true
break
}
}
return isds
let valdate = DayJs(date)
let isds = false
isds = !valdate.isBetween(_start_date.value, _end_date.value, 'day', '[]')
for (let i = 0; i < props.disabledDate.length; i++) {
let item = props.disabledDate[i]
if (DayJs(item).isSame(valdate)) {
isds = true
break
}
}
return isds
}
//检测 某个日期是否被选中。
function isSelected(date: string | dayjs.Dayjs | number = '') {
let fr = _value.value.filter((el) => DayJs(el).isSame(date))
let fr = _value.value.filter((el) => DayJs(el).isSame(date))
return fr.length > 0
return fr.length > 0 && props.showDefault
}
function confirm() {
let ar = _value.value.map((el) => DayJs(el).format('YYYY/MM/DD'))
emits('update:modelValue', ar)
emits('confirm', ar)
let ar = _value.value.map((el) => DayJs(el).format('YYYY/MM/DD'))
emits('update:modelValue', ar)
emits('confirm', ar)
}
//对外方法。
defineExpose({
setDefault: setDefault,
nextYear: nextYear,
nextMonth: nextMonth,
prevYear: prevYear,
prevMonth: prevMonth
setDefault: setDefault,
nextYear: nextYear,
nextMonth: nextMonth,
prevYear: prevYear,
prevMonth: prevMonth,
})
</script>

616
src/uni_modules/tmui/components/tm-calendar-view/tm-calendar-view.vue
View File

@ -1,137 +1,139 @@
<template>
<tm-sheet :margin="[0, 0]" :padding="[0, 0]">
<!-- 按日选择的日期，可单选，多选。 -->
<range-day
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="rDay"
@confirm="confirm"
@click-day="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'rang'"
:dateStyle="props.dateStyle"
:disabledDate="props.disabledDate"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></range-day>
<month-day
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Day"
@confirm="confirm"
@click-day="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'day'"
:dateStyle="props.dateStyle"
:disabledDate="props.disabledDate"
:max="props.max"
:multiple="props.multiple"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></month-day>
<!-- 按年选择 -->
<year-du
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Year"
@confirm="confirm"
@click-year="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'year'"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></year-du>
<!-- 按月选择 -->
<month-year
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Month"
@confirm="confirm"
@click-month="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'month'"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></month-year>
<!-- 按季度选择 -->
<month-quarter
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Month"
@confirm="confirm"
@click-month="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'quarter'"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></month-quarter>
<!-- 按周选择时段 -->
<week-day
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Week"
@confirm="confirm"
@click-week="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'week'"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></week-day>
</tm-sheet>
<tm-sheet :margin="[0, 0]" :padding="[0, 0]">
<!-- 按日选择的日期，可单选，多选。 -->
<range-day
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="rDay"
@confirm="confirm"
@click-day="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'rang'"
:dateStyle="props.dateStyle"
:disabledDate="props.disabledDate"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></range-day>
<month-day
:showDefault="props.showDefault"
@getDArray="getDArray"
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Day"
@confirm="confirm"
@click-day="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'day'"
:dateStyle="props.dateStyle"
:disabledDate="props.disabledDate"
:max="props.max"
:multiple="props.multiple"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></month-day>
<!-- 按年选择 -->
<year-du
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Year"
@confirm="confirm"
@click-year="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'year'"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></year-du>
<!-- 按月选择 -->
<month-year
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Month"
@confirm="confirm"
@click-month="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'month'"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></month-year>
<!-- 按季度选择 -->
<month-quarter
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Month"
@confirm="confirm"
@click-month="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'quarter'"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></month-quarter>
<!-- 按周选择时段 -->
<week-day
:confirmText="_confirmText"
:textUnit="_textUnit"
:hideButton="props.hideButton"
:hideTool="props.hideTool"
:followTheme="props.followTheme"
ref="Week"
@confirm="confirm"
@click-week="click"
@change="change"
@update:model-value="_value = $event"
:model-value="_value"
:default-value="_value"
v-if="_modelType == 'week'"
:start="props.start"
:end="props.end"
:color="props.color"
:linear="props.linear"
:linearDeep="props.linearDeep"
></week-day>
</tm-sheet>
</template>
<script lang="ts" setup>
@ -139,8 +141,23 @@
* 日历(嵌入页面面板)
* @description 可以按月，按日，按周，按季度显示
*/
import { computed, ref, watch, PropType, Ref, getCurrentInstance, nextTick, watchEffect } from 'vue'
import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '../../tool/lib/minxs'
import {
computed,
ref,
watch,
PropType,
Ref,
getCurrentInstance,
nextTick,
watchEffect,
} from 'vue'
import {
custom_props,
computedTheme,
computedClass,
computedStyle,
computedDark,
} from '../../tool/lib/minxs'
import weekDay from './week-day.vue'
import monthYear from './month-year.vue'
import yearDu from './year-du.vue'
@ -149,7 +166,13 @@ import rangeDay from './range-day.vue'
import monthQuarter from './month-quarter.vue'
import tmSheet from '../tm-sheet/tm-sheet.vue'
import * as dayjs from '../../tool/dayjs/esm'
import { monthDayItem, dateItemStyle, monthYearItem, weekItem, yearItem } from './interface'
import {
monthDayItem,
dateItemStyle,
monthYearItem,
weekItem,
yearItem,
} from './interface'
const proxy = getCurrentInstance()?.proxy ?? null
const rDay = ref<InstanceType<typeof rangeDay> | null>(null)
const Day = ref<InstanceType<typeof monthDay> | null>(null)
@ -163,174 +186,209 @@ const Week = ref<InstanceType<typeof weekDay> | null>(null)
* click 日期被选中时触发，注意禁用的日期不会触发 。
* change 当切换年或者月的时候触发。
*/
const emits = defineEmits(['update:modelValue', 'update:modelStr', 'confirm', 'click', 'change'])
const emits = defineEmits([
'update:modelValue',
'update:modelStr',
'confirm',
'click',
'change',
'getDArray',
])
const props = defineProps({
...custom_props,
followTheme: {
type: Boolean,
default: true
},
/**
* 数组
*/
defaultValue: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => []
},
modelValue: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => []
},
//单向绑定输入展示日期，此字段用来在页面上展示。只向外输出。
//功能目的：用来在页面上显示，特别是在input上绑定显示非常方便。
//标准数据保存时，请使用modelValue保存，而不是此值。
modelStr: {
type: String,
default: ''
},
/**
* 日期模式
* day : 单个日期选择模式（可多选，需要设置multiple=true;
* week :按周选择模式。
* month :按月选择模式。
* year :按年选择模式。
* rang :按日期范围选择模式。
* quarter :按季度选择模式。
*/
model: {
type: String as PropType<'quarter' | 'day' | 'month' | 'year' | 'rang' | 'week'>,
default: 'day'
},
color: {
type: String,
default: 'primary'
},
linear: {
type: String,
default: ''
},
linearDeep: {
type: String,
default: 'light'
},
//指的是：有效的可选时间，小于此时间，不允许选中。
start: {
type: [String, Number, Date],
default: ''
},
//指的是：有效的可选时间，大于此时间，不允许选中。
end: {
type: [String, Number, Date],
default: ''
},
...custom_props,
followTheme: {
type: Boolean,
default: true,
},
/**
* 数组
*/
defaultValue: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => [],
},
modelValue: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => [],
},
//单向绑定输入展示日期，此字段用来在页面上展示。只向外输出。
//功能目的：用来在页面上显示，特别是在input上绑定显示非常方便。
//标准数据保存时，请使用modelValue保存，而不是此值。
modelStr: {
type: String,
default: '',
},
/**
* 日期模式
* day : 单个日期选择模式（可多选，需要设置multiple=true;
* week :按周选择模式。
* month :按月选择模式。
* year :按年选择模式。
* rang :按日期范围选择模式。
* quarter :按季度选择模式。
*/
model: {
type: String as PropType<
'quarter' | 'day' | 'month' | 'year' | 'rang' | 'week'
>,
default: 'day',
},
color: {
type: String,
default: 'primary',
},
linear: {
type: String,
default: '',
},
linearDeep: {
type: String,
default: 'light',
},
//指的是：有效的可选时间，小于此时间，不允许选中。
start: {
type: [String, Number, Date],
default: '',
},
//指的是：有效的可选时间，大于此时间，不允许选中。
end: {
type: [String, Number, Date],
default: '',
},
/** 日历组件属性 */
/** 日历组件属性 */
//被禁用的日期数组。如果["2022-1-1","2022-5-1"]
//被禁用的日期将无法选中。
disabledDate: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => []
},
//是否允许多选。
multiple: {
type: Boolean,
default: false
},
//设定单个日期的样式。
dateStyle: {
type: Array as PropType<Array<dateItemStyle>>,
default: () => []
},
//当multiple=true时，可以选择的最大日期数量。
max: {
type: Number,
default: 999
},
/** 日历组件属性结束 */
//隐藏底部确认按钮
hideButton: {
type: Boolean,
default: false
},
//隐藏头部操作栏
hideTool: {
type: Boolean,
default: false
},
/**modelStr的格式化输出选项，不会影响value值，只对输出值有效 */
format: {
type: String,
default: 'YYYY/MM/DD'
},
confirmText: {
type: String,
default: '确认'
},
//周次，本日、本季、本年、本月、本周的文字请按顺序提供文本，方便定义其它语言。
textUnit: {
type: Array as PropType<string[]>,
default: ['周次','一','二','三','四','五','六','日','本日','本周','本月','本季度','本年','月','第${x}季度','年']
}
//被禁用的日期数组。如果["2022-1-1","2022-5-1"]
//被禁用的日期将无法选中。
disabledDate: {
type: Array as PropType<Array<String | Number | Date>>,
default: () => [],
},
//是否允许多选。
multiple: {
type: Boolean,
default: false,
},
//设定单个日期的样式。
dateStyle: {
type: Array as PropType<Array<dateItemStyle>>,
default: () => [],
},
//当multiple=true时，可以选择的最大日期数量。
max: {
type: Number,
default: 999,
},
/** 日历组件属性结束 */
//隐藏底部确认按钮
hideButton: {
type: Boolean,
default: false,
},
//隐藏头部操作栏
hideTool: {
type: Boolean,
default: false,
},
/**modelStr的格式化输出选项，不会影响value值，只对输出值有效 */
format: {
type: String,
default: 'YYYY/MM/DD',
},
confirmText: {
type: String,
default: '确认',
},
//周次，本日、本季、本年、本月、本周的文字请按顺序提供文本，方便定义其它语言。
textUnit: {
type: Array as PropType<string[]>,
default: [
'周次',
'一',
'二',
'三',
'四',
'五',
'六',
'日',
'本日',
'本周',
'本月',
'本季度',
'本年',
'月',
'第${x}季度',
'年',
],
},
showDefault: {
//是否显示被选中的默认样式
type: Boolean,
default: true,
},
})
const _value = ref(props.defaultValue)
const _modelType = computed(() => props.model)
const _confirmText = computed(() => props.confirmText)
const _textUnit = computed(() => props.textUnit)
watch(
() => props.modelValue,
() => (_value.value = props.modelValue),
{ deep: true }
() => props.modelValue,
() => (_value.value = props.modelValue),
{ deep: true },
)
watch(
_value,
() => {
let fmar = _value.value.map((el) => dayjs.default(el).format(props.format))
let fm = fmar.join('~')
emits('update:modelStr', fm)
},
{ deep: true }
_value,
() => {
let fmar = _value.value.map((el) => dayjs.default(el).format(props.format))
let fm = fmar.join('~')
emits('update:modelStr', fm)
},
{ deep: true },
)
function change(e: Array<string | number>) {
emits('change', e)
emits('change', e)
}
function click(e: Array<string | number>) {
emits('click', e)
emits('click', e)
}
function confirm(e: Array<string | number>) {
emits('confirm', e)
emits('update:modelValue', e)
emits('confirm', e)
emits('update:modelValue', e)
}
function getRefs() {
if (_modelType.value == 'day') return Day.value
if (_modelType.value == 'rang') return rDay.value
if (_modelType.value == 'week') return Week.value
if (_modelType.value == 'month') return Month.value
if (_modelType.value == 'year') return Year.value
return Day.value
if (_modelType.value == 'day') return Day.value
if (_modelType.value == 'rang') return rDay.value
if (_modelType.value == 'week') return Week.value
if (_modelType.value == 'month') return Month.value
if (_modelType.value == 'year') return Year.value
return Day.value
}
/**
* ref方法。外部如果要即时调用 ，请注意包裹在nextTick中执行。
*/
defineExpose({
setDefault: (e: Event) => {
nextTick(() => getRefs().setDefault(e))
},
nextYear: () => {
nextTick(() => getRefs().nextYear())
},
// mont,year模式下，没有此方法
nextMonth: () => {
nextTick(() => getRefs().nextMonth())
},
prevYear: () => {
nextTick(() => getRefs().prevYear())
},
// mont,year模式下，没有此方法
prevMonth: () => {
nextTick(() => getRefs().prevMonth())
}
setDefault: (e: Event) => {
nextTick(() => getRefs().setDefault(e))
},
nextYear: () => {
nextTick(() => getRefs().nextYear())
},
// mont,year模式下，没有此方法
nextMonth: () => {
nextTick(() => getRefs().nextMonth())
},
prevYear: () => {
nextTick(() => getRefs().prevYear())
},
// mont,year模式下，没有此方法
prevMonth: () => {
nextTick(() => getRefs().prevMonth())
},
})
const getDArray = (dArray: Array<String>) => {
emits('getDArray', dArray)
}
</script>

3
src/uni_modules/tmui/components/tm-time-picker/tm-time-picker.vue
View File

@ -123,7 +123,8 @@ const props = defineProps({
day: true,
hour: false,
minute: false,
second: false
second: false,
am_pm: true
}
}
},

3
src/uni_modules/tmui/components/tm-time-view/interface.ts
View File

@ -5,6 +5,7 @@ export interface showDetail {
hour: boolean,
minute: boolean,
second: boolean,
am_pm: boolean
}
export enum timeDetailType {
year = "year",
@ -25,4 +26,4 @@ export interface timeArrayType {
hour: Array<number>,
minute: Array<number>,
second: Array<number>,
}
}

282
src/uni_modules/tmui/components/tm-time-view/tm-time-view.vue
View File

@ -1,11 +1,14 @@
<template>
<view class="flex relative flex-col" :style="{ height: props.height + 'rpx' }">
<view style="display: flex">
<view
class="flex relative flex-col"
:style="{ height: props.height + 'rpx' }"
>
<view style="display: flex;">
<picker-view
v-if="show"
:value="colIndex"
@change="colchange"
:style="{ height: props.height + 'rpx',width:' 100%' }"
:style="{ height: props.height + 'rpx', width: ' 100%' }"
:mask-style="maskStyle"
:immediateChange="props.immediateChange"
indicator-style="height:50px"
@ -16,7 +19,6 @@
:key="index"
class="flex itemcel flex-row flex-row-center-center"
:class="[colIndex[0] == index ? '' : 'UnitemSelected']"
>
<!-- #ifdef APP-NVUE -->
<TmText
@ -26,9 +28,10 @@
></TmText>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{color:store.tmStore.dark?'white':'black'}">{{item + showSuffix['year']}}</text>
<text :style="{ color: store.tmStore.dark ? 'white' : 'black' }">
{{ item + showSuffix['year'] }}
</text>
<!-- #endif -->
</view>
</picker-view-column>
<picker-view-column v-if="showCol.month">
@ -38,7 +41,6 @@
class="flex itemcel flex-row flex-row-center-center"
:class="[colIndex[1] == index ? '' : 'UnitemSelected']"
>
<!-- #ifdef APP-NVUE -->
<TmText
:font-size="30"
@ -47,9 +49,10 @@
></TmText>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{color:store.tmStore.dark?'white':'black'}">{{item + 1 + showSuffix['month']}}</text>
<text :style="{ color: store.tmStore.dark ? 'white' : 'black' }">
{{ item + 1 + showSuffix['month'] }}
</text>
<!-- #endif -->
</view>
</picker-view-column>
<picker-view-column v-if="showCol.day">
@ -59,7 +62,6 @@
class="flex itemcel flex-row flex-row-center-center"
:class="[colIndex[2] == index ? '' : 'UnitemSelected']"
>
<!-- #ifdef APP-NVUE -->
<TmText
:font-size="30"
@ -68,7 +70,9 @@
></TmText>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{color:store.tmStore.dark?'white':'black'}">{{item + showSuffix['date']}}</text>
<text :style="{ color: store.tmStore.dark ? 'white' : 'black' }">
{{ item + showSuffix['date'] }}
</text>
<!-- #endif -->
</view>
</picker-view-column>
@ -79,7 +83,6 @@
class="flex itemcel flex-row flex-row-center-center"
:class="[colIndex[3] == index ? '' : 'UnitemSelected']"
>
<!-- #ifdef APP-NVUE -->
<TmText
:font-size="30"
@ -88,7 +91,9 @@
></TmText>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{color:store.tmStore.dark?'white':'black'}">{{item + showSuffix['hour']}}</text>
<text :style="{ color: store.tmStore.dark ? 'white' : 'black' }">
{{ item + showSuffix['hour'] }}
</text>
<!-- #endif -->
</view>
</picker-view-column>
@ -99,7 +104,6 @@
class="flex itemcel flex-row flex-row-center-center"
:class="[colIndex[4] == index ? '' : 'UnitemSelected']"
>
<!-- #ifdef APP-NVUE -->
<TmText
:font-size="30"
@ -108,7 +112,9 @@
></TmText>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{color:store.tmStore.dark?'white':'black'}">{{item + showSuffix['minute']}}</text>
<text :style="{ color: store.tmStore.dark ? 'white' : 'black' }">
{{ item + showSuffix['minute'] }}
</text>
<!-- #endif -->
</view>
</picker-view-column>
@ -119,7 +125,6 @@
class="flex itemcel flex-row flex-row-center-center"
:class="[colIndex[5] == index ? '' : 'UnitemSelected']"
>
<!-- #ifdef APP-NVUE -->
<TmText
:font-size="30"
@ -128,7 +133,9 @@
></TmText>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{color:store.tmStore.dark?'white':'black'}">{{item + showSuffix['second']}}</text>
<text :style="{ color: store.tmStore.dark ? 'white' : 'black' }">
{{ item + showSuffix['second'] }}
</text>
<!-- #endif -->
</view>
</picker-view-column>
@ -136,19 +143,24 @@
<picker-view
:value="ampmIndex"
@change="change1"
:style="{ height: props.height + 'rpx',width: `${100/(trueCount+1)}%` }"
:style="{
height: props.height + 'rpx',
width: `${100 / (trueCount + 1)}%`,
}"
:mask-style="maskStyle"
:immediateChange="props.immediateChange"
indicator-style="height:50px"
v-if="showCol.am_pm"
>
<picker-view-column>
<picker-view-column v-if="showCol.am_pm">
<view
v-for="(item, index) in ['上午','下午']"
v-for="(item, index) in ['上午', '下午']"
:key="index"
class="flex itemcel flex-row flex-row-center-center"
>
<text :style="{color:store.tmStore.dark?'white':'black'}">{{item}}</text>
<text :style="{ color: store.tmStore.dark ? 'white' : 'black' }">
{{ item }}
</text>
</view>
</picker-view-column>
</picker-view>
@ -177,7 +189,7 @@
* 时间选择
* @description 嵌入在页面的时间选择器。
*/
import { useTmpiniaStore } from "../../tool/lib/tmpinia";
import { useTmpiniaStore } from '../../tool/lib/tmpinia'
import {
computed,
PropType,
@ -189,44 +201,44 @@ import {
watch,
onUpdated,
Ref,
} from "vue";
import { showDetail, coltimeData, timeDetailType } from "./interface";
import * as dayjs from "../../tool/dayjs/esm";
import { propsOpts } from "./props";
} from 'vue'
import { showDetail, coltimeData, timeDetailType } from './interface'
import * as dayjs from '../../tool/dayjs/esm'
import { propsOpts } from './props'
import {
rangeTimeArray,
getNowbyIndex,
getIndexNowbydate,
checkNowDateisBetween,
} from "./time";
import TmText from "../tm-text/tm-text.vue";
import TmIcon from "../tm-icon/tm-icon.vue";
} from './time'
import TmText from '../tm-text/tm-text.vue'
import TmIcon from '../tm-icon/tm-icon.vue'
// #ifdef APP-PLUS-NVUE
const dom = uni.requireNativePlugin("dom");
const dom = uni.requireNativePlugin('dom')
// #endif
const proxy = getCurrentInstance()?.proxy ?? null;
const store = useTmpiniaStore();
const emits = defineEmits(["update:modelValue", "update:modelStr", "change"]);
const tmTimeViewName = "tmTimeViewName";
const DayJs = dayjs.default;
const props = defineProps({ ...propsOpts });
const proxy = getCurrentInstance()?.proxy ?? null
const store = useTmpiniaStore()
const emits = defineEmits(['update:modelValue', 'update:modelStr', 'change'])
const tmTimeViewName = 'tmTimeViewName'
const DayJs = dayjs.default
const props = defineProps({ ...propsOpts })
const _nowtime = ref(
DayJs(checkNowDateisBetween(props.defaultValue, props.start, props.end))
);
const _nowtimeValue = computed(() => _nowtime.value.format());
DayJs(checkNowDateisBetween(props.defaultValue, props.start, props.end)),
)
const _nowtimeValue = computed(() => _nowtime.value.format())
const show = ref(true);
const show = ref(true)
const _startTime = computed(() => {
return DayJs(props.start).isValid()
? DayJs(props.start).format()
: DayJs().subtract(3, "year").format();
});
: DayJs().subtract(3, 'year').format()
})
const _endTime = computed(() => {
return DayJs(props.end).isValid()
? DayJs(props.end).format()
: DayJs().add(1, "year").format();
});
: DayJs().add(1, 'year').format()
})
const showCol = computed<showDetail>(() => {
return {
year: props.showDetail?.year ?? true,
@ -235,24 +247,25 @@ const showCol = computed<showDetail>(() => {
hour: props.showDetail?.hour ?? false,
minute: props.showDetail?.minute ?? false,
second: props.showDetail?.second ?? false,
};
});
am_pm: props.showDetail?.am_pm ?? true,
}
})
const trueCount = computed(() => {
return Object.values(showCol.value).filter(value => value === true).length;
});
return Object.values(showCol.value).filter((value) => value === true).length
})
const showSuffix = computed(() => {
return {
year: props.showSuffix?.year ?? "年",
month: props.showSuffix?.month ?? "月",
hour: props.showSuffix?.hour ?? "时",
minute: props.showSuffix?.minute ?? "分",
second: props.showSuffix?.second ?? "秒",
date: props.showSuffix?.day ?? "日",
};
});
const isDark = computed(() => store.tmStore.dark);
let colIndex: Ref<Array<number>> = ref([0, 0, 0, 0, 0, 0]);
let ampmIndex: Ref<Array<number>> = ref([0]);
year: props.showSuffix?.year ?? '年',
month: props.showSuffix?.month ?? '月',
hour: props.showSuffix?.hour ?? '时',
minute: props.showSuffix?.minute ?? '分',
second: props.showSuffix?.second ?? '秒',
date: props.showSuffix?.day ?? '日',
}
})
const isDark = computed(() => store.tmStore.dark)
let colIndex: Ref<Array<number>> = ref([0, 0, 0, 0, 0, 0])
let ampmIndex: Ref<Array<number>> = ref([0])
const _col = ref({
year: [] as Array<number>,
month: [] as Array<number>,
@ -260,129 +273,144 @@ const _col = ref({
hour: [] as Array<number>,
minute: [] as Array<number>,
second: [] as Array<number>,
});
})
let timid = NaN;
const maskWidth = ref(0);
let timid = NaN
const maskWidth = ref(0)
const maskHeight = computed(() => {
return (uni.upx2px(props.height) - 50) / 2;
});
return (uni.upx2px(props.height) - 50) / 2
})
const maskStyle = computed(() => {
let str_white =
"background-image:linear-gradient(rgba(255,255,255,0.95),rgba(255,255,255,0.6)),linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.95))";
'background-image:linear-gradient(rgba(255,255,255,0.95),rgba(255,255,255,0.6)),linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.95))'
let str_black =
"background-image:linear-gradient(rgba(17, 17, 17, 1.0),rgba(106, 106, 106, 0.2)),linear-gradient(rgba(106, 106, 106, 0.2),rgba(17, 17, 17, 1.0))";
'background-image:linear-gradient(rgba(17, 17, 17, 1.0),rgba(106, 106, 106, 0.2)),linear-gradient(rgba(106, 106, 106, 0.2),rgba(17, 17, 17, 1.0))'
// #ifdef APP-NVUE
str_black =
"background-image: linear-gradient(to bottom,rgba(30, 30, 30, 0.9),rgba(104, 104, 104, 0.6))";
'background-image: linear-gradient(to bottom,rgba(30, 30, 30, 0.9),rgba(104, 104, 104, 0.6))'
// #endif
if (!isDark.value) {
return str_white;
return str_white
}
return str_black;
});
return str_black
})
_col.value = rangeTimeArray(
_nowtimeValue.value,
_startTime.value,
_endTime.value,
showCol.value
);
function change1(data){
console.log('data',data)
showCol.value,
)
function change1(data) {
console.log('data', data)
}
function colchange(e: any) {
let changedate = getNowbyIndex(_col.value, e.detail.value, showCol.value, _startTime.value,_endTime.value);
let testDate = checkNowDateisBetween(changedate, _startTime.value,_endTime.value)
let changedate = getNowbyIndex(
_col.value,
e.detail.value,
showCol.value,
_startTime.value,
_endTime.value,
)
let testDate = checkNowDateisBetween(
changedate,
_startTime.value,
_endTime.value,
)
let testRang = rangeTimeArray(
testDate,
_startTime.value,
_endTime.value,
showCol.value
);
_nowtime.value = DayJs(testDate);
colIndex.value = getIndexNowbydate(testRang, _nowtime.value, showCol.value);
emits("update:modelValue", _nowtime.value.format("YYYY/MM/DD HH:mm:ss"));
emits("update:modelStr", _nowtime.value.format(props.format));
emits("change", _nowtime.value.format(props.format));
_col.value= testRang;
testDate,
_startTime.value,
_endTime.value,
showCol.value,
)
_nowtime.value = DayJs(testDate)
colIndex.value = getIndexNowbydate(testRang, _nowtime.value, showCol.value)
emits('update:modelValue', _nowtime.value.format('YYYY/MM/DD HH:mm:ss'))
emits('update:modelStr', _nowtime.value.format(props.format))
emits('change', _nowtime.value.format(props.format))
_col.value = testRang
}
watch(
() => props.modelValue,
() => {
if (!DayJs(props.modelValue).isValid()) return;
let deattime = DayJs(checkNowDateisBetween(props.modelValue, props.start, props.end));
if (!DayJs(props.modelValue).isValid()) return
let deattime = DayJs(
checkNowDateisBetween(props.modelValue, props.start, props.end),
)
if (DayJs(deattime).isSame(_nowtime.value)) return;
_nowtime.value = deattime;
emits("update:modelStr", _nowtime.value.format(props.format));
if (DayJs(deattime).isSame(_nowtime.value)) return
_nowtime.value = deattime
emits('update:modelStr', _nowtime.value.format(props.format))
// #ifdef APP-NVUE
_col.value = rangeTimeArray(
deattime,
_startTime.value,
_endTime.value,
showCol.value
);
show.value = false;
colIndex.value = getIndexNowbydate(_col.value, _nowtime.value, showCol.value);
showCol.value,
)
show.value = false
colIndex.value = getIndexNowbydate(
_col.value,
_nowtime.value,
showCol.value,
)
nextTick(() => {
/**这力着重解释下，uni sdk从3.6.8开始，在nvue下直接对picker view赋值value，页面不会有任何变化，必须刷新下页面才可以显示正确
* 其它平台没有这问题
*/
show.value = true;
});
show.value = true
})
// #endif
// #ifndef APP-NVUE
_col.value = rangeTimeArray(
deattime,
_startTime.value,
_endTime.value,
showCol.value
);
colIndex.value = getIndexNowbydate(_col.value, _nowtime.value, showCol.value);
showCol.value,
)
colIndex.value = getIndexNowbydate(
_col.value,
_nowtime.value,
showCol.value,
)
// #endif
}
);
},
)
function nvuegetClientRect() {
nextTick(function () {
// #ifdef APP-PLUS-NVUE
dom.getComponentRect(proxy.$refs.picker, function (res) {
if (res?.size) {
maskWidth.value = res.size.width;
maskWidth.value = res.size.width
if (res.size.width == 0) {
nvuegetClientRect();
nvuegetClientRect()
}
}
});
})
// #endif
});
})
}
onMounted(() => {
nvuegetClientRect();
nvuegetClientRect()
nextTick(() => {
emits("update:modelValue", _nowtime.value.format("YYYY/MM/DD HH:mm:ss"));
emits("update:modelStr", _nowtime.value.format(props.format));
colIndex.value = getIndexNowbydate(_col.value, _nowtime.value, showCol.value);
});
});
emits('update:modelValue', _nowtime.value.format('YYYY/MM/DD HH:mm:ss'))
emits('update:modelStr', _nowtime.value.format(props.format))
colIndex.value = getIndexNowbydate(
_col.value,
_nowtime.value,
showCol.value,
)
})
})
onUpdated(() => nvuegetClientRect());
onUpdated(() => nvuegetClientRect())
// defineExpose({tmTimeViewName,setNowtime})
</script>
@ -397,7 +425,11 @@ onUpdated(() => nvuegetClientRect());
}
.bottom {
background-image: linear-gradient(to top, rgba(17, 17, 17, 1), rgba(36, 36, 36, 0.6));
background-image: linear-gradient(
to top,
rgba(17, 17, 17, 1),
rgba(36, 36, 36, 0.6)
);
}
.itemcel {

6
src/uni_modules/tmui/locale/zh-Hans.json
View File

@ -100,5 +100,9 @@
"record.searchType.link": "链接",
"group.identify.admin": "管理员",
"group.disband.btn": "解散该群",
"group.quit.btn": "退出群聊"
"group.quit.btn": "退出群聊",
"search.condition.date": "按日期查找",
"search.condition.date_pickerTitle": "请选择聊天日期",
"button.text.done": "完成",
"input.placeholder.enter": "请输入..."
}