vist_go_uniApp/packageUser/pages/user-info/birthday-change.vue

<template>
	<view class="Date">
		<view class="content">
			<!-- 顶部标题 -->
			<view class="top-title">出生日期</view>
			<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
				<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>
		<button class="save-button" @click="ack">保存</button>
	</view>
</template>

<script>
	import {
		memberUpdate,
		memberDetail
	} from '@/config/api.js';
	export default {
		props: {
			selectedDate: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				user: {},
				years: [],
				year: '',
				months: [],
				month: '',
				days: [],
				day: '',
				value: [],
				indicatorStyle: 'height: 50px;'
			}
		},
		mounted() {
			const date = new Date();
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const selectedYear = new Date(this.selectedDate).getFullYear() || year;
			const selectedMonth = new Date(this.selectedDate).getMonth() + 1 || month;
			const selectedDay = new Date(this.selectedDate).getDate() || day;
			setTimeout(() => {
				this.value = [this.years.indexOf(selectedYear), selectedMonth - 1, selectedDay - 1];
				this.year = selectedYear;
				this.month = selectedMonth < 10 ? `0${selectedMonth}` : selectedMonth;
				this.day = selectedDay < 10 ? `0${selectedDay}` : selectedDay;
			}, 0);
		},
		created() {
			this.init();
		},
		onLoad(op) {
			this.detail();
		},
		methods: {
			async detail() {
				const data = await memberDetail();
				if (data.code == 200) {
					this.user = data.data;
				}
			},
			init() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();

				// 生成年份范围（例如从 1900 年到当前年份）
				const years = [];
				const startYear = 1900; // 你可以根据需要调整起始年份
				for (let i = startYear; i <= year; i++) {
					years.push(i);
				}

				// 生成月份范围（1 到 12）
				const months = [];
				for (let i = 1; i <= 12; i++) {
					months.push(i);
				}

				// 更新数据
				this.years = years;
				this.months = months;
				this.getDays(year, month);
			},
			getDays(year, month) {
				const day = new Date(year, month, 0).getDate();
				const days = [];
				for (let i = 1; i <= day; i++) {
					days.push(i);
				}
				this.days = days;
			},
			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]];

				// 切换年份或月份时，更新天数
				this.getDays(this.year, this.month);
			},
			esc() {
				this.$emit('popType', false);
			},
			ack() {
				const date = new Date(this.year, this.month - 1, this.day);
				const formattedDate = `${this.year}-${this.month}-${this.day}`; // 手动格式化日期
				console.log(formattedDate);
				this.user.birthday = formattedDate;
				memberUpdate(this.user).then((res) => {
					if (res.code == 200) {
						uni.$u.toast("操作成功");
						uni.navigateBack({
							delta: 1 // delta 表示返回的页面数，1 表示返回上一页
						});
						uni.setStorageSync('user', null)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Date {
		background-color: white;
		padding: 30px;
		min-height: 100vh;

		.content {
			width: 100%;
			/* 内容区域宽度 */
			background: #FFFFFF;
			padding: 20px;
			display: flex;
			flex-direction: column;

			.top-title {
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 20px;
			}

			.picker-view {
				width: 100%;
				height: 200px;
				/* 选择器高度 */
				margin-bottom: 20px;
			}

			.item {
				line-height: 30px;
				font-size: 32rpx;
				text-align: center;
			}


		}
	}

	.save-button {
		background-color: #007aff;
		color: white;
		margin-top: 50rpx;
		border: none;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 16px;
	}
</style>