Merge branch 'develop' of http://25.13.9.101:9000/K17_AITS/tra-app into develop
This commit is contained in:
田岩
+1
-1
@@ -4,7 +4,7 @@ ENV = 'development'
|
||||
|
||||
|
||||
# VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
|
||||
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
|
||||
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
|
||||
# VITE_APP_BASE_API_Url = 'http://192.168.247.200'
|
||||
# VITE_APP_BASE_API_Url = 'http://aitscdn.jlbank.com.cn:7001'
|
||||
# VITE_APP_BASE_API_Url = 'http://192.168.108.129'
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import request from '@/api/request'
|
||||
|
||||
|
||||
// 1.本月/本年/累计 学习信息查询接口
|
||||
export const queryStudyStatistics = (data) => {
|
||||
return request({
|
||||
url: '/traapp/traStudyAnalysis/queryStudyStatistics',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
};
|
||||
// 课程推荐查询接口
|
||||
export const queryRecmdCrsInfo = (data) => {
|
||||
return request({
|
||||
url: '/traapp/traStudyAnalysis/queryRecmdCrsInfo',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
};
|
||||
// 4.维度分析查询接口
|
||||
export const queryDimesionInfo = (data) => {
|
||||
return request({
|
||||
url: '/traapp/traStudyAnalysis/queryDimesionInfo',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 5.学习习惯查询接口
|
||||
export const queryHabitInfo = (data) => {
|
||||
return request({
|
||||
url: '/traapp/traStudyAnalysis/queryHabitInfo',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
// 6.学习建议查询接口
|
||||
export const querySuggestInfo = (data) => {
|
||||
return request({
|
||||
url: '/traapp/traStudyAnalysis/querySuggestInfo',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
};
|
||||
@@ -157,6 +157,7 @@ export function downloadVoiceFile(url) {
|
||||
uni.downloadFile({
|
||||
url: `${baseUrl}${url}`,
|
||||
header,
|
||||
timeout: 180000,
|
||||
success(result) {
|
||||
console.log(result)
|
||||
resolve(result)
|
||||
|
||||
@@ -483,6 +483,33 @@
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/sparring/talk",
|
||||
"style": {
|
||||
"navigationBarTitleText": "AI陪练通话",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/sparring/result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "AI陪练报告",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/analytics/study",
|
||||
"style": {
|
||||
"navigationBarTitleText": "学习分析",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
||||
@@ -0,0 +1,598 @@
|
||||
<template>
|
||||
<view class="study-analytics max_page">
|
||||
<view class="cont-body">
|
||||
<view class="top-box">
|
||||
<view class="top-title">
|
||||
<view class="back-icon" @click="common.navigateBack()"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-box">
|
||||
<view class="tabs-box">
|
||||
<uv-tabs :list="tabList" @click="changeTab" :scrollable="true" active-style="font-weight:bold; color:#000;"
|
||||
:current="currentTab" class="font_pf my_tabs"
|
||||
:inactive-style="{ color: '#333333', fontSize: '28rpx', fontWeight: '500' }"
|
||||
:activeStyle="{ color: '#333333', fontSize: '28rpx', fontWeight: '600' }"></uv-tabs>
|
||||
</view>
|
||||
<!-- <view class="calendar-box" @click="openCalendar">统计周期</view>
|
||||
<uv-calendar ref="calendarRef" mode="range" @confirm="calendarConfirm" minDate="2025-01-01" :maxDate="maxDate" monthNum="100" :allowSameDay="true"></uv-calendar> -->
|
||||
<view class="date-input" v-show="activeTabVal === '04'">
|
||||
<uni-datetime-picker class="custom-datepicker" ref="dateinputRef" type="daterange" v-model="daterange"
|
||||
start="2025-01-01" :end="maxDate" rangeSeparator="至" @change="changeDate"></uni-datetime-picker>
|
||||
</view>
|
||||
<view class="analytics-items">
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
课程学习时长
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.crsStdyTmLen }}</text>
|
||||
<text class="analytics-item-value-unit">h</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
课程学习次数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.crsStdyCnt }}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
课程练习时长
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.crsExrTmLen }}</text>
|
||||
<text class="analytics-item-value-unit">h</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
完成任务数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.completeTaskCnt }}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
完成考试数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.completedExamCnt }}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
考试合格率
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.passExamRate }}</text>
|
||||
<text class="analytics-item-value-unit">%</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
陪练次数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.partnerCnt }}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
课程学习次数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.askCnt }}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
软件用时
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{statisticsObj.crsStdyCnt }}</text>
|
||||
<text class="analytics-item-value-unit">h</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluation-box dens" v-if="loading">
|
||||
<CommonLoading color="#06f" class="loading-box"/>
|
||||
</view>
|
||||
<view class="evaluation-box dens" v-if="!loading">
|
||||
<view class="dens-item" v-for="(item, index) in dimesionList">
|
||||
<view class="item-title">{{item.title}}</view>
|
||||
<view :class="['item-cont ', index%2===0?'study1-bg': 'study2-bg']">{{item.content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluation-box study" v-if="loading">
|
||||
<CommonLoading color="#06f" class="loading-box"/>
|
||||
</view>
|
||||
<view class="evaluation-box study" v-if="!loading">
|
||||
<view class="study-item" v-for="(item, index) in studyList">
|
||||
<view class="item-title">{{item.title}}</view>
|
||||
<view :class="['item-cont ', index%2===0?'study1-bg': 'study2-bg']">{{item.content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluation-box study1" v-if="loading">
|
||||
<CommonLoading color="#06f" class="loading-box"/>
|
||||
</view>
|
||||
<view class="evaluation-box study1" v-if="!loading">
|
||||
<view class="study1-item">
|
||||
<view class="item-cont study3-bg">{{suggestObj.content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluation-box course" v-if="loading">
|
||||
<CommonLoading color="#06f" class="loading-box"/>
|
||||
</view>
|
||||
<view class="evaluation-box course" v-if="!loading">
|
||||
<CourseItem v-for="item in courseList" :itemInfo="item" @clickItem="toCourseDetail(item)" />
|
||||
<view class="empty-box" v-if="courseList.length === 0">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import common from '@/common/common'
|
||||
import {
|
||||
queryStudyStatistics,
|
||||
queryRecmdCrsInfo,
|
||||
queryDimesionInfo,
|
||||
queryHabitInfo,
|
||||
querySuggestInfo,
|
||||
} from '@/api/analytics.js'
|
||||
import {
|
||||
onMounted,
|
||||
ref,
|
||||
computed,
|
||||
} from 'vue'
|
||||
import CourseItem from '@/components/course-item/course-item.vue'
|
||||
const tabList = ref([{
|
||||
name: '本月',
|
||||
value: '01'
|
||||
},
|
||||
{
|
||||
name: '本年',
|
||||
value: '02'
|
||||
},
|
||||
{
|
||||
name: '累计',
|
||||
value: '03'
|
||||
},
|
||||
{
|
||||
name: '自定义',
|
||||
value: '04'
|
||||
}
|
||||
])
|
||||
const courseList = ref([])
|
||||
const currentTab = ref(0)
|
||||
const activeTabVal = ref('01')
|
||||
const daterange = ref(['', ''])
|
||||
const dateinputRef = ref()
|
||||
const maxDate = computed(() => {
|
||||
let _date = new Date()
|
||||
let _year = _date.getFullYear()
|
||||
let _month = _date.getMonth() + 1
|
||||
let _day = new Date(_year, _month, 0).getDate()
|
||||
return `${_year}-${_month < 10 ? '0' + _month: _month}-${_day < 10 ? '0' + _day: _day}`
|
||||
})
|
||||
const calendarRef = ref()
|
||||
const statisticsObj = ref({
|
||||
"crsStdyTmLen": 0,
|
||||
"crsStdyCnt": 0,
|
||||
"crsExrTmLen": 0,
|
||||
"completeTaskCnt": 0,
|
||||
"completedExamCnt": 0,
|
||||
"passExamRate": 0,
|
||||
"partnerCnt": 9,
|
||||
"askCnt": 0
|
||||
})
|
||||
const dimesionList = ref([])
|
||||
const studyList = ref([])
|
||||
const suggestObj = ref({
|
||||
content: ''
|
||||
})
|
||||
|
||||
// const openCalendar = () => {
|
||||
// calendarRef.value.open()
|
||||
// }
|
||||
// const calendarConfirm = (data) => {
|
||||
// console.log('data:', data)
|
||||
// currentTab.value = -1
|
||||
// }
|
||||
const changeDate = (date) => {
|
||||
if (date.length > 0) {
|
||||
if (!!date[0]) {
|
||||
getInfoNow({
|
||||
dateType: '04',
|
||||
startDate: date[0],
|
||||
endDate: date[1],
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
const loading = ref(false)
|
||||
const getInfoNow = async (params) => {
|
||||
loading.value = true
|
||||
try {
|
||||
let _res1 = await queryStudyStatistics(params)
|
||||
statisticsObj.value = {..._res1.body}
|
||||
let _res2 = await queryDimesionInfo(params)
|
||||
dimesionList.value = [..._res2.body]
|
||||
let _res3 = await queryHabitInfo(params)
|
||||
studyList.value = [..._res3.body]
|
||||
let _res4 = await querySuggestInfo(params)
|
||||
if(_res4.body && _res4.body.length > 0){
|
||||
suggestObj.value = {..._res4.body[0]}
|
||||
}
|
||||
} catch {
|
||||
} finally{
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
// 跳转 课程详情
|
||||
const toCourseDetail = item => {
|
||||
common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum + '&crsId=' + item.crsId)
|
||||
}
|
||||
const changeTab = (info) => {
|
||||
activeTabVal.value = info.value
|
||||
if (info.value === '04') {
|
||||
dateinputRef.value&&dateinputRef.value?.clear()
|
||||
daterange.value = ['', '']
|
||||
}else{
|
||||
getInfoNow({
|
||||
dateType: activeTabVal.value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getCrsListNow = () => {
|
||||
queryRecmdCrsInfo().then(res => {
|
||||
console.log(res)
|
||||
courseList.value = res.body || []
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
getCrsListNow()
|
||||
getInfoNow({
|
||||
dateType: activeTabVal.value
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my_tabs {
|
||||
|
||||
// 解决这个圆角的图片，开穿透
|
||||
:deep(.uv-tabs__wrapper__nav__line) {
|
||||
background: linear-gradient(90deg, #06f 0%, rgb(0, 159, 255) 50%, rgb(255, 255, 255) 100%) !important;
|
||||
}
|
||||
|
||||
:deep(.uv-tabs__wrapper__nav__item) {
|
||||
padding: 0 30rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.study-analytics {
|
||||
position: relative;
|
||||
background-color: #ddeafa;
|
||||
|
||||
.cont-body {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: var(--status-bar-height) 20rpx 24rpx;
|
||||
// padding: 280rpx 20rpx 24rpx;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/static/images/analytics/bg1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-attachment: local;
|
||||
|
||||
|
||||
.top-box {
|
||||
height: 280rpx;
|
||||
width: 100%;
|
||||
// position: fixed;
|
||||
// float: left;
|
||||
// margin-top: var(--status-bar-height);
|
||||
|
||||
.top-title {
|
||||
height: 90rpx;
|
||||
// background-color: red;
|
||||
text-align: center;
|
||||
font-size: 33rpx;
|
||||
padding: 10rpx 0rpx 0;
|
||||
line-height: 46rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.back-icon {
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
left: 30rpx;
|
||||
top: 33rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.back-icon::before,
|
||||
.back-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon::after {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
border-top: 4rpx solid #000;
|
||||
border-left: 4rpx solid #000;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.analytics-box {
|
||||
min-height: 490rpx;
|
||||
border-radius: 15rpx;
|
||||
// overflow: hidden;
|
||||
background: url(@/static/images/analytics/bg2.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
margin-bottom: 24rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
|
||||
.calendar-box {
|
||||
position: absolute;
|
||||
right: 25rpx;
|
||||
top: 25rpx;
|
||||
color: #06f;
|
||||
padding-left: 40rpx;
|
||||
background: url(@/static/images/analytics/date-icon.png) no-repeat;
|
||||
background-size: 30rpx 30rpx;
|
||||
background-position: left center;
|
||||
font-size: 29rpx;
|
||||
}
|
||||
|
||||
.tabs-box {
|
||||
width: 600rpx;
|
||||
}
|
||||
|
||||
.analytics-items {
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.analytics-item {
|
||||
padding-bottom: 12rpx;
|
||||
box-sizing: border-box;
|
||||
width: 33.3%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
height: 128rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
&-title {
|
||||
font-size: 25rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&-value {
|
||||
font-size: 54rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&-unit {
|
||||
font-size: 28rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.evaluation-box {
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 78rpx;
|
||||
background-position: 26rpx 26rpx;
|
||||
padding: 100rpx 26rpx 24rpx;
|
||||
border-radius: 15rpx;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
min-height: 200rpx;
|
||||
.loading-box{
|
||||
position: absolute;
|
||||
top: 120rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&.dens {
|
||||
background-image: url(@/static/images/analytics/weidu.png);
|
||||
}
|
||||
|
||||
&.study {
|
||||
background-image: url(@/static/images/analytics/study1.png)
|
||||
}
|
||||
|
||||
&.study1 {
|
||||
background-image: url(@/static/images/analytics/study.png);
|
||||
}
|
||||
|
||||
&.course {
|
||||
background-image: url(@/static/images/analytics/course.png);
|
||||
}
|
||||
|
||||
// .dens-item {
|
||||
// padding: 23rpx 0;
|
||||
// .item-title{
|
||||
// line-height: 40rpx;
|
||||
// position: relative;
|
||||
// padding: 8rpx 46rpx 8rpx 26rpx;
|
||||
// line-height: 42rpx;
|
||||
// font-size: 29rpx;
|
||||
// margin-bottom: 16rpx;
|
||||
// &::before{
|
||||
// content: '';
|
||||
// display: block;
|
||||
// background-color: #000;
|
||||
// width: 12rpx;
|
||||
// height: 12rpx;
|
||||
// border-radius: 50%;
|
||||
// position: absolute;
|
||||
// left: 0rpx;
|
||||
// top: 22rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .item-cont {
|
||||
// font-size: 28rpx;
|
||||
// line-height: 50rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
.study-item,
|
||||
.study1-item,
|
||||
.dens-item {
|
||||
padding: 12rpx 0;
|
||||
|
||||
.item-title {
|
||||
line-height: 40rpx;
|
||||
position: relative;
|
||||
padding: 8rpx 46rpx 8rpx 26rpx;
|
||||
line-height: 42rpx;
|
||||
font-size: 29rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: #000;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0rpx;
|
||||
top: 22rpx;
|
||||
}
|
||||
|
||||
&.bg-tm {
|
||||
padding-left: 54rpx;
|
||||
background-image: url(@/static/images/analytics/time-icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 38rpx 40rpx;
|
||||
background-position: left center;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-know {
|
||||
padding-left: 54rpx;
|
||||
background-image: url(@/static/images/analytics/knowledge.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 38rpx 40rpx;
|
||||
background-position: left center;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-cont {
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
|
||||
&.study1-bg {
|
||||
background-color: #e4efff;
|
||||
border-radius: 15rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
// width: calc(100% - 54rpx);
|
||||
// margin-left: 54rpx;
|
||||
}
|
||||
|
||||
&.study2-bg {
|
||||
background-color: #f6f0df;
|
||||
border-radius: 15rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
// width: calc(100% - 54rpx);
|
||||
// margin-left: 54rpx;
|
||||
}
|
||||
|
||||
&.study3-bg {
|
||||
background-color: #e4efff;
|
||||
border-radius: 15rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
// width: calc(100% - 54rpx);
|
||||
// margin-left: 54rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
text-align: center;
|
||||
font-size: 25rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-input {
|
||||
.custom-datepicker {
|
||||
width: 500rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-top: 3rpx solid #999;
|
||||
border-left: 3rpx solid #999;
|
||||
transform: rotate(135deg) translateY(50%);
|
||||
}
|
||||
|
||||
::v-deep .uni-date-x {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-date-x--border {
|
||||
border: 0;
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
::v-deep .range-separator {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -9,11 +9,15 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<view class="title" v-if="fromType === 'crs'">
|
||||
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
|
||||
改进建议：
|
||||
</view>
|
||||
<view class="total-score">
|
||||
<view class="title" v-if="fromType === 'tra'">
|
||||
<image class="title-icon icon-tra" src="@/static/images/sparring/den-icon.png" alt=""> </image>
|
||||
维度分析：
|
||||
</view>
|
||||
<view class="total-score" v-if="fromType === 'crs'">
|
||||
<view class="score-num">{{ score }}</view>分
|
||||
<image class="total-score-icon" src="@/static/images/course/score.png" alt=""></image>
|
||||
</view>
|
||||
@@ -37,6 +41,10 @@
|
||||
size:{
|
||||
default: 262,
|
||||
type: [Number,String]
|
||||
},
|
||||
fromType:{
|
||||
default: 'crs',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -96,7 +104,7 @@
|
||||
return `polygon(${_tx}% ${_ty}%, ${_rx}% ${_ry}%, ${_bx}% ${_by}%, ${_lx}% ${_ly}%, ${_lxl}% ${_lyl}%)`
|
||||
},
|
||||
styleFiveResult(){
|
||||
let score = this.dataList
|
||||
let score = this.dataValue
|
||||
if(score.length >= 5){
|
||||
let base = 50
|
||||
let _tx = 50
|
||||
@@ -253,9 +261,17 @@
|
||||
line-height: 46rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
.title-icon{
|
||||
position: relative;
|
||||
.title-icon {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
|
||||
&.icon-tra{
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-score{
|
||||
|
||||
@@ -4,19 +4,23 @@
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
<view class="data-box">
|
||||
<view class="line-box">
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
|
||||
<view class="title" v-if="fromType === 'crs'">
|
||||
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
|
||||
改进建议：
|
||||
</view>
|
||||
<view class="total-score">
|
||||
<view class="score-num">{{props.score}}</view>分
|
||||
<image class="total-score-icon" src="@/static/images/course/score.png" alt=""></image>
|
||||
<view class="title" v-if="fromType === 'tra'">
|
||||
<image class="title-icon icon-tra" src="@/static/images/sparring/den-icon.png" alt=""> </image>
|
||||
维度分析：
|
||||
</view>
|
||||
<view v-for="item,index in props.dataList" :class="['score-item', 'score-item'+(index+1)]">
|
||||
<view class="total-score" v-if="fromType === 'crs'">
|
||||
<view class="score-num">{{ props.score }}</view>分
|
||||
<image class="total-score-icon" src="@/static/images/course/score.png" alt=""></image>
|
||||
</view>
|
||||
<view v-for="item,index in props.dataList" :class="['score-item', 'score-item'+(index+1)]">
|
||||
<view class="score-item-name">{{ item.gradeDimensName || item.gradeDimens }}</view>
|
||||
<view class="score-item-score">{{ item.anlyGrade }}</view>
|
||||
</view>
|
||||
@@ -24,81 +28,90 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed} from "vue"
|
||||
import {
|
||||
ref,
|
||||
computed
|
||||
} from "vue"
|
||||
const props = defineProps({
|
||||
dataList:{
|
||||
default:() => [],
|
||||
dataList: {
|
||||
default: () => [],
|
||||
type: Array
|
||||
},
|
||||
score:{
|
||||
score: {
|
||||
default: 0,
|
||||
type: [Number,String]
|
||||
type: [Number, String]
|
||||
},
|
||||
size:{
|
||||
size: {
|
||||
default: 262,
|
||||
type: [Number,String]
|
||||
type: [Number, String]
|
||||
},
|
||||
fromType: {
|
||||
default: 'crs',
|
||||
type: String
|
||||
}
|
||||
})
|
||||
const dataValue = computed(() => {
|
||||
return props.dataList.map(t=>t.anlyGrade)
|
||||
return props.dataList.map(t => t.anlyGrade)
|
||||
})
|
||||
const chartWidth = computed(() => props.size + 'rpx')
|
||||
const chartHeight = computed(() => props.size + 'rpx')
|
||||
const scoreMarginX = computed(() => {
|
||||
return props.size/2 + 'rpx'
|
||||
return props.size / 2 + 'rpx'
|
||||
})
|
||||
const scoreMarginY = computed(() => {
|
||||
return (props.size/2 + 30) + 'rpx'
|
||||
return (props.size / 2 + 30) + 'rpx'
|
||||
})
|
||||
const scoreMarginAbsX = computed(() => {
|
||||
return '-' + (props.size/2 ) + 'rpx'
|
||||
return '-' + (props.size / 2) + 'rpx'
|
||||
})
|
||||
const scoreMarginAbsY = computed(() => {
|
||||
return '-' + (props.size/2 - 25) + 'rpx'
|
||||
return '-' + (props.size / 2 - 25) + 'rpx'
|
||||
})
|
||||
const styleFour = ref('polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)')
|
||||
const styleFourResult = computed(()=>{
|
||||
const styleFourResult = computed(() => {
|
||||
let score = dataValue.value
|
||||
if(score.length>=4){
|
||||
if (score.length >= 4) {
|
||||
let _tx = 50
|
||||
let _ty = 50 - Math.floor((score[0]/100)*50)
|
||||
let _rx = 50 + Math.floor((score[1]/100)*50)
|
||||
let _ty = 50 - Math.floor((score[0] / 100) * 50)
|
||||
let _rx = 50 + Math.floor((score[1] / 100) * 50)
|
||||
let _ry = 50
|
||||
let _bx = 50
|
||||
let _by = 50 + Math.floor((score[2]/100)*50)
|
||||
let _lx = 50 - Math.floor((score[3]/100)*50)
|
||||
let _by = 50 + Math.floor((score[2] / 100) * 50)
|
||||
let _lx = 50 - Math.floor((score[3] / 100) * 50)
|
||||
let _ly = 50
|
||||
return `polygon(${_tx}% ${_ty}%, ${_rx}% ${_ry}%, ${_bx}% ${_by}%, ${_lx}% ${_ly}%)`
|
||||
}else{
|
||||
} else {
|
||||
return `polygon(${0}% ${50}%, ${50}% ${100}%, ${100}% ${50}%, ${50}% ${0}%)`
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-box{
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 580rpx;
|
||||
background:linear-gradient( 270deg, #4a74ff 0%, #6fa7fe 100%);
|
||||
background: linear-gradient(270deg, #4a74ff 0%, #6fa7fe 100%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.cont-box{
|
||||
|
||||
.cont-box {
|
||||
background-color: #87abfe;
|
||||
width: v-bind(chartWidth);
|
||||
height: v-bind(chartHeight);
|
||||
clip-path: v-bind(styleFour);
|
||||
clip-path: v-bind(styleFour);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 25rpx;
|
||||
&::before{
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3rpx;
|
||||
height: 3rpx;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -106,11 +119,12 @@
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
}
|
||||
&::after{
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 3rpx;
|
||||
width: 3rpx;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -118,24 +132,26 @@
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
.percent-#{$i*25} {
|
||||
width: $i * 25%;
|
||||
height: $i * 25%;
|
||||
clip-path: v-bind(styleFour);
|
||||
clip-path: v-bind(styleFour);
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: (4 - $i) * 2;
|
||||
&::before{
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(100% - 10rpx);
|
||||
height: calc(100% - 10rpx);
|
||||
background-color: #87abfe;
|
||||
clip-path: v-bind(styleFour);
|
||||
clip-path: v-bind(styleFour);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -143,56 +159,69 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: v-bind(styleFourResult);
|
||||
|
||||
.data-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: v-bind(styleFourResult);
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 12;
|
||||
overflow: hidden;
|
||||
|
||||
.line-box {
|
||||
display: block;
|
||||
width: calc(100% - 24rpx);
|
||||
height: calc(100% - 24rpx);
|
||||
// background-color: #6691fe;
|
||||
background-color: #6691fe;
|
||||
clip-path: v-bind(styleFourResult);
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 12;
|
||||
overflow: hidden;
|
||||
.line-box{
|
||||
display: block;
|
||||
width: calc(100% - 24rpx);
|
||||
height: calc(100% - 24rpx);
|
||||
// background-color: #6691fe;
|
||||
background-color: #6691fe;
|
||||
clip-path: v-bind(styleFourResult);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
z-index: (4 - $i) * 2 + 10;
|
||||
&::before{
|
||||
background-color: #6692ff;
|
||||
}
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25} {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
z-index: (4 - $i) * 2 + 10;
|
||||
|
||||
&::before {
|
||||
background-color: #6692ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
|
||||
.title {
|
||||
padding: 24rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
.title-icon{
|
||||
position: relative;
|
||||
.title-icon {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
|
||||
&.icon-tra{
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-score{
|
||||
|
||||
.total-score {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top:30rpx;
|
||||
top: 30rpx;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
line-height: 70rpx;
|
||||
@@ -200,53 +229,62 @@
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, .33);
|
||||
.score-num{
|
||||
|
||||
.score-num {
|
||||
display: inline-block;
|
||||
font-size: 60rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total-score-icon{
|
||||
|
||||
.total-score-icon {
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.score-item{
|
||||
|
||||
.score-item {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
.score-item-name{
|
||||
|
||||
.score-item-name {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.score-item-score{
|
||||
|
||||
.score-item-score {
|
||||
font-size: 38rpx;
|
||||
line-height: 46rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.score-item1{
|
||||
|
||||
&.score-item1 {
|
||||
left: 50%;
|
||||
margin-left: -60rpx;
|
||||
bottom: 50%;
|
||||
transform: translateY(v-bind(scoreMarginAbsY));
|
||||
}
|
||||
&.score-item2{
|
||||
|
||||
&.score-item2 {
|
||||
right: 0%;
|
||||
top: 50%;
|
||||
transform: translate(calc(v-bind(scoreMarginAbsX) + 60rpx), calc(-50% + 25rpx));
|
||||
}
|
||||
&.score-item3{
|
||||
|
||||
&.score-item3 {
|
||||
left: 50%;
|
||||
margin-left: -60rpx;
|
||||
top: 50%;
|
||||
transform: translateY(v-bind(scoreMarginY));
|
||||
}
|
||||
&.score-item4{
|
||||
|
||||
&.score-item4 {
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
transform: translate(calc(v-bind(scoreMarginX) - 60rpx), calc(-50% + 25rpx));
|
||||
|
||||
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<view class="chart-box" :style="allStyle">
|
||||
<view class="cont-box">
|
||||
<view v-for="width in 7" :class="'total-line total-line' + width"></view>
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
<view class="data-box">
|
||||
<view class="line-box">
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title" v-if="fromType === 'crs'">
|
||||
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
|
||||
改进建议：
|
||||
</view>
|
||||
<view class="title" v-if="fromType === 'tra'">
|
||||
<image class="title-icon icon-tra" src="@/static/images/sparring/den-icon.png" alt=""> </image>
|
||||
维度分析22：
|
||||
</view>
|
||||
<view class="total-score" v-if="fromType === 'crs'">
|
||||
<view class="score-num">{{ score }}</view>分
|
||||
<image class="total-score-icon" src="@/static/images/course/score.png" alt=""></image>
|
||||
</view>
|
||||
<view v-for="(item,index) in dataList" :class="['score-item', 'score-item'+(index+1)]">
|
||||
<view class="score-item-name">维度{{ item }}</view>
|
||||
<view class="score-item-score">{{ item }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
dataList:{
|
||||
default:() => [10,20,30,40,50,60,78],
|
||||
type: Array
|
||||
},
|
||||
score:{
|
||||
default: 0,
|
||||
type: [Number,String]
|
||||
},
|
||||
size:{
|
||||
default: 262,
|
||||
type: [Number,String]
|
||||
},
|
||||
fromType:{
|
||||
default: 'crs',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
dataValue(){
|
||||
return this.dataList//.map(t=>t.anlyGrade)
|
||||
},
|
||||
chartWidth(){
|
||||
return this.size + 'rpx'
|
||||
},
|
||||
chartHeight(){
|
||||
return this.size + 'rpx'
|
||||
},
|
||||
styleFive(){
|
||||
return this.generateHeptagonClipPath()
|
||||
},
|
||||
styleFiveResult(){
|
||||
return this.generateHeptagonDataClipPath()
|
||||
},
|
||||
verticesList(){
|
||||
return this.calculateHeptagonVertices()
|
||||
},
|
||||
allStyle(){
|
||||
let _obj = {
|
||||
'--styleFive': this.styleFive,
|
||||
'--styleFiveResult': this.styleFiveResult,
|
||||
'--chartWidth': this.chartWidth,
|
||||
'--chartHeight': this.chartHeight,
|
||||
'--boxSize': this.size + 'rpx'
|
||||
}
|
||||
this.verticesList.forEach((t,index)=>{
|
||||
_obj[`--pointX${index+1}`] = t.x/100
|
||||
_obj[`--pointY${index+1}`] = t.y/100
|
||||
// _obj[`--pointX${index+1}`] = t.cssX
|
||||
// _obj[`--pointY${index+1}`] = t.cssY
|
||||
})
|
||||
return _obj
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 正七边形顶点计算函数
|
||||
calculateHeptagonVertices(radius = 50, angleOffset = 0) {
|
||||
const sides = 7;
|
||||
const vertices = [];
|
||||
const centerX = 50;
|
||||
const centerY = 50;
|
||||
|
||||
// 将角度偏移转换为弧度
|
||||
const offsetRad = (angleOffset * Math.PI) / 180;
|
||||
|
||||
for (let i = 0; i < sides; i++) {
|
||||
// 计算每个顶点的角度（弧度）
|
||||
const angle = (2 * Math.PI * i) / sides + offsetRad;
|
||||
|
||||
// 计算顶点坐标（百分比）
|
||||
const x = centerX + radius * Math.cos(angle);
|
||||
const y = centerY + radius * Math.sin(angle);
|
||||
// 计算顶点坐标（百分比）
|
||||
const dataX = centerX + radius * Math.cos(angle) * this.dataValue[i] / 100;
|
||||
const dataY = centerY + radius * Math.sin(angle) * this.dataValue[i] / 100;
|
||||
|
||||
vertices.push({
|
||||
x: x,
|
||||
y: y,
|
||||
cssX: x + '%',
|
||||
cssY: y + '%',
|
||||
dataX: dataX + '%',
|
||||
dataY: dataY + '%'
|
||||
});
|
||||
}
|
||||
console.log(vertices)
|
||||
return vertices;
|
||||
},
|
||||
|
||||
// 生成CSS clip-path多边形值
|
||||
generateHeptagonClipPath(radius = 50, angleOffset = 0) {
|
||||
const vertices = this.calculateHeptagonVertices(radius, angleOffset);
|
||||
const polygonPoints = vertices.map(v => `${v.cssX} ${v.cssY}`).join(', ');
|
||||
return `polygon(${polygonPoints})`;
|
||||
},
|
||||
// 生成CSS clip-path多边形值
|
||||
generateHeptagonDataClipPath(radius = 50, angleOffset = 0) {
|
||||
const vertices = this.calculateHeptagonVertices(radius, angleOffset);
|
||||
const polygonPoints = vertices.map(v => `${v.dataX} ${v.dataY}`).join(', ');
|
||||
return `polygon(${polygonPoints})`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart-box{
|
||||
width: 100%;
|
||||
height: 580rpx;
|
||||
background:linear-gradient( 270deg, #4a74ff 0%, #6fa7fe 100%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.cont-box{
|
||||
background-color: #87abfe;
|
||||
width: var(--chartWidth);
|
||||
height: var(--chartHeight);
|
||||
clip-path: var(--styleFive);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 25rpx;
|
||||
|
||||
.total-line{
|
||||
width: 100%;
|
||||
height: 3rpx;
|
||||
background: linear-gradient(90deg, #00000000 0% 50%, rgba(255, 255, 255, .3) 50% 100%);
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
&.total-line1{
|
||||
transform: rotateZ(calc(360deg * 1 / 7));
|
||||
}
|
||||
&.total-line2{
|
||||
transform: rotateZ(calc(360deg * 2 / 7));
|
||||
}
|
||||
&.total-line3{
|
||||
transform: rotateZ(calc(360deg * 3 / 7));
|
||||
}
|
||||
&.total-line4{
|
||||
transform: rotateZ(calc(360deg * 4 / 7));
|
||||
}
|
||||
&.total-line5{
|
||||
transform: rotateZ(calc(360deg * 5 / 7));
|
||||
}
|
||||
&.total-line6{
|
||||
transform: rotateZ(calc(360deg * 6 / 7));
|
||||
}
|
||||
&.total-line7{
|
||||
transform: rotateZ(calc(360deg * 7 / 7));
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
width: $i * 25%;
|
||||
height: $i * 25%;
|
||||
clip-path: var(--styleFive);
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: (4 - $i) * 2;
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(100% - 10rpx);
|
||||
height: calc(100% - 10rpx);
|
||||
background-color: #87abfe;
|
||||
clip-path: var(--styleFive);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: var(--styleFiveResult);
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 12;
|
||||
overflow: hidden;
|
||||
.line-box{
|
||||
display: block;
|
||||
width: calc(100% - 24rpx);
|
||||
height: calc(100% - 24rpx);
|
||||
// background-color: #6691fe;
|
||||
background-color: #6691fe;
|
||||
clip-path: var(--styleFiveResult);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
z-index: (4 - $i) * 2 + 10;
|
||||
&::before{
|
||||
background-color: #6692ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
padding: 24rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.title-icon {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
|
||||
&.icon-tra{
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-score{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top:30rpx;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, .33);
|
||||
.score-num{
|
||||
display: inline-block;
|
||||
font-size: 60rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total-score-icon{
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
}
|
||||
}
|
||||
.score-item{
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
.score-item-name{
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.score-item-score{
|
||||
font-size: 38rpx;
|
||||
line-height: 46rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.score-item1{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(calc(-50% + var(--boxSize)/2 + 60rpx));
|
||||
}
|
||||
&.score-item2{
|
||||
left: calc(var(--pointX2) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY2) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 80rpx), 30rpx);
|
||||
}
|
||||
&.score-item3{
|
||||
left: calc(var(--pointX3) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY3) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 50rpx), 30rpx);
|
||||
}
|
||||
&.score-item4{
|
||||
left: calc(var(--pointX4) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY4) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 - 10rpx), -30rpx);
|
||||
}
|
||||
&.score-item5{
|
||||
left: calc(var(--pointX5) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY5) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 - 10rpx), -120rpx);
|
||||
}
|
||||
&.score-item6{
|
||||
left: calc(var(--pointX6) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY6) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 60rpx), calc(-170rpx - 50%));
|
||||
}
|
||||
&.score-item7{
|
||||
left: calc(var(--pointX6) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY6) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 210rpx), calc(-150rpx - 50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<view class="chart-box" :style="allStyle">
|
||||
<view class="cont-box">
|
||||
<view v-for="width in 7" :class="'total-line total-line' + width"></view>
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
<view class="data-box">
|
||||
<view class="line-box">
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title" v-if="fromType === 'crs'">
|
||||
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
|
||||
改进建议：
|
||||
</view>
|
||||
<view class="title" v-if="fromType === 'tra'">
|
||||
<image class="title-icon icon-tra" src="@/static/images/sparring/den-icon.png" alt=""> </image>
|
||||
维度分析22：
|
||||
</view>
|
||||
<view class="total-score" v-if="fromType === 'crs'">
|
||||
<view class="score-num">{{ score }}</view>分
|
||||
<image class="total-score-icon" src="@/static/images/course/score.png" alt=""></image>
|
||||
</view>
|
||||
<view v-for="(item,index) in dataList" :class="['score-item', 'score-item'+(index+1)]">
|
||||
<view class="score-item-name">维度维{{ item }}</view>
|
||||
<view class="score-item-score">{{ item }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
dataList:{
|
||||
default:() => [20,30,40,50,60,78],
|
||||
type: Array
|
||||
},
|
||||
score:{
|
||||
default: 0,
|
||||
type: [Number,String]
|
||||
},
|
||||
size:{
|
||||
default: 262,
|
||||
type: [Number,String]
|
||||
},
|
||||
fromType:{
|
||||
default: 'crs',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
dataValue(){
|
||||
return this.dataList//.map(t=>t.anlyGrade)
|
||||
},
|
||||
chartWidth(){
|
||||
return this.size + 'rpx'
|
||||
},
|
||||
chartHeight(){
|
||||
return this.size + 'rpx'
|
||||
},
|
||||
styleFive(){
|
||||
return this.generateHeptagonClipPath()
|
||||
},
|
||||
styleFiveResult(){
|
||||
return this.generateHeptagonDataClipPath()
|
||||
},
|
||||
verticesList(){
|
||||
return this.calculateHeptagonVertices()
|
||||
},
|
||||
allStyle(){
|
||||
let _obj = {
|
||||
'--styleFive': this.styleFive,
|
||||
'--styleFiveResult': this.styleFiveResult,
|
||||
'--chartWidth': this.chartWidth,
|
||||
'--chartHeight': this.chartHeight,
|
||||
'--boxSize': this.size + 'rpx'
|
||||
}
|
||||
this.verticesList.forEach((t,index)=>{
|
||||
_obj[`--pointX${index+1}`] = t.x/100
|
||||
_obj[`--pointY${index+1}`] = t.y/100
|
||||
// _obj[`--pointX${index+1}`] = t.cssX
|
||||
// _obj[`--pointY${index+1}`] = t.cssY
|
||||
})
|
||||
return _obj
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 正七边形顶点计算函数
|
||||
calculateHeptagonVertices(radius = 50, angleOffset = 0) {
|
||||
const sides = 6;
|
||||
const vertices = [];
|
||||
const centerX = 50;
|
||||
const centerY = 50;
|
||||
|
||||
// 将角度偏移转换为弧度
|
||||
const offsetRad = (angleOffset * Math.PI) / 180;
|
||||
|
||||
for (let i = 0; i < sides; i++) {
|
||||
// 计算每个顶点的角度（弧度）
|
||||
const angle = (2 * Math.PI * i) / sides + offsetRad;
|
||||
|
||||
// 计算顶点坐标（百分比）
|
||||
const x = centerX + radius * Math.cos(angle);
|
||||
const y = centerY + radius * Math.sin(angle);
|
||||
// 计算顶点坐标（百分比）
|
||||
const dataX = centerX + radius * Math.cos(angle) * this.dataValue[i] / 100;
|
||||
const dataY = centerY + radius * Math.sin(angle) * this.dataValue[i] / 100;
|
||||
|
||||
vertices.push({
|
||||
x: x,
|
||||
y: y,
|
||||
cssX: x + '%',
|
||||
cssY: y + '%',
|
||||
dataX: dataX + '%',
|
||||
dataY: dataY + '%'
|
||||
});
|
||||
}
|
||||
console.log(vertices)
|
||||
return vertices;
|
||||
},
|
||||
|
||||
// 生成CSS clip-path多边形值
|
||||
generateHeptagonClipPath(radius = 50, angleOffset = 0) {
|
||||
const vertices = this.calculateHeptagonVertices(radius, angleOffset);
|
||||
const polygonPoints = vertices.map(v => `${v.cssX} ${v.cssY}`).join(', ');
|
||||
return `polygon(${polygonPoints})`;
|
||||
},
|
||||
// 生成CSS clip-path多边形值
|
||||
generateHeptagonDataClipPath(radius = 50, angleOffset = 0) {
|
||||
const vertices = this.calculateHeptagonVertices(radius, angleOffset);
|
||||
const polygonPoints = vertices.map(v => `${v.dataX} ${v.dataY}`).join(', ');
|
||||
return `polygon(${polygonPoints})`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart-box{
|
||||
width: 100%;
|
||||
height: 580rpx;
|
||||
background:linear-gradient( 270deg, #4a74ff 0%, #6fa7fe 100%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.cont-box{
|
||||
background-color: #87abfe;
|
||||
width: var(--chartWidth);
|
||||
height: var(--chartHeight);
|
||||
clip-path: var(--styleFive);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 25rpx;
|
||||
|
||||
.total-line{
|
||||
width: 100%;
|
||||
height: 3rpx;
|
||||
background: linear-gradient(90deg, #00000000 0% 50%, rgba(255, 255, 255, .3) 50% 100%);
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
&.total-line1{
|
||||
transform: rotateZ(calc(360deg * 1 / 6));
|
||||
}
|
||||
&.total-line2{
|
||||
transform: rotateZ(calc(360deg * 2 / 6));
|
||||
}
|
||||
&.total-line3{
|
||||
transform: rotateZ(calc(360deg * 3 / 6));
|
||||
}
|
||||
&.total-line4{
|
||||
transform: rotateZ(calc(360deg * 4 / 6));
|
||||
}
|
||||
&.total-line5{
|
||||
transform: rotateZ(calc(360deg * 5 / 6));
|
||||
}
|
||||
&.total-line6{
|
||||
transform: rotateZ(calc(360deg * 6 / 6));
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
width: $i * 25%;
|
||||
height: $i * 25%;
|
||||
clip-path: var(--styleFive);
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: (4 - $i) * 2;
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(100% - 10rpx);
|
||||
height: calc(100% - 10rpx);
|
||||
background-color: #87abfe;
|
||||
clip-path: var(--styleFive);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: var(--styleFiveResult);
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 12;
|
||||
overflow: hidden;
|
||||
.line-box{
|
||||
display: block;
|
||||
width: calc(100% - 24rpx);
|
||||
height: calc(100% - 24rpx);
|
||||
// background-color: #6691fe;
|
||||
background-color: #6691fe;
|
||||
clip-path: var(--styleFiveResult);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
z-index: (4 - $i) * 2 + 10;
|
||||
&::before{
|
||||
background-color: #6692ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
padding: 24rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.title-icon {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
|
||||
&.icon-tra{
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-score{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top:30rpx;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, .33);
|
||||
.score-num{
|
||||
display: inline-block;
|
||||
font-size: 60rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total-score-icon{
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
}
|
||||
}
|
||||
.score-item{
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
.score-item-name{
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.score-item-score{
|
||||
font-size: 38rpx;
|
||||
line-height: 46rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.score-item1{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 60rpx), -50%);
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
&.score-item2{
|
||||
left: calc(var(--pointX2) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY2) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 80rpx), 30rpx);
|
||||
}
|
||||
&.score-item3{
|
||||
left: calc(var(--pointX3) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY3) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 50rpx), 30rpx);
|
||||
}
|
||||
&.score-item4{
|
||||
left: calc(var(--pointX4) * var(--boxSize));
|
||||
top: 50% ;
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 - 10rpx), -50%);
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
&.score-item5{
|
||||
left: calc(var(--pointX5) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY5) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 50rpx), calc(-160rpx - 50%));
|
||||
}
|
||||
&.score-item6{
|
||||
left: calc(var(--pointX6) * var(--boxSize));
|
||||
top: calc(50% + (var(--pointY6) * var(--boxSize) / 2));
|
||||
transform: translate(calc(-50% + var(--boxSize)/2 + 80rpx), calc(-160rpx - 50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,19 +7,23 @@
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
<view class="data-box">
|
||||
<view class="line-box">
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
|
||||
<view class="title" v-if="fromType === 'crs'">
|
||||
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
|
||||
改进建议：
|
||||
</view>
|
||||
<view class="total-score">
|
||||
<view class="score-num">{{props.score}}</view>分
|
||||
<image class="total-score-icon" src="@/static/images/course/score.png" alt="" ></image>
|
||||
<view class="title" v-if="fromType === 'tra'">
|
||||
<image class="title-icon icon-tra" src="@/static/images/sparring/den-icon.png" alt=""> </image>
|
||||
维度分析：
|
||||
</view>
|
||||
<view v-for="item,index in props.dataList" :class="['score-item', 'score-item'+(index+1)]">
|
||||
<view class="total-score" v-if="fromType === 'crs'">
|
||||
<view class="score-num">{{ props.score }}</view>分
|
||||
<image class="total-score-icon" src="@/static/images/course/score.png" alt=""></image>
|
||||
</view>
|
||||
<view v-for="item,index in props.dataList" :class="['score-item', 'score-item'+(index+1)]">
|
||||
<view class="score-item-name">{{ item.gradeDimensName || item.gradeDimens }}</view>
|
||||
<view class="score-item-score">{{ item.anlyGrade }}</view>
|
||||
</view>
|
||||
@@ -27,130 +31,144 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed} from "vue"
|
||||
import {
|
||||
ref,
|
||||
computed
|
||||
} from "vue"
|
||||
const props = defineProps({
|
||||
dataList:{
|
||||
default:() => [],
|
||||
dataList: {
|
||||
default: () => [],
|
||||
type: Array
|
||||
},
|
||||
score:{
|
||||
score: {
|
||||
default: 0,
|
||||
type: [Number,String]
|
||||
type: [Number, String]
|
||||
},
|
||||
size:{
|
||||
size: {
|
||||
default: 262,
|
||||
type: [Number,String]
|
||||
type: [Number, String]
|
||||
},
|
||||
fromType: {
|
||||
default: 'crs',
|
||||
type: String
|
||||
}
|
||||
})
|
||||
const dataValue = computed(() => {
|
||||
return props.dataList.map(t=>t.anlyGrade)
|
||||
return props.dataList.map(t => t.anlyGrade)
|
||||
})
|
||||
let _scale = .9
|
||||
const chartWidth = computed(() => props.size / _scale + 'rpx')
|
||||
const chartHeight = computed(() => props.size / _scale + 'rpx')
|
||||
|
||||
|
||||
const scoreMarginX = computed(() => {
|
||||
return (props.size/2 + 20) + 'rpx'
|
||||
return (props.size / 2 + 20) + 'rpx'
|
||||
})
|
||||
const scoreMarginAbsY = computed(() => {
|
||||
return '-' + (props.size/2 - 40) + 'rpx'
|
||||
return '-' + (props.size / 2 - 40) + 'rpx'
|
||||
})
|
||||
const scoreMarginPercentY = computed(() => {
|
||||
let score = dataValue.value
|
||||
return setPercent(80, Math.round(100 * 1.732 / 6 * _scale * 100)/100) + '%'
|
||||
return setPercent(80, Math.round(100 * 1.732 / 6 * _scale * 100) / 100) + '%'
|
||||
})
|
||||
|
||||
|
||||
const styleFour = computed(()=>{
|
||||
|
||||
|
||||
const styleFour = computed(() => {
|
||||
// let _blank = (50 - Math.round(100 * 1.732 / 3))/2
|
||||
// let _margin = _blank +
|
||||
let _tx = 50
|
||||
let _ty = 50 - Math.round(100 * 1.732 / 3)* _scale
|
||||
let _rx = 50 + 50 *_scale
|
||||
let _ry = 50 + Math.round(100 * 1.732 / 6)* _scale
|
||||
let _bx = 50 - 50 *_scale
|
||||
let _by = 50 + Math.round(100 * 1.732 / 6)* _scale
|
||||
let _tx = 50
|
||||
let _ty = 50 - Math.round(100 * 1.732 / 3) * _scale
|
||||
let _rx = 50 + 50 * _scale
|
||||
let _ry = 50 + Math.round(100 * 1.732 / 6) * _scale
|
||||
let _bx = 50 - 50 * _scale
|
||||
let _by = 50 + Math.round(100 * 1.732 / 6) * _scale
|
||||
return `polygon(${_tx}% ${_ty}%, ${_rx}% ${_ry}%, ${_bx}% ${_by}%)`
|
||||
})
|
||||
const styleFourResult = computed(()=>{
|
||||
const styleFourResult = computed(() => {
|
||||
let score = dataValue.value
|
||||
|
||||
if(score.length >= 3){
|
||||
let _tx = 50
|
||||
let _ty = 50 - setPercent(score[0], Math.round(100 * 1.732 / 3 * _scale * 100)/100)
|
||||
let _rx = 50 + setPercent(score[1], Math.round(50 *_scale * 100)/100)
|
||||
let _ry = 50 + setPercent(score[1], Math.round(100 * 1.732 / 6 * _scale * 100)/100)
|
||||
let _bx = 50 - setPercent(score[2], Math.round(50 *_scale * 100)/100)
|
||||
let _by = 50 + setPercent(score[2], Math.round(100 * 1.732 / 6 * _scale * 100)/100)
|
||||
|
||||
if (score.length >= 3) {
|
||||
let _tx = 50
|
||||
let _ty = 50 - setPercent(score[0], Math.round(100 * 1.732 / 3 * _scale * 100) / 100)
|
||||
let _rx = 50 + setPercent(score[1], Math.round(50 * _scale * 100) / 100)
|
||||
let _ry = 50 + setPercent(score[1], Math.round(100 * 1.732 / 6 * _scale * 100) / 100)
|
||||
let _bx = 50 - setPercent(score[2], Math.round(50 * _scale * 100) / 100)
|
||||
let _by = 50 + setPercent(score[2], Math.round(100 * 1.732 / 6 * _scale * 100) / 100)
|
||||
return `polygon(${_tx}% ${_ty}%, ${_rx}% ${_ry}%, ${_bx}% ${_by}%)`
|
||||
}else{
|
||||
} else {
|
||||
return styleFour.value
|
||||
}
|
||||
})
|
||||
const setPercent = (precent, show) => {
|
||||
return Math.floor((precent/100) * show)
|
||||
return Math.floor((precent / 100) * show)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-box{
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 580rpx;
|
||||
background:linear-gradient( 270deg, #4a74ff 0%, #6fa7fe 100%);
|
||||
background: linear-gradient(270deg, #4a74ff 0%, #6fa7fe 100%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.cont-box{
|
||||
|
||||
.cont-box {
|
||||
background-color: #87abfe;
|
||||
width: v-bind(chartWidth);
|
||||
height: v-bind(chartHeight);
|
||||
clip-path: v-bind(styleFour);
|
||||
clip-path: v-bind(styleFour);
|
||||
position: absolute;
|
||||
top: calc(60% + 20rpx);
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.total-line{
|
||||
|
||||
.total-line {
|
||||
width: 57.7%;
|
||||
height: 3rpx;
|
||||
height: 3rpx;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
&.total-line1{
|
||||
|
||||
&.total-line1 {
|
||||
top: 64.5%;
|
||||
left: 46.5%;
|
||||
transform: rotateZ(30deg);
|
||||
}
|
||||
&.total-line2{
|
||||
|
||||
&.total-line2 {
|
||||
top: 64.5%;
|
||||
left:-4.5%;
|
||||
left: -4.5%;
|
||||
transform: rotateZ(150deg);
|
||||
}
|
||||
&.total-line3{
|
||||
|
||||
&.total-line3 {
|
||||
top: 21.5%;
|
||||
left: 21%;
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
.percent-#{$i*25} {
|
||||
width: $i * 25%;
|
||||
height: $i * 25%;
|
||||
clip-path: v-bind(styleFour);
|
||||
clip-path: v-bind(styleFour);
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: (4 - $i) * 2;
|
||||
&::before{
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(100% - 10rpx);
|
||||
height: calc(100% - 10rpx);
|
||||
background-color: #87abfe;
|
||||
clip-path: v-bind(styleFour);
|
||||
clip-path: v-bind(styleFour);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -158,56 +176,69 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: v-bind(styleFourResult);
|
||||
|
||||
.data-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: v-bind(styleFourResult);
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 12;
|
||||
overflow: hidden;
|
||||
|
||||
.line-box {
|
||||
display: block;
|
||||
width: calc(100% - 24rpx);
|
||||
height: calc(100% - 24rpx);
|
||||
// background-color: #6691fe;
|
||||
background-color: #6691fe;
|
||||
clip-path: v-bind(styleFourResult);
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 12;
|
||||
overflow: hidden;
|
||||
.line-box{
|
||||
display: block;
|
||||
width: calc(100% - 24rpx);
|
||||
height: calc(100% - 24rpx);
|
||||
// background-color: #6691fe;
|
||||
background-color: #6691fe;
|
||||
clip-path: v-bind(styleFourResult);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
z-index: (4 - $i) * 2 + 10;
|
||||
&::before{
|
||||
background-color: #6692ff;
|
||||
}
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25} {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
z-index: (4 - $i) * 2 + 10;
|
||||
|
||||
&::before {
|
||||
background-color: #6692ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
|
||||
.title {
|
||||
padding: 24rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
.title-icon{
|
||||
position: relative;
|
||||
.title-icon {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
|
||||
&.icon-tra{
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-score{
|
||||
|
||||
.total-score {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top:30rpx;
|
||||
top: 30rpx;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
line-height: 70rpx;
|
||||
@@ -215,47 +246,55 @@
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, .33);
|
||||
.score-num{
|
||||
|
||||
.score-num {
|
||||
display: inline-block;
|
||||
font-size: 60rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total-score-icon{
|
||||
|
||||
.total-score-icon {
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.score-item{
|
||||
|
||||
.score-item {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
.score-item-name{
|
||||
|
||||
.score-item-name {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.score-item-score{
|
||||
|
||||
.score-item-score {
|
||||
font-size: 38rpx;
|
||||
line-height: 46rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.score-item1{
|
||||
|
||||
&.score-item1 {
|
||||
left: 50%;
|
||||
margin-left: -60rpx;
|
||||
bottom: 50%;
|
||||
transform: translateY(v-bind(scoreMarginAbsY));
|
||||
}
|
||||
&.score-item2{
|
||||
left: calc( 50% + v-bind(scoreMarginX));
|
||||
|
||||
&.score-item2 {
|
||||
left: calc(50% + v-bind(scoreMarginX));
|
||||
bottom: calc(v-bind(scoreMarginPercentY) - 30rpx);
|
||||
}
|
||||
&.score-item3{
|
||||
right: calc( 50% + v-bind(scoreMarginX));
|
||||
|
||||
&.score-item3 {
|
||||
right: calc(50% + v-bind(scoreMarginX));
|
||||
bottom: calc(v-bind(scoreMarginPercentY) - 30rpx);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -522,6 +522,9 @@
|
||||
background-size: 24rpx !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
:deep(.uv-tabs__wrapper__nav__item__text){
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.course-center {
|
||||
position: relative;
|
||||
|
||||
@@ -806,6 +806,10 @@
|
||||
//#ifdef APP-PLUS
|
||||
uni.offKeyboardHeightChange(setHeight)
|
||||
// #endif
|
||||
try {
|
||||
teacherVoiceObj?.stop()
|
||||
teacherVoiceObj.src = ''
|
||||
} catch {}
|
||||
// common.show('提示信息', '检测到您已离开，即将退出学习页面。',false, '','确认').then((res) => {
|
||||
// common.redirectTo(`/pages/courseDetail/index?crsId=${crsId.value}&crsNum=${crsNum.value}&from=study`)
|
||||
// }).finally(() => {})
|
||||
|
||||
@@ -637,6 +637,9 @@
|
||||
case 'AI学':
|
||||
common.switchTab('/pages/course/index');
|
||||
break;
|
||||
case 'AI练':
|
||||
common.navigateTo('/pages/sparring/index');
|
||||
break;
|
||||
case 'AI考':
|
||||
common.navigateTo('/pages/testingHall/index');
|
||||
break;
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
<image class="icon" src="@/static/images/index/navigation_wrong_question.png"></image>
|
||||
<view class="title">错题本</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" @click="common.navigateTo('/pages/analytics/study')">
|
||||
<image class="icon" src="@/static/images/index/navigation_learning_analysis.png"></image>
|
||||
<view class="title">学习分析</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<view class="answer-content" v-if="props.isLoading">
|
||||
<view class="talking-cont">
|
||||
<CommonLoading color="#06f" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="answer-content" v-else>
|
||||
<view class="talking-cont">
|
||||
<MarkdownPreview :mdString="mdText" />
|
||||
</view>
|
||||
<view class="btns-cont" v-if="!props.isLoading">
|
||||
<view class="replay-btn" @click="reAnswer" v-if="!props.dataInfo.isHistory">
|
||||
<image class="icon" src="@/static/images/dialog/answer-restart1.png" style="width: 100%; height: 100%"></image>
|
||||
</view>
|
||||
<view class="replay-btn" @click="stopAnswer" v-if="props.isAnswering && props.isLast">
|
||||
<image class="icon" src="@/static/images/dialog/answer-stop1.png" style="width: 100%; height: 100%"></image>
|
||||
</view>
|
||||
<!-- 重新播放 -->
|
||||
<view class="replay-btn" @click.stop="restartPlay">
|
||||
<image class="icon" src="@/static/images/course/replay.png" style="width: 100%; height: 100%"></image>
|
||||
</view>
|
||||
<!-- 播放/暂停 -->
|
||||
<view class="play-btn">
|
||||
<image class="icon" src="@/static/images/course/play.png" style="width: 100%; height: 100%"
|
||||
@click.stop="playVoice()" v-show="!isPlaying"></image>
|
||||
<image class="icon" v-show="isPlaying" src="@/static/images/course/pause.png" style="width: 100%; height: 100%"
|
||||
@click.stop="pauseVoice"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
computed,
|
||||
ref,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { onUnload } from '@dcloudio/uni-app';
|
||||
import MarkdownPreview from '@/components/markdown-preview/markdown-preview.vue'
|
||||
import common from '@/common/common'
|
||||
|
||||
const emit = defineEmits(['handleEvents', 'changePlay'])
|
||||
const props = defineProps({
|
||||
dataInfo: {
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
},
|
||||
isLoading: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
isAnswering: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
isLast: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.dataInfo,
|
||||
() => {}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.isLoading,
|
||||
() => {}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const isPlaying = ref(false)
|
||||
const mdText = computed(() => {
|
||||
let _text = (props.dataInfo?.talkingText || '').replace(/\\n/g, `\n`);
|
||||
return _text
|
||||
})
|
||||
const fileList = computed(() => props.dataInfo?.talkingFiles || [])
|
||||
const crsList = computed(() => props.dataInfo?.talkingCrsList || [])
|
||||
const activeNames = ref([1, 2])
|
||||
|
||||
const changeActive = val => {
|
||||
if (activeNames.value.indexOf(val) >= 0) {
|
||||
activeNames.value = activeNames.value.filter(t => t !== val)
|
||||
} else {
|
||||
activeNames.value.push(val)
|
||||
}
|
||||
}
|
||||
const reAnswer = () => {
|
||||
emit('handleEvents', 'reAnswer')
|
||||
}
|
||||
const stopAnswer = () => {
|
||||
emit('handleEvents', 'stop')
|
||||
}
|
||||
const zanAnswer = () => {
|
||||
emit('handleEvents', 'great')
|
||||
}
|
||||
const feedbackAnswer = () => {
|
||||
emit('handleEvents', 'feedback')
|
||||
}
|
||||
const previewFile = item => {
|
||||
emit('handleEvents', 'preview', item)
|
||||
}
|
||||
const previewCrs = item => {
|
||||
common.navigateTo('/pages/courseDetail/index?crsId=' + item.crsId)
|
||||
}
|
||||
const playVoice = (readType = 'pgth') => {
|
||||
let _content = mdText.value;
|
||||
if (!_content) {
|
||||
common.msg('没有可以播放的文字信息！');
|
||||
return;
|
||||
}
|
||||
isPlaying.value = true
|
||||
voiceLoading.value = true;
|
||||
setTimeout(() => {
|
||||
downloadFile(props.dataInfo?.talkingVoiceId)
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
common.msg(res.data.message);
|
||||
return;
|
||||
}
|
||||
voiceLoading.value = false;
|
||||
itemVoice.value = res.tempFilePath;
|
||||
talkVoiceObj.value.src = res.tempFilePath;
|
||||
talkVoiceObj.value.play();
|
||||
})
|
||||
.catch((err) => {
|
||||
voiceLoading.value = false;
|
||||
});
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const pauseVoice = () => {
|
||||
if (!talkVoiceObj.value) return
|
||||
talkVoiceObj.value.pause()
|
||||
isPlaying.value = false
|
||||
emit('changePlay', '')
|
||||
}
|
||||
onMounted(() => {
|
||||
initVoice()
|
||||
})
|
||||
onUnload(() => {
|
||||
pauseVoice()
|
||||
})
|
||||
watch(() => props.dataInfo.talkingVoice, (val) => {
|
||||
if (val) {
|
||||
initVoice()
|
||||
}
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.answer-content {
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
padding-bottom: 10rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 80rpx;
|
||||
|
||||
.talking-cont {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.btns-cont {
|
||||
overflow: hidden;
|
||||
border-top: 3rpx solid #eee;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.replay-btn {
|
||||
float: left;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
float: left;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.next-learn-btn {
|
||||
float: left;
|
||||
padding: 0 60rpx 0 20rpx;
|
||||
height: 62rpx;
|
||||
line-height: 62rpx;
|
||||
font-size: 30rpx;
|
||||
background-color: #06f;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 16rpx;
|
||||
margin-right: 16rpx;
|
||||
position: relative;
|
||||
|
||||
&.replay-study-btn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.restart {
|
||||
background-color: #eaf2ff;
|
||||
color: #06f;
|
||||
}
|
||||
|
||||
.icon-iamge {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
margin-top: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.replay-learn-btn {
|
||||
float: left;
|
||||
padding: 0 60rpx 0 20rpx;
|
||||
height: 62rpx;
|
||||
line-height: 62rpx;
|
||||
font-size: 30rpx;
|
||||
color: #06f;
|
||||
background-color: #eaf2ff;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 16rpx;
|
||||
margin-right: 16rpx;
|
||||
position: relative;
|
||||
|
||||
.icon-iamge {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
margin-top: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
float: right;
|
||||
padding: 0 60rpx 0 20rpx;
|
||||
height: 62rpx;
|
||||
line-height: 62rpx;
|
||||
font-size: 30rpx;
|
||||
background-color: #06f;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 16rpx;
|
||||
position: relative;
|
||||
|
||||
.icon-iamge {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
margin-top: -12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-cont-desc {
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.link-cont {
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.link-info {
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.info-text {
|
||||
float: left;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: all 0.3s ease-in-out;
|
||||
content: '';
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 12rpx;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-right: 4rpx solid #333;
|
||||
border-bottom: 4rpx solid #333;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.link-info {
|
||||
&::after {
|
||||
top: 18rpx;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.link-items {
|
||||
max-height: 600rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.link-items {
|
||||
max-height: 0rpx;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
.link-item {
|
||||
line-height: 48rpx;
|
||||
color: #06f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<uni-popup ref="feedbackPopupRef" class="popup">
|
||||
<view class="feedback_popup_div" :style="{marginBottom:feedback_popup_bottom}">
|
||||
<view class="title_div">
|
||||
<view class="text">
|
||||
反馈
|
||||
</view>
|
||||
<view class="popup_back_div" @click="openFeedback(false)">
|
||||
<image :src="optionErrorIcon('#000000')" class="img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="feedback_item_div">
|
||||
<view class="feedback_item"
|
||||
:class="{'feedback_item_clidked':feedbackInfo.type.includes(feedback_type_item.value)}"
|
||||
@click="feedback_item_click(feedback_type_item.value)"
|
||||
v-for="feedback_type_item in feedbackTypeList">{{feedback_type_item.label}}</view>
|
||||
</view>
|
||||
<view class="feedback_text_area_div">
|
||||
<uv-textarea height="124" count :maxlength="100" placeholder="请输入反馈内容..." :adjustPosition="false"
|
||||
v-model="feedbackInfo.text"></uv-textarea>
|
||||
</view>
|
||||
<view class="feedback_button">
|
||||
<uv-button class="button" type="primary" :throttleTime="100" text="提交" color="#0066FF"
|
||||
custom-style="color:#FFFFFF;borderRadius:16rpx;height:92rpx;"
|
||||
@click="submit_feedback_fun()"></uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
onMounted,
|
||||
nextTick
|
||||
} from 'vue';
|
||||
import {
|
||||
insertTraAskFeedback
|
||||
} from "@/api/dialog.js"
|
||||
import {
|
||||
optionErrorIcon
|
||||
} from '@/common/imgSvg'
|
||||
import common from '../../../common/common';
|
||||
|
||||
const emit = defineEmits(['feedbackAnswer'])
|
||||
const feedback_popup_bottom = ref('0px') // 反馈框下距离
|
||||
const feedbackPopupRef = ref(null)
|
||||
// FM("01", "虚假信息"),
|
||||
// AE("02", "回答不准确"),
|
||||
// NH("03", "没有帮助"),
|
||||
// OTHER("04", "其他"),
|
||||
const feedbackTypeList = reactive([{
|
||||
value: "01",
|
||||
label: "场景问题",
|
||||
}, {
|
||||
value: "02",
|
||||
label: "功能问题",
|
||||
}, {
|
||||
value: "03",
|
||||
label: "没有帮助",
|
||||
}, {
|
||||
value: "04",
|
||||
label: "其他",
|
||||
}])
|
||||
const feedbackInfo = ref({
|
||||
type: [], // 反馈类型
|
||||
text: '', // 反馈内容
|
||||
traId: '', // ID
|
||||
})
|
||||
const feedback_item_click = (value) => {
|
||||
// 单选
|
||||
// feedbackInfo.value.type = [value]
|
||||
// 多选
|
||||
if (feedbackInfo.value.type.includes(value)) {
|
||||
feedbackInfo.value.type = feedbackInfo.value.type.filter(item => item !== value); // 如果已存在，则从数组中移除
|
||||
} else {
|
||||
feedbackInfo.value.type.push(value); // 如果不存在，则添加到数组中
|
||||
}
|
||||
}
|
||||
const answerData = ref({})
|
||||
// 反馈提交
|
||||
const submit_feedback_fun = () => {
|
||||
if(!feedbackInfo.value.text){
|
||||
common.msg('反馈内容不能为空！')
|
||||
return
|
||||
}
|
||||
// todo 待接口
|
||||
const params = JSON.parse(JSON.stringify({
|
||||
askId: answerData.value.seqNo,
|
||||
fbkTyp: feedbackInfo.value.type.join(','),
|
||||
reqBatch: answerData.value.reqBatch,
|
||||
fbkContent: feedbackInfo.value.text
|
||||
}))
|
||||
insertTraAskFeedback(params).then(res=>{
|
||||
common.msg('反馈提交成功！')
|
||||
feedbackInfo.value = {
|
||||
type: [], // 反馈类型
|
||||
text: '', // 反馈内容
|
||||
traId: '', // ID
|
||||
}
|
||||
close()
|
||||
emit('feedbackAnswer', params)
|
||||
})
|
||||
}
|
||||
const openFeedback = (status) => {
|
||||
if (status) {
|
||||
feedbackPopupRef.value.open('bottom')
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
// 安全区域底部到屏幕底部的高度（即底部安全区域高度）
|
||||
const safeAreaBottomHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom;
|
||||
//#ifdef APP-PLUS
|
||||
nextTick(() => {
|
||||
uni.onKeyboardHeightChange(res => {
|
||||
let keyboardHeight = res.height;
|
||||
// 仅在iOS端补偿安全区域高度
|
||||
if (systemInfo.platform === 'ios') {
|
||||
keyboardHeight = Math.max(0, keyboardHeight - safeAreaBottomHeight); // 避免负数
|
||||
}
|
||||
feedback_popup_bottom.value = `${keyboardHeight}px`;
|
||||
});
|
||||
})
|
||||
// #endif
|
||||
} else {
|
||||
feedbackPopupRef.value.close()
|
||||
}
|
||||
}
|
||||
const open = (data) => {
|
||||
answerData.value = JSON.parse(JSON.stringify(data))
|
||||
openFeedback(true)
|
||||
}
|
||||
const close = () => {
|
||||
openFeedback(null)
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.feedback_popup_div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10rpx 34rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 16rpx 16rpx 0px 0px;
|
||||
position: relative;
|
||||
|
||||
.title_div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 600;
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
border-bottom: 2rpx solid #EFEFEF;
|
||||
}
|
||||
|
||||
.popup_back_div {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 99;
|
||||
|
||||
.img {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.feedback_item.feedback_item_clidked {
|
||||
border: 2rpx solid #0066FF !important;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.feedback_item_div {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 30rpx 0;
|
||||
|
||||
.feedback_item {
|
||||
float: left;
|
||||
width: calc(50% - 20rpx);
|
||||
border: 2rpx solid #F0F0F0;
|
||||
background-color: #F0F0F0;
|
||||
border-radius: 16rpx;
|
||||
padding: 26rpx 36rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
&:nth-child(2n){
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feedback_text_area_div {
|
||||
width: 100%;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.feedback_button {
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<view class="talking-info" v-if="dataInfo.intrctWay === '02'">
|
||||
<view :class="['talking-gif', !voiceLoading&&(props.activeVoiceId === dataInfo.id) ? 'is-play' : '']">
|
||||
<CommonLoading color="#fff" v-show="voiceLoading"/>
|
||||
</view>
|
||||
<view class="right-time">{{voiceTime}}</view>
|
||||
<view class="talking-cont">
|
||||
<text :class="['talking-text translate-text loading']" v-show="!translateLoading">
|
||||
{{ showContent }}
|
||||
</text>
|
||||
<view class="talking-text translate-text" v-if="translateLoading">
|
||||
<CommonLoading color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns-cont">
|
||||
<view class="play-btn">
|
||||
<image class="icon"
|
||||
v-show="!(!voiceLoading&&(props.activeVoiceId === dataInfo.id))"
|
||||
@click="playVoice"
|
||||
src="@/static/images/course/play-blue.png"
|
||||
style="width: 100%;height: 100%;"
|
||||
></image>
|
||||
<image class="icon"
|
||||
v-show="!voiceLoading&&(props.activeVoiceId === dataInfo.id)"
|
||||
@click.stop="pauseVoice"
|
||||
src="@/static/images/course/stop-blue.png"
|
||||
style="width: 100%;height: 100%;"
|
||||
></image>
|
||||
<!-- <view class="icon text-btn" v-if="type === 1" @click.stop="translateVoice(dataInfo)">文</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="talking-info talking-info-text" v-else-if="dataInfo.intrctWay === '01'">
|
||||
<view class="talking-cont">
|
||||
<text :class="['talking-text translate-text loading']">
|
||||
{{ showContent }}
|
||||
</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="talking-info talking-info-loading" v-else>
|
||||
<view :class="['talking-gif']">
|
||||
<CommonLoading color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, unref, ref, toRefs, watch, onMounted } from "vue"
|
||||
import { onUnload } from '@dcloudio/uni-app';
|
||||
const props = defineProps({
|
||||
dataInfo: {
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
},
|
||||
activeVoiceId:{
|
||||
default:'',
|
||||
type: String
|
||||
},
|
||||
})
|
||||
const { activeVoiceId, dataInfo } = toRefs(props)
|
||||
const emit = defineEmits(['changePlay'])
|
||||
watch(() => props.dataInfo, () => {},{deep: true,immediate: true})
|
||||
// 声音播放初始化
|
||||
const talkVoiceObj = ref(null)
|
||||
|
||||
const isPlaying = ref(false)
|
||||
const voiceLoading = ref(false)
|
||||
const translateLoading = ref(false)
|
||||
|
||||
const voiceTime = ref('')
|
||||
const itemVoice = ref('')
|
||||
const showContent = computed(()=>{
|
||||
return dataInfo.value.talkingText || ''
|
||||
})
|
||||
onMounted(()=>{
|
||||
initVoice()
|
||||
})
|
||||
onUnload(()=>{
|
||||
pauseVoice()
|
||||
})
|
||||
watch(() => props.dataInfo.talkingVoice,(val)=>{
|
||||
if(val){
|
||||
initVoice()
|
||||
}
|
||||
},{
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
const pauseVoice = () => {
|
||||
if(!talkVoiceObj.value) return
|
||||
talkVoiceObj.value.pause()
|
||||
isPlaying.value = false
|
||||
emit('changePlay', '')
|
||||
}
|
||||
const playVoice = () =>{
|
||||
emit('changePlay', unref(dataInfo)?.id)
|
||||
if(talkVoiceObj.value && talkVoiceObj.value.src) {
|
||||
talkVoiceObj.value.play()
|
||||
return
|
||||
}else{
|
||||
talkVoiceObj.value.src = ''
|
||||
if(unref(dataInfo).talkingVoice){
|
||||
setTimeout(()=>{
|
||||
talkVoiceObj.value.src = unref(dataInfo).talkingVoice
|
||||
talkVoiceObj.value.play()
|
||||
isPlaying.value = true
|
||||
},100)
|
||||
}
|
||||
}
|
||||
}
|
||||
const initVoice = () => {
|
||||
talkVoiceObj.value = uni.createInnerAudioContext()
|
||||
talkVoiceObj.value.onEnded(()=>{
|
||||
emit('changePlay', '')
|
||||
talkVoiceObj.value.src = ''
|
||||
})
|
||||
talkVoiceObj.value.onError(()=>{
|
||||
talkVoiceObj.value.src = ''
|
||||
})
|
||||
if(unref(dataInfo).intrctWay === '02'){
|
||||
itemVoice.value = unref(dataInfo).talkingVoice
|
||||
talkVoiceObj.value.src = itemVoice.value
|
||||
setTimeout(()=>{
|
||||
setVoiceTime(0)
|
||||
},100)
|
||||
}
|
||||
}
|
||||
const setVoiceTime = (sum) => {
|
||||
sum += 1
|
||||
if(Math.ceil(talkVoiceObj.value.duration)>0){
|
||||
voiceTime.value = (Math.ceil(talkVoiceObj.value.duration) || 1 ) + 's'
|
||||
}else{
|
||||
if(sum === 20) {
|
||||
voiceTime.value = 0 + 's'
|
||||
return
|
||||
}
|
||||
setTimeout(()=>{
|
||||
setVoiceTime(sum)
|
||||
},200)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.talking-info{
|
||||
padding: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
background-color: #06f;
|
||||
padding-bottom: 30rpx;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
float: right;
|
||||
.talking-gif{
|
||||
width: 200rpx;
|
||||
height: 38rpx;
|
||||
background: url(@/static/images/course/voice-gray.png) no-repeat;
|
||||
background-size: contain;
|
||||
padding-left: 168rpx;
|
||||
&.is-play{
|
||||
background: url(@/static/images/course/voice-white.gif) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
.right-time{
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
height: 38rpx;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
&.talking-info-loading{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
&.talking-info-text{
|
||||
padding-bottom: 20rpx;
|
||||
width: auto;
|
||||
float: right;
|
||||
.talking-cont{
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.talking-cont{
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
.talking-text{
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
margin-bottom: 20rpx;
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
overflow: hidden;
|
||||
&.translate-text{
|
||||
min-height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns-cont{
|
||||
overflow: hidden;
|
||||
border-top: 3rpx solid #eee;
|
||||
.replay-btn{
|
||||
float: left;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
.play-btn{
|
||||
float: left;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
.text-btn{
|
||||
float: left;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
overflow: hidden;
|
||||
line-height: 46rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 25rpx;
|
||||
background-color: #67A4ff;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.text-right-btn{
|
||||
float: right;
|
||||
padding: 0 10rpx;
|
||||
height: 46rpx;
|
||||
overflow: hidden;
|
||||
line-height: 46rpx;
|
||||
text-align: center;
|
||||
margin-left: 16rpx;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
.next-btn{
|
||||
float: right;
|
||||
padding: 0 60rpx 0 20rpx;
|
||||
height: 62rpx;
|
||||
line-height: 62rpx;
|
||||
font-size: 30rpx;
|
||||
background-color: #06f;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 16rpx;
|
||||
position: relative;
|
||||
.icon-iamge{
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
margin-top: -12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view class="talking-item">
|
||||
<!-- 头像信息 -->
|
||||
<view class="user-info">
|
||||
<view class="avatar-box">
|
||||
<ImagePreview class="img-box" :imgId="roleInfo?.ossAddr"></ImagePreview>
|
||||
</view>
|
||||
<view class="ai-name">
|
||||
{{ roleInfo?.chaName }}
|
||||
<!-- <view class="ai-name-desc">{{ roleInfo?.teacherDesc }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<questionVue v-if="talkingType === 'question'" @changePlay="changePlay" :dataInfo="talkingInfo" :isLast="isLast"
|
||||
:activeVoiceId="activeVoiceId"></questionVue>
|
||||
<answerVue v-else-if="talkingType === 'answer'" @changePlay="changePlay" :dataInfo="props.talkingInfo" :isLast="isLast"
|
||||
:isLoading="!!props.talkingInfo.isLoading" :isAnswering="props.isAnswering" @handleEvents="handleEvents">
|
||||
</answerVue>
|
||||
<view v-else></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
toRefs,
|
||||
watch
|
||||
} from 'vue'
|
||||
import questionVue from './question.vue';
|
||||
import answerVue from './answer.vue';
|
||||
|
||||
const emit = defineEmits(['handleEvents'])
|
||||
const props = defineProps({
|
||||
talkingType: {
|
||||
default: 'question',
|
||||
type: String
|
||||
},
|
||||
talkingInfo: {
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
},
|
||||
roleInfo:{
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
},
|
||||
activeVoiceId: {
|
||||
default: '',
|
||||
type: String
|
||||
},
|
||||
isAnswering: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
isLast: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
})
|
||||
watch(() => props.activeVoiceId, () => {}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
watch(() => props.talkingInfo, () => {}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
const {
|
||||
talkingType
|
||||
} = toRefs(props)
|
||||
const handleEvents = (type, info = {}) => {
|
||||
emit('handleEvents', {
|
||||
type,
|
||||
data: props.talkingInfo,
|
||||
id: "",
|
||||
info
|
||||
})
|
||||
}
|
||||
const changePlay = (id) => {
|
||||
emit('handleEvents', {
|
||||
type: 'changePlay',
|
||||
data: props.talkingInfo,
|
||||
id,
|
||||
info: {}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.talking-item {
|
||||
overflow: hidden;
|
||||
margin-top: 0rpx;
|
||||
|
||||
&+.talking-item {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.user-info {
|
||||
overflow: hidden;
|
||||
|
||||
.avatar-box {
|
||||
float: left;
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border: 3rpx solid #fff;
|
||||
background-color: #f1f1f1;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.img-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-name {
|
||||
float: left;
|
||||
color: #666;
|
||||
font-size: 25rpx;
|
||||
line-height: 35rpx;
|
||||
|
||||
.ai-name-desc {
|
||||
color: #999;
|
||||
margin-left: 16rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -70,7 +70,8 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-bottom">
|
||||
<view class="body-bottom-btn" @click="toChooseRole">AI陪练</view>
|
||||
<view class="body-bottom-btn" @click="toChooseRole('test')">去练习</view>
|
||||
<view class="body-bottom-btn" @click="toChooseRole('exam')">去考试</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -126,7 +127,6 @@
|
||||
})
|
||||
}
|
||||
const previewFile = (info) => {
|
||||
|
||||
if (getPhoneEnvBool('AND')) {
|
||||
common.navigateTo('/pages/index/preview?fileId=' + info.docId);
|
||||
} else {
|
||||
@@ -182,8 +182,8 @@
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const toChooseRole = () => {
|
||||
common.navigateTo('/pages/sparring/chooseRole?traId=' + traId.value)
|
||||
const toChooseRole = (type) => {
|
||||
common.navigateTo('/pages/sparring/chooseRole?traId=' + traId.value + '&type=' + type)
|
||||
}
|
||||
onLoad((params) => {
|
||||
traId.value = params.traId;
|
||||
@@ -352,16 +352,22 @@
|
||||
width: 100vw;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
|
||||
&-btn {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
background-color: #06f;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #ddeafc;
|
||||
color: #06f;
|
||||
font-size: 29rpx;
|
||||
border-radius: 23rpx;
|
||||
&:last-child{
|
||||
margin-left: 36rpx;
|
||||
background: #06f;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<view class="result-cont">
|
||||
<view class="top-box">
|
||||
<view class="top-title">
|
||||
<view class="back-icon" @click="common.navigateBack()"></view>
|
||||
{{ '陪练报告' }}
|
||||
<view class="feedback-icon" @click="feedbackNow"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-content">
|
||||
<view class="body-top">
|
||||
<view class="body-top-title">
|
||||
{{'陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称'}}
|
||||
</view>
|
||||
<view class="body-top-time">
|
||||
陪练时长：{{'12分 15秒'}}
|
||||
</view>
|
||||
<view class="body-top-tip">陪练详情</view>
|
||||
<view class="body-top-collepse-title">
|
||||
<view :class="['collepse-btn', showAllTalk?'show-all':'']" @click="showAllTalk = !showAllTalk"></view>
|
||||
<view class="collepse-tab">
|
||||
|
||||
<uv-tabs :list="tabList" @click="changeTab" :scrollable="false" active-style="font-weight:bold; color:#000;"
|
||||
class="font_pf my_tabs" :inactive-style="{ color: '#333333', fontSize: '28rpx', fontWeight: '500' }"
|
||||
:activeStyle="{ color: '#333333', fontSize: '28rpx', fontWeight: '600' }"></uv-tabs>
|
||||
</view>
|
||||
<view class="talk-item"></view>
|
||||
</view>
|
||||
<view :class="['body-top-collepse-cont', showAllTalk?'show-all':'']">
|
||||
<view class="talk-item"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-bottom">
|
||||
<view class="body-bottom-title">维度评价总览</view>
|
||||
<view class="body-bottom-item">
|
||||
<view class="item-title">话术完整性： {{ 88 }}
|
||||
<image class="item-title-icon" src="@/static/images/sparring/info-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-cont">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||||
</view>
|
||||
<view class="body-bottom-item">
|
||||
<view class="item-title">话术完整性： {{ 88 }}
|
||||
<image class="item-title-icon" src="@/static/images/sparring/info-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-cont">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||||
</view>
|
||||
<view class="body-bottom-item">
|
||||
<view class="item-title">话术完整性： {{ 88 }}
|
||||
<image class="item-title-icon" src="@/static/images/sparring/info-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-cont">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||||
</view>
|
||||
<view class="body-bottom-item">
|
||||
<view class="item-title">话术完整性： {{ 88 }}
|
||||
<image class="item-title-icon" src="@/static/images/sparring/info-icon.png"></image>
|
||||
</view>
|
||||
<view class="item-cont">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||||
</view>
|
||||
<view :class="['body-bottom-static', 'pass','fialed']">
|
||||
<view class="static-tip">得分</view>
|
||||
<view class="static-score">{{ 97 }}</view>
|
||||
<view class="static-desc">革命尚未成功，同志仍需努力！</view>
|
||||
<view class="static-charts">
|
||||
<!-- <ChartThree v-if="length === 3" fromType="tra" :dataList="evalDimens" />
|
||||
<ChartFour v-if="length === 4" fromType="tra" :dataList="evalDimens" />
|
||||
<ChartFive v-if="length === 5" fromType="tra" :dataList="evalDimens" />-->
|
||||
<ChartSix fromType="tra" />
|
||||
<!-- <ChartSeven v-if="length === 7" fromType="tra" :dataList="evalDimens"/> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<Feedback ref="feedbackRef" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onLoad,
|
||||
onUnload
|
||||
} from '@dcloudio/uni-app';
|
||||
import Feedback from './components/feedback.vue';
|
||||
import ChartFour from '@/pages/course/components/chartFour.vue';
|
||||
import ChartThree from '@/pages/course/components/chartThree.vue';
|
||||
import ChartFive from '@/pages/course/components/chartFive.vue';
|
||||
import ChartSix from '@/pages/course/components/chartSix.vue';
|
||||
import ChartSeven from '@/pages/course/components/chartSeven.vue';
|
||||
const traId = ref('')
|
||||
const feedbackRef = ref()
|
||||
const roleInfo = ref({})
|
||||
const showAllTalk = ref(false)
|
||||
const length = ref(6)
|
||||
const tabList = ref([
|
||||
{
|
||||
name: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '优秀',
|
||||
value: '01'
|
||||
},
|
||||
{
|
||||
name: '欠佳',
|
||||
value: '02'
|
||||
}
|
||||
])
|
||||
|
||||
const evalDimens = [{
|
||||
gradeDimensName: '维度1',
|
||||
anlyGrade: 60
|
||||
}, {
|
||||
gradeDimensName: '维度2',
|
||||
anlyGrade: 80
|
||||
}, {
|
||||
gradeDimensName: '维度3',
|
||||
anlyGrade: 30
|
||||
}]
|
||||
const feedbackNow = () => {
|
||||
feedbackRef.value.open({});
|
||||
}
|
||||
const changeTab = (info) => {
|
||||
console.log(info)
|
||||
}
|
||||
onLoad((params) => {
|
||||
traId.value = params.traId;
|
||||
});
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.result-cont {
|
||||
position: absolute;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #f2f6fd;
|
||||
z-index: 1;
|
||||
padding: calc(var(--status-bar-height) + 90rpx) 0 0rpx;
|
||||
// background-image: url(@/static/images/sparring/bg.png);
|
||||
// background-size: cover;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
height: 90rpx;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: var(--status-bar-height);
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
|
||||
.top-title {
|
||||
height: 90rpx;
|
||||
// background-color: red;
|
||||
text-align: center;
|
||||
font-size: 33rpx;
|
||||
padding: 10rpx 100rpx 0;
|
||||
line-height: 46rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// margin-bottom: 23rpx;
|
||||
.arrow-icon {
|
||||
position: absolute;
|
||||
left: 36rpx;
|
||||
top: 20rpx;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.feedback-icon {
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
right: 50rpx;
|
||||
top: 33rpx;
|
||||
transform: translateY(-50%);
|
||||
background: url(@/static/images/sparring/feedback.png) no-repeat;
|
||||
background-size: 28rpx 28rpx;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
left: 50rpx;
|
||||
top: 33rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.back-icon::before,
|
||||
.back-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon::after {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
border-top: 4rpx solid #000;
|
||||
border-left: 4rpx solid #000;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-content {
|
||||
height: 100%;
|
||||
padding: 10rpx 24rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
.body-top {
|
||||
background-color: #fff;
|
||||
padding: 16rpx 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.body-top-title {
|
||||
font-size: 38rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.body-top-time {
|
||||
padding: 30rpx 0 28rpx 40rpx;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
line-height: 26rpx;
|
||||
font-size: 25rpx;
|
||||
color: #666;
|
||||
background-image: url(@/static/images/sparring/time-icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: 28rpx 30rpx;
|
||||
}
|
||||
|
||||
.body-top-tip {
|
||||
font-size: 32rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
.body-top-collepse-title {
|
||||
position: relative;
|
||||
.collepse-tab{
|
||||
position: absolute;
|
||||
width: 360rpx;
|
||||
right: 120rpx;
|
||||
top: 4rpx;
|
||||
}
|
||||
.collepse-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20rpx;
|
||||
width: 108rpx;
|
||||
height: 46rpx;
|
||||
border: 2rpx solid #d4dce8;
|
||||
border-radius: 23rpx;
|
||||
|
||||
&.show-all {
|
||||
&::after {
|
||||
transform: translate(-50%, calc(-50% - 3rpx)) rotate(225deg);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-top: 2rpx solid #06f;
|
||||
border-left: 2rpx solid #06f;
|
||||
transform: translate(-50%, -50%) rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.body-top-collepse-cont {
|
||||
max-height: 0rpx;
|
||||
transition: all 0.5s ease;
|
||||
overflow: hidden;
|
||||
|
||||
&.show-all {
|
||||
max-height: 5000rpx;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-bottom {
|
||||
padding: 16rpx 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
&-title {
|
||||
font-size: 32rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 23rpx 0;
|
||||
|
||||
.item-title {
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-weight: 500;
|
||||
.item-title-icon{
|
||||
width: 24rpx;
|
||||
height: 26rpx;
|
||||
position: relative;
|
||||
top: 2rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-cont {
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
&-static{
|
||||
border-top: 2px solid #eee;
|
||||
padding-top: 38rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 270rpx 190rpx;
|
||||
background-position: right 40rpx;
|
||||
|
||||
&.fialed{
|
||||
background-image: url(@/static/images/sparring/def-res.png);
|
||||
}
|
||||
&.pass{
|
||||
background-image: url(@/static/images/sparring/pass-res.png);
|
||||
}
|
||||
.static-tip{
|
||||
line-height: 44rpx;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.static-score{
|
||||
font-size: 66rpx;
|
||||
color: #06f;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
marign-bottom: 20rpx;
|
||||
}
|
||||
.static-desc{
|
||||
color: #999;
|
||||
font-size: 25rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.talk-item {
|
||||
height: 200rpx;
|
||||
overflow: hidden;
|
||||
background-color: #0f0;
|
||||
}
|
||||
.my_tabs {
|
||||
// 解决这个圆角的图片，开穿透
|
||||
:deep(.uv-tabs__wrapper__nav__line) {
|
||||
background: linear-gradient(90deg, #06f 0%, rgb(0,159,255) 50%, rgb(255,255,255) 100%) !important;
|
||||
}
|
||||
|
||||
:deep(.uv-tabs__wrapper__nav__item) {
|
||||
padding: 0 20rpx !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<!-- 通话 -->
|
||||
<view>通话</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<view class="sparring-detail max_page">
|
||||
<view class="sparring-detail-loading" v-show="showLoading">
|
||||
<view class="loading-img">
|
||||
</view>
|
||||
</view>
|
||||
<view class="sparring-detail-body">
|
||||
<view class="top-box">
|
||||
<view class="top-title">
|
||||
@@ -8,7 +12,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-content">
|
||||
<view :class="['body-content-role', showRoleInfo?'show-info':'']">
|
||||
<view :class="['body-content-role', showRoleInfo?'':'hide-info']">
|
||||
<view :class="['role-title']">
|
||||
<ImagePreview class="role-title-avatar" :src="'/traoss/tras3/show/S3F0250181220722025110316545500000431780'" :isCache="true">
|
||||
</ImagePreview>
|
||||
@@ -99,6 +103,7 @@
|
||||
const roleList = ref([])
|
||||
const currentIndex = ref(0)
|
||||
const showRoleInfo = ref(false)
|
||||
const showLoading = ref(true)
|
||||
const gender = ref('m')
|
||||
const activeRole = computed(()=>{
|
||||
if(roleList.value.length>0){
|
||||
@@ -113,6 +118,9 @@
|
||||
traId: traId.value
|
||||
}).then(res => {
|
||||
roleList.value = res.body || []
|
||||
setTimeout(()=> {
|
||||
showLoading.value = false
|
||||
}, Math.random() * 1000 + 500)
|
||||
})
|
||||
}
|
||||
const onSwiperChange = (data) => {
|
||||
@@ -140,6 +148,28 @@
|
||||
background-image: url(@/static/images/sparring/bg.png);
|
||||
background-size: cover;
|
||||
// background-color: #f2f6fd;
|
||||
.sparring-detail-loading{
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-image: url(@/static/images/sparring/bg.png);
|
||||
.loading-img{
|
||||
position: absolute;
|
||||
width: 380rpx;
|
||||
height: 590rpx;
|
||||
top: 40%;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
left: 50%;
|
||||
padding-top: 540rpx;
|
||||
line-height: 50rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background-image: url(@/static/images/sparring/waiting.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.sparring-detail-body {
|
||||
position: absolute;
|
||||
overflow-x: hidden;
|
||||
@@ -222,7 +252,7 @@
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30rpx;
|
||||
&.show-info{
|
||||
&.hide-info{
|
||||
.arrow-r-icon::after {
|
||||
transform: rotate(225deg) !important;
|
||||
}
|
||||
|
||||
@@ -89,6 +89,33 @@
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/sparring/talk",
|
||||
"style": {
|
||||
"navigationBarTitleText": "AI陪练通话",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/sparring/result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "AI陪练报告",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/analytics/study",
|
||||
"style": {
|
||||
"navigationBarTitleText": "学习分析",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 369 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 563 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 796 B |
Binary file not shown.
|
After Width: | Height: | Size: 755 B |
Binary file not shown.
|
After Width: | Height: | Size: 976 B |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 822 B |
@@ -0,0 +1,142 @@
|
||||
## 2.2.25（2023-10-18）
|
||||
- 修复 PC端初次修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
|
||||
## 2.2.24（2023-06-02）
|
||||
- 修复 部分情况修改时间，开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
|
||||
- 优化 当前月可以选择上月、下月的日期的Bug
|
||||
## 2.2.23（2023-05-02）
|
||||
- 修复 部分情况修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
|
||||
- 修复 部分平台及设备第一次点击无法显示弹框的Bug
|
||||
- 修复 ios 日期格式未补零显示及使用异常的Bug [详情](https://ask.dcloud.net.cn/question/162979)
|
||||
## 2.2.22（2023-03-30）
|
||||
- 修复 日历 picker 修改年月后，自动选中当月1日的Bug [详情](https://ask.dcloud.net.cn/question/165937)
|
||||
- 修复 小程序端 低版本 ios NaN的Bug [详情](https://ask.dcloud.net.cn/question/162979)
|
||||
## 2.2.21（2023-02-20）
|
||||
- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
|
||||
## 2.2.20（2023-02-17）
|
||||
- 优化 值为空依然选中当天问题
|
||||
- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
|
||||
- 优化 非范围选择未选择日期时间，点击确认按钮选中当前日期时间
|
||||
- 优化 字节小程序日期时间范围选择，底部日期换行的Bug
|
||||
## 2.2.19（2023-02-09）
|
||||
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
|
||||
## 2.2.18（2023-02-08）
|
||||
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
|
||||
- 优化 PC端输入日期格式错误时返回当前日期时间
|
||||
- 优化 PC端输入日期时间超出 start、end 限制的Bug
|
||||
- 优化 移动端日期时间范围用法时间展示不完整问题
|
||||
## 2.2.17（2023-02-04）
|
||||
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
|
||||
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
|
||||
## 2.2.16（2023-02-02）
|
||||
- 修复 字节小程序报错的Bug
|
||||
## 2.2.15（2023-02-02）
|
||||
- 修复 某些情况切换月份错误的Bug
|
||||
## 2.2.14（2023-01-30）
|
||||
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
|
||||
## 2.2.13（2023-01-10）
|
||||
- 修复 多次加载组件造成内存占用的Bug
|
||||
## 2.2.12（2022-12-01）
|
||||
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
|
||||
## 2.2.11（2022-09-19）
|
||||
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
|
||||
## 2.2.10（2022-09-19）
|
||||
- 修复 反向选择日期范围，日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
|
||||
## 2.2.9（2022-09-16）
|
||||
- 可以使用 uni-scss 控制主题色
|
||||
## 2.2.8（2022-09-08）
|
||||
- 修复 close事件无效的Bug
|
||||
## 2.2.7（2022-09-05）
|
||||
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
|
||||
## 2.2.6（2022-06-30）
|
||||
- 优化 组件样式，调整了组件图标大小、高度、颜色等，与uni-ui风格保持一致
|
||||
## 2.2.5（2022-06-24）
|
||||
- 修复 日历顶部年月及底部确认未国际化的Bug
|
||||
## 2.2.4（2022-03-31）
|
||||
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
|
||||
## 2.2.3（2022-03-28）
|
||||
- 修复 Vue3 下动态赋值未响应的Bug
|
||||
## 2.2.2（2021-12-10）
|
||||
- 修复 clear-icon 属性在小程序平台不生效的Bug
|
||||
## 2.2.1（2021-12-10）
|
||||
- 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的Bug
|
||||
## 2.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||
## 2.1.5（2021-11-09）
|
||||
- 新增 提供组件设计资源，组件样式调整
|
||||
## 2.1.4（2021-09-10）
|
||||
- 修复 hide-second 在移动端的Bug
|
||||
- 修复 单选赋默认值时，赋值日期未高亮的Bug
|
||||
- 修复 赋默认值时，移动端未正确显示时间的Bug
|
||||
## 2.1.3（2021-09-09）
|
||||
- 新增 hide-second 属性，支持只使用时分，隐藏秒
|
||||
## 2.1.2（2021-09-03）
|
||||
- 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
|
||||
- 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
|
||||
- 优化 调整字号大小，美化日历界面
|
||||
- 修复 因国际化导致的 placeholder 失效的Bug
|
||||
## 2.1.1（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
- 优化 范围选择器在 pc 端过宽的问题
|
||||
## 2.1.0（2021-08-09）
|
||||
- 新增 适配 vue3
|
||||
## 2.0.19（2021-08-09）
|
||||
- 新增 支持作为 uni-forms 子组件相关功能
|
||||
- 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的Bug
|
||||
## 2.0.18（2021-08-05）
|
||||
- 修复 type 属性动态赋值无效的Bug
|
||||
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
|
||||
- 修复 组件未赋值时范围选左、右日历相同的Bug
|
||||
## 2.0.17（2021-08-04）
|
||||
- 修复 范围选未正确显示当前值的Bug
|
||||
- 修复 h5 平台（移动端）报错 'cale' of undefined 的Bug
|
||||
## 2.0.16（2021-07-21）
|
||||
- 新增 return-type 属性支持返回 date 日期对象
|
||||
## 2.0.15（2021-07-14）
|
||||
- 修复 单选日期类型，初始赋值后不在当前日历的Bug
|
||||
- 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效）
|
||||
- 优化 移动端移除显示框的清空按钮，无实际用途
|
||||
## 2.0.14（2021-07-14）
|
||||
- 修复 组件赋值为空，界面未更新的Bug
|
||||
- 修复 start 和 end 不能动态赋值的Bug
|
||||
- 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的Bug
|
||||
## 2.0.13（2021-07-08）
|
||||
- 修复 范围选择不能动态赋值的Bug
|
||||
## 2.0.12（2021-07-08）
|
||||
- 修复 范围选择的初始时间在一个月内时，造成无法选择的bug
|
||||
## 2.0.11（2021-07-08）
|
||||
- 优化 弹出层在超出视窗边缘定位不准确的问题
|
||||
## 2.0.10（2021-07-08）
|
||||
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的Bug
|
||||
- 优化 弹出层在超出视窗边缘被遮盖的问题
|
||||
## 2.0.9（2021-07-07）
|
||||
- 新增 maskClick 事件
|
||||
- 修复 特殊情况日历 rpx 布局错误的Bug，rpx -> px
|
||||
- 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
|
||||
## 2.0.8（2021-07-07）
|
||||
- 新增 日期时间显示框支持插槽
|
||||
## 2.0.7（2021-07-01）
|
||||
- 优化 添加 uni-icons 依赖
|
||||
## 2.0.6（2021-05-22）
|
||||
- 修复 图标在小程序上不显示的Bug
|
||||
- 优化 重命名引用组件，避免潜在组件命名冲突
|
||||
## 2.0.5（2021-05-20）
|
||||
- 优化 代码目录扁平化
|
||||
## 2.0.4（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 2.0.3（2021-05-10）
|
||||
- 修复 ios 下不识别 '-' 日期格式的Bug
|
||||
- 优化 pc 下弹出层添加边框和阴影
|
||||
## 2.0.2（2021-05-08）
|
||||
- 修复 在 admin 中获取弹出层定位错误的bug
|
||||
## 2.0.1（2021-05-08）
|
||||
- 修复 type 属性向下兼容，默认值从 date 变更为 datetime
|
||||
## 2.0.0（2021-04-30）
|
||||
- 支持日历形式的日期+时间的范围选择
|
||||
> 注意：此版本不向后兼容，不再支持单独时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）
|
||||
## 1.0.6（2021-03-18）
|
||||
- 新增 hide-second 属性，时间支持仅选择时、分
|
||||
- 修复 选择跟显示的日期不一样的Bug
|
||||
- 修复 chang事件触发2次的Bug
|
||||
- 修复 分、秒 end 范围错误的Bug
|
||||
- 优化 更好的 nvue 适配
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view class="uni-calendar-item__weeks-box" :class="{
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
|
||||
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
|
||||
<view class="uni-calendar-item__weeks-box-item" :class="{
|
||||
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
|
||||
'uni-calendar-item--checked-range-text': checkHover,
|
||||
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
}">
|
||||
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
|
||||
</view>
|
||||
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
weeks: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
checkHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
choiceDate(weeks) {
|
||||
this.$emit('change', weeks)
|
||||
},
|
||||
handleMousemove(weeks) {
|
||||
this.$emit('handleMouse', weeks)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-calendar-item__weeks-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 1px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-text {
|
||||
font-size: 14px;
|
||||
// font-family: Lato-Bold, Lato;
|
||||
font-weight: bold;
|
||||
color: darken($color: $uni-primary, $amount: 40%);
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-item {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
.uni-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #dd524d;
|
||||
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
|
||||
color: #D1D1D1;
|
||||
}
|
||||
|
||||
.uni-calendar-item--today {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 17%;
|
||||
background-color: #dd524d;
|
||||
width:6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.uni-calendar-item--extra {
|
||||
color: #dd524d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
|
||||
background-color: $uni-primary;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--checked .uni-calendar-item--checked-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple {
|
||||
background-color: #F6F7FC;
|
||||
// color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
|
||||
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
|
||||
background-color: $uni-primary;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid #F6F7FC;
|
||||
}
|
||||
|
||||
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
|
||||
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--before-checked-x {
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-left-radius: 50px;
|
||||
box-sizing: border-box;
|
||||
background-color: #F6F7FC;
|
||||
}
|
||||
|
||||
.uni-calendar-item--after-checked-x {
|
||||
border-top-right-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
background-color: #F6F7FC;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,928 @@
|
||||
<template>
|
||||
<view class="uni-calendar" @mouseleave="leaveCale">
|
||||
|
||||
<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
|
||||
@click="maskClick"></view>
|
||||
|
||||
<view v-if="insert || show" class="uni-calendar__content"
|
||||
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
|
||||
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
|
||||
|
||||
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
|
||||
<view class="uni-calendar__header-btn uni-calendar--left"></view>
|
||||
</view>
|
||||
|
||||
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||||
<text
|
||||
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
|
||||
</picker>
|
||||
|
||||
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')">
|
||||
<view class="uni-calendar__header-btn uni-calendar--right"></view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert" class="dialog-close" @click="close">
|
||||
<view class="dialog-close-plus" data-id="close"></view>
|
||||
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-calendar__box">
|
||||
|
||||
<view v-if="showMonth" class="uni-calendar__box-bg">
|
||||
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||
</view>
|
||||
|
||||
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
|
||||
:selected="selected" :checkHover="range" @change="choiceDate"
|
||||
@handleMouse="handleMouse">
|
||||
</calendar-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top"
|
||||
style="padding: 0 80px;">
|
||||
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
|
||||
<time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time"
|
||||
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
|
||||
<view class="uni-date-changed--time-start">
|
||||
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
|
||||
</view>
|
||||
<time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false"
|
||||
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
<view style="line-height: 50px;">
|
||||
<!-- <uni-icons type="arrowthinright" color="#999"></uni-icons> -->
|
||||
</view>
|
||||
<view class="uni-date-changed--time-end">
|
||||
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
|
||||
<time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false"
|
||||
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
|
||||
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, getDate, getTime } from './util.js';
|
||||
import calendarItem from './calendar-item.vue'
|
||||
import timePicker from './time-picker.vue'
|
||||
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const { t } = initVueI18n(i18nMessages)
|
||||
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
||||
* @property {String} date 自定义当前时间，默认为今天
|
||||
* @property {String} startDate 日期选择范围-开始日期
|
||||
* @property {String} endDate 日期选择范围-结束日期
|
||||
* @property {Boolean} range 范围选择
|
||||
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||
* @value true 弹窗模式
|
||||
* @value false 插入模式
|
||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||
* @property {Boolean} showMonth 是否选择月份为背景
|
||||
* @property {[String} defaultValue 选择器打开时默认显示的时间
|
||||
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||
* @event {Function} monthSwitch 切换月份时触发
|
||||
* @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||
*/
|
||||
export default {
|
||||
components: {
|
||||
calendarItem,
|
||||
timePicker
|
||||
},
|
||||
props: {
|
||||
date: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
defTime: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
selectableTimes: {
|
||||
type: [Object],
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
startDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
endDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
startPlaceholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
endPlaceholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
insert: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
clearDate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hideSecond: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
pleStatus: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
before: '',
|
||||
after: '',
|
||||
data: [],
|
||||
fulldate: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultValue: {
|
||||
type: [String, Object, Array],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
weeks: [],
|
||||
calendar: {},
|
||||
nowDate: {},
|
||||
aniMaskShow: false,
|
||||
firstEnter: true,
|
||||
time: '',
|
||||
timeRange: {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
tempSingleDate: '',
|
||||
tempRange: {
|
||||
before: '',
|
||||
after: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
date: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (!this.range) {
|
||||
this.tempSingleDate = newVal
|
||||
setTimeout(() => {
|
||||
this.init(newVal)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
defTime: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (!this.range) {
|
||||
this.time = newVal
|
||||
} else {
|
||||
this.timeRange.startTime = newVal.start
|
||||
this.timeRange.endTime = newVal.end
|
||||
}
|
||||
}
|
||||
},
|
||||
startDate(val) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
this.cale.setStartDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
endDate(val) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
this.cale.setEndDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
selected(newVal) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
pleStatus: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
const {
|
||||
before,
|
||||
after,
|
||||
fulldate,
|
||||
which
|
||||
} = newVal
|
||||
this.tempRange.before = before
|
||||
this.tempRange.after = after
|
||||
setTimeout(() => {
|
||||
if (fulldate) {
|
||||
this.cale.setHoverMultiple(fulldate)
|
||||
if (before && after) {
|
||||
this.cale.lastHover = true
|
||||
if (this.rangeWithinMonth(after, before)) return
|
||||
this.setDate(before)
|
||||
} else {
|
||||
this.cale.setMultiple(fulldate)
|
||||
this.setDate(this.nowDate.fullDate)
|
||||
this.calendar.fullDate = ''
|
||||
this.cale.lastHover = false
|
||||
}
|
||||
} else {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
|
||||
this.cale.setDefaultMultiple(before, after)
|
||||
if (which === 'left' && before) {
|
||||
this.setDate(before)
|
||||
this.weeks = this.cale.weeks
|
||||
} else if(after) {
|
||||
this.setDate(after)
|
||||
this.weeks = this.cale.weeks
|
||||
}
|
||||
this.cale.lastHover = true
|
||||
}
|
||||
}, 16)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
timepickerStartTime() {
|
||||
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
|
||||
return activeDate === this.startDate ? this.selectableTimes.start : ''
|
||||
},
|
||||
timepickerEndTime() {
|
||||
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
|
||||
return activeDate === this.endDate ? this.selectableTimes.end : ''
|
||||
},
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
selectDateText() {
|
||||
return t("uni-datetime-picker.selectDate")
|
||||
},
|
||||
startDateText() {
|
||||
return this.startPlaceholder || t("uni-datetime-picker.startDate")
|
||||
},
|
||||
endDateText() {
|
||||
return this.endPlaceholder || t("uni-datetime-picker.endDate")
|
||||
},
|
||||
okText() {
|
||||
return t("uni-datetime-picker.ok")
|
||||
},
|
||||
yearText() {
|
||||
return t("uni-datetime-picker.year")
|
||||
},
|
||||
monthText() {
|
||||
return t("uni-datetime-picker.month")
|
||||
},
|
||||
MONText() {
|
||||
return t("uni-calender.MON")
|
||||
},
|
||||
TUEText() {
|
||||
return t("uni-calender.TUE")
|
||||
},
|
||||
WEDText() {
|
||||
return t("uni-calender.WED")
|
||||
},
|
||||
THUText() {
|
||||
return t("uni-calender.THU")
|
||||
},
|
||||
FRIText() {
|
||||
return t("uni-calender.FRI")
|
||||
},
|
||||
SATText() {
|
||||
return t("uni-calender.SAT")
|
||||
},
|
||||
SUNText() {
|
||||
return t("uni-calender.SUN")
|
||||
},
|
||||
confirmText() {
|
||||
return t("uni-calender.confirm")
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 获取日历方法实例
|
||||
this.cale = new Calendar({
|
||||
selected: this.selected,
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
range: this.range,
|
||||
})
|
||||
// 选中某一天
|
||||
this.init(this.date)
|
||||
},
|
||||
methods: {
|
||||
leaveCale() {
|
||||
this.firstEnter = true
|
||||
},
|
||||
handleMouse(weeks) {
|
||||
if (weeks.disable) return
|
||||
if (this.cale.lastHover) return
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.cale.multipleStatus
|
||||
if (!before) return
|
||||
this.calendar = weeks
|
||||
// 设置范围选
|
||||
this.cale.setHoverMultiple(this.calendar.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
// hover时，进入一个日历，更新另一个
|
||||
if (this.firstEnter) {
|
||||
this.$emit('firstEnterCale', this.cale.multipleStatus)
|
||||
this.firstEnter = false
|
||||
}
|
||||
},
|
||||
rangeWithinMonth(A, B) {
|
||||
const [yearA, monthA] = A.split('-')
|
||||
const [yearB, monthB] = B.split('-')
|
||||
return yearA === yearB && monthA === monthB
|
||||
},
|
||||
// 蒙版点击事件
|
||||
maskClick() {
|
||||
this.close()
|
||||
this.$emit('maskClose')
|
||||
},
|
||||
|
||||
clearCalender() {
|
||||
if (this.range) {
|
||||
this.timeRange.startTime = ''
|
||||
this.timeRange.endTime = ''
|
||||
this.tempRange.before = ''
|
||||
this.tempRange.after = ''
|
||||
this.cale.multipleStatus.before = ''
|
||||
this.cale.multipleStatus.after = ''
|
||||
this.cale.multipleStatus.data = []
|
||||
this.cale.lastHover = false
|
||||
} else {
|
||||
this.time = ''
|
||||
this.tempSingleDate = ''
|
||||
}
|
||||
this.calendar.fullDate = ''
|
||||
this.setDate(new Date())
|
||||
},
|
||||
|
||||
bindDateChange(e) {
|
||||
const value = e.detail.value + '-1'
|
||||
this.setDate(value)
|
||||
},
|
||||
/**
|
||||
* 初始化日期显示
|
||||
* @param {Object} date
|
||||
*/
|
||||
init(date) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
this.cale.setDate(date || new Date())
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
this.calendar = {...this.nowDate}
|
||||
if(!date){
|
||||
// 优化date为空默认不选中今天
|
||||
this.calendar.fullDate = ''
|
||||
if(this.defaultValue && !this.range){
|
||||
// 暂时只支持移动端非范围选择
|
||||
const defaultDate = new Date(this.defaultValue)
|
||||
const fullDate = getDate(defaultDate)
|
||||
const year = defaultDate.getFullYear()
|
||||
const month = defaultDate.getMonth()+1
|
||||
const date = defaultDate.getDate()
|
||||
const day = defaultDate.getDay()
|
||||
this.calendar = {
|
||||
fullDate,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
day
|
||||
},
|
||||
this.tempSingleDate = fullDate
|
||||
this.time = getTime(defaultDate, this.hideSecond)
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 打开日历弹窗
|
||||
*/
|
||||
open() {
|
||||
// 弹窗模式并且清理数据
|
||||
if (this.clearDate && !this.insert) {
|
||||
this.cale.cleanMultipleStatus()
|
||||
this.init(this.date)
|
||||
}
|
||||
this.show = true
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.aniMaskShow = true
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 关闭日历弹窗
|
||||
*/
|
||||
close() {
|
||||
this.aniMaskShow = false
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.show = false
|
||||
this.$emit('close')
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
confirm() {
|
||||
this.setEmit('confirm')
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 变化触发
|
||||
*/
|
||||
change() {
|
||||
if (!this.insert) return
|
||||
this.setEmit('change')
|
||||
},
|
||||
/**
|
||||
* 选择月份触发
|
||||
*/
|
||||
monthSwitch() {
|
||||
let {
|
||||
year,
|
||||
month
|
||||
} = this.nowDate
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month: Number(month)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 派发事件
|
||||
* @param {Object} name
|
||||
*/
|
||||
setEmit(name) {
|
||||
if(!this.range){
|
||||
if(!this.calendar.fullDate){
|
||||
this.calendar = this.cale.getInfo(new Date())
|
||||
this.tempSingleDate = this.calendar.fullDate
|
||||
}
|
||||
if(this.hasTime && !this.time) {
|
||||
this.time = getTime(new Date(), this.hideSecond)
|
||||
}
|
||||
}
|
||||
let {
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fullDate,
|
||||
extraInfo
|
||||
} = this.calendar
|
||||
this.$emit(name, {
|
||||
range: this.cale.multipleStatus,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
time: this.time,
|
||||
timeRange: this.timeRange,
|
||||
fulldate: fullDate,
|
||||
extraInfo: extraInfo || {}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 选择天触发
|
||||
* @param {Object} weeks
|
||||
*/
|
||||
choiceDate(weeks) {
|
||||
if (weeks.disable) return
|
||||
this.calendar = weeks
|
||||
this.calendar.userChecked = true
|
||||
// 设置多选
|
||||
this.cale.setMultiple(this.calendar.fullDate, true)
|
||||
this.weeks = this.cale.weeks
|
||||
this.tempSingleDate = this.calendar.fullDate
|
||||
const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
|
||||
const afterDate = new Date(this.cale.multipleStatus.after).getTime()
|
||||
if (beforeDate > afterDate && afterDate) {
|
||||
this.tempRange.before = this.cale.multipleStatus.after
|
||||
this.tempRange.after = this.cale.multipleStatus.before
|
||||
} else {
|
||||
this.tempRange.before = this.cale.multipleStatus.before
|
||||
this.tempRange.after = this.cale.multipleStatus.after
|
||||
}
|
||||
this.change()
|
||||
},
|
||||
changeMonth(type) {
|
||||
let newDate
|
||||
if(type === 'pre') {
|
||||
newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
|
||||
} else if(type === 'next') {
|
||||
newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
|
||||
}
|
||||
|
||||
this.setDate(newDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
this.cale.setDate(date)
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-calendar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-calendar__mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar--mask-show {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.uni-calendar--fixed {
|
||||
position: fixed;
|
||||
bottom: calc(var(--window-bottom));
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460px);
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar--ani-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar__content-mobile {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.uni-calendar__header {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__header-mobile {
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.uni-calendar--fixed-top {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-top-color: rgba(0, 0, 0, 0.4);
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar--fixed-width {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__backtoday {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25rpx;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
color: #fff;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.uni-calendar__header-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.uni-calendar__button-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: 14px;
|
||||
color: $uni-primary;
|
||||
/* #ifndef APP-NVUE */
|
||||
letter-spacing: 3px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar__header-btn-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__header-btn {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-left-color: #808080;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-top-color: #555555;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar--left {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.uni-calendar--right {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
|
||||
.uni-calendar__weeks {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-day {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
border-bottom-color: #F5F5F5;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-day-text {
|
||||
font-size: 12px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.uni-calendar__box {
|
||||
position: relative;
|
||||
// padding: 0 10px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.uni-calendar__box-bg {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.uni-calendar__box-bg-text {
|
||||
font-size: 200px;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
opacity: 0.1;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-date-changed {
|
||||
padding: 0 10px;
|
||||
// line-height: 50px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border-top-color: #DCDCDC;
|
||||
;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-date-btn--ok {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-start {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-end {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-date {
|
||||
color: #999;
|
||||
line-height: 50px;
|
||||
/* #ifdef MP-TOUTIAO */
|
||||
font-size: 16px;
|
||||
/* #endif */
|
||||
margin-right: 5px;
|
||||
// opacity: 0.6;
|
||||
}
|
||||
|
||||
.time-picker-style {
|
||||
// width: 62px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dialog-close-plus {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: #737987;
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.dialog-close-rotate {
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.uni-datetime-picker--btn {
|
||||
border-radius: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: $uni-primary;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-datetime-picker--btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "select date",
|
||||
"uni-datetime-picker.selectTime": "select time",
|
||||
"uni-datetime-picker.selectDateTime": "select date and time",
|
||||
"uni-datetime-picker.startDate": "start date",
|
||||
"uni-datetime-picker.endDate": "end date",
|
||||
"uni-datetime-picker.startTime": "start time",
|
||||
"uni-datetime-picker.endTime": "end time",
|
||||
"uni-datetime-picker.ok": "ok",
|
||||
"uni-datetime-picker.clear": "clear",
|
||||
"uni-datetime-picker.cancel": "cancel",
|
||||
"uni-datetime-picker.year": "-",
|
||||
"uni-datetime-picker.month": "",
|
||||
"uni-calender.MON": "MON",
|
||||
"uni-calender.TUE": "TUE",
|
||||
"uni-calender.WED": "WED",
|
||||
"uni-calender.THU": "THU",
|
||||
"uni-calender.FRI": "FRI",
|
||||
"uni-calender.SAT": "SAT",
|
||||
"uni-calender.SUN": "SUN",
|
||||
"uni-calender.confirm": "confirm"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "选择日期",
|
||||
"uni-datetime-picker.selectTime": "选择时间",
|
||||
"uni-datetime-picker.selectDateTime": "选择日期时间",
|
||||
"uni-datetime-picker.startDate": "开始日期",
|
||||
"uni-datetime-picker.endDate": "结束日期",
|
||||
"uni-datetime-picker.startTime": "开始时间",
|
||||
"uni-datetime-picker.endTime": "结束时间",
|
||||
"uni-datetime-picker.ok": "确定",
|
||||
"uni-datetime-picker.clear": "清除",
|
||||
"uni-datetime-picker.cancel": "取消",
|
||||
"uni-datetime-picker.year": "年",
|
||||
"uni-datetime-picker.month": "月",
|
||||
"uni-calender.SUN": "日",
|
||||
"uni-calender.MON": "一",
|
||||
"uni-calender.TUE": "二",
|
||||
"uni-calender.WED": "三",
|
||||
"uni-calender.THU": "四",
|
||||
"uni-calender.FRI": "五",
|
||||
"uni-calender.SAT": "六",
|
||||
"uni-calender.confirm": "确认"
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "選擇日期",
|
||||
"uni-datetime-picker.selectTime": "選擇時間",
|
||||
"uni-datetime-picker.selectDateTime": "選擇日期時間",
|
||||
"uni-datetime-picker.startDate": "開始日期",
|
||||
"uni-datetime-picker.endDate": "結束日期",
|
||||
"uni-datetime-picker.startTime": "開始时间",
|
||||
"uni-datetime-picker.endTime": "結束时间",
|
||||
"uni-datetime-picker.ok": "確定",
|
||||
"uni-datetime-picker.clear": "清除",
|
||||
"uni-datetime-picker.cancel": "取消",
|
||||
"uni-datetime-picker.year": "年",
|
||||
"uni-datetime-picker.month": "月",
|
||||
"uni-calender.SUN": "日",
|
||||
"uni-calender.MON": "一",
|
||||
"uni-calender.TUE": "二",
|
||||
"uni-calender.WED": "三",
|
||||
"uni-calender.THU": "四",
|
||||
"uni-calender.FRI": "五",
|
||||
"uni-calender.SAT": "六",
|
||||
"uni-calender.confirm": "確認"
|
||||
}
|
||||
@@ -0,0 +1,934 @@
|
||||
<template>
|
||||
<view class="uni-datetime-picker">
|
||||
<view @click="initTimePicker">
|
||||
<slot>
|
||||
<view class="uni-datetime-picker-timebox-pointer"
|
||||
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
|
||||
<text class="uni-datetime-picker-text">{{time}}</text>
|
||||
<view v-if="!time" class="uni-datetime-picker-time">
|
||||
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
|
||||
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
|
||||
:style="fixNvueBug">
|
||||
<view class="uni-title">
|
||||
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
|
||||
</view>
|
||||
<view v-if="dateShow" class="uni-datetime-picker__container-box">
|
||||
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
|
||||
@change="bindDateChange">
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<!-- 兼容 nvue 不支持伪类 -->
|
||||
<text class="uni-datetime-picker-sign sign-left">-</text>
|
||||
<text class="uni-datetime-picker-sign sign-right">-</text>
|
||||
</view>
|
||||
<view v-if="timeShow" class="uni-datetime-picker__container-box">
|
||||
<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
|
||||
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!hideSecond">
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<!-- 兼容 nvue 不支持伪类 -->
|
||||
<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
|
||||
<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
|
||||
</view>
|
||||
<view class="uni-datetime-picker-btn">
|
||||
<view @click="clearTime">
|
||||
<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
|
||||
</view>
|
||||
<view class="uni-datetime-picker-btn-group">
|
||||
<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
|
||||
<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
|
||||
</view>
|
||||
<view @click="setTime">
|
||||
<text class="uni-datetime-picker-btn-text">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const { t } = initVueI18n(i18nMessages)
|
||||
import { fixIosDateFormat } from './util'
|
||||
|
||||
/**
|
||||
* DatetimePicker 时间选择器
|
||||
* @description 可以同时选择日期和时间的选择器
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||
* @property {String} type = [datetime | date | time] 显示模式
|
||||
* @property {Boolean} multiple = [true|false] 是否多选
|
||||
* @property {String|Number} value 默认值
|
||||
* @property {String|Number} start 起始日期或时间
|
||||
* @property {String|Number} end 起始日期或时间
|
||||
* @property {String} return-type = [timestamp | string]
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniDatetimePicker',
|
||||
data() {
|
||||
return {
|
||||
indicatorStyle: `height: 50px;`,
|
||||
visible: false,
|
||||
fixNvueBug: {},
|
||||
dateShow: true,
|
||||
timeShow: true,
|
||||
title: '日期和时间',
|
||||
// 输入框当前时间
|
||||
time: '',
|
||||
// 当前的年月日时分秒
|
||||
year: 1920,
|
||||
month: 0,
|
||||
day: 0,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
// 起始时间
|
||||
startYear: 1920,
|
||||
startMonth: 1,
|
||||
startDay: 1,
|
||||
startHour: 0,
|
||||
startMinute: 0,
|
||||
startSecond: 0,
|
||||
// 结束时间
|
||||
endYear: 2120,
|
||||
endMonth: 12,
|
||||
endDay: 31,
|
||||
endHour: 23,
|
||||
endMinute: 59,
|
||||
endSecond: 59,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'datetime'
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
start: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
end: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
returnType: {
|
||||
type: String,
|
||||
default: 'string'
|
||||
},
|
||||
disabled: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
hideSecond: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// #ifndef VUE3
|
||||
value: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.parseValue(fixIosDateFormat(newVal))
|
||||
this.initTime(false)
|
||||
} else {
|
||||
this.time = ''
|
||||
this.parseValue(Date.now())
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.parseValue(fixIosDateFormat(newVal))
|
||||
this.initTime(false)
|
||||
} else {
|
||||
this.time = ''
|
||||
this.parseValue(Date.now())
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
type: {
|
||||
handler(newValue) {
|
||||
if (newValue === 'date') {
|
||||
this.dateShow = true
|
||||
this.timeShow = false
|
||||
this.title = '日期'
|
||||
} else if (newValue === 'time') {
|
||||
this.dateShow = false
|
||||
this.timeShow = true
|
||||
this.title = '时间'
|
||||
} else {
|
||||
this.dateShow = true
|
||||
this.timeShow = true
|
||||
this.title = '日期和时间'
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
start: {
|
||||
handler(newVal) {
|
||||
this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
end: {
|
||||
handler(newVal) {
|
||||
this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
|
||||
// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
|
||||
months(newVal) {
|
||||
this.checkValue('month', this.month, newVal)
|
||||
},
|
||||
days(newVal) {
|
||||
this.checkValue('day', this.day, newVal)
|
||||
},
|
||||
hours(newVal) {
|
||||
this.checkValue('hour', this.hour, newVal)
|
||||
},
|
||||
minutes(newVal) {
|
||||
this.checkValue('minute', this.minute, newVal)
|
||||
},
|
||||
seconds(newVal) {
|
||||
this.checkValue('second', this.second, newVal)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当前年、月、日、时、分、秒选择范围
|
||||
years() {
|
||||
return this.getCurrentRange('year')
|
||||
},
|
||||
|
||||
months() {
|
||||
return this.getCurrentRange('month')
|
||||
},
|
||||
|
||||
days() {
|
||||
return this.getCurrentRange('day')
|
||||
},
|
||||
|
||||
hours() {
|
||||
return this.getCurrentRange('hour')
|
||||
},
|
||||
|
||||
minutes() {
|
||||
return this.getCurrentRange('minute')
|
||||
},
|
||||
|
||||
seconds() {
|
||||
return this.getCurrentRange('second')
|
||||
},
|
||||
|
||||
// picker 当前值数组
|
||||
ymd() {
|
||||
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
|
||||
},
|
||||
hms() {
|
||||
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
|
||||
},
|
||||
|
||||
// 当前 date 是 start
|
||||
currentDateIsStart() {
|
||||
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
|
||||
},
|
||||
|
||||
// 当前 date 是 end
|
||||
currentDateIsEnd() {
|
||||
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
|
||||
},
|
||||
|
||||
// 当前年、月、日、时、分、秒的最小值和最大值
|
||||
minYear() {
|
||||
return this.startYear
|
||||
},
|
||||
maxYear() {
|
||||
return this.endYear
|
||||
},
|
||||
minMonth() {
|
||||
if (this.year === this.startYear) {
|
||||
return this.startMonth
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
maxMonth() {
|
||||
if (this.year === this.endYear) {
|
||||
return this.endMonth
|
||||
} else {
|
||||
return 12
|
||||
}
|
||||
},
|
||||
minDay() {
|
||||
if (this.year === this.startYear && this.month === this.startMonth) {
|
||||
return this.startDay
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
maxDay() {
|
||||
if (this.year === this.endYear && this.month === this.endMonth) {
|
||||
return this.endDay
|
||||
} else {
|
||||
return this.daysInMonth(this.year, this.month)
|
||||
}
|
||||
},
|
||||
minHour() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart) {
|
||||
return this.startHour
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
return this.startHour
|
||||
}
|
||||
},
|
||||
maxHour() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd) {
|
||||
return this.endHour
|
||||
} else {
|
||||
return 23
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
return this.endHour
|
||||
}
|
||||
},
|
||||
minMinute() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart && this.hour === this.startHour) {
|
||||
return this.startMinute
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.startHour) {
|
||||
return this.startMinute
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
maxMinute() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd && this.hour === this.endHour) {
|
||||
return this.endMinute
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.endHour) {
|
||||
return this.endMinute
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
},
|
||||
minSecond() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
|
||||
return this.startSecond
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.startHour && this.minute === this.startMinute) {
|
||||
return this.startSecond
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
maxSecond() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
|
||||
return this.endSecond
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.endHour && this.minute === this.endMinute) {
|
||||
return this.endSecond
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
selectTimeText() {
|
||||
return t("uni-datetime-picker.selectTime")
|
||||
},
|
||||
okText() {
|
||||
return t("uni-datetime-picker.ok")
|
||||
},
|
||||
clearText() {
|
||||
return t("uni-datetime-picker.clear")
|
||||
},
|
||||
cancelText() {
|
||||
return t("uni-datetime-picker.cancel")
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// #ifdef APP-NVUE
|
||||
const res = uni.getSystemInfoSync();
|
||||
this.fixNvueBug = {
|
||||
top: res.windowHeight / 2,
|
||||
left: res.windowWidth / 2
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* @param {Object} item
|
||||
* 小于 10 在前面加个 0
|
||||
*/
|
||||
|
||||
lessThanTen(item) {
|
||||
return item < 10 ? '0' + item : item
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析时分秒字符串，例如：00:00:00
|
||||
* @param {String} timeString
|
||||
*/
|
||||
parseTimeType(timeString) {
|
||||
if (timeString) {
|
||||
let timeArr = timeString.split(':')
|
||||
this.hour = Number(timeArr[0])
|
||||
this.minute = Number(timeArr[1])
|
||||
this.second = Number(timeArr[2])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
|
||||
* @param {String | Number} datetime
|
||||
*/
|
||||
initPickerValue(datetime) {
|
||||
let defaultValue = null
|
||||
if (datetime) {
|
||||
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
|
||||
} else {
|
||||
defaultValue = Date.now()
|
||||
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
|
||||
}
|
||||
this.parseValue(defaultValue)
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始值规则：
|
||||
* - 用户设置初始值 value
|
||||
* - 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
|
||||
* - 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
|
||||
* - 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
|
||||
* - 无起始终止时间，则初始值为 value
|
||||
* - 无初始值 value，则初始值为当前本地时间 Date.now()
|
||||
* @param {Object} value
|
||||
* @param {Object} dateBase
|
||||
*/
|
||||
compareValueWithStartAndEnd(value, start, end) {
|
||||
let winner = null
|
||||
value = this.superTimeStamp(value)
|
||||
start = this.superTimeStamp(start)
|
||||
end = this.superTimeStamp(end)
|
||||
|
||||
if (start && end) {
|
||||
if (value < start) {
|
||||
winner = new Date(start)
|
||||
} else if (value > end) {
|
||||
winner = new Date(end)
|
||||
} else {
|
||||
winner = new Date(value)
|
||||
}
|
||||
} else if (start && !end) {
|
||||
winner = start <= value ? new Date(value) : new Date(start)
|
||||
} else if (!start && end) {
|
||||
winner = value <= end ? new Date(value) : new Date(end)
|
||||
} else {
|
||||
winner = new Date(value)
|
||||
}
|
||||
|
||||
return winner
|
||||
},
|
||||
|
||||
/**
|
||||
* 转换为可比较的时间戳，接受日期、时分秒、时间戳
|
||||
* @param {Object} value
|
||||
*/
|
||||
superTimeStamp(value) {
|
||||
let dateBase = ''
|
||||
if (this.type === 'time' && value && typeof value === 'string') {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth() + 1
|
||||
const day = now.getDate()
|
||||
dateBase = year + '/' + month + '/' + day + ' '
|
||||
}
|
||||
if (Number(value)) {
|
||||
value = parseInt(value)
|
||||
dateBase = 0
|
||||
}
|
||||
return this.createTimeStamp(dateBase + value)
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析默认值 value，字符串、时间戳
|
||||
* @param {Object} defaultTime
|
||||
*/
|
||||
parseValue(value) {
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
if (this.type === 'time' && typeof value === "string") {
|
||||
this.parseTimeType(value)
|
||||
} else {
|
||||
let defaultDate = null
|
||||
defaultDate = new Date(value)
|
||||
if (this.type !== 'time') {
|
||||
this.year = defaultDate.getFullYear()
|
||||
this.month = defaultDate.getMonth() + 1
|
||||
this.day = defaultDate.getDate()
|
||||
}
|
||||
if (this.type !== 'date') {
|
||||
this.hour = defaultDate.getHours()
|
||||
this.minute = defaultDate.getMinutes()
|
||||
this.second = defaultDate.getSeconds()
|
||||
}
|
||||
}
|
||||
if (this.hideSecond) {
|
||||
this.second = 0
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析可选择时间范围 start、end，年月日字符串、时间戳
|
||||
* @param {Object} defaultTime
|
||||
*/
|
||||
parseDatetimeRange(point, pointType) {
|
||||
// 时间为空，则重置为初始值
|
||||
if (!point) {
|
||||
if (pointType === 'start') {
|
||||
this.startYear = 1920
|
||||
this.startMonth = 1
|
||||
this.startDay = 1
|
||||
this.startHour = 0
|
||||
this.startMinute = 0
|
||||
this.startSecond = 0
|
||||
}
|
||||
if (pointType === 'end') {
|
||||
this.endYear = 2120
|
||||
this.endMonth = 12
|
||||
this.endDay = 31
|
||||
this.endHour = 23
|
||||
this.endMinute = 59
|
||||
this.endSecond = 59
|
||||
}
|
||||
return
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
const pointArr = point.split(':')
|
||||
this[pointType + 'Hour'] = Number(pointArr[0])
|
||||
this[pointType + 'Minute'] = Number(pointArr[1])
|
||||
this[pointType + 'Second'] = Number(pointArr[2])
|
||||
} else {
|
||||
if (!point) {
|
||||
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
|
||||
return
|
||||
}
|
||||
if (Number(point)) {
|
||||
point = parseInt(point)
|
||||
}
|
||||
// datetime 的 end 没有时分秒, 则不限制
|
||||
const hasTime = /[0-9]:[0-9]/
|
||||
if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
|
||||
point)) {
|
||||
point = point + ' 23:59:59'
|
||||
}
|
||||
const pointDate = new Date(point)
|
||||
this[pointType + 'Year'] = pointDate.getFullYear()
|
||||
this[pointType + 'Month'] = pointDate.getMonth() + 1
|
||||
this[pointType + 'Day'] = pointDate.getDate()
|
||||
if (this.type === 'datetime') {
|
||||
this[pointType + 'Hour'] = pointDate.getHours()
|
||||
this[pointType + 'Minute'] = pointDate.getMinutes()
|
||||
this[pointType + 'Second'] = pointDate.getSeconds()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 获取 年、月、日、时、分、秒 当前可选范围
|
||||
getCurrentRange(value) {
|
||||
const range = []
|
||||
for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
|
||||
range.push(i)
|
||||
}
|
||||
return range
|
||||
},
|
||||
|
||||
// 字符串首字母大写
|
||||
capitalize(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
},
|
||||
|
||||
// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
|
||||
checkValue(name, value, values) {
|
||||
if (values.indexOf(value) === -1) {
|
||||
this[name] = values[0]
|
||||
}
|
||||
},
|
||||
|
||||
// 每个月的实际天数
|
||||
daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
|
||||
return new Date(year, month, 0).getDate();
|
||||
},
|
||||
|
||||
//兼容 iOS、safari 日期格式
|
||||
fixIosDateFormat(value) {
|
||||
if (typeof value === 'string') {
|
||||
value = value.replace(/-/g, '/')
|
||||
}
|
||||
return value
|
||||
},
|
||||
|
||||
/**
|
||||
* 生成时间戳
|
||||
* @param {Object} time
|
||||
*/
|
||||
createTimeStamp(time) {
|
||||
if (!time) return
|
||||
if (typeof time === "number") {
|
||||
return time
|
||||
} else {
|
||||
time = time.replace(/-/g, '/')
|
||||
if (this.type === 'date') {
|
||||
time = time + ' ' + '00:00:00'
|
||||
}
|
||||
return Date.parse(time)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生成日期或时间的字符串
|
||||
*/
|
||||
createDomSting() {
|
||||
const yymmdd = this.year +
|
||||
'-' +
|
||||
this.lessThanTen(this.month) +
|
||||
'-' +
|
||||
this.lessThanTen(this.day)
|
||||
|
||||
let hhmmss = this.lessThanTen(this.hour) +
|
||||
':' +
|
||||
this.lessThanTen(this.minute)
|
||||
|
||||
if (!this.hideSecond) {
|
||||
hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
|
||||
}
|
||||
|
||||
if (this.type === 'date') {
|
||||
return yymmdd
|
||||
} else if (this.type === 'time') {
|
||||
return hhmmss
|
||||
} else {
|
||||
return yymmdd + ' ' + hhmmss
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化返回值，并抛出 change 事件
|
||||
*/
|
||||
initTime(emit = true) {
|
||||
this.time = this.createDomSting()
|
||||
if (!emit) return
|
||||
if (this.returnType === 'timestamp' && this.type !== 'time') {
|
||||
this.$emit('change', this.createTimeStamp(this.time))
|
||||
this.$emit('input', this.createTimeStamp(this.time))
|
||||
this.$emit('update:modelValue', this.createTimeStamp(this.time))
|
||||
} else {
|
||||
this.$emit('change', this.time)
|
||||
this.$emit('input', this.time)
|
||||
this.$emit('update:modelValue', this.time)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户选择日期或时间更新 data
|
||||
* @param {Object} e
|
||||
*/
|
||||
bindDateChange(e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
},
|
||||
bindTimeChange(e) {
|
||||
const val = e.detail.value
|
||||
this.hour = this.hours[val[0]]
|
||||
this.minute = this.minutes[val[1]]
|
||||
this.second = this.seconds[val[2]]
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化弹出层
|
||||
*/
|
||||
initTimePicker() {
|
||||
if (this.disabled) return
|
||||
const value = fixIosDateFormat(this.time)
|
||||
this.initPickerValue(value)
|
||||
this.visible = !this.visible
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发或关闭弹框
|
||||
*/
|
||||
tiggerTimePicker(e) {
|
||||
this.visible = !this.visible
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击“清空”按钮，清空当前值
|
||||
*/
|
||||
clearTime() {
|
||||
this.time = ''
|
||||
this.$emit('change', this.time)
|
||||
this.$emit('input', this.time)
|
||||
this.$emit('update:modelValue', this.time)
|
||||
this.tiggerTimePicker()
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击“确定”按钮
|
||||
*/
|
||||
setTime() {
|
||||
this.initTime()
|
||||
this.tiggerTimePicker()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-datetime-picker {
|
||||
/* #ifndef APP-NVUE */
|
||||
/* width: 100%; */
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-view {
|
||||
height: 130px;
|
||||
width: 270px;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn {
|
||||
margin-top: 60px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn-text {
|
||||
font-size: 14px;
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-cancel {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-mask {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition-duration: 0.3s;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-popup {
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
width: 270px;
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 500px;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 330px;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition-duration: 0.3s;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.fix-nvue-height {
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 330px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-time {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-column {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-timebox {
|
||||
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 5px;
|
||||
padding: 7px 10px;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-timebox-pointer {
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
.uni-datetime-picker-disabled {
|
||||
opacity: 0.4;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-text {
|
||||
font-size: 14px;
|
||||
line-height: 50px
|
||||
}
|
||||
|
||||
.uni-datetime-picker-sign {
|
||||
position: absolute;
|
||||
top: 53px;
|
||||
/* 减掉 10px 的元素高度，兼容nvue */
|
||||
color: #999;
|
||||
/* #ifdef APP-NVUE */
|
||||
font-size: 16px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.sign-left {
|
||||
left: 86px;
|
||||
}
|
||||
|
||||
.sign-right {
|
||||
right: 86px;
|
||||
}
|
||||
|
||||
.sign-center {
|
||||
left: 135px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker__container-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.time-hide-second {
|
||||
width: 180px;
|
||||
}
|
||||
</style>
|
||||
+1034
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,403 @@
|
||||
class Calendar {
|
||||
constructor({
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range,
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDateObj(new Date()) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 起始时间
|
||||
this.startDate = startDate
|
||||
// 终止时间
|
||||
this.endDate = endDate
|
||||
// 是否范围选择
|
||||
this.range = range
|
||||
// 多选状态
|
||||
this.cleanMultipleStatus()
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
this.lastHover = false
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
const selectDate = this.getDateObj(date)
|
||||
this.getWeeks(selectDate.fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanMultipleStatus() {
|
||||
this.multipleStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
setStartDate(startDate) {
|
||||
this.startDate = startDate
|
||||
}
|
||||
|
||||
setEndDate(endDate) {
|
||||
this.endDate = endDate
|
||||
}
|
||||
|
||||
getPreMonthObj(date){
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth - 1)
|
||||
const newMonth = date.getMonth()
|
||||
if(oldMonth !== 0 && newMonth - oldMonth === 0){
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
getNextMonthObj(date){
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth + 1)
|
||||
const newMonth = date.getMonth()
|
||||
if(newMonth - oldMonth > 1){
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定格式Date对象
|
||||
*/
|
||||
getDateObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
return {
|
||||
fullDate: getDate(date),
|
||||
year: date.getFullYear(),
|
||||
month: addZero(date.getMonth() + 1),
|
||||
date: addZero(date.getDate()),
|
||||
day: date.getDay()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取上一个月日期集合
|
||||
*/
|
||||
getPreMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
for (let i = amount - 1; i >= 0; i--) {
|
||||
const month = dateObj.month - 1
|
||||
result.push({
|
||||
date: new Date(dateObj.year, month, -i).getDate(),
|
||||
month,
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取本月日期集合
|
||||
*/
|
||||
getCurrentMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
|
||||
const isToday = fullDate === currentDate
|
||||
// 获取打点信息
|
||||
const info = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(currentDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
disableBefore = dateCompare(this.startDate, currentDate)
|
||||
}
|
||||
|
||||
if (this.endDate) {
|
||||
disableAfter = dateCompare(currentDate, this.endDate)
|
||||
}
|
||||
|
||||
let multiples = this.multipleStatus.data
|
||||
let multiplesStatus = -1
|
||||
if (this.range && multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, currentDate)
|
||||
})
|
||||
}
|
||||
const checked = multiplesStatus !== -1
|
||||
|
||||
result.push({
|
||||
fullDate: currentDate,
|
||||
year: dateObj.year,
|
||||
date: i,
|
||||
multiple: this.range ? checked : false,
|
||||
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
month: dateObj.month,
|
||||
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(currentDate,this.endDate)),
|
||||
isToday,
|
||||
userChecked: false,
|
||||
extraInfo: info
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取下一个月日期集合
|
||||
*/
|
||||
_getNextMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const month = dateObj.month + 1
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
result.push({
|
||||
date: i,
|
||||
month,
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
|
||||
return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
before = new Date(fixIosDateFormat(before))
|
||||
after = new Date(fixIosDateFormat(after))
|
||||
return before.valueOf() === after.valueOf()
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较真实起始日期
|
||||
*/
|
||||
|
||||
isLogicBefore(currentDate, before, after) {
|
||||
let logicBefore = before
|
||||
if (before && after) {
|
||||
logicBefore = dateCompare(before, after) ? before : after
|
||||
}
|
||||
return this.dateEqual(logicBefore, currentDate)
|
||||
}
|
||||
|
||||
isLogicAfter(currentDate, before, after) {
|
||||
let logicAfter = after
|
||||
if (before && after) {
|
||||
logicAfter = dateCompare(before, after) ? after : before
|
||||
}
|
||||
return this.dateEqual(logicAfter, currentDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
if (!this.range) return
|
||||
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.multipleStatus
|
||||
if (before && after) {
|
||||
if (!this.lastHover) {
|
||||
this.lastHover = true
|
||||
return
|
||||
}
|
||||
this.multipleStatus.before = fullDate
|
||||
this.multipleStatus.after = ''
|
||||
this.multipleStatus.data = []
|
||||
this.multipleStatus.fulldate = ''
|
||||
this.lastHover = false
|
||||
} else {
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
this.lastHover = false
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
||||
.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
|
||||
.before);
|
||||
}
|
||||
this.lastHover = true
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标 hover 更新多选状态
|
||||
*/
|
||||
setHoverMultiple(fullDate) {
|
||||
if (!this.range || this.lastHover) return
|
||||
|
||||
const { before } = this.multipleStatus
|
||||
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新默认值多选状态
|
||||
*/
|
||||
setDefaultMultiple(before, after) {
|
||||
this.multipleStatus.before = before
|
||||
this.multipleStatus.after = after
|
||||
if (before && after) {
|
||||
if (dateCompare(before, after)) {
|
||||
this.multipleStatus.data = this.geDateAll(before, after);
|
||||
this.getWeeks(after)
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(after, before);
|
||||
this.getWeeks(before)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
getWeeks(dateData) {
|
||||
const {
|
||||
year,
|
||||
month,
|
||||
} = this.getDateObj(dateData)
|
||||
|
||||
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
|
||||
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const currentMonthDayAmount = new Date(year, month, 0).getDate()
|
||||
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
|
||||
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
|
||||
|
||||
const weeks = new Array(6)
|
||||
for (let i = 0; i < calendarDays.length; i++) {
|
||||
const index = Math.floor(i / 7)
|
||||
if(!weeks[index]){
|
||||
weeks[index] = new Array(7)
|
||||
}
|
||||
weeks[index][i % 7] = calendarDays[i]
|
||||
}
|
||||
|
||||
this.calendar = calendarDays
|
||||
this.weeks = weeks
|
||||
}
|
||||
}
|
||||
|
||||
function getDateTime(date, hideSecond){
|
||||
return `${getDate(date)} ${getTime(date, hideSecond)}`
|
||||
}
|
||||
|
||||
function getDate(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth()+1
|
||||
const day = date.getDate()
|
||||
return `${year}-${addZero(month)}-${addZero(day)}`
|
||||
}
|
||||
|
||||
function getTime(date, hideSecond){
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
|
||||
}
|
||||
|
||||
function addZero(num) {
|
||||
if(num < 10){
|
||||
num = `0${num}`
|
||||
}
|
||||
return num
|
||||
}
|
||||
|
||||
function getDefaultSecond(hideSecond) {
|
||||
return hideSecond ? '00:00' : '00:00:00'
|
||||
}
|
||||
|
||||
function dateCompare(startDate, endDate) {
|
||||
startDate = new Date(fixIosDateFormat(startDate))
|
||||
endDate = new Date(fixIosDateFormat(endDate))
|
||||
return startDate <= endDate
|
||||
}
|
||||
|
||||
function checkDate(date){
|
||||
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
|
||||
return date.match(dateReg)
|
||||
}
|
||||
|
||||
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9]:[0-5]?[0-9])?$/
|
||||
function fixIosDateFormat(value) {
|
||||
if (typeof value === 'string' && dateTimeReg.test(value)) {
|
||||
value = value.replace(/-/g, '/')
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
export {Calendar, getDateTime, getDate, getTime, addZero, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat}
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-datetime-picker",
|
||||
"displayName": "uni-datetime-picker 日期选择器",
|
||||
"version": "2.2.25",
|
||||
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
|
||||
"keywords": [
|
||||
"uni-datetime-picker",
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"日期时间选择器",
|
||||
"日期时间"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
|
||||
|
||||
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
|
||||
|
||||
## DatetimePicker 时间选择器
|
||||
|
||||
> **组件名：uni-datetime-picker**
|
||||
> 代码块： `uDatetimePicker`
|
||||
|
||||
|
||||
该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
|
||||
|
||||
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
|
||||
|
||||
**_点击 picker 默认值规则：_**
|
||||
|
||||
- 若设置初始值 value, 会显示在 picker 显示框中
|
||||
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
@@ -0,0 +1,16 @@
|
||||
## 1.0.6（2023-11-03）
|
||||
1. **该版本不再维护**，推荐使用新版本[https://ext.dcloud.net.cn/plugin?name=uv-calendars](https://ext.dcloud.net.cn/plugin?name=uv-calendars)
|
||||
## 1.0.5（2023-07-02）
|
||||
uv-calendar 由于弹出层uv-popup的修改，打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/calendar.html
|
||||
## 1.0.4（2023-06-15）
|
||||
1. formatter格式化中增加topInfo参数
|
||||
## 1.0.3（2023-06-08）
|
||||
1. 增加点击日期change回调
|
||||
2. 优化
|
||||
## 1.0.2（2023-06-05）
|
||||
1. 修改多个时间选择的时候存在反选的BUG
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-calendar 日历
|
||||
@@ -0,0 +1,546 @@
|
||||
/**
|
||||
* @1900-2100区间内的公历、农历互转
|
||||
* @charset UTF-8
|
||||
* @github https://github.com/jjonline/calendar.js
|
||||
* @Author Jea杨(JJonline@JJonline.Cn)
|
||||
* @Time 2014-7-21
|
||||
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
|
||||
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
|
||||
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
|
||||
* @Version 1.0.3
|
||||
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
|
||||
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
|
||||
*/
|
||||
/* eslint-disable */
|
||||
var calendar = {
|
||||
|
||||
/**
|
||||
* 农历1900-2100的润大小信息表
|
||||
* @Array Of Property
|
||||
* @return Hex
|
||||
*/
|
||||
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
|
||||
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
|
||||
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
|
||||
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
|
||||
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
|
||||
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
|
||||
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
|
||||
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
|
||||
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
|
||||
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
|
||||
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
|
||||
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
|
||||
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
|
||||
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
|
||||
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
|
||||
/** Add By JJonline@JJonline.Cn**/
|
||||
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
|
||||
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
|
||||
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
|
||||
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
|
||||
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
|
||||
0x0d520], // 2100
|
||||
|
||||
/**
|
||||
* 公历每个月份的天数普通表
|
||||
* @Array Of Property
|
||||
* @return Number
|
||||
*/
|
||||
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||
|
||||
/**
|
||||
* 天干地支之天干速查表
|
||||
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表
|
||||
* @Array Of Property
|
||||
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表<=>生肖
|
||||
* @Array Of Property
|
||||
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
|
||||
|
||||
/**
|
||||
* 24节气速查表
|
||||
* @Array Of Property
|
||||
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||
* @return Cn string
|
||||
*/
|
||||
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
|
||||
|
||||
/**
|
||||
* 1900-2100各年的24节气日期速查表
|
||||
* @Array Of Property
|
||||
* @return 0x string For splice
|
||||
*/
|
||||
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
|
||||
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
|
||||
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
|
||||
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
|
||||
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
|
||||
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
|
||||
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
|
||||
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
|
||||
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
|
||||
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
|
||||
|
||||
/**
|
||||
* 数字转中文速查表
|
||||
* @Array Of Property
|
||||
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
|
||||
|
||||
/**
|
||||
* 日期转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['初','十','廿','卅']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
|
||||
|
||||
/**
|
||||
* 月份转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
|
||||
|
||||
/**
|
||||
* 返回农历y年一整年的总天数
|
||||
* @param lunar Year
|
||||
* @return Number
|
||||
* @eg:var count = calendar.lYearDays(1987) ;//count=387
|
||||
*/
|
||||
lYearDays: function (y) {
|
||||
var i; var sum = 348
|
||||
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
|
||||
return (sum + this.leapDays(y))
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0-12)
|
||||
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||
*/
|
||||
leapMonth: function (y) { // 闰字编码 \u95f0
|
||||
return (this.lunarInfo[y - 1900] & 0xf)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0、29、30)
|
||||
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||
*/
|
||||
leapDays: function (y) {
|
||||
if (this.leapMonth(y)) {
|
||||
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
|
||||
}
|
||||
return (0)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||
* @param lunar Year
|
||||
* @return Number (-1、29、30)
|
||||
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||
*/
|
||||
monthDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
|
||||
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回公历(!)y年m月的天数
|
||||
* @param solar Year
|
||||
* @return Number (-1、28、29、30、31)
|
||||
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||
*/
|
||||
solarDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var ms = m - 1
|
||||
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
|
||||
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
|
||||
} else {
|
||||
return (this.solarMonth[ms])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 农历年份转换为干支纪年
|
||||
* @param lYear 农历年的年份数
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhiYear: function (lYear) {
|
||||
var ganKey = (lYear - 3) % 10
|
||||
var zhiKey = (lYear - 3) % 12
|
||||
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
|
||||
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
|
||||
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
|
||||
},
|
||||
|
||||
/**
|
||||
* 公历月、日判断所属星座
|
||||
* @param cMonth [description]
|
||||
* @param cDay [description]
|
||||
* @return Cn string
|
||||
*/
|
||||
toAstro: function (cMonth, cDay) {
|
||||
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
|
||||
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
|
||||
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入offset偏移量返回干支
|
||||
* @param offset 相对甲子的偏移量
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhi: function (offset) {
|
||||
return this.Gan[offset % 10] + this.Zhi[offset % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||
* @return day Number
|
||||
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||
*/
|
||||
getTerm: function (y, n) {
|
||||
if (y < 1900 || y > 2100) { return -1 }
|
||||
if (n < 1 || n > 24) { return -1 }
|
||||
var _table = this.sTermInfo[y - 1900]
|
||||
var _info = [
|
||||
parseInt('0x' + _table.substr(0, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(5, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(10, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(15, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(20, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(25, 5)).toString()
|
||||
]
|
||||
var _calday = [
|
||||
_info[0].substr(0, 1),
|
||||
_info[0].substr(1, 2),
|
||||
_info[0].substr(3, 1),
|
||||
_info[0].substr(4, 2),
|
||||
|
||||
_info[1].substr(0, 1),
|
||||
_info[1].substr(1, 2),
|
||||
_info[1].substr(3, 1),
|
||||
_info[1].substr(4, 2),
|
||||
|
||||
_info[2].substr(0, 1),
|
||||
_info[2].substr(1, 2),
|
||||
_info[2].substr(3, 1),
|
||||
_info[2].substr(4, 2),
|
||||
|
||||
_info[3].substr(0, 1),
|
||||
_info[3].substr(1, 2),
|
||||
_info[3].substr(3, 1),
|
||||
_info[3].substr(4, 2),
|
||||
|
||||
_info[4].substr(0, 1),
|
||||
_info[4].substr(1, 2),
|
||||
_info[4].substr(3, 1),
|
||||
_info[4].substr(4, 2),
|
||||
|
||||
_info[5].substr(0, 1),
|
||||
_info[5].substr(1, 2),
|
||||
_info[5].substr(3, 1),
|
||||
_info[5].substr(4, 2)
|
||||
]
|
||||
return parseInt(_calday[n - 1])
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历数字月份返回汉语通俗表示法
|
||||
* @param lunar month
|
||||
* @return Cn string
|
||||
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||
*/
|
||||
toChinaMonth: function (m) { // 月 => \u6708
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var s = this.nStr3[m - 1]
|
||||
s += '\u6708'// 加上月字
|
||||
return s
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历日期数字返回汉字表示法
|
||||
* @param lunar day
|
||||
* @return Cn string
|
||||
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||
*/
|
||||
toChinaDay: function (d) { // 日 => \u65e5
|
||||
var s
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '\u521d\u5341'; break
|
||||
case 20:
|
||||
s = '\u4e8c\u5341'; break
|
||||
break
|
||||
case 30:
|
||||
s = '\u4e09\u5341'; break
|
||||
break
|
||||
default:
|
||||
s = this.nStr2[Math.floor(d / 10)]
|
||||
s += this.nStr1[d % 10]
|
||||
}
|
||||
return (s)
|
||||
},
|
||||
|
||||
/**
|
||||
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||
* @param y year
|
||||
* @return Cn string
|
||||
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||
*/
|
||||
getAnimal: function (y) {
|
||||
return this.Animals[(y - 4) % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y solar year
|
||||
* @param m solar month
|
||||
* @param d solar day
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||
*/
|
||||
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
|
||||
// 年份限定、上限
|
||||
if (y < 1900 || y > 2100) {
|
||||
return -1// undefined转换为数字变为NaN
|
||||
}
|
||||
// 公历传参最下限
|
||||
if (y == 1900 && m == 1 && d < 31) {
|
||||
return -1
|
||||
}
|
||||
// 未传参 获得当天
|
||||
if (!y) {
|
||||
var objDate = new Date()
|
||||
} else {
|
||||
var objDate = new Date(y, parseInt(m) - 1, d)
|
||||
}
|
||||
var i; var leap = 0; var temp = 0
|
||||
// 修正ymd参数
|
||||
var y = objDate.getFullYear()
|
||||
var m = objDate.getMonth() + 1
|
||||
var d = objDate.getDate()
|
||||
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
|
||||
for (i = 1900; i < 2101 && offset > 0; i++) {
|
||||
temp = this.lYearDays(i)
|
||||
offset -= temp
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; i--
|
||||
}
|
||||
|
||||
// 是否今天
|
||||
var isTodayObj = new Date()
|
||||
var isToday = false
|
||||
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
|
||||
isToday = true
|
||||
}
|
||||
// 星期几
|
||||
var nWeek = objDate.getDay()
|
||||
var cWeek = this.nStr1[nWeek]
|
||||
// 数字表示周几顺应天朝周一开始的惯例
|
||||
if (nWeek == 0) {
|
||||
nWeek = 7
|
||||
}
|
||||
// 农历年
|
||||
var year = i
|
||||
var leap = this.leapMonth(i) // 闰哪个月
|
||||
var isLeap = false
|
||||
|
||||
// 效验闰月
|
||||
for (i = 1; i < 13 && offset > 0; i++) {
|
||||
// 闰月
|
||||
if (leap > 0 && i == (leap + 1) && isLeap == false) {
|
||||
--i
|
||||
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
|
||||
} else {
|
||||
temp = this.monthDays(year, i)// 计算农历普通月天数
|
||||
}
|
||||
// 解除闰月
|
||||
if (isLeap == true && i == (leap + 1)) { isLeap = false }
|
||||
offset -= temp
|
||||
}
|
||||
// 闰月导致数组下标重叠取反
|
||||
if (offset == 0 && leap > 0 && i == leap + 1) {
|
||||
if (isLeap) {
|
||||
isLeap = false
|
||||
} else {
|
||||
isLeap = true; --i
|
||||
}
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; --i
|
||||
}
|
||||
// 农历月
|
||||
var month = i
|
||||
// 农历日
|
||||
var day = offset + 1
|
||||
// 天干地支处理
|
||||
var sm = m - 1
|
||||
var gzY = this.toGanZhiYear(year)
|
||||
|
||||
// 当月的两个节气
|
||||
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
|
||||
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
|
||||
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
|
||||
|
||||
// 依据12节气修正干支月
|
||||
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
|
||||
if (d >= firstNode) {
|
||||
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
|
||||
}
|
||||
|
||||
// 传入的日期的节气与否
|
||||
var isTerm = false
|
||||
var Term = null
|
||||
if (firstNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 2]
|
||||
}
|
||||
if (secondNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 1]
|
||||
}
|
||||
// 日柱 当月一日与 1900/1/1 相差天数
|
||||
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
|
||||
var gzD = this.toGanZhi(dayCyclical + d - 1)
|
||||
// 该日期所属的星座
|
||||
var astro = this.toAstro(m, d)
|
||||
|
||||
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y lunar year
|
||||
* @param m lunar month
|
||||
* @param d lunar day
|
||||
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||
*/
|
||||
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
|
||||
var isLeapMonth = !!isLeapMonth
|
||||
var leapOffset = 0
|
||||
var leapMonth = this.leapMonth(y)
|
||||
var leapDay = this.leapDays(y)
|
||||
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
|
||||
var day = this.monthDays(y, m)
|
||||
var _day = day
|
||||
// bugFix 2016-9-25
|
||||
// if month is leap, _day use leapDays method
|
||||
if (isLeapMonth) {
|
||||
_day = this.leapDays(y, m)
|
||||
}
|
||||
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
|
||||
|
||||
// 计算农历的时间差
|
||||
var offset = 0
|
||||
for (var i = 1900; i < y; i++) {
|
||||
offset += this.lYearDays(i)
|
||||
}
|
||||
var leap = 0; var isAdd = false
|
||||
for (var i = 1; i < m; i++) {
|
||||
leap = this.leapMonth(y)
|
||||
if (!isAdd) { // 处理闰月
|
||||
if (leap <= i && leap > 0) {
|
||||
offset += this.leapDays(y); isAdd = true
|
||||
}
|
||||
}
|
||||
offset += this.monthDays(y, i)
|
||||
}
|
||||
// 转换闰月农历 需补充该年闰月的前一个月的时差
|
||||
if (isLeapMonth) { offset += day }
|
||||
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
|
||||
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
|
||||
var cY = calObj.getUTCFullYear()
|
||||
var cM = calObj.getUTCMonth() + 1
|
||||
var cD = calObj.getUTCDate()
|
||||
|
||||
return this.solar2lunar(cY, cM, cD)
|
||||
}
|
||||
}
|
||||
|
||||
export default calendar
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="uv-calendar-header uv-border-bottom">
|
||||
<text
|
||||
class="uv-calendar-header__title"
|
||||
v-if="showTitle"
|
||||
>{{ title }}</text>
|
||||
<text
|
||||
class="uv-calendar-header__subtitle"
|
||||
v-if="showSubtitle"
|
||||
>{{ subtitle }}</text>
|
||||
<view class="uv-calendar-header__weekdays">
|
||||
<text class="uv-calendar-header__weekdays__weekday">一</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">二</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">三</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">四</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">五</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">六</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">日</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
export default {
|
||||
name: 'uv-calendar-header',
|
||||
mixins: [mpMixin, mixin],
|
||||
props: {
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 副标题
|
||||
subtitle: {
|
||||
type: [String,null],
|
||||
default: ''
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示副标题
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
name() {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$show-border: 1;
|
||||
$show-border-bottom: 1;
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
.uv-calendar-header {
|
||||
padding-bottom: 4px;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: $uv-main-color;
|
||||
text-align: center;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
color: $uv-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: $uv-main-color;
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,616 @@
|
||||
<template>
|
||||
<view class="uv-calendar-month-wrapper" ref="uv-calendar-month-wrapper">
|
||||
<view v-for="(item, index) in months" :key="index" :class="[`uv-calendar-month-${index}`]"
|
||||
:ref="`uv-calendar-month-${index}`" :id="`month-${index}`">
|
||||
<text v-if="index !== 0" class="uv-calendar-month__title">{{ item.year }}年{{ item.month }}月</text>
|
||||
<view class="uv-calendar-month__days">
|
||||
<view v-if="showMark" class="uv-calendar-month__days__month-mark-wrapper">
|
||||
<text class="uv-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
|
||||
</view>
|
||||
<view class="uv-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 && 'uv-calendar-month__days__day__select--selected']">
|
||||
<view class="uv-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
|
||||
<text v-if="getTopInfo(index, index1, item1)"
|
||||
class="uv-calendar-month__days__day__select__top-info"
|
||||
:class="[item1.disabled && 'uv-calendar-month__days__day__select__top-info--disabled']"
|
||||
:style="[textStyle(item1)]"
|
||||
>{{ getTopInfo(index, index1, item1) }}</text>
|
||||
<text class="uv-calendar-month__days__day__select__info"
|
||||
:class="[item1.disabled && 'uv-calendar-month__days__day__select__info--disabled']"
|
||||
:style="[textStyle(item1)]">{{ item1.day }}</text>
|
||||
<text v-if="getBottomInfo(index, index1, item1)"
|
||||
class="uv-calendar-month__days__day__select__buttom-info"
|
||||
:class="[item1.disabled && 'uv-calendar-month__days__day__select__buttom-info--disabled']"
|
||||
:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>
|
||||
<text v-if="item1.dot" class="uv-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 { colorGradient } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js';
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
|
||||
export default {
|
||||
name: 'uv-calendar-month',
|
||||
emits:['monthSelected','updateMonthTop','change'],
|
||||
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: false
|
||||
},
|
||||
// 日期区间最多可选天数，默认无限制，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
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 每个日期的宽度
|
||||
width: 0,
|
||||
// 当前选中的日期item
|
||||
item: {},
|
||||
selected: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedChange: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setDefaultDate()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
|
||||
selectedChange() {
|
||||
return [this.minDate, this.maxDate, this.defaultDate]
|
||||
},
|
||||
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 = this.$uv.addUnit(dayWidth)
|
||||
// #endif
|
||||
style.height = this.$uv.addUnit(this.rowHeight)
|
||||
if (index2 === 0) {
|
||||
// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
|
||||
week = (week === 0 ? 7 : week) - 1
|
||||
style.marginLeft = this.$uv.addUnit(week * dayWidth)
|
||||
}
|
||||
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数组中，因为月份可能会需要补0，所以使用dateSame判断，而不用数组的includes判断
|
||||
if (this.selected.some(item => this.dateSame(item, 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) {
|
||||
const len = this.selected.length - 1
|
||||
// 第一个日期设置左上角和左下角的圆角
|
||||
if (this.dateSame(date, this.selected[0])) {
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
}
|
||||
// 最后一个日期设置右上角和右下角的圆角
|
||||
if (this.dateSame(date, this.selected[len])) {
|
||||
style.borderTopRightRadius = '3px'
|
||||
style.borderBottomRightRadius = '3px'
|
||||
}
|
||||
// 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值
|
||||
if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
|
||||
.selected[len]))) {
|
||||
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
|
||||
// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
|
||||
style.opacity = 0.7
|
||||
}
|
||||
} else if (this.selected.length === 1) {
|
||||
// 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
|
||||
// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
}
|
||||
} else {
|
||||
if (this.selected.some(item => this.dateSame(item, 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.selected.some(item => this.dateSame(item, date))) {
|
||||
style.color = '#ffffff'
|
||||
}
|
||||
if (this.mode === 'range') {
|
||||
const len = this.selected.length - 1
|
||||
// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色
|
||||
if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
|
||||
.selected[len]))) {
|
||||
style.color = this.color
|
||||
}
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
// 获取顶部的提示文字
|
||||
getTopInfo() {
|
||||
return (index1, index2, item) => {
|
||||
return item.topInfo;
|
||||
}
|
||||
},
|
||||
// 获取底部的提示文字
|
||||
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 (this.dateSame(date, this.selected[0])) return this.startText
|
||||
else return bottomInfo
|
||||
} else {
|
||||
const len = this.selected.length - 1
|
||||
// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期
|
||||
if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) &&
|
||||
len === 1) {
|
||||
// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中
|
||||
return `${this.startText}/${this.endText}`
|
||||
} else if (this.dateSame(date, this.selected[0])) {
|
||||
return this.startText
|
||||
} else if (this.dateSame(date, this.selected[len])) {
|
||||
return this.endText
|
||||
} else {
|
||||
return bottomInfo
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return bottomInfo
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// 初始化默认选中
|
||||
this.$emit('monthSelected', this.selected)
|
||||
this.$nextTick(() => {
|
||||
// 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度
|
||||
// 因为nvue下，$nextTick并不是100%可靠的
|
||||
this.$uv.sleep(10).then(() => {
|
||||
this.getWrapperWidth()
|
||||
this.getMonthRect()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 判断两个日期是否相等
|
||||
dateSame(date1, date2) {
|
||||
return dayjs(date1).isSame(dayjs(date2))
|
||||
},
|
||||
// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
|
||||
getWrapperWidth() {
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['uv-calendar-month-wrapper'], res => {
|
||||
this.width = res.size.width
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.$uvGetRect('.uv-calendar-month-wrapper').then(size => {
|
||||
this.width = size.width
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
getMonthRect() {
|
||||
// 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
|
||||
const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(
|
||||
`uv-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
|
||||
// $uvGetRect为uvui自带的节点查询简化方法，详见文档介绍：https://www.uvui.cn/js/getRect.html
|
||||
// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
|
||||
return new Promise(resolve => {
|
||||
this.$uvGetRect(`.${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
|
||||
// 对上一次选择的日期数组进行深度克隆
|
||||
let selected = this.$uv.deepClone(this.selected)
|
||||
if (this.mode === 'single') {
|
||||
// 单选情况下，让数组中的元素为当前点击的日期
|
||||
selected = [date]
|
||||
} else if (this.mode === 'multiple') {
|
||||
if (selected.some(item => this.dateSame(item, date))) {
|
||||
// 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果
|
||||
const itemIndex = selected.findIndex(item => dayjs(item).format("YYYY-MM-DD") === dayjs(date).format("YYYY-MM-DD"))
|
||||
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) {
|
||||
this.$uv.toast(this.rangePrompt)
|
||||
} else {
|
||||
this.$uv.toast(`选择天数不能超过 ${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)
|
||||
this.$emit('change',{
|
||||
day: date,
|
||||
selected: 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 (!this.$uv.test.array(this.defaultDate)) {
|
||||
defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]
|
||||
} else {
|
||||
defaultDate = [this.defaultDate[0]]
|
||||
}
|
||||
} else {
|
||||
// 如果为非数组，则不执行
|
||||
if (!this.$uv.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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
.uv-calendar-month-wrapper {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.uv-calendar-month {
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
line-height: 42px;
|
||||
height: 42px;
|
||||
color: $uv-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: $uv-error;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
&__top-info {
|
||||
color: $uv-content-color;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
&--selected {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: #cacbcd;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttom-info {
|
||||
color: $uv-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: $uv-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,145 @@
|
||||
export default {
|
||||
props: {
|
||||
// 日历顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: '日期选择'
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示副标题
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
// mode=range时，第一个日期底部的提示文字
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// mode=range时，最后一个日期底部的提示文字
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
// 自定义列表
|
||||
customList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 主题色，对底部按钮和选中日期有效
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 最小的可选日期
|
||||
minDate: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 最大可选日期
|
||||
maxDate: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||
defaultDate: {
|
||||
type: [Array, String, Date, null],
|
||||
default: null
|
||||
},
|
||||
// mode=multiple时，最多可选多少个日期
|
||||
maxCount: {
|
||||
type: [String, Number],
|
||||
default: Number.MAX_SAFE_INTEGER
|
||||
},
|
||||
// 日期行高
|
||||
rowHeight: {
|
||||
type: [String, Number],
|
||||
default: 56
|
||||
},
|
||||
// 日期格式化函数
|
||||
formatter: {
|
||||
type: [Function, null],
|
||||
default: null
|
||||
},
|
||||
// 是否显示农历
|
||||
showLunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示月份背景色
|
||||
showMark: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 确定按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
// 确认按钮处于禁用状态时的文字
|
||||
confirmDisabledText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
// 是否允许点击遮罩关闭日历
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许点击确认按钮关闭日历
|
||||
closeOnClickConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否为只读状态，只读状态下禁止选择日期
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否展示确认按钮
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 日期区间最多可选天数，默认无限制，mode = range时有效 Infinity
|
||||
maxRange: {
|
||||
type: [Number, String],
|
||||
default: Number.MAX_SAFE_INTEGER
|
||||
},
|
||||
// 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||
rangePrompt: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
|
||||
showRangePrompt: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 圆角值
|
||||
round: {
|
||||
type: [Boolean, String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 最多展示月份数量
|
||||
monthNum: {
|
||||
type: [Number, String],
|
||||
default: 3
|
||||
},
|
||||
...uni.$uv?.props?.calendar
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<uv-popup
|
||||
ref="calendarPopup"
|
||||
mode="bottom"
|
||||
closeable
|
||||
:round="round"
|
||||
:closeOnClickOverlay="closeOnClickOverlay"
|
||||
@change="popupChange"
|
||||
>
|
||||
<view class="uv-calendar">
|
||||
<uvHeader
|
||||
:title="title"
|
||||
:subtitle="subtitle"
|
||||
:showSubtitle="showSubtitle"
|
||||
:showTitle="showTitle"
|
||||
></uvHeader>
|
||||
<scroll-view
|
||||
:style="{ height: $uv.addUnit(listHeight) }"
|
||||
scroll-y
|
||||
@scroll="onScroll"
|
||||
:scroll-top="scrollTop"
|
||||
:scrollIntoView="scrollIntoView"
|
||||
>
|
||||
<uvMonth
|
||||
: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"
|
||||
ref="month"
|
||||
@monthSelected="monthSelected"
|
||||
@updateMonthTop="updateMonthTop"
|
||||
@change="changeDay"
|
||||
></uvMonth>
|
||||
</scroll-view>
|
||||
<slot name="footer" v-if="showConfirm">
|
||||
<view class="uv-calendar__confirm" @click="dddd">
|
||||
<uv-button
|
||||
shape="circle"
|
||||
:text="buttonDisabled ? confirmDisabledText : confirmText"
|
||||
:color="color"
|
||||
@click="confirm"
|
||||
:disabled="buttonDisabled"
|
||||
></uv-button>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import uvHeader from './header.vue'
|
||||
import uvMonth from './month.vue'
|
||||
import props from './props.js'
|
||||
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
|
||||
import Calendar from './calendar.js'
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中.
|
||||
* @tutorial https://www.uvui.cn/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} closeOnClickConfirm 是否允许点击确认按钮关闭日历，设置为false不影响confirm事件返回 (默认 true )
|
||||
* @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 )
|
||||
*
|
||||
* @event {Function()} confirm 点击确定按钮时触发 选择日期相关的返回参数
|
||||
* @event {Function()} close 日历关闭时触发 可定义页面关闭时的回调事件
|
||||
* @example <uv-calendar ref="calendar" :defaultDate="defaultDateMultiple" mode="multiple" @confirm="confirm">
|
||||
</uv-calendar>
|
||||
* */
|
||||
export default {
|
||||
name: 'uv-calendar',
|
||||
emits:['confirm','close','change'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
components: {
|
||||
uvHeader,
|
||||
uvMonth
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 需要显示的月份的数组
|
||||
months: [],
|
||||
// 在月份滚动区域中，当前视图中月份的index索引
|
||||
monthIndex: 0,
|
||||
// 月份滚动区域的高度
|
||||
listHeight: 0,
|
||||
// month组件中选择的日期数组
|
||||
selected: [],
|
||||
scrollIntoView: '',
|
||||
scrollTop:0,
|
||||
// 过滤处理方法
|
||||
innerFormatter: (value) => value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedChange: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setMonth()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 由于maxDate和minDate可以为字符串(2021-10-10)，或者数值(时间戳)，但是dayjs如果接受字符串形式的时间戳会有问题，这里进行处理
|
||||
innerMaxDate() {
|
||||
return this.$uv.test.number(this.maxDate)
|
||||
? Number(this.maxDate)
|
||||
: this.maxDate
|
||||
},
|
||||
innerMinDate() {
|
||||
return this.$uv.test.number(this.minDate)
|
||||
? Number(this.minDate)
|
||||
: this.minDate
|
||||
},
|
||||
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
|
||||
selectedChange() {
|
||||
return [this.innerMinDate, this.innerMaxDate, this.defaultDate]
|
||||
},
|
||||
subtitle() {
|
||||
// 初始化时，this.months为空数组，所以需要特别判断处理
|
||||
if (this.months.length) {
|
||||
return `${this.months[this.monthIndex].year}年${
|
||||
this.months[this.monthIndex].month
|
||||
}月`
|
||||
} 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()
|
||||
},
|
||||
methods: {
|
||||
dddd() {
|
||||
console.log('===')
|
||||
},
|
||||
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||||
setFormatter(e) {
|
||||
this.innerFormatter = e
|
||||
},
|
||||
// 点击日期框触发
|
||||
changeDay(e) {
|
||||
this.$emit('change',e);
|
||||
},
|
||||
// month组件内部选择日期后，通过事件通知给父组件
|
||||
monthSelected(e) {
|
||||
this.selected = e
|
||||
if (!this.showConfirm) {
|
||||
// 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还
|
||||
if (
|
||||
this.mode === 'multiple' ||
|
||||
this.mode === 'single' ||
|
||||
(this.mode === 'range' && this.selected.length >= 2)
|
||||
) {
|
||||
this.$emit('confirm', this.selected)
|
||||
}
|
||||
}
|
||||
},
|
||||
init() {
|
||||
// 校验maxDate，不能小于minDate
|
||||
if (
|
||||
this.innerMaxDate &&
|
||||
this.innerMinDate &&
|
||||
new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
|
||||
) {
|
||||
return this.$uv.error('maxDate不能小于minDate')
|
||||
}
|
||||
// 滚动区域的高度
|
||||
this.listHeight = this.rowHeight * 5 + 30
|
||||
this.setMonth()
|
||||
},
|
||||
open() {
|
||||
this.setMonth()
|
||||
this.$refs.calendarPopup.open();
|
||||
},
|
||||
popupChange(e) {
|
||||
if(!e.show) {
|
||||
this.$emit('close');
|
||||
}
|
||||
},
|
||||
// 点击确定按钮
|
||||
confirm() {
|
||||
if (!this.buttonDisabled) {
|
||||
this.$emit('confirm', this.selected)
|
||||
}
|
||||
if (this.closeOnClickConfirm) {
|
||||
this.$refs.calendarPopup.close();
|
||||
}
|
||||
},
|
||||
// 获得两个日期之间的月份数
|
||||
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 = this.$uv.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 topInfo = ''
|
||||
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),
|
||||
topInfo,
|
||||
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 = this.$uv.padZero(month)
|
||||
return `${year}-${month}` === selected
|
||||
})
|
||||
if (_index !== -1) {
|
||||
// #ifndef MP-WEIXIN
|
||||
this.$nextTick(() => {
|
||||
this.scrollIntoView = `month-${_index}`
|
||||
})
|
||||
// #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
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新月份的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 (!this.$uv.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>
|
||||
.uv-calendar {
|
||||
padding-bottom: 20rpx;
|
||||
&__confirm {
|
||||
padding: 7px 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uv-calendar",
|
||||
"displayName": "uv-calendar 日历 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.6",
|
||||
"description": "日历组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中，灵活配置，功能齐全，兼容全端。强烈推荐使用最新版日历组件，在下方跳入。",
|
||||
"keywords": [
|
||||
"uv-calendar",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"calendar",
|
||||
"日历"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-button",
|
||||
"uv-popup"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
## Calendar 日历
|
||||
|
||||
> **组件名：uv-calendar**
|
||||
|
||||
此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。灵活配置，功能齐全，兼容全端。
|
||||
|
||||
## 温馨提示：该组件不再更新，强烈推荐使用最新版日历组件：[https://www.uvui.cn/components/calendars.html](https://www.uvui.cn/components/calendars.html)。基于 `uv-ui` 插件市场首款多功能日历组件，不仅可以查看、选择日期，还可以选择任意范围内的日期、打点操作、自定义主题颜色、自定义文案、农历显示等。追求的就是完美。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/calendar.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,40 @@
|
||||
## 1.0.15（2023-11-08）
|
||||
1. 增加readonly属性，是否为只读状态，只读状态下禁止选择日期
|
||||
## 1.0.14（2023-10-12）
|
||||
1. 修复selected没有设置了info或者info设置为空字符串后，文本则无法恢复BUG
|
||||
## 1.0.13（2023-09-19）
|
||||
1. 修复range模式下，selected设置了info后选中后，导致文本不恢复的问题
|
||||
2. 修复multiple模式下，selected自定义信息的颜色没变，依然是白色
|
||||
## 1.0.12（2023-09-14）
|
||||
1. 优化
|
||||
## 1.0.11（2023-09-14）
|
||||
1. 增加allowSameDay参数，是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
2. 修复在vue2+小程序渲染时闪烁的问题
|
||||
## 1.0.10（2023-09-07）
|
||||
1. 修复国际化失效的BUG
|
||||
## 1.0.9（2023-09-01）
|
||||
1. 修复在pages.json中设置easycom会报错的BUG
|
||||
## 1.0.8（2023-08-29）
|
||||
1. 修复mainjs中设置setConfig修改属性不生效的问题，出自评论区：https://ext.dcloud.net.cn/plugin?id=12287
|
||||
## 1.0.7（2023-08-26）
|
||||
1. 去除range参数，由mode="range"替换
|
||||
2. 新增mode参数，不传 / multiple / range，分别为单日期， 多个日期，选择日期范围
|
||||
3. 与uv-calendar选择日期的功能保持一致
|
||||
## 1.0.6（2023-08-25）
|
||||
1. 修复点击返回今天按钮时，monthSwitch方法回调参数返回月份不是当天对应月份：https://github.com/climblee/uv-ui/issues/7
|
||||
## 1.0.5（2023-08-13）
|
||||
1. 修复选择月份弹窗层级的问题
|
||||
## 1.0.4（2023-08-06）
|
||||
1. 优化
|
||||
## 1.0.3（2023-08-06）
|
||||
1. 修复高度不对的BUG
|
||||
2. 修复文案在小屏幕的BUG
|
||||
## 1.0.2（2023-08-05）
|
||||
1. 增加startText参数
|
||||
2. 增加endText参数
|
||||
3. 增加selected中的参数
|
||||
4. 优化日历范围选择
|
||||
## 1.0.1（2023-08-04）
|
||||
1. 修复 自定义主题时 颜色错误的BUG
|
||||
## 1.0.0（2023-08-03）
|
||||
1. 新增 uv-calendars 新版日历发布
|
||||
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<view class="uv-calendar-body">
|
||||
<view class="uv-calendar__header">
|
||||
<view class="uv-calendar__header-btn-box" @click.stop="pre">
|
||||
<view class="uv-calendar__header-btn uv-calendar--left"></view>
|
||||
</view>
|
||||
<picker mode="date" :value="getDate" fields="month" @change="bindDateChange">
|
||||
<text class="uv-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
|
||||
</picker>
|
||||
<view class="uv-calendar__header-btn-box" @click.stop="next">
|
||||
<view class="uv-calendar__header-btn uv-calendar--right"></view>
|
||||
</view>
|
||||
<text class="uv-calendar__backtoday" @click="backToday">{{todayText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__box">
|
||||
<view v-if="showMonth" class="uv-calendar__box-bg">
|
||||
<text class="uv-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks uv-calendar__weeks-week">
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{SUNText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{monText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{TUEText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{WEDText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{THUText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{FRIText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{SATText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||
<view class="uv-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||
<calendar-item class="uv-calendar-item--hook" :weeks="weeks" :rangeInfoText="rangeInfoText(weeks)" :multiple="multiple" :range="range" :calendar="calendar" :selected="selected" :lunar="lunar" :color="color" @change="choiceDate"></calendar-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
|
||||
|
||||
import CalendarItem from './calendar-item.vue';
|
||||
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n';
|
||||
import i18nMessages from './i18n/index.js';
|
||||
const { t } = initVueI18n(i18nMessages);
|
||||
export default {
|
||||
mixins: [mpMixin, mixin],
|
||||
components: {
|
||||
CalendarItem
|
||||
},
|
||||
props: {
|
||||
date: {
|
||||
type: [String,Array],
|
||||
default: ''
|
||||
},
|
||||
nowDate: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
weeks: {
|
||||
type: [Array, Object],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getDate() {
|
||||
return Array.isArray(this.date) ? this.date[0] : this.date;
|
||||
},
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
todayText() {
|
||||
return t("uv-calender.today")
|
||||
},
|
||||
monText() {
|
||||
return t("uv-calender.MON")
|
||||
},
|
||||
TUEText() {
|
||||
return t("uv-calender.TUE")
|
||||
},
|
||||
WEDText() {
|
||||
return t("uv-calender.WED")
|
||||
},
|
||||
THUText() {
|
||||
return t("uv-calender.THU")
|
||||
},
|
||||
FRIText() {
|
||||
return t("uv-calender.FRI")
|
||||
},
|
||||
SATText() {
|
||||
return t("uv-calender.SAT")
|
||||
},
|
||||
SUNText() {
|
||||
return t("uv-calender.SUN")
|
||||
},
|
||||
rangeInfoText(weeks) {
|
||||
return weeks=> {
|
||||
if(this.allowSameDay && weeks.beforeRange && weeks.afterRange && weeks.dateEqual) {
|
||||
return this.setInfo(weeks,`${this.startText}/${this.endText}`);
|
||||
}
|
||||
if(weeks.beforeRange) {
|
||||
return this.setInfo(weeks,this.startText);
|
||||
}
|
||||
if(weeks.afterRange) {
|
||||
return this.setInfo(weeks,this.endText);
|
||||
}
|
||||
if(weeks.extraInfo?.info_old == ' ') {
|
||||
weeks.extraInfo.info = null;
|
||||
}else if(weeks.extraInfo?.info_old) {
|
||||
weeks.extraInfo.info = weeks.extraInfo.info_old;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setInfo(weeks,text) {
|
||||
this.setInfoOld(weeks);
|
||||
if(weeks.extraInfo) {
|
||||
weeks.extraInfo.info = text;
|
||||
}else {
|
||||
weeks.extraInfo = {
|
||||
info: text
|
||||
}
|
||||
}
|
||||
},
|
||||
setInfoOld(weeks) {
|
||||
if(weeks.extraInfo) {
|
||||
weeks.extraInfo.info_old = weeks.extraInfo.info ? weeks.extraInfo.info_old || weeks.extraInfo.info : ' ';
|
||||
}
|
||||
},
|
||||
bindDateChange(e) {
|
||||
this.$emit('bindDateChange', e);
|
||||
},
|
||||
backToday() {
|
||||
this.$emit('backToday');
|
||||
},
|
||||
pre() {
|
||||
this.$emit('pre');
|
||||
},
|
||||
next() {
|
||||
this.$emit('next');
|
||||
},
|
||||
choiceDate(e) {
|
||||
this.$emit('choiceDate', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
$uv-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
|
||||
$uv-border-color: #EDEDED !default;
|
||||
$uv-text-color: #333;
|
||||
$uv-bg-color-hover: #f1f1f1;
|
||||
$uv-font-size-base: 14px;
|
||||
$uv-text-color-placeholder: #808080;
|
||||
$uv-color-subtitle: #555555;
|
||||
$uv-text-color-grey: #999;
|
||||
.uv-calendar {
|
||||
@include flex(column);
|
||||
}
|
||||
.uv-calendar__mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $uv-bg-color-mask;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar--mask-show {
|
||||
opacity: 1
|
||||
}
|
||||
.uv-calendar--fixed {
|
||||
position: fixed;
|
||||
/* #ifdef APP-NVUE */
|
||||
bottom: 0;
|
||||
/* #endif */
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460px);
|
||||
/* #ifndef APP-NVUE */
|
||||
bottom: calc(var(--window-bottom));
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar--ani-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.uv-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
.uv-calendar__header {
|
||||
position: relative;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
border-bottom-color: $uv-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.uv-calendar--fixed-top {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
border-top-color: $uv-border-color;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.uv-calendar--fixed-width {
|
||||
width: 50px;
|
||||
}
|
||||
.uv-calendar__backtoday {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25rpx;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
color: $uv-text-color;
|
||||
background-color: $uv-bg-color-hover;
|
||||
}
|
||||
.uv-calendar__header-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: $uv-font-size-base;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar__header-btn-box {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.uv-calendar__header-btn {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-left-color: $uv-text-color-placeholder;
|
||||
border-left-style: solid;
|
||||
border-left-width: 2px;
|
||||
border-top-color: $uv-color-subtitle;
|
||||
border-top-style: solid;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
.uv-calendar--left {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.uv-calendar--right {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
.uv-calendar__weeks {
|
||||
position: relative;
|
||||
@include flex;
|
||||
}
|
||||
.uv-calendar__weeks-week {
|
||||
padding: 0 0 2rpx;
|
||||
}
|
||||
.uv-calendar__weeks-item {
|
||||
flex: 1;
|
||||
}
|
||||
.uv-calendar__weeks-day {
|
||||
flex: 1;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-bottom-color: #F5F5F5;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.uv-calendar__weeks-day-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
.uv-calendar__box {
|
||||
position: relative;
|
||||
}
|
||||
.uv-calendar__box-bg {
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.uv-calendar__box-bg-text {
|
||||
font-size: 200px;
|
||||
font-weight: bold;
|
||||
color: $uv-text-color-grey;
|
||||
opacity: 0.1;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 1;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<view class="uv-calendar-item__weeks-box" :class="{
|
||||
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable),
|
||||
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple) ,
|
||||
'uv-calendar-item--before-checked':weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked':weeks.afterRange,
|
||||
'uv-calendar-item--multiple':weeks.multiple
|
||||
}" :style="[itemBoxStyle]" @click="choiceDate(weeks)">
|
||||
<view class="uv-calendar-item__weeks-box-item">
|
||||
<text v-if="selected&&weeks.extraInfo&&weeks.extraInfo.badge" class="uv-calendar-item__weeks-box-circle"></text>
|
||||
<text class="uv-calendar-item__weeks-top-text" v-if="weeks.extraInfo&&weeks.extraInfo.topinfo" :style="[infoStyle('top')]">{{weeks.extraInfo&&weeks.extraInfo.topinfo}}</text>
|
||||
<text class="uv-calendar-item__weeks-box-text" :class="{
|
||||
'uv-calendar-item--isDay-text': weeks.isDay,
|
||||
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked':weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked':weeks.afterRange,
|
||||
'uv-calendar-item--multiple':weeks.multiple,
|
||||
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable)
|
||||
}" :style="[itemBoxStyle]">{{weeks.date}}</text>
|
||||
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uv-calendar-item__weeks-lunar-text" :class="{
|
||||
'uv-calendar-item--isDay-text':weeks.isDay,
|
||||
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked':weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked':weeks.afterRange,
|
||||
'uv-calendar-item--multiple':weeks.multiple
|
||||
}" :style="[itemBoxStyle]">{{todayText}}</text>
|
||||
<text v-if="lunar&&!weeks.extraInfo" class="uv-calendar-item__weeks-lunar-text" :class="{
|
||||
'uv-calendar-item--isDay-text':weeks.isDay,
|
||||
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked':weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked':weeks.afterRange,
|
||||
'uv-calendar-item--multiple':weeks.multiple,
|
||||
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable)
|
||||
}" :style="[itemBoxStyle]">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
|
||||
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uv-calendar-item__weeks-lunar-text" :class="{
|
||||
'uv-calendar-item__weeks-lunar-text--equal': weeks.dateEqual
|
||||
}" :style="[infoStyle('bottom')]">{{weeks.extraInfo.info}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { colorGradient } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js';
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const { t } = initVueI18n(i18nMessages)
|
||||
export default {
|
||||
emits: ['change'],
|
||||
props: {
|
||||
weeks: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
todayText() {
|
||||
return t("uv-calender.today")
|
||||
},
|
||||
itemBoxStyle() {
|
||||
const style = {};
|
||||
if (this.multiple) { // 多选状态
|
||||
if (this.weeks.multiple) {
|
||||
style.backgroundColor = this.color;
|
||||
style.color = '#fff';
|
||||
} else if (this.weeks.isDay) {
|
||||
style.color = this.color;
|
||||
}
|
||||
} else if (this.range) { // 范围选择
|
||||
if (this.weeks.beforeRange || this.weeks.afterRange) {
|
||||
style.backgroundColor = this.color;
|
||||
} else if (this.weeks.range) {
|
||||
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
|
||||
style.color = this.color;
|
||||
style.opacity = 0.8;
|
||||
style.borderRadius = 0;
|
||||
}
|
||||
} else {
|
||||
if (this.weeks.isDay) {
|
||||
style.color = this.color;
|
||||
}
|
||||
if (this.calendar.fullDate === this.weeks.fullDate) {
|
||||
style.backgroundColor = this.color;
|
||||
style.color = '#fff';
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
infoStyle(val) {
|
||||
return val => {
|
||||
const style = {};
|
||||
if (!this.weeks.multiple) {
|
||||
if (val == 'top') {
|
||||
style.color = this.weeks.extraInfo.topinfoColor ? this.weeks.extraInfo.topinfoColor : '#606266';
|
||||
} else if (val == 'bottom') {
|
||||
style.color = this.weeks.extraInfo.infoColor ? this.weeks.extraInfo.infoColor : '#f56c6c';
|
||||
}
|
||||
if (this.weeks.range) {
|
||||
style.color = this.color;
|
||||
}
|
||||
if (this.calendar.fullDate === this.weeks.fullDate || this.weeks.beforeRange || this.weeks.afterRange) {
|
||||
style.color = this.multiple ? style.color : '#fff';
|
||||
}
|
||||
} else {
|
||||
style.color = '#fff';
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
choiceDate(weeks) {
|
||||
if (this.weeks.extraInfo && this.weeks.extraInfo.disable) return;
|
||||
this.$emit('change', weeks)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
$uv-font-size-base: 14px;
|
||||
$uv-text-color: #333;
|
||||
$uv-font-size-sm: 24rpx;
|
||||
$uv-error: #f56c6c !default;
|
||||
$uv-opacity-disabled: 0.3;
|
||||
$uv-text-color-disable: #c0c0c0;
|
||||
$uv-primary: #3c9cff !default;
|
||||
$info-height: 32rpx;
|
||||
.uv-calendar-item__weeks-box {
|
||||
flex: 1;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.uv-calendar-item__weeks-top-text {
|
||||
height: $info-height;
|
||||
line-height: $info-height;
|
||||
font-size: $uv-font-size-sm;
|
||||
}
|
||||
.uv-calendar-item__weeks-box-text {
|
||||
font-size: $uv-font-size-base;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar-item__weeks-lunar-text {
|
||||
height: $info-height;
|
||||
line-height: $info-height;
|
||||
font-size: $uv-font-size-sm;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar-item__weeks-lunar-text--equal {
|
||||
/* #ifdef H5 */
|
||||
white-space: nowrap;
|
||||
transform: scale(.8);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
font-size: 20rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar-item__weeks-box-item {
|
||||
position: relative;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 106rpx;
|
||||
height: 56px;
|
||||
}
|
||||
.uv-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $uv-error;
|
||||
}
|
||||
.uv-calendar-item--disable {
|
||||
background-color: rgba(249, 249, 249, $uv-opacity-disabled);
|
||||
color: $uv-text-color-disable;
|
||||
}
|
||||
.uv-calendar-item--isDay-text {
|
||||
color: $uv-primary;
|
||||
}
|
||||
.uv-calendar-item--isDay {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--checked {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
// .uv-calendar-item--range {
|
||||
// background-color: $uv-primary;
|
||||
// color: #fff;
|
||||
// }
|
||||
.uv-calendar-item--before-checked {
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--after-checked {
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--multiple {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,546 @@
|
||||
/**
|
||||
* @1900-2100区间内的公历、农历互转
|
||||
* @charset UTF-8
|
||||
* @github https://github.com/jjonline/calendar.js
|
||||
* @Author Jea杨(JJonline@JJonline.Cn)
|
||||
* @Time 2014-7-21
|
||||
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
|
||||
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
|
||||
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
|
||||
* @Version 1.0.3
|
||||
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
|
||||
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
|
||||
*/
|
||||
/* eslint-disable */
|
||||
var calendar = {
|
||||
|
||||
/**
|
||||
* 农历1900-2100的润大小信息表
|
||||
* @Array Of Property
|
||||
* @return Hex
|
||||
*/
|
||||
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
|
||||
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
|
||||
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
|
||||
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
|
||||
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
|
||||
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
|
||||
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
|
||||
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
|
||||
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
|
||||
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
|
||||
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
|
||||
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
|
||||
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
|
||||
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
|
||||
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
|
||||
/** Add By JJonline@JJonline.Cn**/
|
||||
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
|
||||
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
|
||||
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
|
||||
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
|
||||
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
|
||||
0x0d520], // 2100
|
||||
|
||||
/**
|
||||
* 公历每个月份的天数普通表
|
||||
* @Array Of Property
|
||||
* @return Number
|
||||
*/
|
||||
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||
|
||||
/**
|
||||
* 天干地支之天干速查表
|
||||
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表
|
||||
* @Array Of Property
|
||||
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表<=>生肖
|
||||
* @Array Of Property
|
||||
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
|
||||
|
||||
/**
|
||||
* 24节气速查表
|
||||
* @Array Of Property
|
||||
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||
* @return Cn string
|
||||
*/
|
||||
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
|
||||
|
||||
/**
|
||||
* 1900-2100各年的24节气日期速查表
|
||||
* @Array Of Property
|
||||
* @return 0x string For splice
|
||||
*/
|
||||
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
|
||||
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
|
||||
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
|
||||
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
|
||||
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
|
||||
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
|
||||
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
|
||||
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
|
||||
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
|
||||
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
|
||||
|
||||
/**
|
||||
* 数字转中文速查表
|
||||
* @Array Of Property
|
||||
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
|
||||
|
||||
/**
|
||||
* 日期转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['初','十','廿','卅']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
|
||||
|
||||
/**
|
||||
* 月份转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
|
||||
|
||||
/**
|
||||
* 返回农历y年一整年的总天数
|
||||
* @param lunar Year
|
||||
* @return Number
|
||||
* @eg:var count = calendar.lYearDays(1987) ;//count=387
|
||||
*/
|
||||
lYearDays: function (y) {
|
||||
var i; var sum = 348
|
||||
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
|
||||
return (sum + this.leapDays(y))
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0-12)
|
||||
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||
*/
|
||||
leapMonth: function (y) { // 闰字编码 \u95f0
|
||||
return (this.lunarInfo[y - 1900] & 0xf)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0、29、30)
|
||||
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||
*/
|
||||
leapDays: function (y) {
|
||||
if (this.leapMonth(y)) {
|
||||
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
|
||||
}
|
||||
return (0)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||
* @param lunar Year
|
||||
* @return Number (-1、29、30)
|
||||
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||
*/
|
||||
monthDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
|
||||
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回公历(!)y年m月的天数
|
||||
* @param solar Year
|
||||
* @return Number (-1、28、29、30、31)
|
||||
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||
*/
|
||||
solarDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var ms = m - 1
|
||||
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
|
||||
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
|
||||
} else {
|
||||
return (this.solarMonth[ms])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 农历年份转换为干支纪年
|
||||
* @param lYear 农历年的年份数
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhiYear: function (lYear) {
|
||||
var ganKey = (lYear - 3) % 10
|
||||
var zhiKey = (lYear - 3) % 12
|
||||
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
|
||||
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
|
||||
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
|
||||
},
|
||||
|
||||
/**
|
||||
* 公历月、日判断所属星座
|
||||
* @param cMonth [description]
|
||||
* @param cDay [description]
|
||||
* @return Cn string
|
||||
*/
|
||||
toAstro: function (cMonth, cDay) {
|
||||
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
|
||||
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
|
||||
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入offset偏移量返回干支
|
||||
* @param offset 相对甲子的偏移量
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhi: function (offset) {
|
||||
return this.Gan[offset % 10] + this.Zhi[offset % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||
* @return day Number
|
||||
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||
*/
|
||||
getTerm: function (y, n) {
|
||||
if (y < 1900 || y > 2100) { return -1 }
|
||||
if (n < 1 || n > 24) { return -1 }
|
||||
var _table = this.sTermInfo[y - 1900]
|
||||
var _info = [
|
||||
parseInt('0x' + _table.substr(0, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(5, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(10, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(15, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(20, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(25, 5)).toString()
|
||||
]
|
||||
var _calday = [
|
||||
_info[0].substr(0, 1),
|
||||
_info[0].substr(1, 2),
|
||||
_info[0].substr(3, 1),
|
||||
_info[0].substr(4, 2),
|
||||
|
||||
_info[1].substr(0, 1),
|
||||
_info[1].substr(1, 2),
|
||||
_info[1].substr(3, 1),
|
||||
_info[1].substr(4, 2),
|
||||
|
||||
_info[2].substr(0, 1),
|
||||
_info[2].substr(1, 2),
|
||||
_info[2].substr(3, 1),
|
||||
_info[2].substr(4, 2),
|
||||
|
||||
_info[3].substr(0, 1),
|
||||
_info[3].substr(1, 2),
|
||||
_info[3].substr(3, 1),
|
||||
_info[3].substr(4, 2),
|
||||
|
||||
_info[4].substr(0, 1),
|
||||
_info[4].substr(1, 2),
|
||||
_info[4].substr(3, 1),
|
||||
_info[4].substr(4, 2),
|
||||
|
||||
_info[5].substr(0, 1),
|
||||
_info[5].substr(1, 2),
|
||||
_info[5].substr(3, 1),
|
||||
_info[5].substr(4, 2)
|
||||
]
|
||||
return parseInt(_calday[n - 1])
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历数字月份返回汉语通俗表示法
|
||||
* @param lunar month
|
||||
* @return Cn string
|
||||
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||
*/
|
||||
toChinaMonth: function (m) { // 月 => \u6708
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var s = this.nStr3[m - 1]
|
||||
s += '\u6708'// 加上月字
|
||||
return s
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历日期数字返回汉字表示法
|
||||
* @param lunar day
|
||||
* @return Cn string
|
||||
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||
*/
|
||||
toChinaDay: function (d) { // 日 => \u65e5
|
||||
var s
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '\u521d\u5341'; break
|
||||
case 20:
|
||||
s = '\u4e8c\u5341'; break
|
||||
break
|
||||
case 30:
|
||||
s = '\u4e09\u5341'; break
|
||||
break
|
||||
default :
|
||||
s = this.nStr2[Math.floor(d / 10)]
|
||||
s += this.nStr1[d % 10]
|
||||
}
|
||||
return (s)
|
||||
},
|
||||
|
||||
/**
|
||||
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||
* @param y year
|
||||
* @return Cn string
|
||||
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||
*/
|
||||
getAnimal: function (y) {
|
||||
return this.Animals[(y - 4) % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y solar year
|
||||
* @param m solar month
|
||||
* @param d solar day
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||
*/
|
||||
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
|
||||
// 年份限定、上限
|
||||
if (y < 1900 || y > 2100) {
|
||||
return -1// undefined转换为数字变为NaN
|
||||
}
|
||||
// 公历传参最下限
|
||||
if (y == 1900 && m == 1 && d < 31) {
|
||||
return -1
|
||||
}
|
||||
// 未传参 获得当天
|
||||
if (!y) {
|
||||
var objDate = new Date()
|
||||
} else {
|
||||
var objDate = new Date(y, parseInt(m) - 1, d)
|
||||
}
|
||||
var i; var leap = 0; var temp = 0
|
||||
// 修正ymd参数
|
||||
var y = objDate.getFullYear()
|
||||
var m = objDate.getMonth() + 1
|
||||
var d = objDate.getDate()
|
||||
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
|
||||
for (i = 1900; i < 2101 && offset > 0; i++) {
|
||||
temp = this.lYearDays(i)
|
||||
offset -= temp
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; i--
|
||||
}
|
||||
|
||||
// 是否今天
|
||||
var isTodayObj = new Date()
|
||||
var isToday = false
|
||||
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
|
||||
isToday = true
|
||||
}
|
||||
// 星期几
|
||||
var nWeek = objDate.getDay()
|
||||
var cWeek = this.nStr1[nWeek]
|
||||
// 数字表示周几顺应天朝周一开始的惯例
|
||||
if (nWeek == 0) {
|
||||
nWeek = 7
|
||||
}
|
||||
// 农历年
|
||||
var year = i
|
||||
var leap = this.leapMonth(i) // 闰哪个月
|
||||
var isLeap = false
|
||||
|
||||
// 效验闰月
|
||||
for (i = 1; i < 13 && offset > 0; i++) {
|
||||
// 闰月
|
||||
if (leap > 0 && i == (leap + 1) && isLeap == false) {
|
||||
--i
|
||||
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
|
||||
} else {
|
||||
temp = this.monthDays(year, i)// 计算农历普通月天数
|
||||
}
|
||||
// 解除闰月
|
||||
if (isLeap == true && i == (leap + 1)) { isLeap = false }
|
||||
offset -= temp
|
||||
}
|
||||
// 闰月导致数组下标重叠取反
|
||||
if (offset == 0 && leap > 0 && i == leap + 1) {
|
||||
if (isLeap) {
|
||||
isLeap = false
|
||||
} else {
|
||||
isLeap = true; --i
|
||||
}
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; --i
|
||||
}
|
||||
// 农历月
|
||||
var month = i
|
||||
// 农历日
|
||||
var day = offset + 1
|
||||
// 天干地支处理
|
||||
var sm = m - 1
|
||||
var gzY = this.toGanZhiYear(year)
|
||||
|
||||
// 当月的两个节气
|
||||
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
|
||||
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
|
||||
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
|
||||
|
||||
// 依据12节气修正干支月
|
||||
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
|
||||
if (d >= firstNode) {
|
||||
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
|
||||
}
|
||||
|
||||
// 传入的日期的节气与否
|
||||
var isTerm = false
|
||||
var Term = null
|
||||
if (firstNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 2]
|
||||
}
|
||||
if (secondNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 1]
|
||||
}
|
||||
// 日柱 当月一日与 1900/1/1 相差天数
|
||||
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
|
||||
var gzD = this.toGanZhi(dayCyclical + d - 1)
|
||||
// 该日期所属的星座
|
||||
var astro = this.toAstro(m, d)
|
||||
|
||||
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y lunar year
|
||||
* @param m lunar month
|
||||
* @param d lunar day
|
||||
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||
*/
|
||||
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
|
||||
var isLeapMonth = !!isLeapMonth
|
||||
var leapOffset = 0
|
||||
var leapMonth = this.leapMonth(y)
|
||||
var leapDay = this.leapDays(y)
|
||||
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
|
||||
var day = this.monthDays(y, m)
|
||||
var _day = day
|
||||
// bugFix 2016-9-25
|
||||
// if month is leap, _day use leapDays method
|
||||
if (isLeapMonth) {
|
||||
_day = this.leapDays(y, m)
|
||||
}
|
||||
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
|
||||
|
||||
// 计算农历的时间差
|
||||
var offset = 0
|
||||
for (var i = 1900; i < y; i++) {
|
||||
offset += this.lYearDays(i)
|
||||
}
|
||||
var leap = 0; var isAdd = false
|
||||
for (var i = 1; i < m; i++) {
|
||||
leap = this.leapMonth(y)
|
||||
if (!isAdd) { // 处理闰月
|
||||
if (leap <= i && leap > 0) {
|
||||
offset += this.leapDays(y); isAdd = true
|
||||
}
|
||||
}
|
||||
offset += this.monthDays(y, i)
|
||||
}
|
||||
// 转换闰月农历 需补充该年闰月的前一个月的时差
|
||||
if (isLeapMonth) { offset += day }
|
||||
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
|
||||
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
|
||||
var cY = calObj.getUTCFullYear()
|
||||
var cM = calObj.getUTCMonth() + 1
|
||||
var cD = calObj.getUTCDate()
|
||||
|
||||
return this.solar2lunar(cY, cM, cD)
|
||||
}
|
||||
}
|
||||
|
||||
export default calendar
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"uv-calender.ok": "ok",
|
||||
"uv-calender.cancel": "cancel",
|
||||
"uv-calender.today": "today",
|
||||
"uv-calender.MON": "MON",
|
||||
"uv-calender.TUE": "TUE",
|
||||
"uv-calender.WED": "WED",
|
||||
"uv-calender.THU": "THU",
|
||||
"uv-calender.FRI": "FRI",
|
||||
"uv-calender.SAT": "SAT",
|
||||
"uv-calender.SUN": "SUN"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"uv-calender.ok": "确定",
|
||||
"uv-calender.cancel": "取消",
|
||||
"uv-calender.today": "今日",
|
||||
"uv-calender.SUN": "日",
|
||||
"uv-calender.MON": "一",
|
||||
"uv-calender.TUE": "二",
|
||||
"uv-calender.WED": "三",
|
||||
"uv-calender.THU": "四",
|
||||
"uv-calender.FRI": "五",
|
||||
"uv-calender.SAT": "六"
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"uv-calender.ok": "確定",
|
||||
"uv-calender.cancel": "取消",
|
||||
"uv-calender.today": "今日",
|
||||
"uv-calender.SUN": "日",
|
||||
"uv-calender.MON": "一",
|
||||
"uv-calender.TUE": "二",
|
||||
"uv-calender.WED": "三",
|
||||
"uv-calender.THU": "四",
|
||||
"uv-calender.FRI": "五",
|
||||
"uv-calender.SAT": "六"
|
||||
}
|
||||
@@ -0,0 +1,435 @@
|
||||
import CALENDAR from './calendar.js'
|
||||
class Calendar {
|
||||
constructor({
|
||||
date,
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range,
|
||||
multiple,
|
||||
allowSameDay
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDate(new Date()) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 范围开始
|
||||
this.startDate = startDate
|
||||
// 范围结束
|
||||
this.endDate = endDate
|
||||
this.range = range
|
||||
this.multiple = multiple
|
||||
this.allowSameDay = allowSameDay
|
||||
// 多选状态
|
||||
this.cleanRangeStatus()
|
||||
// 范围状态
|
||||
this.cleanMultipleStatus()
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
// this._getWeek(this.date.fullDate)
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date, status) {
|
||||
if (this.range && status == 'init') {
|
||||
this.cleanRangeStatus();
|
||||
if (Array.isArray(date)) {
|
||||
this.rangeStatus.before = date[0];
|
||||
this.rangeStatus.after = date.length > 1 ? date[date.length - 1] : '';
|
||||
if (this.rangeStatus.after && this.dateCompare(this.rangeStatus.before, this.rangeStatus.after)) {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.before, this.rangeStatus.after)
|
||||
}
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this.rangeStatus.before = this.selectDate.fullDate;
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
} else if (this.multiple && status == 'init') {
|
||||
this.cleanMultipleStatus();
|
||||
if (Array.isArray(date)) {
|
||||
this.multipleStatus.data = date;
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this.multipleStatus.data = [this.selectDate.fullDate];
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(date)) {
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanRangeStatus() {
|
||||
this.rangeStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanMultipleStatus() {
|
||||
this.multipleStatus = {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 重置开始日期
|
||||
*/
|
||||
resetSatrtDate(startDate) {
|
||||
// 范围开始
|
||||
this.startDate = startDate
|
||||
}
|
||||
/**
|
||||
* 重置结束日期
|
||||
*/
|
||||
resetEndDate(endDate) {
|
||||
// 范围结束
|
||||
this.endDate = endDate
|
||||
}
|
||||
/**
|
||||
* 获取任意时间
|
||||
*/
|
||||
getDate(date, AddDayCount = 0, str = 'day') {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
if (typeof date !== 'object') {
|
||||
date = date.replace(/-/g, '/')
|
||||
}
|
||||
const dd = new Date(date)
|
||||
switch (str) {
|
||||
case 'day':
|
||||
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
break
|
||||
case 'month':
|
||||
if (dd.getDate() === 31 && AddDayCount > 0) {
|
||||
dd.setDate(dd.getDate() + AddDayCount)
|
||||
} else {
|
||||
const preMonth = dd.getMonth()
|
||||
dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
|
||||
const nextMonth = dd.getMonth()
|
||||
// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||
if (AddDayCount < 0 && preMonth !== 0 && nextMonth - preMonth > AddDayCount) {
|
||||
dd.setMonth(nextMonth + (nextMonth - preMonth + AddDayCount))
|
||||
}
|
||||
// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||
if (AddDayCount > 0 && nextMonth - preMonth > AddDayCount) {
|
||||
dd.setMonth(nextMonth - (nextMonth - preMonth - AddDayCount))
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'year':
|
||||
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
break
|
||||
}
|
||||
const y = dd.getFullYear()
|
||||
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
|
||||
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
||||
return {
|
||||
fullDate: y + '-' + m + '-' + d,
|
||||
year: y,
|
||||
month: m,
|
||||
date: d,
|
||||
day: dd.getDay()
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取上月剩余天数
|
||||
*/
|
||||
_getLastMonthDays(firstDay, full) {
|
||||
let dateArr = []
|
||||
for (let i = firstDay; i > 0; i--) {
|
||||
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
|
||||
dateArr.push({
|
||||
date: beforeDate,
|
||||
month: full.month - 1,
|
||||
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取本月天数
|
||||
*/
|
||||
_currentMonthDys(dateData, full) {
|
||||
let dateArr = []
|
||||
let fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= dateData; i++) {
|
||||
let nowDate = full.year + '-' + (full.month < 10 ? full.month : full.month) + '-' + (i < 10 ? '0' + i : i)
|
||||
// 是否今天
|
||||
let isDay = fullDate === nowDate
|
||||
// 获取打点信息
|
||||
let info = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(nowDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
|
||||
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
|
||||
disableBefore = this.dateCompare(this.startDate, nowDate)
|
||||
}
|
||||
if (this.endDate) {
|
||||
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
|
||||
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
|
||||
disableAfter = this.dateCompare(nowDate, this.endDate)
|
||||
}
|
||||
let ranges = this.rangeStatus.data
|
||||
let checked = false
|
||||
let rangesStatus = -1
|
||||
if (this.range) {
|
||||
if (ranges) {
|
||||
rangesStatus = ranges.findIndex((item) => {
|
||||
return this.dateEqual(item, nowDate)
|
||||
})
|
||||
}
|
||||
if (rangesStatus !== -1) {
|
||||
checked = true
|
||||
}
|
||||
}
|
||||
let multiples = this.multipleStatus.data
|
||||
let checked_multiple = false
|
||||
let multiplesStatus = -1
|
||||
if (this.multiple) {
|
||||
if (multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, nowDate)
|
||||
})
|
||||
}
|
||||
if (multiplesStatus !== -1) {
|
||||
checked_multiple = true
|
||||
}
|
||||
}
|
||||
let data = {
|
||||
fullDate: nowDate,
|
||||
year: full.year,
|
||||
date: i,
|
||||
range: this.range ? checked : false,
|
||||
multiple: this.multiple ? checked_multiple : false,
|
||||
beforeRange: this.dateEqual(this.rangeStatus.before, nowDate),
|
||||
afterRange: this.dateEqual(this.rangeStatus.after, nowDate),
|
||||
dateEqual: this.range && checked && this.dateEqual(this.rangeStatus.before, this.rangeStatus.after),
|
||||
month: full.month,
|
||||
lunar: this.getlunar(full.year, full.month, i),
|
||||
disable: !(disableBefore && disableAfter),
|
||||
isDay
|
||||
}
|
||||
if (info) {
|
||||
data.extraInfo = info
|
||||
}
|
||||
dateArr.push(data)
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取下月天数
|
||||
*/
|
||||
_getNextMonthDays(surplus, full) {
|
||||
let dateArr = []
|
||||
for (let i = 1; i < surplus + 1; i++) {
|
||||
dateArr.push({
|
||||
date: i,
|
||||
month: Number(full.month) + 1,
|
||||
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
} else if (Array.isArray(date)) {
|
||||
date = date[0]
|
||||
}
|
||||
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
|
||||
return dateInfo
|
||||
}
|
||||
/**
|
||||
* 比较时间大小
|
||||
*/
|
||||
dateCompare(startDate, endDate) {
|
||||
// 计算截止时间
|
||||
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||
if (startDate <= endDate) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
// 计算截止时间
|
||||
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||
if (before.getTime() - after.getTime() === 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 比较after时间是否大于before时间
|
||||
*/
|
||||
dateAfterLgBefore(before, after) {
|
||||
// 计算截止时间
|
||||
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||
if (after.getTime() - before.getTime() > 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
/**
|
||||
* 计算阴历日期显示
|
||||
*/
|
||||
getlunar(year, month, date) {
|
||||
return CALENDAR.solar2lunar(year, month, date)
|
||||
}
|
||||
/**
|
||||
* 设置打点
|
||||
*/
|
||||
setSelectInfo(data, value) {
|
||||
this.selected = value
|
||||
this._getWeek(data)
|
||||
}
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
if (!this.multiple) return
|
||||
let multiples = this.multipleStatus.data;
|
||||
const findIndex = multiples.findIndex(item => this.dateEqual(fullDate, item));
|
||||
if (findIndex < 0) {
|
||||
this.multipleStatus.data = this.multipleStatus.data.concat([fullDate]);
|
||||
} else {
|
||||
this.multipleStatus.data.splice(findIndex, 1);
|
||||
}
|
||||
this._getWeek(fullDate)
|
||||
}
|
||||
/**
|
||||
* 获取范围状态
|
||||
*/
|
||||
setRange(fullDate) {
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.rangeStatus
|
||||
if (!this.range) return
|
||||
if (before && after) {
|
||||
this.cleanRangeStatus();
|
||||
this.rangeStatus.before = fullDate
|
||||
} else {
|
||||
if (!before) {
|
||||
this.rangeStatus.before = fullDate
|
||||
} else {
|
||||
if (this.allowSameDay && this.dateEqual(before, fullDate)) {
|
||||
this.rangeStatus.after = fullDate
|
||||
} else if (!this.dateAfterLgBefore(this.rangeStatus.before, fullDate)) {
|
||||
this.cleanRangeStatus();
|
||||
this.rangeStatus.before = fullDate
|
||||
this._getWeek(fullDate)
|
||||
return;
|
||||
}
|
||||
this.rangeStatus.after = fullDate
|
||||
if (this.dateCompare(this.rangeStatus.before, this.rangeStatus.after)) {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.before, this.rangeStatus.after);
|
||||
} else {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.after, this.rangeStatus.before);
|
||||
}
|
||||
}
|
||||
}
|
||||
this._getWeek(fullDate)
|
||||
}
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
_getWeek(dateData) {
|
||||
const {
|
||||
year,
|
||||
month
|
||||
} = this.getDate(dateData)
|
||||
let firstDay = new Date(year, month - 1, 1).getDay()
|
||||
let currentDay = new Date(year, month, 0).getDate()
|
||||
let dates = {
|
||||
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
|
||||
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
|
||||
nextMonthDays: [], // 下个月开始几天
|
||||
weeks: []
|
||||
}
|
||||
let canlender = []
|
||||
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
|
||||
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
|
||||
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
|
||||
let weeks = {}
|
||||
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
|
||||
for (let i = 0; i < canlender.length; i++) {
|
||||
if (i % 7 === 0) {
|
||||
weeks[parseInt(i / 7)] = new Array(7)
|
||||
}
|
||||
weeks[parseInt(i / 7)][i % 7] = canlender[i]
|
||||
}
|
||||
this.canlender = canlender
|
||||
this.weeks = weeks
|
||||
}
|
||||
//静态方法
|
||||
// static init(date) {
|
||||
// if (!this.instance) {
|
||||
// this.instance = new Calendar(date);
|
||||
// }
|
||||
// return this.instance;
|
||||
// }
|
||||
}
|
||||
export default Calendar
|
||||
@@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<view class="uv-calendar">
|
||||
<view class="uv-calendar__content" v-if="insert">
|
||||
<calendar-body
|
||||
:date="date"
|
||||
:nowDate="nowDate"
|
||||
:weeks="weeks"
|
||||
:calendar="calendar"
|
||||
:selected="selected"
|
||||
:lunar="lunar"
|
||||
:showMonth="showMonth"
|
||||
:color="color"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:range="range"
|
||||
:multiple="multiple"
|
||||
:allowSameDay="allowSameDay"
|
||||
@bindDateChange="bindDateChange"
|
||||
@pre="pre"
|
||||
@next="next"
|
||||
@backToday="backToday"
|
||||
@choiceDate="choiceDate"
|
||||
></calendar-body>
|
||||
</view>
|
||||
<uv-popup ref="popup" mode="bottom" v-else :round="round" z-index="998" :close-on-click-overlay="closeOnClickOverlay" @maskClick="maskClick">
|
||||
<view style="min-height: 100px;">
|
||||
<uv-toolbar
|
||||
:show="true"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="getConfirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:title="title"
|
||||
@cancel="close"
|
||||
@confirm="confirm"></uv-toolbar>
|
||||
<view class="line"></view>
|
||||
<calendar-body
|
||||
:nowDate="nowDate"
|
||||
:weeks="weeks"
|
||||
:calendar="calendar"
|
||||
:selected="selected"
|
||||
:lunar="lunar"
|
||||
:showMonth="showMonth"
|
||||
:color="color"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:range="range"
|
||||
:multiple="multiple"
|
||||
:allowSameDay="allowSameDay"
|
||||
@bindDateChange="bindDateChange"
|
||||
@pre="pre"
|
||||
@next="next"
|
||||
@backToday="backToday"
|
||||
@choiceDate="choiceDate"
|
||||
></calendar-body>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=uv-calendar
|
||||
* @property {String} date 自定义当前时间，默认为今天
|
||||
* @property {Boolean} lunar 显示农历
|
||||
* @property {String} startDate 日期选择范围-开始日期
|
||||
* @property {String} endDate 日期选择范围-结束日期
|
||||
* @property {String} mode = [不传 | multiple | range ] 多个日期 | 选择日期范围 默认单日期
|
||||
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||
* @value true 弹窗模式
|
||||
* @value false 插入模式
|
||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||
* @property {String} cancelColor 取消按钮颜色
|
||||
* @property {String} confirmColor 确认按钮颜色，默认#3c9cff
|
||||
* @property {String} title 头部工具条中间的标题文字
|
||||
* @property {String} color 主题色，默认#3c9cff
|
||||
* @property {Number} round :insert="false"时的圆角
|
||||
* @property {Boolean} closeOnClickOverlay 点击遮罩是否关闭
|
||||
* @property {String} startText range为true时，第一个日期底部的提示文字
|
||||
* @property {String} endText range为true时，最后一个日期底部的提示文字
|
||||
* @property {String} readonly 是否为只读状态，只读状态下禁止选择日期，默认false
|
||||
*
|
||||
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||
* @event {Function} monthSwitch 切换月份时触发
|
||||
*
|
||||
* @example <uv-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||
*/
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
|
||||
import Calendar from './util.js';
|
||||
import calendarBody from './calendar-body.vue';
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n';
|
||||
import i18nMessages from './i18n/index.js';
|
||||
const { t } = initVueI18n(i18nMessages);
|
||||
export default {
|
||||
components: {
|
||||
calendarBody
|
||||
},
|
||||
mixins: [mpMixin, mixin],
|
||||
emits: ['close', 'confirm', 'change', 'monthSwitch'],
|
||||
props: {
|
||||
// 取消按钮颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 确认按钮颜色，range模式下未选全显示灰色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 默认显示日期
|
||||
date: {
|
||||
type: [String,Array],
|
||||
default: ''
|
||||
},
|
||||
// 打点等设置
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否显示农历
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 可选择的起始日期
|
||||
startDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 可选择的结束日期
|
||||
endDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// multiple - 选择多日期 range - 选择日期范围
|
||||
mode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否插入模式
|
||||
insert: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示月份为背景
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹窗模式是否清空上次选择内容
|
||||
clearDate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹窗圆角
|
||||
round: {
|
||||
type: [Number,String],
|
||||
default: 8
|
||||
},
|
||||
// 点击遮罩是否关闭弹窗
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// range为true时，第一个日期底部的提示文字
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// range为true时，最后一个日期底部的提示文字
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.calendars
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
weeks: [],
|
||||
calendar: {},
|
||||
nowDate: '',
|
||||
allowConfirm: false,
|
||||
multiple: false,
|
||||
range: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
confirmText() {
|
||||
return t("uv-calender.ok")
|
||||
},
|
||||
cancelText() {
|
||||
return t("uv-calender.cancel")
|
||||
},
|
||||
getConfirmColor() {
|
||||
if(this.range || this.multiple || this.readonly) {
|
||||
return this.allowConfirm? this.confirmColor: '#999'
|
||||
}else {
|
||||
return this.confirmColor;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
date(newVal) {
|
||||
this.init(newVal)
|
||||
},
|
||||
startDate(val) {
|
||||
this.cale.resetSatrtDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
endDate(val) {
|
||||
this.cale.resetEndDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
selected(newVal) {
|
||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||
this.weeks = this.cale.weeks
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setMode();
|
||||
this.cale = new Calendar({
|
||||
selected: this.selected,
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
range: this.range,
|
||||
multiple: this.multiple,
|
||||
allowSameDay: this.allowSameDay
|
||||
})
|
||||
this.init(this.date)
|
||||
},
|
||||
methods: {
|
||||
setMode() {
|
||||
switch (this.mode){
|
||||
case 'range':
|
||||
this.range = true;
|
||||
break;
|
||||
case 'multiple':
|
||||
this.multiple = true;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
async open() {
|
||||
if (this.clearDate && !this.insert) {
|
||||
this.cale.cleanRangeStatus()
|
||||
this.init(this.date)
|
||||
}
|
||||
if(!this.insert){
|
||||
this.$refs.popup.open();
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close();
|
||||
this.$emit('close');
|
||||
},
|
||||
confirm() {
|
||||
if(this.readonly) {
|
||||
return;
|
||||
} else if(this.range && !this.cale.rangeStatus.after) {
|
||||
return;
|
||||
} else if(this.multiple && this.cale.multipleStatus.data.length == 0){
|
||||
return;
|
||||
}
|
||||
this.setEmit('confirm');
|
||||
this.close()
|
||||
},
|
||||
maskClick() {
|
||||
if(this.closeOnClickOverlay) {
|
||||
this.$emit('close');
|
||||
}
|
||||
},
|
||||
bindDateChange(e) {
|
||||
const value = e.detail.value + '-1'
|
||||
this.setDate(value)
|
||||
|
||||
const { year, month } = this.cale.getDate(value)
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 初始化日期显示
|
||||
* @param {Object} date
|
||||
*/
|
||||
init(date) {
|
||||
if(this.range) {
|
||||
// 重置范围选择状态
|
||||
this.cale.cleanRangeStatus();
|
||||
}else if(this.multiple){
|
||||
// 重置多选状态
|
||||
this.cale.cleanMultipleStatus();
|
||||
}
|
||||
this.cale.setDate(date,'init')
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.calendar = this.cale.getInfo(date)
|
||||
this.changeConfirmStatus();
|
||||
},
|
||||
/**
|
||||
* 变化触发
|
||||
*/
|
||||
change() {
|
||||
this.changeConfirmStatus();
|
||||
if (!this.insert) return
|
||||
this.setEmit('change')
|
||||
},
|
||||
changeConfirmStatus() {
|
||||
if(this.readonly) {
|
||||
this.allowConfirm = false;
|
||||
} else if (this.range) {
|
||||
this.allowConfirm = this.cale.rangeStatus.after ? true : false;
|
||||
} else if(this.multiple) {
|
||||
this.allowConfirm = this.cale.multipleStatus.data.length > 0 ? true : false;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 选择月份触发
|
||||
*/
|
||||
monthSwitch() {
|
||||
let {
|
||||
year,
|
||||
month
|
||||
} = this.nowDate
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month: Number(month)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 派发事件
|
||||
* @param {Object} name
|
||||
*/
|
||||
setEmit(name) {
|
||||
let {
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fullDate,
|
||||
lunar,
|
||||
extraInfo
|
||||
} = this.calendar
|
||||
this.$emit(name, {
|
||||
range: this.cale.rangeStatus,
|
||||
multiple: this.cale.multipleStatus,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fulldate: fullDate,
|
||||
lunar,
|
||||
extraInfo: extraInfo || {}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 选择天触发
|
||||
* @param {Object} weeks
|
||||
*/
|
||||
choiceDate(weeks) {
|
||||
if (weeks.disable || this.readonly) return
|
||||
this.calendar = weeks
|
||||
// 设置范围选择
|
||||
this.cale.setRange(this.calendar.fullDate)
|
||||
// 设置多选
|
||||
this.cale.setMultiple(this.calendar.fullDate);
|
||||
this.weeks = this.cale.weeks
|
||||
this.change()
|
||||
},
|
||||
/**
|
||||
* 回到今天
|
||||
*/
|
||||
backToday() {
|
||||
const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
|
||||
const date = this.cale.getDate(new Date())
|
||||
const todayYearMonth = `${date.year}-${date.month}`
|
||||
this.init(date.fullDate)
|
||||
if (nowYearMonth !== todayYearMonth) {
|
||||
this.monthSwitch()
|
||||
}
|
||||
this.change()
|
||||
},
|
||||
/**
|
||||
* 上个月
|
||||
*/
|
||||
pre() {
|
||||
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
||||
this.setDate(preDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 下个月
|
||||
*/
|
||||
next() {
|
||||
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
||||
this.setDate(nextDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
this.cale.setDate(date)
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
$uv-border-color: #EDEDED !default;
|
||||
.uv-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
.line {
|
||||
width: 750rpx;
|
||||
height: 1px;
|
||||
border-bottom-color: $uv-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uv-calendars",
|
||||
"displayName": "uv-calendars 最新日历 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.15",
|
||||
"description": "新版本uv-calendars，不仅拥有老版本的所有功能，还增加了更加适用的插入页面等强大功能，且更加简洁。查看日期、选择单个或多个或任意范围日期，打点操作，自定义文案，自定义主题等强大功能。",
|
||||
"keywords": [
|
||||
"uv-ui",
|
||||
"uvui",
|
||||
"日历",
|
||||
"打卡",
|
||||
"日历选择"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration":{
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-popup",
|
||||
"uv-toolbar"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
## Calendars 全新日历
|
||||
|
||||
> **组件名：uv-calendars**
|
||||
|
||||
为了解决老版本`uv-calendar`性能问题，特别是对日期选择范围有很大限制，体验不友好等缺点。于是有了新版日历组件。
|
||||
|
||||
新版本`uv-calendars`，不仅拥有老版本的所有功能，还增加了更加适用的插入页面等强大功能，且更加简洁。查看日期、选择单个或多个或任意范围日期，打点操作，自定义文案，自定义主题等强大功能。
|
||||
|
||||
常用场景：酒店日期预订、火车机票选择购买日期、上下班打卡等。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/calendars.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
Reference in New Issue
Block a user