app/pages/me/modifyBirthday.vue

<template>
	<view class="page">
		<view class="line"></view>
		<view class="picker-box">
			<picker
				class="birthday-item"
				mode="date"
				:value="date"
				:start="startDate"
				:end="endDate"
				@change="bindDateChange"
			>
				<view class="left-picker-part">
					<text class="date-lable">{{ date }}</text>
				</view>
				<view class="left-choose">
					<image
						src="/static/images/icon-datepicker.png"
						class="icon-right"
					></image>
				</view>
			</picker>
		</view>

		<view class="notice">
			<text class="tips">*注：点击即可选择生日噢~</text>
		</view>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'; //缓存
import { vlogModifyUserInfo } from '@/api/vlog';
import { dateFormat } from '@/utils/tools.js';
export default {
	data() {
		return {
			date: '',
			startDate: '1970-01-01',
			endDate: '2088-08-08'
		};
	},
	onNavigationBarButtonTap() {
		this.updateBirthday();
	},
	onLoad() {
		let birthday = storage.getVlogUserInfo().birthday;
		this.date = this.getGraceDateStr(new Date(birthday));
	},
	methods: {
		async updateBirthday() {
			let me = this;
			let userId = storage.getVlogUserInfo().id;
			let birth = this.date;
			let pendingUserInfo = {
				id: userId,
				birthday: birth,
				type: 4
			};
			var result = await vlogModifyUserInfo(pendingUserInfo, 4);
			if (result.data.status == 200) {
				let userInfoUpdated = result.data.data;
				// 重置本地用户信息
				storage.setVlogUserInfo(userInfoUpdated);
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
				var timer = setTimeout(() => {
					clearTimeout(timer);
					uni.navigateBack({
						delta: 1,
						animationType: 'fade-out'
					});
				}, 1000);
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},
		bindDateChange: function (e) {
			this.date = e.detail.value;
		},
		getGraceDateStr(date) {
			return dateFormat('YYYY-MM-DD', date);
		}
	}
};
</script>

<style lang="scss">
.page {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #181b27;

	.line {
		height: 1rpx;
		background-color: #393a41;
		width: 750rpx;
	}

	.picker-box {
		margin: 50rpx auto 20rpx auto;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		.birthday-item {
			background-color: #4a4c52;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 750rpx;
			height: 140rpx;
			border-radius: 40rpx;
			.left-picker-part {
				align-self: center;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: 280rpx;
				height: 120rpx;
				.date-lable {
					align-self: center;
					color: #ffffff;
					margin-left: 40rpx;
				}
			}
			.left-choose {
				align-self: center;
				width: 80rpx;
				height: 120rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				.icon-right {
					align-self: center;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
	.notice {
		margin-left: 30rpx;
		.tips {
			font-size: 24rpx;
			font-weight: 400;
			color: #bfbfbf;
			width: 700rpx;
			margin-top: 20rpx;
		}
	}
}
</style>