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="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,
      _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'
        }) : []
      }
    }).catch(function() {
      self.loading = false
      uni.showToast({ title: '加载失败，请重试', icon: 'none' })
    })
  },
  methods: {
    toggleEnabled: function() {
      this.enabled = this.enabled === 1 ? 0 : 1
    },
    isSelected: function(type) {
      return (this.selectedChannels || []).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)
      }
    },
    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
      }).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>

<style scoped>
.reminder-config-page {
  box-sizing: border-box;
  min-height: 100vh;
  background: #F5F9FC;
  overflow: hidden;
}
.content {
  padding: 30rpx;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.cfg-card {
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
}
.cfg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cfg-card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1E293B;
}
.cfg-card-desc {
  display: block;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #94A3B8;
  line-height: 1.6;
}
.cfg-switch {
  padding: 10rpx 28rpx;
  border-radius: 999rpx;
  font-size: 26rpx;
  background: #E2E8F0;
  color: #64748B;
}
.cfg-switch-on {
  background: linear-gradient(135deg, #5B9BD5, #8FC5E8);
  color: #FFFFFF;
  font-weight: 600;
}
.channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 24rpx;
}
.channel-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 20rpx;
  background: #FFFFFF;
  min-width: 200rpx;
}
.channel-selected {
  border-color: #5B9BD5;
  background: #5B9BD5;
}
.channel-disabled {
  opacity: 0.55;
}
.channel-check {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #5B9BD5;
  font-size: 20rpx;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}
.channel-info {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.channel-name {
  font-size: 26rpx;
  color: #1E293B;
  font-weight: 500;
}
.channel-selected .channel-name {
  color: #FFFFFF;
}
.channel-reason {
  font-size: 20rpx;
  color: #94A3B8;
}
.channel-tip {
  width: 100%;
  margin-top: 16rpx;
}
.channel-tip-text {
  font-size: 24rpx;
  color: #5B9BD5;
}
.timing-list {
  display: flex;
  gap: 20rpx;
  margin-top: 24rpx;
}
.timing-item {
  flex: 1;
  box-sizing: border-box;
  padding: 24rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.timing-active {
  border-color: #5B9BD5;
  background: #F0F7FF;
}
.timing-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.timing-active .timing-name {
  color: #3A7CC4;
}
.timing-desc {
  font-size: 22rpx;
  color: #94A3B8;
}
.offset-row {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  padding: 20rpx 24rpx;
  background: #F8FAFC;
  border-radius: 16rpx;
}
.offset-label {
  font-size: 26rpx;
  color: #1E293B;
  margin-right: 20rpx;
}
.offset-input {
  flex: 1;
  font-size: 28rpx;
  color: #1E293B;
}
.offset-unit {
  font-size: 24rpx;
  color: #94A3B8;
  margin-left: 12rpx;
}
.offset-hint {
  display: block;
  margin-top: 12rpx;
  font-size: 22rpx;
  color: #94A3B8;
}
.tip-card {
  background: #D6EAF8;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  margin-bottom: 30rpx;
}
.tip-text {
  font-size: 24rpx;
  color: #3A7CC4;
  line-height: 1.6;
}
.save-area {
  padding: 40rpx 30rpx;
}
.save-btn {
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  color: #FFFFFF;
  text-align: center;
  padding: 28rpx 0;
  border-radius: 999rpx;
  font-size: 30rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(91, 155, 213, 0.3);
}
.save-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}
</style>