index.vue

<template>
  <view class="h-page" ref="uv-back-top">
    <CustomNavBar
      :title="t('TaskNotice.messageSetting')"
      :bgColor="bgColor"
      titleColor="#262626"
      arrowLeftColor="#333333"
    />
    <view class="h-c-container">
      <!-- 消息设置 -->
      <view class="settings-card">
        <!-- Do Not Disturb 开关 -->
        <view class="setting-item">
          <view class="setting-left">
            <text class="setting-title">{{ t('TaskNotice.notDisturb') }}</text>
            <text class="setting-desc">{{ t('TaskNotice.notDisturbTips') }}</text>
          </view>
          <switch
            style="transform: scale(0.75) translateX(20rpx)"
            :checked="doNotDisturb"
            @change="toggleDoNotDisturb"
            color="#00C888"
          />
        </view>

        <!-- 开始时间 -->
        <!-- <picker
          mode="time"
          :value="startTime"
          @change="onStartTimeChange"
          :start="'00:00'"
          :end="'23:59'"
        >
          <view class="setting-item">
            <view class="setting-left">
              <text class="setting-title">{{ t('pholder.startDate') }}</text>
            </view>
            <view class="setting-right">
              <text class="time-text">{{ startTime }}</text>
              <text class="arrow-right">›</text>
            </view>
          </view>
        </picker> -->
        <TimeSelect
          :title="t('pholder.startDate')"
          :value="startTime"
          @change="onStartTimeChange"
          :start="'00:00'"
          :end="'23:59'"
        />
        <!-- 结束时间 -->
        <!-- <picker
          mode="time"
          :value="endTime"
          @change="onEndTimeChange"
          :start="'00:00'"
          :end="'23:59'"
        >
          <view class="setting-item">
            <view class="setting-left">
              <text class="setting-title">{{ t('message.endTime') }}</text>
            </view>
            <view class="setting-right">
              <text class="time-text">{{ endTime }}</text>
              <text class="arrow-right">›</text>
            </view>
          </view>
        </picker> -->
        <TimeSelect
          :title="t('message.endTime')"
          :value="endTime"
          @change="onEndTimeChange"
          :start="'00:00'"
          :end="'23:59'"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { onPageHide, onLoad } from "@dcloudio/uni-app";
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useNav } from "@/hooks";
import CustomNavBar from "@/components/CustomNav.nvue";
import { getStageObj } from "@/utils";

import { t, initI18n } from "@/plugins/index.js";
import { getDisturbTimeApi, setDisturbTimeApi } from "@/api";
import TimeSelect from "@/components/TimeSelect.vue";
onLoad(()=>{
  initI18n();
})
const bgColor = ref("#ffffff");

// 免打扰模式
const doNotDisturb = ref(false);
const toggleDoNotDisturb = (e) => {
  doNotDisturb.value = e.detail.value;
  setDisturbTime();
};

// 时间设置
const startTime = ref('00:00');
const endTime = ref('00:00');

// 开始时间变化
const onStartTimeChange = (e) => {
  console.log(e, 'e');
  startTime.value = e
  setDisturbTime();

};

// 结束时间变化
const onEndTimeChange = (e) => {
  endTime.value = e
  setDisturbTime();
};

// 获取
const getDisturbTime = async () => {
  try {
    const param = {
      accountId: getStageObj("account").id,
    };
    const res = await getDisturbTimeApi(param);
    const list = res.data?.list;
    const data = list[0];
    if((data && Object.keys(data).length === 0) || list.length === 0) {
      return;
    }
    // 回显
    doNotDisturb.value = data?.status;
    // 去掉秒数
    startTime.value = data?.muteStart?.slice(0, 5);
    endTime.value = data?.muteEnd?.slice(0, 5);
  } catch (error) {
    console.log("error-getDisturbTime", error);
  }
};

const setDisturbTime = async () => {
  console.log('setDisturbTime',startTime.value,endTime.value  )
    const param = {
      muteStart: `${startTime.value}:00`,
      muteEnd: `${endTime.value}:00`,
      status: doNotDisturb.value ? 1 : 0,
      accountId: getStageObj("account").id,
    };
  const res = await setDisturbTimeApi(param);
    if(res.code == 200){
      uni.showToast({
        icon: 'none',
        title: t('message.saveSuccess'),
      })
    }
};

onMounted(() => {
  getDisturbTime();
  console.log(uni.getLocale(),'uni.getLocale()')
});
// onUnmounted(() => {
//   console.log("onUnmounted");
//   setDisturbTime();
// });
// onPageHide(() => {
//   console.log("onPageHide");
//   setDisturbTime();
// });
</script>

<style lang="scss" scoped>
.h-page {
  /* #ifdef H5 */
  min-height: calc(100vh - 44px);
  /* #endif */
  /* #ifndef H5 */
  min-height: 100vh;
  /* #endif */

  .h-c-container {
    padding: 0 32rpx 20rpx;
    flex: 1;
  }

  .settings-card {
    background-color: #ffffff;
    border-radius: 12rpx;
    margin-top: 20rpx;
    overflow: hidden;
  }

  .setting-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
  }

  .setting-left {
    display: flex;
    flex-direction: column;
  }

  .setting-title {
    font-size: 28rpx;
    color: #262626;
    font-weight: 500;
  }

  .setting-desc {
    // font-family: Inter, Inter;
    font-weight: 400;
    font-size: 22rpx;
    color: #90949d;
    margin-top: 8rpx;
  }

  .setting-right {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .time-text {
    font-weight: 400;
    font-size: 28rpx;
    color: #90949d;
  }

  .arrow-right {
    font-size: 32rpx;
    color: #90949d;
    margin-left: 10rpx;
  }
}
// switch 改变里面圆形的大小
// ::v-deep(.uni-switch__node) {
//   width: 24rpx;
//   height: 24rpx;
// }
</style>