10 changed files with 472 additions and 325 deletions
@ -1,170 +0,0 @@ |
|||
<template> |
|||
<uni-popup ref="selectDate" :safe-area="false"> |
|||
<view class="popup-container"> |
|||
<view class="header"> |
|||
<view class="title PfScMedium">出生年份</view> |
|||
<image class="close-icon" @tap="closePop" :src="cssUrl + 'close.svg'" /> |
|||
</view> |
|||
<view class="date">请选择阳历出生年份</view> |
|||
|
|||
<view class="yearPicker date-wraper"> |
|||
<picker-view :value="value" @change="handleYearChange" class="picker-view"> |
|||
<picker-view-column class="picker-column"> |
|||
<view class="item" v-for="(item, index) in years" :key="index">{{ item }}</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
|
|||
<view class="confirm-button-wrapper btPadding"> |
|||
<view class="confirm-button PfScMedium" @click="comfirmYear"> |
|||
确认 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
const date = new Date() |
|||
const years = [] |
|||
const year = date.getFullYear() |
|||
for (let i = 1900; i <= year; i++) { |
|||
years.push(i) |
|||
} |
|||
var currentYear = year - 10 |
|||
var value = [years.indexOf(currentYear)] |
|||
return { |
|||
value, |
|||
currentYear, |
|||
cssUrl:this.cssUrl, |
|||
years: years, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleYearChange(e) { |
|||
this.currentYear = this.years[e.detail.value]; |
|||
}, |
|||
comfirmYear(){ |
|||
this.$emit('change', this.currentYear) |
|||
this.closePop() |
|||
}, |
|||
show(){ |
|||
this.$refs.selectDate.open('bottom') |
|||
}, |
|||
closePop() { |
|||
this.$refs.selectDate.close() |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.yearPicker { |
|||
height: 470rpx; |
|||
background: #F7F7F7; |
|||
.picker-view { |
|||
height: 420rpx; |
|||
margin: 0 auto; |
|||
padding: 0 35rpx; |
|||
background: #F7F7F7; |
|||
|
|||
} |
|||
.item { |
|||
line-height: 70rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.popup-container { |
|||
position: relative; |
|||
max-height: calc(100vh - 200rpx); |
|||
overflow-y: scroll; |
|||
background: #ffffff; |
|||
border-radius: 40rpx 40rpx 0px 0px; |
|||
padding: 42rpx 54rpx 16rpx; |
|||
|
|||
.header { |
|||
position: relative; |
|||
text-align: center; |
|||
|
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
line-height: 36rpx; |
|||
} |
|||
|
|||
.close-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.content-container { |
|||
padding: 24rpx 0rpx 68rpx; |
|||
font-family: PingFang SC; |
|||
|
|||
.content-item { |
|||
background: #FAFAFA; |
|||
|
|||
&:first-child { |
|||
border-top: none; |
|||
padding: 25rpx 24rpx; |
|||
} |
|||
|
|||
padding: 19rpx 24rpx; |
|||
border-top: 2rpx solid #F0F0F0; |
|||
|
|||
span {} |
|||
|
|||
.bold { |
|||
font-weight: 500; |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.top { |
|||
margin-top: 12rpx; |
|||
margin-bottom: 12rpx; |
|||
|
|||
} |
|||
|
|||
.special { |
|||
color: #949699; |
|||
letter-spacing: 2rpx; |
|||
font-size: 30rpx; |
|||
|
|||
.time { |
|||
margin: 0 6rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.confirm-button { |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #ffffff; |
|||
margin-top: 46rpx; |
|||
line-height: 92rpx; |
|||
text-align: center; |
|||
width: 100%; |
|||
height: 92rpx; |
|||
background: #39d067; |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
.date { |
|||
margin: 12rpx 36rpx 42rpx; |
|||
text-align: center; |
|||
color: #000000; |
|||
font-size: 26rpx; |
|||
font-family: PingFang SC; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,293 @@ |
|||
<template> |
|||
<view class="datePicker"> |
|||
<uni-popup ref="updateTreatment" :safe-area="false"> |
|||
<view class="popup-container"> |
|||
<view class="header"> |
|||
<view class="title PfScMedium">出生年份</view> |
|||
</view> |
|||
<view class="desc">请选择阳历出生年份</view> |
|||
|
|||
<view class="content-container"> |
|||
|
|||
<view class="datepicker-wrapper"> |
|||
<picker-view mask-class="datepicker-mask-class" :indicatorStyle="indicatorStyle" indicator-class="datepicker-custom-indicator" :value="dateValue" @change="onDateChange" @pickstart="pickstart" @pickend="pickend" class="datepicker-picker-view" v-if="visible"> |
|||
<picker-view-column v-show="showPickerColumn(0)"> |
|||
<view :class="getItemClass(0, index)+'item ft24'" v-for="(item, index) in years" :key="index">{{item}}</view> |
|||
</picker-view-column> |
|||
|
|||
<picker-view-column v-show="showPickerColumn(1)"> |
|||
<view :class="getItemClass(1, index)+'item ft24'" v-for="(item, index) in months" :key="index">{{item.toString().length==1?('0'+item):item}}</view> |
|||
</picker-view-column> |
|||
|
|||
<picker-view-column v-show="showPickerColumn(2)"> |
|||
<view :class="getItemClass(2, index)+'item ft24'" v-for="(item, index) in days" :key="index">{{item.toString().length==1?('0'+item):item}}</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
|
|||
|
|||
<view class="close-up-btn" @click="closePop"> |
|||
<img :src="((cssUrl+'pop_close_ic.svg').replace('/user/', '/'))" alt="" /> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="confirm-button-wrapper btPadding"> |
|||
<view class="confirm-button PfScMedium" @click="onUpdateTreatmentConfirmButtonClick"> |
|||
确认 |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name:'datePicker', |
|||
data() { |
|||
const date = new Date() |
|||
const years = [] |
|||
var year = date.getFullYear() |
|||
const months = [] |
|||
var month = date.getMonth() + 1 |
|||
const days = [] |
|||
var day = date.getDate() |
|||
for (let i = date.getFullYear()-100; i <= date.getFullYear(); i++) { |
|||
years.push(i) |
|||
} |
|||
for (let i = 1; i <= 12; i++) { |
|||
months.push(i) |
|||
} |
|||
for (let i = 1; i <= 31; i++) { |
|||
days.push(i) |
|||
} |
|||
|
|||
month = 1; |
|||
day = 1; |
|||
year = year - 10 |
|||
var datestr = year+'/'+(month.toString().length==1?('0'+month):month)+'/'+(day.toString().length==1?('0'+day):day) |
|||
|
|||
var dateValue = [years.indexOf(year), months.indexOf(month), days.indexOf(day)]; |
|||
return { |
|||
title: "datepicker-picker-view", |
|||
years, |
|||
year, |
|||
months, |
|||
month, |
|||
days, |
|||
day, |
|||
cssUrl:this.cssUrl, |
|||
dateValue, |
|||
date:datestr, |
|||
treatmentDateString:'', |
|||
indicatorStyle: 'height: '+uni.upx2px(68)+'px;', |
|||
visible: true, |
|||
timetimer:null, |
|||
dateChangeFlag:true |
|||
} |
|||
}, |
|||
props: { |
|||
defaultDate:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
format:{ |
|||
type:String, |
|||
default:'yyyy' |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
methods: { |
|||
showPickerColumn(columnIndex) { |
|||
if (columnIndex === 0 && this.format.indexOf('yyyy') !== -1) return true |
|||
if (columnIndex === 1 && this.format.indexOf('mm')!== -1) return true |
|||
if (columnIndex === 2 && this.format.indexOf('dd')!== -1) return true |
|||
return false |
|||
}, |
|||
getItemClass(columnIndex, index) { |
|||
var curindex = this.dateValue[columnIndex] |
|||
if(index == curindex) return 'selected PfScMedium '; |
|||
var abs = Math.abs(index-curindex) |
|||
if(abs <= 3) return 'style'+abs+' '; |
|||
return ''; |
|||
}, |
|||
open(direction){ |
|||
this.visible = false; |
|||
this.$nextTick(() => { |
|||
this.visible = true; |
|||
this.$refs.updateTreatment.open(direction); |
|||
}); |
|||
}, |
|||
pickstart(e) { |
|||
this.dateChangeFlag = false |
|||
}, |
|||
pickend(e) { |
|||
this.dateChangeFlag = true |
|||
}, |
|||
onDateChange(e) { |
|||
var datainfo = e.detail.value |
|||
var year = this.years[datainfo[0]] |
|||
var month = this.months[datainfo[1]] |
|||
var day = this.days[datainfo[2]] |
|||
this.dateValue = [datainfo[0], datainfo[1], datainfo[2]]; |
|||
this.date = year+'/'+(month.toString().length==1?('0'+month):month)+'/'+(day.toString().length==1?('0'+day):day) |
|||
}, |
|||
closePop() { |
|||
this.$refs.updateTreatment.close(); |
|||
this.visible = false; |
|||
}, |
|||
onUpdateTreatmentConfirmButtonClick() { |
|||
if(!this.dateChangeFlag) return |
|||
|
|||
this.treatmentDateString = this.date; |
|||
this.$emit('getDateString', this.treatmentDateString); |
|||
this.$refs.updateTreatment.close(); |
|||
this.visible = false; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.datePicker{ |
|||
.popup-container { |
|||
position: relative; |
|||
max-height: calc(100vh - 50rpx); |
|||
overflow-y: scroll; |
|||
background: #ffffff; |
|||
border-radius: 40rpx 40rpx 0px 0px; |
|||
padding: 42rpx 32rpx 0; |
|||
|
|||
.header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
height: 50px; |
|||
line-height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.close-icon { |
|||
position: absolute; |
|||
z-index: 1; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
right: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
.desc{ |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 38rpx; |
|||
height: 38rpx; |
|||
color: #666666; |
|||
text-align: center; |
|||
margin-top: 12rpx; |
|||
} |
|||
.content-container{ |
|||
width: 100%; |
|||
padding: 0 25rpx; |
|||
box-sizing: border-box; |
|||
margin-bottom: 42rpx; |
|||
background: #F7F7F7; |
|||
|
|||
.datepicker-wrapper{ |
|||
width: calc(100% - 80rpx); |
|||
margin: 0 auto; |
|||
} |
|||
.close-up-btn{ |
|||
position: absolute; |
|||
right: 44rpx; |
|||
top: 44rpx; |
|||
z-index: 9; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
img{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
.item{ |
|||
line-height: 68rpx; |
|||
height: 68rpx; |
|||
color: #E5E5E5; |
|||
&.selected { |
|||
font-size: 28rpx !important; |
|||
color: #000000 !important; |
|||
} |
|||
&.style1 { |
|||
font-size: 26rpx !important; |
|||
|
|||
color: #999999 !important; |
|||
} |
|||
&.style2 { |
|||
color: #BEBEBE !important; |
|||
font-size: 24rpx !important; |
|||
} |
|||
&.style3 { |
|||
color: #E5E5E5 !important; |
|||
font-size: 24rpx !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.datepicker-picker-view { |
|||
margin-top: 46rpx; |
|||
width: 100%; |
|||
height: 470rpx; |
|||
background: #F7F7F7; |
|||
} |
|||
|
|||
.item { |
|||
line-height: 100rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.confirm-button-wrapper{ |
|||
box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13); |
|||
height: 124rpx; |
|||
width: 750rpx; |
|||
margin-left: -32rpx; |
|||
background: #FFFFFF; |
|||
overflow: hidden; |
|||
position: relative; |
|||
z-index: 888; |
|||
.confirm-button { |
|||
margin: 16rpx 54rpx; |
|||
height: 92rpx; |
|||
background: #39d067; |
|||
border-radius: 16rpx; |
|||
font-size: 32rpx; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
<style> |
|||
>>> .datepicker-mask-class{ |
|||
background-image: none; |
|||
} |
|||
.datepicker-custom-indicatorr::before{ |
|||
border-top: 3rpx solid #D7D7D7 !important; |
|||
} |
|||
.datepicker-custom-indicatorr::after{ |
|||
border-bottom: 3rpx solid #D7D7D7 !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue