esswisdom_app/components/jarvis-timePickerPopup/time-picker-popup.vue

<template>
	<!-- 时间选择器弹窗 -->
	<uni-popup ref="popup" type="bottom" :safe-area="false">
		<view class="custom-picker">
			<view class="custom-picker__header">
				<view class="cancel" :style="{ color: canceColor }" @tap="onCancel">{{ cancelText }}</view>
				<view class="title">{{ title }}</view>
				<view class="confirm" :style="{ color: confirmColor }" @tap="onConfirm">{{ confirmText }}</view>
			</view>
			<picker-view :indicator-class="indicatorClass" :indicator-style="indicatorStyle" class="picker-view"
				:value="value.data" @change="bindChange" @pickstart="pickstart" @pickend="pickend">
				<picker-view-column>
					<view class="picker-view__item" v-for="(item,index) in rangeList[0]" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-view__item" v-for="(item,index) in rangeList[1]" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-view__item" v-for="(item,index) in rangeList[2]" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-view__item" v-for="(item,index) in rangeList[3]" :key="index">{{item}}</view>
				</picker-view-column>
				<view class="horizontal-line1">:</view>
				<view class="horizontal-line2">-</view>
				<view class="horizontal-line3">:</view>
			</picker-view>
			<view class="nav-view">
				<view class="popup-content" :class="{ 'popup-height': devicetype === 'left' || devicetype === 'right' }">
					<view class="popuptext">
					<view class="popuptext_left">
							方向:
					</view>
					<l-switch v-model="defaultValue" :placeholder="['充电', '静置']" dotSize="14px" height="22px" width="32px" @change="onswitch"></l-switch>
					</view>
					<view class="popuptext">
						<view class="popuptext_left">
							功率:
						</view>
						<uni-number-box :value="numberValue" @change="changeValue" />
					</view>
						</view>
			</view>
		</view>
	</uni-popup>
</template>
<!--    -->
<script>
	import {
		props,
		range
	} from './utils.js';
	export default {
		name: 'TimePickerPopup',
		props: props,
		data() {
			return {
				rangeList: range,
				pickerValue: [0, 0, 0, 0],
				isScoll: false, // 是否正在滚动
				numberValue:'',
				defaultValue:true,
				devicetype:''
			}
		},
		methods: {
			/**
			 * 开启弹窗
			 */
			open() {
				// 判断是否传入props -> value
				console.log(this.value);
				console.log(this.rangeList);
				this.numberValue = this.value.numberValue;
				this.defaultValue = this.value.defaultValue;
				if (Array.isArray(this.value.data) && this.value.data.length) {
					this.pickerValue = this.value.data.map((item, index) => this.rangeList[index].findIndex(child =>
						child == this.value.data[index]));
				} else {
					this.pickerValue = [0, 0, 0, 0];
				}
				console.log(this.pickerValue);
				this.$refs.popup.open();
			},
			/**
			 * 关闭弹窗
			 */
			close() {
				this.$refs.popup.close();
				// 重置选中数据
				this.pickerValue = [0, 0, 0, 0];
			},
			/**
			 * 点击确定
			 */
			onConfirm() {
				if(this.numberValue!=''){
					return
					uni.showToast({
						title:'请输入功率!'
					})
				}
				if (!this.isScoll) {
					let data = this.value || ['00', '00', '00', '00'];
					if (this.pickerValue && this.pickerValue.length) {
						data = this.pickerValue.map((item, index) => String(this.rangeList[index][item]));
					}
					console.log(data);
					let obj = {
						numberValue:this.numberValue,
						defaultValue:this.defaultValue,
						data:data
					}
					this.$emit('confirm', obj);
					this.close();
				}
			},
			/**
			 * 点击取消
			 */
			onCancel() {
				this.close();
			},
			/**
			 * 滚动开始
			 */
			pickstart() {
				this.isScoll = true;
			},
			/**
			 * 滚动结束
			 */
			pickend() {
				this.isScoll = false;
			},
			/**
			 * 选择器改变
			 * @param {Object} e
			 */
			bindChange(e) {
				this.pickerValue = e.detail.value;
			},
			changeValue(e){
				console.log(e);
				this.numberValue = e;
			},
			onswitch(e){
				console.log(e);
				this.defaultValue = e;
			}
		}
	}
</script>

<style lang="scss" scoped>
.custom-picker {
  width: 100%;
  height: 800rpx;
  background-color: #fff;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .custom-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;

    .cancel {
      color: #666;
    }

    .title {
      font-size: 32rpx;
      color: #333;
    }

    .confirm {
      color: #2bb781;
    }
  }
}

.picker-view {
  width: 100%;
  height: 400rpx;
  position: relative; /* 使横线相对于 picker-view 定位 */
  &__item {
    line-height: 100rpx;
    text-align: center;
  }

  // 使用 ::v-deep 替代 /deep/
  ::v-deep .picker-view__indicator {
    height: 100rpx;
    color: #2bb781;
  }

  &__segmentation {
    display: flex;
    align-items: center;
  }
}
.picker-view::before{
&::before { content: attr(data-segmentation); display: block; position: absolute; left: 50%; top: 50%; }
}
.horizontal-line1 {
  position: absolute;
  top: 46%; /* 将横线垂直居中 */
  left: 25%;
  
  z-index: 1; /* 确保横线在内容之上 */
}
.horizontal-line2 {
  position: absolute;
  top: 46%; /* 将横线垂直居中 */
  left: 50%;
  
  z-index: 1; /* 确保横线在内容之上 */
}
.horizontal-line3 {
  position: absolute;
  top: 46%; /* 将横线垂直居中 */
  left: 75%;
  
  z-index: 1; /* 确保横线在内容之上 */
}
	/* 弹出层内容样式 */
	 	.popup-content {
	 	  padding: 30px;
		  display: flex;
		  margin-top: 40rpx;
		  justify-content: space-around;
		  // justify-content: space-between;
	 	  text-align: center;
	 	  border-radius: 20rpx;
		  box-sizing: border-box;
	 	}
		/* 文本样式 */
		.popuptext {
			display: flex;
			align-items: center;
		  font-size: 26rpx;
		  color: #333;
		  margin-bottom: 60rpx;
		}
		.popuptext_left{
			margin-right: 20rpx;
		}
		/* 取消按钮样式 */
		.cancel-button {
		  margin-top: 20rpx;
		  font-size: 24rpx;
		  color: #333;
		  border: 0px solid rgba(0, 0, 0, 0) !important;
		  background-color: #fff;
		}
		.uni-button:after{
			border: 0px solid rgba(0, 0, 0, 0) !important;
		}
	
		/* 确认按钮样式 */
		.confirm-button {
			width: 120rpx;
			height: 60rpx;
		  margin-top: 10rpx;
		  font-size: 24rpx;
		  background-color: #007aff;
		  color: #fff;
		}
		/* 根据设备类型调整高度 */
		.popup-height {
		  height: 200px;
		}
		.popupbutton{
			display: flex;
			justify-content: center;
		}
		.l-switch{
			overflow: hidden;
		}
		.l-switch__rail-placeholder{
			height: 100%;
		}
</style>