210设备管控页弹框功能

components/TimePicker/TimePicker.vue

@@ -0,0 +1,88 @@
+<template>
+  <picker-view 
+    class="picker-body" 
+    :value="timeIndex" 
+    @change="handleTimeChange"
+  >
+    <!-- 分钟列 -->
+    <picker-view-column>
+      <view 
+        v-for="min in minutes" 
+        :key="min"
+        class="item"
+        :class="{ active: timeIndex[0] === minutes.indexOf(min) }"
+      >{{ min }}分</view>
+    </picker-view-column>
+    
+    <!-- 秒数列 -->
+    <picker-view-column>
+      <view 
+        v-for="sec in seconds" 
+        :key="sec"
+        class="item"
+        :class="{ active: timeIndex[1] === seconds.indexOf(sec) }"
+      >{{ sec }}秒</view>
+    </picker-view-column>
+  </picker-view>
+</template>
+
+<script>
+export default {
+  name: "TimePicker",
+  props: {
+    // 初始时间（格式：{ minutes: '02', seconds: '30' }）
+    defaultTime: {
+      type: Object,
+      default: () => ({ minutes: '00', seconds: '00' })
+    }
+  },
+  data() {
+    return {
+      minutes: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
+      seconds: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
+      timeIndex: [0, 0], // 当前选中索引
+      selectedTime: { minutes: '00', seconds: '00' } // 当前选择的时间
+    };
+  },
+  created() {
+    // 初始化默认时间
+    const minIndex = this.minutes.indexOf(this.defaultTime.minutes);
+    const secIndex = this.seconds.indexOf(this.defaultTime.seconds);
+    this.timeIndex = [minIndex, secIndex];
+    this.selectedTime = { ...this.defaultTime };
+  },
+  methods: {
+    // 时间变化时更新选中值
+    handleTimeChange(e) {
+      this.timeIndex = e.detail.value;
+      const [minIdx, secIdx] = this.timeIndex;
+      this.selectedTime = {
+        minutes: this.minutes[minIdx],
+        seconds: this.seconds[secIdx]
+      };
+      this.$emit("change", this.selectedTime); // 实时通知父组件
+    },
+    
+    // 提供给父组件的方法：获取当前时间
+    getCurrentTime() {
+      return this.selectedTime;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.picker-body {
+  height: 180px;
+  background: #3A3A3A;
+  border-radius: 10px;
+}
+.item {
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  padding: 10px 0;
+}
+.item.active {
+  color: #A3FF00; /* 选中项高亮 */
+}
+</style>