TmOct5/dou_fire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

调整筛选组件

Browse Source
This commit is contained in:
唐明明
2023-03-22 13:41:02 +08:00
parent 7de206c0a2
commit 0dc909ea05
30 changed files with 2699 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
uni_modules/oct-calendar-picker/changelog.md Normal file
View File

455
uni_modules/oct-calendar-picker/components/oct-calendar-picker/oct-calendar-picker.vue Normal file
View File

@@ -0,0 +1,455 @@
<template>
<view>
<uni-popup ref="calendarPikerPopup">
<view class="calendar--piker">
<!-- header -->
<view class="calendar--piker--header">
<view class="calendar--piker--tabs">
<view class="calendar--piker--tabs--item" :class="{ 'acitve': tabVal == item.val }" v-for="(item, index) in tabs" :key="index" @click="onCalendarTabs(item)">{{item.title}}</view>
</view>
<uni-icons type="closeempty" size="20" color="#999" @click="close"></uni-icons>
</view>
<!-- 按月筛选 -->
<view class="calendar--piker--content" v-if="tabVal == 0">
<picker-view :indicator-style="indicatorStyle" :value="monthValue" @change="bindChangeMonth" class="calendar--piker--content--view">
<picker-view-column>
<view class="item" v-for="(item,index) in monthYM.years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in monthYM.months" :key="index">{{item}}月</view>
</picker-view-column>
</picker-view>
</view>
<!-- 按日筛选 -->
<view class="calendar--piker--content" v-if="tabVal == 1">
<view class="calendar--piker--content--subtitle">交易时间</view>
<view class="calendar--piker--content--flex">
<view class="item" :class="{ 'active': recentlyNum == 3 }" @click="getRecentlyDate(3)">近三月</view>
<view class="item" :class="{ 'active': recentlyNum == 6 }" @click="getRecentlyDate(6)">近半年</view>
<view class="item" :class="{ 'active': recentlyNum == 12 }" @click="getRecentlyDate(12)">近一年</view>
</view>
<view class="calendar--piker--content--subtitle">自定义</view>
<view class="calendar--piker--content--date">
<view class="date-item" @click="onDateTypeKey('start')" :class="{'date--active': dateTypeKey == 'start'}">{{ startDate || '开始时间' }}</view>
<view class="date-text">至</view>
<view class="date-item" @click="onDateTypeKey('end')" :class="{'date--active': dateTypeKey == 'end'}">{{ endDate || '结束时间' }}</view>
</view>
<view class="calendar--piker--content--hint">最长可查询一年的账户记录</view>
<block v-if="dateTypeKey == 'start'">
<picker-view :indicator-style="indicatorStyle" :value="startValue" @change="bindChange" class="calendar--piker--content--view">
<picker-view-column>
<view class="item" v-for="(item,index) in startYMD.years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in startYMD.months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in startYMD.days" :key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</block>
<block v-if="dateTypeKey == 'end'">
<picker-view :indicator-style="indicatorStyle" :value="endValue" @change="bindChange" class="calendar--piker--content--view">
<picker-view-column>
<view class="item" v-for="(item,index) in endYMD.years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in endYMD.months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in endYMD.days" :key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</block>
</view>
<!-- 确定 -->
<view class="calendar--piker--btn">
<button size="default" @click="onCalendarChange">确定</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
/*
*
*
* */
var moment = require('moment')
export default{
data(){
const monthYM = { years: [], months: [] }
const monthValue = [ 0, 0 ]
for(let i = 2022; i <= moment().get('year'); i++){
monthYM.years.push(i)
}
for(let i = 1; i <= (moment().get('month') + 1); i++){
monthYM.months.push(i)
}
monthValue[0] = monthYM.years.length - 1;
monthValue[1] = monthYM.months.length - 1;
return {
tabs : [
{ val: 0, title: '月份选择' },
{ val: 1, title: '自定义时间' }
],
tabVal : 0,
// 月份选择
monthYM,
monthValue,
// 自定义时间
startYMD : { years: [], months: [], days: [] },
startValue : [0,0,0],
startDate : '',
endYMD : { years: [], months: [], days: [] },
endValue : [0,0,0],
endDate : '',
dateTypeKey : 'start',
indicatorStyle : `height: 35px;`,
// 快捷筛选选项
recentlyNum : ''
}
},
created() {
let year = moment().get('year')
let month = moment().get('month') + 1
let date = moment().get('date')
},
methods: {
// 打开弹出层
open(type){
this.$refs.calendarPikerPopup.open(type || 'bottom')
},
// 关闭弹出层
close(){
this.$refs.calendarPikerPopup.close()
},
// 获取初始化时间
onCalendarTabs(e){
let { val } = e
if(val == this.tabVal) return
if(val == 1 && this.startYMD.days == ''){
let { Ymd, Val, Date } = this.getAtData()
this.startYMD = Ymd
this.startValue = Val
this.startDate = Date
}
this.tabVal = val
},
// 获取初始化时间
getAtData(){
let Ymd = { years: [], months: [], days: [] }
let Val = [ 0,0,0 ]
let Date = ''
for(let i = 2022; i <= moment().get('year'); i++){
Ymd.years.push(i)
}
for(let i = 1; i <= (moment().get('month') + 1); i++){
Ymd.months.push(i)
}
for(let i = 1; i <= moment().get('date'); i++){
Ymd.days.push(i)
}
Val[0] = Ymd.years.length - 1
Val[1] = Ymd.months.length - 1
Val[2] = Ymd.days.length - 1
let year = Ymd.years[Val[0]];
let month = Ymd.months[Val[1]];
let day = Ymd.days[Val[2]]
Date = year + '-' + (month <= 9 ? '0' + month : month ) + '-' + (day <= 9 ? '0' + day : day )
return { Ymd, Val, Date }
},
// 月份选择
bindChangeMonth(e){
let { value } = e.detail
let atMonthVal = this.monthValue
let yearVal = this.monthYM.years[value[0]]
let isAtYear = yearVal == moment().get('year')
let monthsArr = []
if(value[0] != atMonthVal[0]){
for(let i = 1; i <= Number(isAtYear ? moment().get('month') + 1 : 12); i++ ){
monthsArr.push(i)
}
this.$set(this.monthYM, 'months', monthsArr)
}
this.monthValue = value
},
// 选择时间类型
onDateTypeKey(type){
if(type == this.dateTypeKey) return
if(this[type + 'Date'] == ''){
let { Ymd, Val, Date } = this.getAtData()
this[type + 'YMD'] = Ymd
this[type + 'Value'] = Val
this[type + 'Date'] = Date
}
if(this.endDate != '' && type == 'end'){
let years = []
let values = [ 0, 0, 0 ]
let endDateArr = this.endDate.split('-')
let { months, days } = this.getNewYM(endDateArr[0], endDateArr[1])
for(let i = 2022; i <= endDateArr[0]; i++){
years.push(i)
}
values[0] = years.length - 1
values[1] = months.length - 1
values[2] = days.length - 1
this.endYMD = { years, months, days}
this.endValue = values
}
this.dateTypeKey = type
},
// 选择日期
bindChange(e){
let { value } = e.detail
let typeKEY = this.dateTypeKey
let year = this[typeKEY + 'YMD'].years[value[0]]
let month = this[typeKEY + 'YMD'].months[value[1]]
let day = this[typeKEY + 'YMD'].days[value[2]]
if(value[0] != this[typeKEY + 'Value'][0] || value[1] != this[typeKEY + 'Value'][1]){
let { months, days } = this.getNewYM(year, month)
this.$set(this[typeKEY + 'YMD'], 'months', months)
this.$set(this[typeKEY + 'YMD'], 'days', days)
}
this[typeKEY + 'Value'] = value
this[typeKEY + 'Date'] = year + '-' + (month <= 9 ? '0' + month : month ) + '-' + (day <= 9 ? '0' + day : day )
this.recentlyNum = ''
},
// 获取最新的月份和日数据
getNewYM(year, month){
let months = []
let days = []
let lastDay = new Date(year, month, 0).getDate()
if(year == moment().get('year') && month == moment().get('month') + 1){
lastDay = moment().get('date')
}
for(let i = 1; i <= (year == moment().get('year') ? moment().get('month') + 1 : 12); i++){
months.push(i)
}
for(let i = 1; i <= lastDay; i++){
days.push(i)
}
return { months, days }
},
// 计算就近时间
getRecentlyDate(num){
let year = moment().get('year')
let month = moment().get('month') + 1
let today = moment().get('date')
let start = moment([year, month, today]).month(-(num - 2)).format('YYYY-MM-DD')
let ymdArr = start.split('-')
let { months, days } = this.getNewYM(ymdArr[0], ymdArr[1])
this.$set(this.startYMD, 'months', months)
this.$set(this.startYMD, 'days', days)
let yearIndex = this.startYMD.years.findIndex(val => val == ymdArr[0]) || 0
let monthIndex = this.startYMD.months.findIndex(val => val == ymdArr[1]) || 0
let dayIndex = this.startYMD.days.findIndex(val => val == ymdArr[2]) || 0
this.startValue = [yearIndex, monthIndex, dayIndex]
this.startDate = start
this.endDate = year + '-' + (month <= 9 ? '0' + month : month ) + '-' + (today <= 9 ? '0' + today : today )
if(this.dateTypeKey == 'end'){
let years = []
let values = [ 0, 0, 0 ]
let endDateArr = this.endDate.split('-')
let { months, days } = this.getNewYM(endDateArr[0], endDateArr[1])
for(let i = 2022; i <= endDateArr[0]; i++){
years.push(i)
}
values[0] = years.length - 1
values[1] = months.length - 1
values[2] = days.length - 1
this.endYMD = { years, months, days}
this.endValue = values
}
this.recentlyNum = num
},
// 确认日期
onCalendarChange(){
let monthYM = this.monthYM, monthValue = this.monthValue
let startDate = ''
let endDate = ''
switch(this.tabVal){
case 0:
let yearsVal = monthYM.years[monthValue[0]]
let monthVal = monthYM.months[monthValue[1]]
let lastDay = new Date(yearsVal, monthVal, 0).getDate()
let isAt = yearsVal == moment().get('year') && monthVal == (moment().get('month') + 1)
startDate = yearsVal + '-' + (monthVal <= 9 ? '0' + monthVal: monthVal) + '-01'
endDate = yearsVal + '-' + (monthVal <= 9 ? '0' + monthVal: monthVal) + '-' + (isAt ? moment().get('date'): lastDay)
break;
case 1:
if(this.startDate == ''){
uni.showToast({
title: '开始时间不能为空',
icon : 'none'
})
return
}
if(this.endDate == ''){
uni.showToast({
title: '结束时间不能为空',
icon : 'none'
})
return
}
if(new Date(this.startDate).getTime() > new Date(this.endDate).getTime()){
uni.showToast({
title: '结束时间不能大于开始时间',
icon : 'none'
})
return
}
startDate = this.startDate
endDate = this.endDate
break;
}
this.$refs.calendarPikerPopup.close()
this.$emit('change', {
startDate,
endDate
})
}
}
}
</script>
<style lang="scss" scoped>
.calendar--piker{
background: white;
border-radius: 20rpx 20rpx 0 0;
padding: 0 30rpx 80rpx;
// header
&--header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: solid 1rpx #eaeaea;
}
// tabs
&--tabs{
display: flex;
justify-content: flex-start;
&--item{
margin-right: 50rpx;
line-height: 70rpx;
font-size: 28rpx;
position: relative;
&:last-child{
margin-right: 0;
}
&.acitve{
color: #446EFE;
&::after{
content: " ";
position: absolute;
bottom: -22rpx;
left: 0;
right: 0;
height: 1rpx;
background: #446EFE;
}
}
}
}
// 日期筛选
&--content{
padding-top: 50rpx;
&--subtitle{
font-size: 28rpx;
color: gray;
}
&--flex{
display: flex;
flex-wrap: wrap;
padding: 30rpx 0 50rpx;
font-size: 26rpx;
& > .item{
margin-right: 20rpx;
border: solid 1rpx #999;
color: gray;
border-radius: 5rpx;
padding: 0 20rpx;
height: 45rpx;
line-height: 43rpx;
&.active{
border-color: #446EFE;
color: #446EFE;
background-color: rgba(68, 110, 254, .1);
}
}
}
&--date{
padding-top: 30rpx;
display: flex;
align-items: center;
.date-text{
color: 333;
font-size: 30rpx;
width: 100rpx;
text-align: center;
font-weight: bold;
}
.date-item{
border-bottom: solid 6rpx #ddd;
width: calc(50% - 50rpx);
text-align: center;
height: 90rpx;
line-height: 84rpx;
&.date--active{
border-color: #446EFE;
color: #446EFE;
}
}
}
&--hint{
text-align: center;
font-size: 28rpx;
color: #FFAB3F;
padding: 30rpx 0;
line-height: 50rpx;
}
&--view{
height: 300rpx;
& .item{
line-height: 35px;
text-align: center;
}
}
}
// 按钮
&--btn{
padding-top: 50rpx;
& > button[size='default']{
background: #446EFE;
color: white;
height: 100rpx;
line-height: 100rpx;
padding: 0;
border-radius: 4rpx;
font-size: 34rpx;
&::after{
display: none;
}
}
}
}
</style>

81
uni_modules/oct-calendar-picker/package.json Normal file
View File

@@ -0,0 +1,81 @@
{
"id": "oct-calendar-picker",
"displayName": "oct-calendar-picker",
"version": "1.0.0",
"description": "oct-calendar-picker",
"keywords": [
"oct-calendar-picker"
],
"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": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

1
uni_modules/oct-calendar-picker/readme.md Normal file
View File

@@ -0,0 +1 @@
# oct-calendar-picker