hzd/hiddenDangerWX
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
hezhidong
2025-03-28 09:19:45 +08:00
parent a920f6f06a
commit 91514490ea
25 changed files with 7952 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/form/date-li.vue
+94
View File
@@ -0,0 +1,94 @@
<!-- label 为字段名 -->
<!-- isBorder 是否有边框 默认 true有-->
<template>
<!-- 因为之前钉钉之前的那个不能用着改装了一下微信小程序选择日期组件使用 -->
<view class="input-box" :class="isBorder ? '' : 'border-none'">
<view class="label"><text class="tex">*</text> {{label}}</view>
<view @click="onClickDate" class="date-box">
<view v-if="value" class="time">{{value}}</view>
<view v-else class="time placeholder">请选择{{label}}</view>
<image class="img" src="../../static/jiantou.png"></image>
</view>
<DateText ref="dateTime" :value="sea" :isAll="true" :current="true" @confirm="onConfirm">1212121</DateText>
</view>
</template>
<script>
import { watch } from "vue";
export default {
props: {
value: {
default: ''
},
isBorder: {
default: true
},
label:{
default: '时间'
}
},
data() {
return {
sea: ''
};
},
methods: {
// 点击打开选择日期
onClickDate () {
this.$refs.dateTime.show()
},
onConfirm(e) {
this.$emit('input', e.selectRes)
}
}
}
</script>
<style lang='scss' scoped>
.input-box{
width: 100%;
height: 100rpx;
background: #fff;
padding: 0 16rpx;
box-sizing: border-box;
display: flex;
align-items: center;
font-size: 28rpx;
border-bottom: 2rpx dashed #D9D9D9;
.label{
width: 200rpx;
line-height: 40rpx;
display: flex;
.tex{
display: block;
width: 14rpx;
color: #E14343;
margin-right: 8rpx;
line-height: 40rpx;
}
}
.date-box{
flex: 1;
width: 100%;
height: 100rpx;
display: flex;
justify-content: flex-end;
align-items: center;
.img{
width: 32rpx;
height: 32rpx;
margin-left: 4rpx;
}
.placeholder{
color: #999999;
}
}
}
.border-none{
border: none;
}
</style>
components/form/dateText.vue
+513
View File
@@ -0,0 +1,513 @@
<template>
<view class="yu-datetime-picker">
<view class="yu-datetime-mask" :class="{'show':showPicker}" @tap="maskClick" @touchmove.stop.prevent catchtouchmove="true"></view>
<view class="yu-datetime-content" :class="{'show':showPicker}">
<view class="yu-datetime-hd" @touchmove.stop.prevent catchtouchmove="true">
<view class="yu-datetime-btn" @tap="pickerCancel">取消</view>
<view class="yu-datetime-btn" :style="{color: color}" @tap="pickerConfirm">确定</view>
</view>
<view class="yu-datetime-view">
<picker-view class="picker-view" v-if="isAll" :indicator-style="itemHeight" :value="values" @change="bindChange">
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.days" :key="index">{{item}}日</view>
</picker-view-column>
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.hours" :key="index">{{item}}时</view>
</picker-view-column>
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.minutes" :key="index">{{item}}分</view>
</picker-view-column>
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.seconds" :key="index">{{item}}秒</view>
</picker-view-column>
</picker-view>
<picker-view v-else :indicator-style="itemHeight" :value="dateValues" @change="bindDateChange">
<picker-view-column class="yu-picker-column">
<view class="yu-datetime-item" v-for="(item,index) in dateObj.dates" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.hours" :key="index">{{item}}时</view>
</picker-view-column>
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.minutes" :key="index">{{item}}分</view>
</picker-view-column>
<picker-view-column>
<view class="yu-datetime-item" v-for="(item,index) in dateObj.seconds" :key="index">{{item}}秒</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "yuDatetimePicker",
props: {
isAll: { //全部日期有效可选
type: Boolean,
default () {
return true
}
},
current: { //默认显示当前日期时间
type: Boolean,
default () {
return true
}
},
color: { //颜色
type: String,
default () {
return '#3279e4'
}
},
startYear: { //开始年份
type: [String, Number],
default () {
return new Date().getFullYear()
}
},
endYear: { //结束年份
type: [String, Number],
default () {
return '2050'
}
},
value: { //设置默认日期时间，优先级高于current
type: String,
default () {
return ''
}
}
},
data() {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
let dates = []
let months = []
let years = []
let days = []
let hours = []
let minutes = []
let seconds = []
for (let i = month; i <= month + 2; i++) {//获取包括当前月份在内的3个月内的日期
let localMonth = i;
let localYear = year;
if (i == 13) {
localYear += 1;
}
if (i >= 13) {
localMonth -= 12;
}
let total = new Date(localYear, localMonth, 0).getDate();
if (i == month) {
for (let j = day; j <= total; j++) {
let m = localMonth;
let d = j;
if(localMonth < 10){ m = '0' + m;}
if(j < 10){ d = '0' + d;}
let str = year + '-' + m + '-' + d;
dates.push(str);
}
} else {
for (let j = 1; j <= total; j++) {
let m = localMonth;
let d = j;
if(localMonth < 10){ m = '0' + m;}
if(j < 10){ d = '0' + d;}
let str = localYear + '-' + m + '-' + d;
dates.push(str);
}
}
}
for (let i = parseInt(this.startYear); i <= this.endYear; i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
let str = i;
if(i < 10){ str = '0' + str;}
else{str = '' + str;}
months.push(str)
}
if(this.value){
let valueArr = this.value.split(' ');
let valueDateArr = valueArr[0].split('-');
let totalCurrent = new Date(valueDateArr[0], valueDateArr[1], 0).getDate();
for (let i = 1; i <= totalCurrent; i++) {
let str = i;
if(i < 10){ str = '0' + str;}
else{str = '' + str;}
days.push(str)
}
}else{
let totalCurrent = new Date(year, month, 0).getDate();
for (let i = 1; i <= totalCurrent; i++) {
let str = i;
if(i < 10){ str = '0' + str;}
else{str = '' + str;}
days.push(str)
}
}
for (let i = 0; i < 24; i++) {
let str = i;
if(i < 10){ str = '0' + str;}
else{str = '' + str;}
hours.push(str);
}
for (let i = 0; i < 60; i++) {
let str = i;
if(i < 10){ str = '0' + str;}
else{str = '' + str;}
minutes.push(str);
}
for (let i = 0; i < 60; i++) {
let str = i;
if(i < 10){ str = '0' + str;}
else{str = '' + str;}
seconds.push(str);
}
let dateObj = {
dates,
years,
months,
days,
hours,
minutes,
seconds
}
return {
year,
month,
day,
hour,
minute,
second,
dateObj,
itemHeight: `height: ${uni.upx2px(88)}px;`,
values: [0, 0, 0, 0, 0, 0],
selectArr: [],
selectRes: "",
showPicker: false,
dateValues: [0, 0, 0, 0]
};
},
mounted() {
this.initDate();
if(!this.value && this.current) {
this.showCurrent();
}
},
methods: {
initDate() {
let _this =this;
//解析默认显示的日期时间
if (_this.value) {
let values = [0, 0, 0, 0, 0, 0];
let dateValues = [0, 0, 0, 0];
let valueStr = _this.value;
let valueArr = valueStr.split(' ');
let valueDateArr = valueArr[0].split('-');
let valueTimeArr = valueArr[1].split(':');
if (_this.isAll) {
values[0] = (valueDateArr[0] - _this.startYear) > 0 ? valueDateArr[0] - _this.startYear : 0;
values[1] = parseInt(valueDateArr[1]) - 1;
values[2] = parseInt(valueDateArr[2]) - 1;
values[3] = parseInt(valueTimeArr[0]);
values[4] = parseInt(valueTimeArr[1]);
values[5] = parseInt(valueTimeArr[2]);
_this.$nextTick(() => {
_this.values = values;
})
if ((valueDateArr[0] - _this.startYear) >= 0) {
_this.selectArr = [valueDateArr[0], valueDateArr[1], valueDateArr[2], valueTimeArr[0], valueTimeArr[1],valueTimeArr[2]];
_this.selectRes = _this.value;
} else {
_this.selectArr = [_this.formatNum(_this.startYear), valueDateArr[1], valueDateArr[2], valueTimeArr[0],valueTimeArr[1], valueTimeArr[2]];
_this.selectRes = `${this.formatNum(_this.startYear)+'-'+valueDateArr[1]+'-'+valueDateArr[2]+' '+valueTimeArr[0]+':'+valueTimeArr[1]+':'+valueTimeArr[2]}`;
}
} else {
let str = valueDateArr.join('');
let localStr = _this.formatNum(_this.year) + _this.formatNum(_this.month) + _this.formatNum(_this.day) + '';
if (str < localStr) {
dateValues[0] = 0;
_this.selectArr = [_this.formatNum(_this.year), _this.formatNum(_this.month), _this.formatNum(_this.day), valueTimeArr[0],valueTimeArr[1], valueTimeArr[2]];
_this.selectRes =`${_this.formatNum(_this.year)+'-' + _this.formatNum(_this.month) + '-' + _this.formatNum(_this.day) + ' ' + valueTimeArr[0] +':'+valueTimeArr[1] +':'+valueTimeArr[2]}`;
} else {
let num = 0; //计算默认日期和当前日期相隔天数，计算下标
let start = _this.formatNum(_this.year) + '-' + _this.formatNum(_this.month) + '-' + _this.formatNum(_this.day);
let res = _this.getBetweenDateStr(start, valueArr[0]);
dateValues[0] = res.length - 1;
_this.selectArr = [valueDateArr[0], valueDateArr[1], valueDateArr[2], valueTimeArr[0], valueTimeArr[1],valueTimeArr[2]];
_this.selectRes = _this.value;
}
dateValues[1] = parseInt(valueTimeArr[0]);
dateValues[2] = parseInt(valueTimeArr[1]);
dateValues[3] = parseInt(valueTimeArr[2]);
_this.$nextTick(() => {
_this.dateValues = dateValues;
});
}
return;
}
if (_this.isAll) {
_this.selectArr = [_this.formatNum(_this.startYear), '01', '01', '00', '00', '00'];
_this.selectRes = `${_this.formatNum(_this.startYear)+'-01-01 00:00:00'}`;
} else {
_this.selectArr = [_this.formatNum(_this.year), _this.formatNum(_this.month), '01', '00', '00', '00'];
_this.selectRes = `${_this.formatNum(_this.year)+'-' + _this.formatNum(_this.month) + '-01 00:00:00'}`;
}
},
showCurrent() { //显示当前的日期时间
let arr = [0, 0, 0, 0, 0, 0];
let dateArr = [0, 0, 0, 0];
this.selectArr = [this.formatNum(this.year), this.formatNum(this.month), this.formatNum(this.day), this.formatNum(this.hour), this.formatNum(this.minute), this.formatNum(this.second)];
this.selectRes = `${this.formatNum(this.year)+'-'+this.formatNum(this.month)+'-'+this.formatNum(this.day)+' '+this.formatNum(this.hour)+':'+this.formatNum(this.minute)+':'+this.formatNum(this.second)}`;
if (this.isAll) {
arr[0] = this.year - this.startYear;
arr[1] = this.month - 1;
arr[2] = this.day - 1;
arr[3] = this.hour;
arr[4] = this.minute;
arr[5] = this.second;
this.$nextTick(() => {
this.values = arr;
})
} else {
dateArr[1] = this.hour;
dateArr[2] = this.minute;
dateArr[3] = this.second;
this.$nextTick(() => {
this.dateValues = dateArr;
})
}
},
initDayArr: (year, month) => { //初始化月份天数
let totalDay = new Date(year, month, 0).getDate();
let dayArr = [];
for (let i = 1; i <= totalDay; i++) {
if (i < 10) {
i = '0' + i;
} else {
i = i + '';
}
dayArr.push(i);
};
return dayArr;
},
formatNum(num) { //日期时间的初始化
return num < 10 ? '0' + num : num + '';
},
maskClick() { //日期时间的遮罩
this.showPicker = false;
},
show() { //日期时间的显示
this.showPicker = true;
},
hide() { //日期时间的隐藏
this.showPicker = false;
},
pickerCancel() { //日期时间取消
this.$emit("cancel", {
selectArr: this.selectArr
});
this.showPicker = false;
},
pickerConfirm(e) { //日期时间确定
this.$emit("confirm", {
selectArr: this.selectArr,
selectRes: this.selectRes
});
this.showPicker = false;
},
bindChange(e) { //默认滚动日期时间方法
let valueArr = e.detail.value;
let year = "",
month = "",
day = "",
hour = "",
minute = "",
second = "";
let selectArr = this.selectArr;
let dayArr = [];
year = this.dateObj.years[valueArr[0]];
month = this.dateObj.months[valueArr[1]];
day = this.dateObj.days[valueArr[2]];
hour = this.dateObj.hours[valueArr[3]];
minute = this.dateObj.minutes[valueArr[4]];
second = this.dateObj.seconds[valueArr[5]];
if (year != selectArr[0]) {
dayArr = this.initDayArr(year, month);
this.dateObj.days = dayArr;
};
if (month != selectArr[1]) {
dayArr = this.initDayArr(year, month);
this.dateObj.days = dayArr;
};
this.selectArr = [year, month, day, hour, minute, second];
this.selectRes = `${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
this.$nextTick(() => {
this.values = valueArr;
})
},
bindDateChange(e) { //有效日期的滚动日期时间方法
let valueArr = e.detail.value;
let dateStr = "",
dateArr = [],
hour = "",
minute = "",
second = "";
let selectArr = this.selectArr;
let dayArr = [];
dateStr = this.dateObj.dates[valueArr[0]];
dateArr = dateStr.split('-');
hour = this.dateObj.hours[valueArr[1]];
minute = this.dateObj.minutes[valueArr[2]];
second = this.dateObj.seconds[valueArr[3]];
this.selectArr = [dateArr[0], dateArr[1], dateArr[2], hour, minute, second];
this.selectRes = `${dateArr[0]+'-'+dateArr[1]+'-'+dateArr[2]+' '+hour+':'+minute+':'+second}`;
this.$nextTick(() => {
this.dateValues = valueArr;
})
},
//遍历两个日期间的所有日期
getBetweenDateStr(start, end) {
let result = [];
let beginDay = start.split("-");
let endDay = end.split("-");
let diffDay = new Date();
let dateList = new Array;
let i = 0;
diffDay.setDate(beginDay[2]);
diffDay.setMonth(beginDay[1] - 1);
diffDay.setFullYear(beginDay[0]);
result.push(start);
while (i == 0) {
let countDay = diffDay.getTime() + 24 * 60 * 60 * 1000;
diffDay.setTime(countDay);
dateList[2] = diffDay.getDate();
dateList[1] = diffDay.getMonth() + 1;
dateList[0] = diffDay.getFullYear();
if (String(dateList[1]).length == 1) {
dateList[1] = "0" + dateList[1]
};
if (String(dateList[2]).length == 1) {
dateList[2] = "0" + dateList[2]
};
result.push(dateList[0] + "-" + dateList[1] + "-" + dateList[2]);
if (dateList[0] == endDay[0] && dateList[1] == endDay[1] && dateList[2] == endDay[2]) {
i = 1;
}
};
return result;
}
}
}
</script>
<style>
.yu-datetime-picker {
position: relative;
z-index: 888;
}
.yu-datetime-mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
.yu-datetime-mask.show {
visibility: visible;
opacity: 1;
}
.yu-datetime-content {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 3000;
}
.yu-datetime-content.show {
transform: translateY(0);
}
.yu-datetime-hd {
display: flex;
align-items: center;
padding: 0 30upx;
height: 44px;
background-color: #fff;
position: relative;
text-align: center;
font-size: 15px;
justify-content: space-between;
}
.yu-datetime-btn {
font-size: 14px;
}
.yu-datetime-hd:after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
.yu-datetime-view {
width: 100%;
height: 200px;
overflow: hidden;
background-color: rgba(255, 255, 255, 1);
z-index: 666;
}
.yu-datetime-view .picker-view {
height: 100%;
}
.yu-picker-column {
-webkit-flex: 2;
-webkit-box-flex: 2;
flex: 2;
}
.yu-datetime-item {
text-align: center;
width: 100%;
height: 88upx;
line-height: 88upx;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30upx;
}
</style>
components/form/input-li.vue
+99
View File
@@ -0,0 +1,99 @@
<!-- label 为字段名 -->
<!-- type 为输入框类型 默认text
maxlength 为长度默认不限
<!-- isBorder 是否有边框 默认 true有-->
-->
<template>
<view class="input-box" :class="isBorder ? '' : 'border-none'">
<view class="label"> <text class="tex">*</text> {{ label }}</view>
<input class="iput" :type="text" :value="sea" @input="onClickInput" :placeholder="'请输入' + label" :maxlength="maxlength" placeholder-style="font-size: 28rpx; color:#999999" >
</view>
</template>
<script>
import { watch } from "vue";
export default {
props: {
value: {
default: ''
},
label: {
default: ''
},
type: {
default: 'text'
},
maxlength: {
default: -1
},
isBorder: {
default: true
}
},
name:"input-li",
data() {
return {
sea: ''
};
},
created() {
// console.log(this.value)
this.sea = this.value
},
watch: {
value: (val) => {
// console.log(val)
// this.sea = val
}
},
methods: {
onClickInput(e) {
this.$emit('input', e.target.value)
},
onClickName() {
this.$emit('click', 'name')
}
}
}
/* emits */
// const emits = emits(['update:modelValue', 'click'])
</script>
<style lang='scss' scoped>
.input-box{
width: 100%;
height: 100rpx;
background: #fff;
padding: 0 16rpx;
box-sizing: border-box;
display: flex;
align-items: center;
font-size: 28rpx;
border-bottom: 2rpx dashed #D9D9D9;
.label{
width: 200rpx;
line-height: 40rpx;
display: flex;
.tex{
display: block;
color: #E14343;
margin-right: 8rpx;
line-height: 40rpx;
width: 14rpx;
}
}
.iput{
flex: 1;
text-align: right;
font-size: 28rpx;
}
}
.border-none{
border: none;
}
</style>
components/form/select-li.vue
+122
View File
@@ -0,0 +1,122 @@
<!-- label 为字段名 -->
<!-- type 为输入框类型 默认text -->
<!-- laebel 为字段名 -->
<!-- isBorder 是否有边框 默认 true有-->
<template>
<view class="select-box" :class="isBorder ? '' : 'border-none'">
<view class="label"> <text class="tex">*</text> {{ label }}</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChange" :value="index" range-key="name" :range="array">
<view class="uni-input">
<view v-if="index || index == 0" >{{ array[index].name }}</view>
<view class="placeholder" v-else >请选择{{label}}</view>
<image class="img" src="../../static/jiantou.png" ></image>
</view>
</picker>
</view>
</view>
</template>
<script>
import { watch } from "vue";
export default {
props: {
value: {
default: ''
},
label: {
default: ''
},
array: {
default: []
},
isBorder: {
default: true
}
},
data() {
return {
index: null,
};
},
watch: {
array: function (newArr){
newArr.forEach( (item, index) =>{
if(item.id == this.value){
this.index = index
}
})
}
},
created() {
this.array.forEach( (item, index) =>{
if(item.id == this.value){
this.index = index
}
})
},
methods: {
bindPickerChange: function(e) {
this.index = e.detail.value
this.array.forEach( (item, index) =>{
if(index == e.detail.value) {
this.$emit('input', item.id)
}
})
},
}
}
</script>
<style lang='scss' scoped>
.select-box{
width: 100%;
height: 100rpx;
background: #fff;
padding: 0 16rpx;
box-sizing: border-box;
display: flex;
align-items: center;
font-size: 28rpx;
border-bottom: 2rpx dashed #D9D9D9;
.label{
width: 200rpx;
line-height: 40rpx;
display: flex;
.tex{
display: block;
color: #E14343;
margin-right: 8rpx;
line-height: 40rpx;
width: 14rpx;
}
}
.uni-list-cell-db{
flex: 1;
height: 100rpx;
.uni-input{
width: 100%;
height: 100rpx;
display: flex;
justify-content: flex-end;
align-items: center;
.img{
width: 32rpx;
height: 32rpx;
margin-left: 4rpx;
}
.placeholder{
color: #999999;
}
}
}
}
.border-none{
border: none;
}
</style>