dangfei-weapp/pages/pickTime/pickTime.vue

<template>
	<view class="contentBox">
		<view class="timeHead">
			<view class="timeTitle">{{year}}年{{month}}月</view>
			<!-- <view class="payMoney">支出￥136.00</view> -->
		</view>
		<view class="pickTimeBox">
			<view class="line line1"></view>
			<view class="line line2"></view>
			<picker-view class="pickerView" @change="bindChange" :value="value">
				<picker-view-column>
					<view class="item" style="text-align: right;" v-for="(item,index) in years" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column class="pickMonth">
					<view class="item" style="text-align: left;"  v-for="(item,index) in months" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
			
		</view>
		<view class="btnBox">
			<text @click="handCancle">取消</text>
			<text @click="handSure">确定</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			const date = new Date()
			const years = []
			const year = date.getFullYear();
			const months = []
			const month = date.getMonth() + 1
			for (let i = year-1; i <= year+1; i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			const y_i=this.year-year
			const m_i=this.month-month
			return {
				year,
				month,
				years,
				months,
				y_i,
				m_i,
				value:[]
			}
		},
		onLoad(options){
			const { date } = options
			const arr = date.split("-")
			this.y_i=Number(arr[0])-this.year+1
			this.x_i=Number(arr[1])-1
			this.value=[this.y_i,this.x_i]
			this.year = arr[0]
			this.month = arr[1]
		},
		methods:{
			bindChange(e){
				const val = e.detail.value
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
			},
			handCancle(){
				uni.navigateBack({
				    delta: 1
				});
			},
			handSure(){
				
				try{
					this.month = Number(this.month)
					this.month = this.month > 10 ? this.month : '0'+this.month
				}catch(e){
					this.month = this.month
				}
				
				uni.redirectTo({
					url:`/pages/payList/payList?year=${this.year}&month=${this.month}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: $uni-bg-color-normal;
		overflow: hidden;
	}
	.contentBox{
		margin-top: 12rpx;
		background: $uni-bg-color;
		padding: 0 53rpx;
	}
	.timeHead{
		height:70rpx;
		width: calc(100% - 19rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 19rpx;
	}
	.timeTitle{
		font-size: 32rpx;
		color:#2A2A2A;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.timeTitle::after{
		content: "";
		display: block;
		width: 26rpx;
		height: 15rpx;
		background: url(../../static/arrow_down.jpg);
		background-size: 100% 100%;
		margin-left: 16rpx;
	}
	.payMoney{
		font-size: 24rpx;
		color: #999999;
	}
	.pickTimeBox{
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		position: relative;
		margin-bottom: 25rpx;
	}
	.pickerView{
		width: 100%;
		height: 300rpx;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}
	.pickerView .item{
		width: 100%;
		line-height: 34px;
		position: relative;
	}
	.pickMonth .item{
		width: 100%;
		margin-left: 35rpx;
		text-align: center;
	}
	.picker-box,.uni-picker-view-indicator{
		border-bottom: 1px solid #2E8BFC;
		border-top: 1px solid #2E8BFC;
		font-size: 34rpx !important;
	}
	.line{
		width: 175rpx;
		height: 1px;
		background: #2E8BFC;
		position: absolute;
		left: 237rpx;
		z-index: 999;
	}
	.line::after{
		content: "";
		display: block;
		width: 30rpx;
		height: 1px;
		background: #FFFFFF;
		margin-left: 90rpx;
	}
	.line1{
		top: 118rpx;
	}
	.line2{
		top: 180rpx;
	}
	.btnBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #2A2A2A;
	}
</style>