|
|
@@ -0,0 +1,397 @@
|
|
|
+<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>
|
