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