<template>
|
|
<view v-if="show">
|
<u-popup v-model="showPop" :mask-close-able="false" @close="emit('close')" @open="open" mode='bottom'>
|
<view class="relative pb-56 bgcolor111">
|
<view class="tit-close flex a-center j-between pt-38 pr-31 pl-33">
|
请选择出生日期 <image src="/static/image/close.png" class="w-46 h-46" @tap="emit('close')"
|
mode="aspectFill">
|
</image>
|
</view>
|
<picker-view :indicator-style="indicatorStyle" indicator-class="check-class" :value="value"
|
@change="bindChange" class="picker-view mb-63">
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in months" :key="index">
|
{{ item }}月
|
</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in days" :key="index">
|
{{ item }}日
|
</view>
|
</picker-view-column>
|
</picker-view>
|
|
<view class="h-63 w100"></view>
|
<view class="sure-btn" @click="submitDate">
|
确认
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
ref,
|
watch,
|
nextTick
|
} from 'vue'
|
|
// 定义组件名称
|
defineOptions({
|
name: "selectDateYear"
|
})
|
|
// 定义 props
|
const props = defineProps({
|
show: {
|
type: Boolean,
|
default: () => false
|
},
|
currentDate: {
|
type: String,
|
default: () => ''
|
}
|
})
|
|
// 定义 emits
|
const emit = defineEmits(['close', 'submit'])
|
|
// 响应式数据
|
const indicatorStyle = ref({})
|
const years = ref([])
|
const months = ref([])
|
const day = ref(31)
|
const days = ref([])
|
const value = ref([0, 0, 0])
|
const showPop = ref(false)
|
|
// 监听 show 变化
|
watch(() => props.show, (newValue) => {
|
console.log('111111111111111', newValue)
|
if (newValue) {
|
showPop.value = newValue
|
}
|
})
|
|
// 方法
|
const open = () => {
|
months.value = []
|
days.value = []
|
years.value = []
|
day.value = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
|
let y = new Date().getFullYear()
|
let mo = new Date().getMonth() + 1
|
let da = new Date().getDate()
|
for (let i = -100; i < 10; i++) {
|
years.value.push(y + i)
|
}
|
for (let i = 1; i <= 12; i++) {
|
months.value.push(i)
|
}
|
for (let i = 1; i <= day.value; i++) {
|
days.value.push(i)
|
}
|
|
nextTick(() => {
|
// 默认选中今天
|
let yearIndex = years.value.indexOf(y)
|
let monthIndex = months.value.indexOf(mo)
|
let dayIndex = days.value.indexOf(da)
|
|
// 如果传入了有效的日期格式，则使用传入的日期
|
if (props.currentDate && props.currentDate !== '全部日期' && props.currentDate !== '请选择' && props.currentDate !== '') {
|
const dateArr = props.currentDate.split('-');
|
if (dateArr.length === 3) {
|
const year = parseInt(dateArr[0]);
|
const month = parseInt(dateArr[1]);
|
const dayVal = parseInt(dateArr[2]);
|
const yearIdx = years.value.indexOf(year);
|
const monthIdx = months.value.indexOf(month);
|
const dayIdx = days.value.indexOf(dayVal);
|
|
// 只有当所有索引都有效时才使用传入的日期
|
if (yearIdx !== -1 && monthIdx !== -1 && dayIdx !== -1) {
|
yearIndex = yearIdx;
|
monthIndex = monthIdx;
|
dayIndex = dayIdx;
|
}
|
}
|
}
|
|
// 确保索引有效，如果无效则使用今天的日期
|
if (yearIndex === -1) yearIndex = years.value.indexOf(y);
|
if (monthIndex === -1) monthIndex = months.value.indexOf(mo);
|
if (dayIndex === -1) dayIndex = days.value.indexOf(da);
|
|
value.value = [yearIndex, monthIndex, dayIndex];
|
})
|
}
|
|
const bindChange = (e) => {
|
value.value = e.detail.value
|
if (value.value[0] != 0) {
|
months.value = []
|
for (let i = 1; i <= 12; i++) {
|
months.value.push(i)
|
}
|
day.value = new Date(new Date().getFullYear(), value.value[1], 0).getDate();
|
days.value = []
|
for (let i = 1; i <= day.value; i++) {
|
days.value.push(i)
|
}
|
} else {
|
months.value = []
|
for (let i = 1; i <= 12; i++) {
|
months.value.push(i)
|
}
|
|
day.value = new Date(new Date().getFullYear(), months.value[value.value[1]], 0).getDate();
|
days.value = []
|
let da = new Date().getDate()
|
for (let i = da; i <= day.value; i++) {
|
days.value.push(i)
|
}
|
}
|
|
if (value.value[1] != 0) {
|
day.value = new Date(new Date().getFullYear(), months.value[value.value[1]], 0).getDate();
|
days.value = []
|
for (let i = 1; i <= day.value; i++) {
|
days.value.push(i)
|
}
|
} else {
|
days.value = []
|
day.value = new Date(new Date().getFullYear(), months.value[value.value[1]], 0).getDate();
|
let da = 1
|
for (let i = da; i <= day.value; i++) {
|
days.value.push(i)
|
}
|
}
|
}
|
|
const submitDate = () => {
|
let dateValue = ''
|
if (value.value[0] == -1) {
|
value.value[0] = 0
|
}
|
|
if (value.value[1] == -1) {
|
value.value[1] = 0
|
}
|
|
if (value.value[2] == -1) {
|
value.value[2] = 0
|
}
|
let dayVal = days.value[value.value[2]] < 10 ? '0' + days.value[value.value[2]] : days.value[value.value[2]]
|
if (months.value[value.value[1]] < 10) {
|
dateValue = years.value[value.value[0]] + "-0" + months.value[value.value[1]] + '-' + dayVal
|
} else {
|
dateValue = years.value[value.value[0]] + "-" + months.value[value.value[1]] + '-' + dayVal
|
}
|
|
emit('submit', dateValue)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.bgcolor111 {
|
background: #FFFFFF;
|
}
|
|
.tit-close {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: #333333;
|
padding-bottom: 40.38rpx;
|
border-bottom: 1rpx solid rgba(229, 229, 229, 1);
|
}
|
|
.color1 {
|
color: rgba(0, 0, 0, .60);
|
}
|
|
::v-deep .selected {
|
background-color: #007AFF;
|
/* 选中的背景色 */
|
color: white;
|
/* 选中的文字颜色 */
|
}
|
|
.picker-view {
|
width: 750rpx;
|
height: 460.54rpx;
|
margin-bottom: 63rpx;
|
font-size: 35rpx;
|
}
|
|
::v-deep .picker-view {
|
// width: 300px;
|
// justify-content: center;
|
margin: 0 auto;
|
|
.item {
|
text-align: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #333333;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
// line-height: 50rpx;
|
}
|
}
|
|
.btns {
|
padding: 24rpx;
|
justify-content: space-between;
|
border-bottom: 2rpx solid #E5E5E5;
|
;
|
}
|
|
|
.cancel {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #1539AF;
|
line-height: 42rpx;
|
}
|
|
.sure {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 30rpx;
|
|
color: #1539AF;
|
|
}
|
|
::v-deep .check-class {
|
height: 85rpx;
|
font-size: 38rpx !important;
|
color: #333333 !important;
|
}
|
|
.sure-btn {
|
width: 635rpx;
|
height: 96rpx;
|
background: linear-gradient(270deg, #08C866 0%, #06C584 100%);
|
box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(6, 197, 132, 0.15), 0rpx 8rpx 19rpx 0rpx rgba(6, 197, 132, 0.19);
|
border-radius: 67rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin: 0 auto;
|
}
|
</style>
|
