Skip to content

F
fashion-ui
Commit e76ac753 authored by tangfh's avatar tangfh
Browse files
Options

年月日时分选择组件封装，并上传时尚 插件市场

parent f7bbe5f8
Hide whitespace changes
Inline Side-by-side
Showing with 754 additions and 10 deletions
pages/index/index.vue
View file @ e76ac753
......@@ -2,6 +2,10 @@
<view class="content" :style="[style]">
<f-status-view v-if="statusViewUI.isShow" :status="statusViewUI.status" :style="statusViewStyle"
@tap="onStatusViewClick"></f-status-view>
<view class="v-row">
<f-date-time-picker style="width: 100%;" mode="datetime" returnType="yyyy-MM-dd" @change="onPopDatetimePickerChange"
@dismiss="onPopDatatimePickerDismiss"></f-date-time-picker>
</view>
<view class="v-row">
<f-avatar-edit :avatar="avatar" @onAvatarSelected="onAvatarSelected" @click="onAvatarClick"
@onSelectBtnClick="onSelectAvatarBtnClick"></f-avatar-edit>
......@@ -21,7 +25,7 @@
</view>
<f-add-image-grid @choose="onImageChoose" @delete="onImageDelete"></f-add-image-grid>
<view class="v-row">
<button @click="showPopTop">f-pop-top</button>
</view>
......@@ -34,7 +38,7 @@
<view class="v-row">
<button @click="showPopDatetiemPicker">f-pop-date-time-picker</button>
</view>
<f-pop position="top" :isShow="isShowPopTop" @dismiss="onPopDismiss">
<template #top>
<view class="flex-row row-center-h">
......@@ -42,7 +46,7 @@
</view>
</template>
</f-pop>
<f-pop position="center" :isShow="isShowPopCenter" @dismiss="onPopDismiss">
<template #center>
<view class="flex-row row-center-h">
......@@ -50,7 +54,7 @@
</view>
</template>
</f-pop>
<f-pop position="bottom" :isShow="isShowPopBottom" @dismiss="onPopDismiss">
<template v-slot:bottom>
<view class="flex-row row-center-h">
......@@ -58,18 +62,18 @@
</view>
</template>
</f-pop>
<f-pop-date-time-picker :isShow="isShowPopDatetimePicker" mode="date" returnType="yyyy-MM-dd"
@change="onPopDatetimePickerChange" @dismiss="onPopDatatimePickerDismiss" />
<view class="v-row">
<f-image-01></f-image-01>
</view>
<view class="v-row">
<f-text-01 :ui="uiAddBtn"></f-text-01>
</view>
<view style="display: block; width: 100%;">
<f-item :item="itemMock">
<template v-slot:content>
......@@ -79,14 +83,14 @@
</template>
</f-item>
</view>
<view style="display: block; width: 100%;">
<f-title-01 title="租金交付方式" subTitle="(押二付二)"></f-title-01>
<f-multi-text-01 :ui="cMultiText01Ui" @click="onCMultiText01Click"></f-multi-text-01>
<f-multi-text-01 :ui="cMultiText01Ui02"></f-multi-text-01>
<!-- <view class="f-multi-text-line-h" style="background-color: red;"></view> -->
</view>
<f-status-view :status="statusViewUI2.status" @tap="onStatusViewClick2"></f-status-view>
</view>
</template>
......
uni_modules/f-date-time-picker/changelog.md 0 → 100644
View file @ e76ac753
## 1.0.0（2024-07-22）
1.0.0
uni_modules/f-date-time-picker/components/f-date-time-picker/f-date-time-picker.vue 0 → 100644
View file @ e76ac753
<template>
<view class="picker-con" :style="{background: pickerBg}">
<picker-view class="picker-view" :indicator-style='indicatorStyle' :mask-style='maskStyle' :value="pickerVal"
indicator-class="ir-datetime-picker" mask-class='ir-datetime-picker-mask' @change="bindChange"
@touchmove="touchmove" @touchend="touchend">
<picker-view-column v-if="mode == 'datetime' || mode == 'date' || mode == 'yearmonth' || mode == 'year'">
<view class="item" v-for="(item,index) in years"
:style="[{color: index === pickerVal[0] ? activeColor : pickerColor}, itemStyle]" :key="index">
{{item}}年
</view>
</picker-view-column>
<picker-view-column v-if="mode == 'datetime' || mode == 'date' || mode == 'yearmonth'">
<view class="item" v-for="(item,index) in months"
:style="[{color: index === pickerVal[1] ? activeColor : pickerColor}, itemStyle]" :key="index">
{{item}}月
</view>
</picker-view-column>
<picker-view-column v-if="mode == 'datetime' || mode == 'date'">
<view class="item" v-for="(item,index) in days" :key="index"
:style="[{color: index === pickerVal[2] ? activeColor : pickerColor}, itemStyle]">
{{item}}日
</view>
</picker-view-column>
<picker-view-column v-if="mode == 'datetime' || mode == 'time'">
<view class="item" v-for="(item,index) in hours" :key="index"
:style="[{color: index === pickerVal[3] ? activeColor : pickerColor}, itemStyle]">
{{item}}时
</view>
</picker-view-column>
<picker-view-column v-if="mode == 'datetime' || mode == 'time'">
<view class="item" v-for="(item,index) in minutes" :key="index"
:style="[{color: index === pickerVal[4] ? activeColor : pickerColor}, itemStyle]">
{{item}}分
</view>
</picker-view-column>
</picker-view>
<view v-if="showCover" class="cover"></view>
</view>
</template>
<script>
export default {
name: "f-date-time-picker",
/*
参数说明
参数名 类型 默认值 说明
isShow Boolean 显示/隐藏
title String 标题
mode String date 模式 datetime、date、time、yearmonth、year
start String '2010/01/01 00:00' 开始时间，可以使用日期的字符串（String）、时间戳（Number）、new Date()
end String '2050/12/31 23:59' 结束时间，可以使用日期的字符串（String）、时间戳（Number）、new Date()
value String - 当前选中项（默认为当前时间），可以使用日期的字符串（String）、时间戳（Number）、new Date()，支持.sync
disabled Boolean false 禁用
type String 'border' 选择器样式，可选border、border-bottom和none
height String '66rpx' 日期高度
fontSize String '' 日期字体大小
color String '#333' 日期颜色
textAlign String 'left' 日期文字位置，同原生text-align
borderColor String '#ddd' 选择器有border时，border颜色
placeholder String '请选择日期时间' placeholder内容
placeholderColor String '#999' placeholder颜色
pickerBg String '#fff' 选择器背景颜色
maskStyle String '' 原生属性，设置选择器蒙层的样式
indicatorStyle String 'height: 50px;' 原生属性，设置选择器中间选中框的样式
pickerColor String '' picker文字颜色
activeColor String '' picker选中项颜色
returnType String 'string' 返回值类型，支持string（“YYYY-MM-DD hh:mm”）、timestamp 、date
@change EventHandle - 返回当前选择时间，格式为"YYYY-MM-DD hh:mm"
*/
props: {
isShow: {
type: Boolean,
default: false,
},
title: {
type: String,
default: '选择日期'
},
mode: {
type: String,
defaut: "date"
},
start: {
type: [String, Number],
default: '2010/01/01 00:00'
},
end: {
type: [String, Number],
default: '2050/12/31 23:59'
},
value: {
type: [String, Number],
default: ''
},
disabled: {
type: Boolean,
default: false
},
type: {
type: String,
default: 'border'
},
height: {
type: String,
default: '66rpx'
},
fontSize: {
type: String,
default: ''
},
color: {
type: String,
default: '#333'
},
textAlign: {
type: String,
default: 'left',
},
borderColor: {
type: String,
default: '#ddd'
},
pickerBg: {
type: String,
default: '#fff',
},
maskStyle: {
type: String,
default: ''
},
indicatorStyle: {
type: String,
default: 'height: 50px;'
},
pickerColor: {
type: String,
default: ''
},
activeColor: {
type: String,
default: '',
},
returnType: {
type: String,
default: 'string',
}
},
data() {
const baseArr = ['', '']
return {
date: '',
years: baseArr,
months: baseArr,
days: baseArr,
hours: baseArr,
minutes: baseArr,
days28: [],
pickerVal: [],
itemStyle: null,
startObj: {
months: [],
days: []
},
endObj: {
months: [],
days: []
},
changeDisabled: false,
moveFlag: false,
showCover: false,
hasChange: false
}
},
watch: {
start() {
this.setStartEnd()
const date = this.value ? this.value : new Date()
this.initCurr(date)
},
end() {
this.setStartEnd()
const date = this.value ? this.value : new Date()
this.initCurr(date)
},
value(val) {
const date = val ? val : new Date()
this.initCurr(date)
const {
y,
m,
d,
h,
minu
} = this.trimDate(this.value)
const trimN = this.trimNum
this.date = `${y}-${trimN(m)}-${trimN(d)} ${trimN(h)}:${trimN(minu)}`
}
},
created() {
this.days28 = this.setArray(1, 28)
if (this.activeColor || this.pickerColor) {
this.itemStyle = {
height: '50px',
lineHeight: '50px'
}
}
this.setStartEnd()
if (this.value) {
const {
y,
m,
d,
h,
minu
} = this.trimDate(this.value)
const trimN = this.trimNum
this.date = `${y}-${trimN(m)}-${trimN(d)} ${trimN(h)}:${trimN(minu)}`
}
const date = this.value ? this.value : new Date()
this.initCurr(date)
},
methods: {
onDismiss() {
this.$emit("dismiss")
},
// 设置一个是否是touchmove的flag
touchmove() {
this.moveFlag = true
},
touchend() {
// touchend时，如果有move，则显示遮罩，以防多次滑动
if (this.moveFlag) {
this.showCover = true
this.moveFlag = false
}
// move没有触发change事件，则隐藏遮罩
setTimeout(_ => {
if (!this.hasChange) {
this.showCover = false
}
}, 200)
},
// 当滚动选择
bindChange: function(e) {
if (this.changeDisabled) return
this.changeDisabled = true
const prev = this.pickerVal
const val = e.detail.value
const y = this.years[val[0]] ? this.years[val[0]] : this.years[this.years.length - 1]
const m = this.months[val[1]] ? this.months[val[1]] : this.months[this.months.length - 1]
const d = this.days[val[2]] ? this.days[val[2]] : this.days[this.days.length - 1]
const h = this.hours[val[3]] >= 0 ? this.hours[val[3]] : this.hours[this.hours.length - 1]
const minu = this.minutes[val[4]] >= 0 ? this.minutes[val[4]] : this.minutes[this.minutes.length - 1]
const date = `${y}/${m}/${d} ${h}:${minu}`
if (prev[1] != val[1]) {
this.initCurr(date, m, d)
} else {
this.initCurr(date)
}
this.pickerVal = val
},
// 点击确定
confirm() {
const val = this.pickerVal
const trimN = this.trimNum
const d = `${this.years[val[0]]}-${trimN(this.months[val[1]])}-${trimN(this.days[val[2]])}`
const t = `${trimN(this.hours[val[3]])}:${trimN(this.minutes[val[4]])}`
const date = `${d} ${t}`
this.date = date
let rV = date
if (this.returnType === "timestamp") {
rV = new Date(date).getTime()
} else if (this.returnType === "date") {
rV = new Date(date)
} else {
rV = this.formatDateTime(new Date(date), this.returnType)
}
this.$emit('change', rV)
this.$emit('update:value', rV)
},
// 根据年月,设置日期(不同月份，日期不同)
setDays(year, month, start) {
let newDays = []
const monthReg = /^4|6|9|11$/
let days = this.days28
if (start) {
days = this.setArray(start, 28)
}
if (monthReg.test(month)) {
newDays = [...days, 29, 30]
} else if (month === 2) {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
newDays = [...days, 29]
} else {
newDays = days
}
} else {
newDays = [...days, 29, 30, 31]
}
return newDays
},
// 设置最大最小月日时分
setStartEnd() {
const {
sy,
ey,
sm,
em,
sd,
ed,
sh,
eh,
sminu,
eminu
} = this.getSE()
this.years = this.setArray(sy, ey)
// 设置最大最小月
if (sy === ey) {
this.startObj.months = this.endObj.months = this.setArray(sm, em)
} else {
this.startObj.months = this.setArray(sm, 12)
this.endObj.months = this.setArray(1, em)
}
// 设置最大最小日
if (sy === ey && sm === em) {
this.startObj.days = this.endObj.days = this.setArray(sd, ed)
} else {
this.startObj.days = this.setDays(sy, sm, sd)
this.endObj.days = this.setArray(1, ed)
}
// 设置最大最小时
if (sy === ey && sm === em && sd === ed) {
this.startObj.hours = this.endObj.hours = this.setArray(sh, eh)
} else {
this.startObj.hours = this.setArray(sh, 23)
this.endObj.hours = this.setArray(0, eh)
}
// 设置最大最小分钟
if (sy === ey && sm === em && sd === ed && sh === eh) {
this.startObj.minutes = this.endObj.minutes = this.setArray(sminu, eminu)
} else {
this.startObj.minutes = this.setArray(sminu, 59)
this.endObj.minutes = this.setArray(0, eminu)
}
},
// 初始化选中项
initCurr(val, month, day) {
// console.log(val)
this.hasChange = true
const {
start,
end,
sy,
ey,
sm,
em,
sd,
ed,
sh,
eh,
sminu,
eminu
} = this.getSE()
const {
val: curr,
y: cy,
m: cm,
d: cd,
h: ch,
minu: cminu
} = this.trimDate(val, month, day)
let cyi = this.years.indexOf(cy)
let cmi = 0
let cdi = 0
let chi = 0
let cminui = 0
let endSIFlag = true // 是否在最后统一设置index
if (curr.getTime() >= end.getTime()) { // 值大于等于结束时间
// console.log(11)
this.months = this.endObj.months
this.days = this.endObj.days
this.hours = this.endObj.hours
this.minutes = this.endObj.minutes
cyi = this.years.length - 1
cmi = this.months.length - 1
cdi = this.days.length - 1
chi = this.hours.length - 1
cminui = this.minutes.length - 1
endSIFlag = false
} else if (curr.getTime() <= start.getTime()) { // 值小于等于开始时间
// console.log(22)
this.months = this.startObj.months
this.days = this.startObj.days
this.hours = this.startObj.hours
this.minutes = this.startObj.minutes
cyi = cmi = cdi = chi = cminui = 0
endSIFlag = false
} else if (cy === ey && cm === em && cd === ed && ch === eh) {
// 值与结束时间年/月/日/时相同
// console.log(222)
this.months = this.endObj.months
this.days = this.endObj.days
this.hours = this.endObj.hours
this.minutes = this.endObj.minutes
} else if (cy === ey && cm === em && cd === ed) {
// 值与结束时间年/月/日相同
// console.log(111)
this.months = this.endObj.months
this.days = this.endObj.days
this.hours = this.endObj.hours
// console.log(this.hours)
this.minutes = this.setArray(0, 59)
} else if (cy === ey && cm === em) { // 值与结束时间年、月相同
// console.log(33)
this.months = this.endObj.months
this.days = this.endObj.days
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
} else if (cy === ey) { // 值与结束时间年份相同
// console.log(44)
this.months = this.endObj.months
this.days = this.setDays(cy, cm)
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
} else if (cy === sy && cm === sm && cd === sd && ch === sh) {
// 值与开始时间年/月/日/时相同
// console.log(99)
this.months = this.startObj.months
this.days = this.startObj.days
this.hours = this.startObj.hours
this.minutes = this.startObj.minutes
} else if (cy === sy && cm === sm && cd === sd) {
// 值与开始时间年/月/日相同
// console.log(88)
this.months = this.startObj.months
this.days = this.startObj.days
this.hours = this.startObj.hours
this.minutes = this.setArray(0, 59)
} else if (cy === sy && cm === sm) { // 值与开始时间年、月相同
// console.log(55)
this.months = this.startObj.months
this.days = this.startObj.days
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
} else if (cy === sy) { // 值与开始时间年份相同
// console.log(66)
this.months = this.startObj.months
this.days = this.setDays(cy, cm)
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
} else { // 值与开始时间、结束时间不同年月
// console.log(77)
this.months = this.setArray(1, 12)
this.days = this.setDays(cy, cm)
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
}
if (endSIFlag) {
const di = this.days.indexOf(cd)
cmi = this.months.indexOf(cm)
cdi = di === -1 ? this.days.length - 1 : di
chi = this.hours.indexOf(ch)
cminui = this.minutes.indexOf(cminu)
}
this.$nextTick(_ => {
this.pickerVal = [cyi, cmi, cdi, chi, cminui]
this.changeDisabled = false
this.showCover = false
this.hasChange = false
})
},
// 设置开始/结束时间相关变量
getSE() {
let s = this.start
let e = this.end
s = s ? s : '2010/01/01 00:00'
e = e ? e : '2050/12/31 23:59'
const {
val: start,
y: sy,
m: sm,
d: sd,
h: sh,
minu: sminu
} = this.trimDate(s)
const {
val: end,
y: ey,
m: em,
d: ed,
h: eh,
minu: eminu
} = this.trimDate(e)
return {
start,
sy,
sm,
sd,
sh,
sminu,
end,
ey,
em,
ed,
eh,
eminu
}
},
// 返回时间信息
trimDate(val, month, day) {
const reg = /^\d{4}-\d{1,2}-\d{1,2}( \d{1,2}:\d{1,2})?(:\d{1,2})?$/
if (typeof val === 'string' && reg.test(val)) {
val = val.replace(/-/g, '/')
}
const curr = new Date(val)
return {
val: curr,
y: curr.getFullYear(),
m: month ? month : curr.getMonth() + 1,
d: day ? day : curr.getDate(),
h: curr.getHours(),
minu: curr.getMinutes()
}
},
// 获取一个范围内的整数，返回数组
setArray(start, end) {
const arr = []
for (let i = start; i <= end; i++) {
arr.push(i)
}
return arr
},
// 将数字转换成两位
trimNum(num) {
num = num >= 10 ? num : `0${num}`
return num
},
formatDateTime(date, format) {
const o = {
"M+": date.getMonth() + 1, // 月份
"d+": date.getDate(), // 日
"h+": date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
"H+": date.getHours(), // 小时
"m+": date.getMinutes(), // 分
"s+": date.getSeconds(), // 秒
"q+": Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds(), // 毫秒
a: date.getHours() < 12 ? "上午" : "下午", // 上午/下午
A: date.getHours() < 12 ? "AM" : "PM", // AM/PM
};
if (/(y+)/.test(format)) {
format = format.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
for (let k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(
RegExp.$1,
RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
);
}
}
return format;
}
}
}
</script>
<style scoped>
.date {
padding: 16rpx;
display: flex;
align-items: center;
box-sizing: border-box;
}
.border {
border: 1rpx solid;
border-radius: 6rpx;
}
.border-bottom {
border-bottom: 1rpx solid;
}
.calendar {
width: 30rpx;
height: 30rpx;
border: 1rpx solid;
border-radius: 4rpx;
margin-right: 16rpx;
margin-top: 6rpx;
position: relative;
}
.calendar .calendar-line {
width: 26rpx;
height: 4rpx;
position: absolute;
left: 2rpx;
top: 10rpx;
opacity: 0.6;
z-index: 1;
}
.picker-con {
width: auto;
overflow: hidden;
}
.flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.picker-view {
width: auto;
height: 500rpx;
}
.picker-view .item {
line-height: 50px;
align-items: center;
justify-content: center;
text-align: center;
}
.cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
\ No newline at end of file
uni_modules/f-date-time-picker/package.json 0 → 100644
View file @ e76ac753
{
"id": "f-date-time-picker",
"displayName": "f-date-time-picker",
"version": "1.0.0",
"description": "年月日时分选择组件",
"keywords": [
"f-date-time-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": "y",
"aliyun": "y",
"alipay": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "u",
"app-nvue": "u",
"app-uvue": "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"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
uni_modules/f-date-time-picker/readme.md 0 → 100644
View file @ e76ac753
# f-date-time-picker
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment