BiKing/pages/content/components/select-time.vue

<template>
	<uni-popup ref="popupRef" type="bottom">
		
		<view class="popup-box">
			<view class="popup-title">
				<text class="title-side"></text>
				<text class="title-name">时间筛选</text>
				<text class="title-side iconfont">&#xe621;</text>
			</view>
			<view class="time-content">
				<view class="time-vals">
					<view :class="['time-val' , editTimeIndex === 0 ? 'active-time-val' : '']" @click.stop="selectTime(0)">
						<text class="time-lable">开始</text>
						<text class="time-str">{{ timeVal[0]  || '-' }}</text>
					</view>
					<text class="time-link">-</text>
					<view :class="['time-val' , editTimeIndex === 1 ? 'active-time-val' : '']"  @click.stop="selectTime(1)">
						<text class="time-lable">结束</text>
						<text class="time-str">{{ timeVal[1] || '-' }}</text>
					</view>
				</view>
				<view class="times-content">
					<times :time.sync="editTime" />
				</view>
				<view class="time-btns">
					<view class="time-btn ">
						取消
					</view>
					<view class="time-btn active-time-btn">
						确定
					</view>
				</view>

			</view>

		</view>
	</uni-popup>
</template>

<script>
	import {
		getCurrentTime,
		beforeYear
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				activeCurrencyVal: undefined,
				timeVal: [],
				editTimeIndex:0 , // 1: 结束 ，0：开始 
				editTime:''
			};
		},
		onLoad() {

		},
		watch:{
			editTime(newTime , oldTime){
				this.timeVal[this.editTimeIndex] = newTime
			}
		},
		created() {
			this.getTimes()
		},
		mounted() { 
			// this.$refs.popupRef.open()
			
		},
		methods: {
			// 选择时间
			selectTime(index){
				this.editTimeIndex = index
				this.editTime = this.timeVal[index]
			},
			getTimes() {
				const current = getCurrentTime(); // 当前时间
				const beforeYear = getCurrentTime(1); // 一年前的今天
				this.timeVal = [beforeYear, current];
				this.selectTime(0);
			},
			open() {
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
 
		}
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 100%;
		background-color: #Fff;
		border-radius: 50rpx 50rpx 0px 0px;

		.popup-title {
			width: 100%;
			height: 106rpx;
			border-radius: 50rpx 50rpx 0px 0px;
			background-color: #F7F7F7 !important;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			font-weight: 700;

			.title-side {
				flex-shrink: 0;
				font-size: 28rpx;
				width: 40rpx;
				height: 100%;
				line-height: 106rpx;
				color: #666;
				font-weight: 400;
			}
		}

		.time-content {
			width: 100%;
			padding: 20rpx 0;

			.time-vals {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 $pages-padding;

				.time-val {
					flex: 1;
					flex-shrink: 0;
					height: 70rpx;
					border: 1rpx solid $border-color;
					display: flex;
					align-items: center;
					border-radius: 8rpx;
					padding: 0 8rpx;

					.time-lable {
						font-size: 28rpx;
						flex-shrink: 0;
						color: #666;
						padding-right: 30rpx;
					}

					.time-str {
						flex: 1;
						font-size: 24rpx;
						color: #010101;
						font-weight: 600;

					}
				}

				.active-time-val {
					border-color: $Theme-Color;
				}

				.time-link {
					padding: 0 20rpx;
					text-align: center;
				}
			}


			.times-content {
				width: 100%;
				height: 380rpx;
				padding: 30rpx 0;

			}


			.time-btns {
				width: 100%;
				padding: 0 $pages-padding;
				display: flex;
				justify-content: space-between;


				.time-btn {
					width: 100%;
					width: 49%;
					height: 78rpx;
					border-radius: 8rpx;
					text-align: center;
					line-height: 78rpx;
					font-size: 30rpx;
					color: $Theme-Color;
					border: 1rpx solid $Theme-Color;
				}

				.active-time-btn {
					background-color: $Theme-Color;
					color: #fff;
				}
			}

		}

	}
</style>