94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<template>
|
||
<view class="page-wrap">
|
||
<view class="page-bg">
|
||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||
<view class="notice">
|
||
请如实填写个人资料，真实的资料会更受欢迎
|
||
</view>
|
||
<view class="title">
|
||
你的生日是？
|
||
</view>
|
||
<view class="desc">
|
||
给你推荐年龄相近的异性
|
||
</view>
|
||
<view class="birthday">
|
||
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class" :value="value" @change="bindChange" class="picker-view">
|
||
<picker-view-column>
|
||
<view class="item" :class="{current: item == year}" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view class="item" :class="{current: index == month - 1}" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view class="item" :class="{current: index == day - 1}" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
|
||
|
||
<view class="btn-wrapper">
|
||
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" :disabled="disabled" shape="circle"
|
||
@click="handleSubmit"></u-button>
|
||
</view>
|
||
<u-safe-bottom></u-safe-bottom>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data: function() {
|
||
const date = new Date()
|
||
const years = []
|
||
const months = []
|
||
const month = date.getMonth() + 1
|
||
const days = []
|
||
const day = date.getDate()
|
||
for (let i = 1950; i <= date.getFullYear() - 18; i++) {
|
||
years.push(i)
|
||
}
|
||
for (let i = 1; i <= 12; i++) {
|
||
months.push(i)
|
||
}
|
||
for (let i = 1; i <= 31; i++) {
|
||
days.push(i)
|
||
}
|
||
const year = years[40]
|
||
return {
|
||
title: 'picker-view',
|
||
years,
|
||
year,
|
||
months,
|
||
month,
|
||
days,
|
||
day,
|
||
value: [40, month - 1, day - 1],
|
||
indicatorStyle: `height: 50px;color: #FFF;`
|
||
}
|
||
},
|
||
methods: {
|
||
bindChange: function(e) {
|
||
const val = e.detail.value
|
||
this.year = this.years[val[0]]
|
||
this.month = this.months[val[1]]
|
||
this.day = this.days[val[2]]
|
||
},
|
||
handleSubmit(){
|
||
|
||
const userBase = uni.getStorageSync('UserBase') || {}
|
||
userBase.birthday = [this.year,this.month,this.day].join("-")
|
||
uni.setStorageSync("UserBase", userBase)
|
||
this.$push('/sub_pages/user/base/height/height')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../base.scss";
|
||
.birthday{
|
||
margin-top: 100rpx;
|
||
}
|
||
|
||
</style> |