bigDataApp/pages/cb/shuifeizsFirst/timingSetting.vue

<template>
  <view class="timing-setting-page">
    <custom-card>
      <block slot="backText">定时设置</block>
    </custom-card>

    <view class="timing-content">
      <!-- 定时卡片列表 -->
      <view
        class="timer-card"
        v-for="(timer, index) in timerList"
        :key="index"
      >
        <!-- 定时标题和开关 -->
        <view class="timer-header">
          <text class="timer-title">定时{{ index + 1 }}</text>
          <u-switch
            size="40"
            space="4"
            activeColor="#0BBC58"
            inactiveColor="#C3CAD8"
            v-model="timer.enabled"
            @change="onSwitchChange($event, index, timer)"
          />
        </view>

        <!-- 单选按钮组 -->
        <view class="radio-group">
          <view
            class="radio-item"
            :class="{ active: timer.frequency === 'once' }"
            @click="selectFrequency(index, 'once', timer)"
          >
            <view class="radio-icon">
              <view v-if="timer.frequency === 'once'" class="radio-dot"></view>
            </view>
            <text class="radio-text">仅一次</text>
          </view>
          <view
            class="radio-item"
            style="margin-left: 48rpx;"
            :class="{ active: timer.frequency === 'daily' }"
            @click="selectFrequency(index, 'daily', timer)"
          >
            <view class="radio-icon">
              <view v-if="timer.frequency === 'daily'" class="radio-dot"></view>
            </view>
            <text class="radio-text">每天一次</text>
          </view>
        </view>
        <!-- 时间选择器 -->
        <picker
          mode="time"
          :value="timer.time"
          @change="onTimeChange($event, index)"
        >
          <view class="time-picker">
            <text class="time-text" :class="{ placeholder: !timer.time }">
              {{ timer.timeLabel }}
            </text>
            <u-icon name="clock" color="#999999" size="32rpx" />
          </view>
        </picker>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      devBid:'',
      timerList: [],
    };
  },
  onLoad(options) {
    const { devBid } = options;
    this.devBid = devBid;
    this.getTimerList();
  },
  methods: {
    // 编辑
    async editInfo(data){
      const params = {
        devBid: parseInt(this.devBid),
        data: data,
      };
      const resData = await this.$myRequest({
        url:'/api/v2/iot/device/sf/yunshang/timer/edit/',
        method:'POST',
        data: params,
        header: {
          'Content-Type': 'application/json',
          'accept': 'application/json, text/plain, */*'
        }
      })
      console.log(resData,'resDataresData')
      if(resData.code === '000000'){
        uni.showToast({
          title: '保存成功',
          icon: 'success',
        })
      }
    },
    async getTimerList(){
      const resData = await this.$myRequest({
        url:'/api/v2/iot/device/sf/yunshang/timer/list/',
        method:'POST',
        data: {
          devBid: this.devBid,
        },
      })
      for (let i = 0; i < resData.length; i++) {
        const item = resData[i];
        const time = item[`Timer0${i}:TimerHM`];
        const hour = time.slice(0, 2);
        const minute = time.slice(2, 4);
        item.enabled = item[`Timer0${i}:TimerEn`] == 1;
        item.frequency = item[`Timer0${i}:Mode`] == 1 ? 'daily' : 'once';
        item.time = hour + ':' + minute;
        item.timeLabel = hour + ':' + minute;
      }
      this.timerList = resData;
    },
    // 开关状态改变
    onSwitchChange(e, index,timer) {
      console.log(timer,e,'开关状态改变')
      this.timerList[index].enabled = e;
      this.editInfo({
        [`Timer0${index}:TimerEn`]: e ? 1 : 0,
      });
    },

    // 选择频率
    selectFrequency(index, frequency) {
      this.timerList[index].frequency = frequency;
      this.editInfo({
        [`Timer0${index}:Mode`]: frequency === 'daily' ? 1 : 0,
      });
    },

    // 时间改变
    onTimeChange(e, index) {
      console.log(e.detail.value,'时间改变')
      this.timerList[index].time = e.detail.value;
      this.timerList[index].timeLabel = e.detail.value;
      this.editInfo({
        [`Timer0${index}:TimerHM`]: e.detail.value.slice(0, 2) + e.detail.value.slice(3, 5),
      });
    },

    // 确认按钮
    handleConfirm() {
      const enabledTimers = this.timerList.filter((timer, index) => {
        if (timer.enabled) {
          if (!timer.time) {
            uni.showToast({
              title: `定时${index + 1}请选择时间`,
              icon: 'none'
            });
            return false;
          }
          return true;
        }
        return false;
      });

      console.log('保存的定时设置:', enabledTimers);

      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });

      // TODO: 调用接口保存定时设置
    },
  },
};
</script>

<style scoped lang="scss">
uni-page-body {
  position: relative;
  height: 100%;
  overflow-y: auto;
}

.timing-setting-page {
  min-height: 100%;
  background: linear-gradient(180deg, #f5f6fa00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
  overflow-x: hidden;
  overflow-y: auto;

  .right-icons {
    display: flex;
    align-items: center;
  }

  .timing-content {
    height: 100%;
    padding: 24rpx 32rpx;
    overflow-y: auto;
  }

  // 定时卡片
  .timer-card {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;

    // 卡片头部
    .timer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .timer-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        font-family: 'Source Han Sans CN';
      }

      .timer-switch {
        transform: scale(0.9);
      }
    }

    // 单选按钮组
    .radio-group {
      display: flex;
      margin-bottom: 24rpx;

      .radio-item {
        display: flex;
        align-items: center;
        margin-right: 48rpx;
        cursor: pointer;

        .radio-icon {
          width: 36rpx;
          height: 36rpx;
          border: 4rpx solid #cccccc;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12rpx;
          box-sizing: border-box;

          .radio-dot {
            width: 18rpx;
            height: 18rpx;
            background: #00c853;
            border-radius: 50%;
          }
        }

        &.active {
          .radio-icon {
            border-color: #00c853;
          }

          .radio-text {
            color: #333333;
          }
        }

        .radio-text {
          font-size: 28rpx;
          color: #999999;
          font-family: 'Source Han Sans CN';
        }
      }
    }

    // 时间选择器
    .time-picker {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 24rpx;
      background: #F5F6FA;
      border-radius: 8rpx;

      .time-text {
        font-size: 28rpx;
        color: #333333;
        font-family: 'Source Han Sans CN';

        &.placeholder {
          color: #999999;
        }
      }
    }
  }
}
</style>