cfc/cfc-frontend/pages/reminder-config/index.vue

<template>
  <view class="reminder-config-page">
    <scroll-view class="content" scroll-y>
      <!-- 启用开关 -->
      <view class="cfg-card">
        <view class="cfg-card-header">
          <text class="cfg-card-title">提醒开关</text>
          <text class="cfg-switch" :class="{ 'cfg-switch-on': enabled === 1 }" @tap="toggleEnabled">
            <text class="cfg-switch-text">{{ enabled === 1 ? '已开启' : '已关闭' }}</text>
          </text>
        </view>
        <text class="cfg-card-desc">开启后，任务打卡未完成时会按以下设置发送提醒</text>
      </view>

      <!-- 提醒渠道 -->
      <view class="cfg-card">
        <text class="cfg-card-title">提醒渠道</text>
        <view class="channel-list">
          <view class="channel-item" v-for="ch in channels" :key="ch.type"
            :class="{
              'channel-selected': isSelected(ch.type),
              'channel-disabled': !ch.available
            }"
            @tap="toggleChannel(ch)">
            <view class="channel-check" v-if="isSelected(ch.type) && ch.available">✓</view>
            <view class="channel-info">
              <text class="channel-name">{{ ch.label }}</text>
              <text class="channel-reason" v-if="!ch.available">{{ ch.reason || '未开通' }}</text>
            </view>
          </view>
          <view class="channel-tip" v-if="channelTip">
            <text class="channel-tip-text">{{ channelTip }}</text>
          </view>
        </view>
      </view>

      <!-- 提醒时机 -->
      <view class="cfg-card">
        <text class="cfg-card-title">提醒时机</text>
        <view class="timing-list">
          <view class="timing-item" :class="{ 'timing-active': timingMode === 'before_deadline' }" @tap="switchTiming('before_deadline')">
            <text class="timing-name">任务截止前</text>
            <text class="timing-desc">截止时间之前提醒</text>
          </view>
          <view class="timing-item" :class="{ 'timing-active': timingMode === 'after_timeout' }" @tap="switchTiming('after_timeout')">
            <text class="timing-name">任务超时后</text>
            <text class="timing-desc">截止时间之后提醒</text>
          </view>
        </view>

        <!-- 偏移分钟 -->
        <view class="offset-row">
          <text class="offset-label">{{ offsetLabel }}</text>
          <input class="offset-input" type="number" :value="String(offsetMinutes)" @input="onOffsetInput" placeholder="分钟数" />
          <text class="offset-unit">分钟</text>
        </view>
        <text class="offset-hint" v-if="offsetHint">{{ offsetHint }}</text>
      </view>

      <!-- 完成表扬开关 -->
      <view class="cfg-card">
        <view class="cfg-card-header">
          <text class="cfg-card-title">任务完成鼓励</text>
          <text class="cfg-switch" :class="{ 'cfg-switch-on': completionPraiseEnabled === 1 }" @tap="togglePraiseEnabled">
            <text class="cfg-switch-text">{{ completionPraiseEnabled === 1 ? '已开启' : '已关闭' }}</text>
          </text>
        </view>
        <text class="cfg-card-desc">任务正常完成时，发送表扬鼓励消息</text>
        <view class="channel-list" v-if="completionPraiseEnabled === 1" style="margin-top:20rpx">
          <view class="channel-item" v-for="ch in channels" :key="'p-'+ch.type"
            :class="{
              'channel-selected': isPraiseSelected(ch.type),
              'channel-disabled': !ch.available
            }"
            @tap="togglePraiseChannel(ch)">
            <view class="channel-check" v-if="isPraiseSelected(ch.type) && ch.available">✓</view>
            <view class="channel-info">
              <text class="channel-name">{{ ch.label }}</text>
              <text class="channel-reason" v-if="!ch.available">{{ ch.reason || '未开通' }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 站内消息兜底说明 -->
      <view class="tip-card">
        <text class="tip-text">💡 站内消息提醒始终开启，作为兜底通道不随以上设置关闭</text>
      </view>

      <!-- 保存按钮 -->
      <view class="save-area">
        <view class="save-btn" @tap="saveConfig">
          <text>{{ saving ? '保存中...' : '保存配置' }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getReminderConfig, saveReminderConfig } from '@/utils/api.js'

export default {
  data() {
    return {
      loading: true,
      saving: false,
      enabled: 1,
      channels: [],
      selectedChannels: [],
      timingMode: 'after_timeout',
      offsetMinutes: 60,
      completionPraiseEnabled: 0,
      selectedPraiseChannels: ['wechat', 'in_app'],
      _loaded: false
    }
  },
  computed: {
    offsetLabel: function() {
      return this.timingMode === 'before_deadline' ? '提前' : '超时后'
    },
    offsetHint: function() {
      if (!this.offsetMinutes || this.offsetMinutes < 1 || this.offsetMinutes > 1440) {
        return '请输入 1-1440 之间的分钟数'
      }
      if (this.timingMode === 'before_deadline') {
        return '将在任务截止前 ' + this.offsetMinutes + ' 分钟提醒'
      }
      return '将在任务超时后 ' + this.offsetMinutes + ' 分钟提醒'
    },
    channelTip: function() {
      var selected = this.selectedChannels || []
      if (selected.length === 0) {
        return '请至少选择一个提醒渠道'
      }
      return '已选择 ' + selected.length + ' 个提醒渠道'
    }
  },
  onLoad: function() {
    var self = this
    this.loading = true
    getReminderConfig().then(function(res) {
      self.loading = false
      self._loaded = true
      if (res && res.code === 200 && res.data) {
        var d = res.data
        self.enabled = d.enabled === 0 ? 0 : 1
        self.timingMode = d.timingMode || 'after_timeout'
        self.offsetMinutes = d.offsetMinutes || 60
        self.selectedChannels = Array.isArray(d.channels) ? d.channels.slice() : []
        self.channels = Array.isArray(d.availableChannels) ? d.availableChannels.filter(function(c) {
          return c && c.type !== 'in_app'
        }) : []
        self.completionPraiseEnabled = d.completionPraiseEnabled === 1 ? 1 : 0
        self.selectedPraiseChannels = Array.isArray(d.completionPraiseChannels) ? d.completionPraiseChannels.slice() : ['wechat', 'in_app']
      }
    }).catch(function() {
      self.loading = false
      uni.showToast({ title: '加载失败，请重试', icon: 'none' })
    })
  },
  methods: {
    toggleEnabled: function() {
      this.enabled = this.enabled === 1 ? 0 : 1
    },
    togglePraiseEnabled: function() {
      this.completionPraiseEnabled = this.completionPraiseEnabled === 1 ? 0 : 1
    },
    isSelected: function(type) {
      return (this.selectedChannels || []).indexOf(type) >= 0
    },
    isPraiseSelected: function(type) {
      return (this.selectedPraiseChannels || []).indexOf(type) >= 0
    },
    toggleChannel: function(ch) {
      if (!ch.available) return
      var idx = this.selectedChannels.indexOf(ch.type)
      if (idx >= 0) {
        this.selectedChannels.splice(idx, 1)
      } else {
        this.selectedChannels.push(ch.type)
      }
    },
    togglePraiseChannel: function(ch) {
      if (!ch.available) return
      var idx = this.selectedPraiseChannels.indexOf(ch.type)
      if (idx >= 0) {
        this.selectedPraiseChannels.splice(idx, 1)
      } else {
        this.selectedPraiseChannels.push(ch.type)
      }
    },
    switchTiming: function(mode) {
      this.timingMode = mode
    },
    onOffsetInput: function(e) {
      var v = e && e.detail && e.detail.value
      var n = parseInt(v, 10)
      this.offsetMinutes = isNaN(n) ? 0 : n
    },
    saveConfig: function() {
      var self = this
      if (!this.selectedChannels || this.selectedChannels.length === 0) {
        uni.showToast({ title: '请至少选择一个提醒渠道', icon: 'none' })
        return
      }
      var offset = this.offsetMinutes || 0
      if (offset < 1 || offset > 1440) {
        uni.showToast({ title: '偏移分钟需在 1-1440 之间', icon: 'none' })
        return
      }
      if (this.saving) return
      this.saving = true
      saveReminderConfig({
        channels: this.selectedChannels.slice(),
        timingMode: this.timingMode,
        offsetMinutes: offset,
        enabled: this.enabled === 1 ? 1 : 0,
        completionPraiseEnabled: this.completionPraiseEnabled === 1 ? 1 : 0,
        completionPraiseChannels: this.selectedPraiseChannels.slice()
      }).then(function(res) {
        self.saving = false
        if (res && res.code === 200) {
          uni.showToast({ title: '保存成功', icon: 'success' })
          setTimeout(function() {
            uni.navigateBack()
          }, 1000)
        } else {
          uni.showToast({ title: (res && res.message) || '保存失败', icon: 'none' })
        }
      }).catch(function(err) {
        self.saving = false
        uni.showToast({ title: (err && err.message) || '保存失败', icon: 'none' })
      })
    }
  }
}
</script>