circulation_ancientCoins_new/components/SelectYear.vue

<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 <= date.getFullYear(); i++) {
					years.push(i)
				}
        return {
            cssUrl:this.cssUrl,
						value:[90],
            currentYear: 1990,
            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>