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, index) in channels" :key="ch.type + '_' + index"
            :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, pIndex) in channels" :key="'p-' + pIndex"
            :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>