277 lines
7.4 KiB
Plaintext
277 lines
7.4 KiB
Plaintext
<template>
|
|
<AdminLayout currentPage="signin-rule">
|
|
<view class="signin-rule-page">
|
|
<view class="header-card">
|
|
<text class="title">签到规则设置</text>
|
|
<text class="sub-title">配置每日签到奖励及连续签到阶梯奖励</text>
|
|
</view>
|
|
|
|
<view class="form-card border-shadow">
|
|
<!-- 1. 功能开关 -->
|
|
<view class="form-item">
|
|
<view class="label-box"><text class="label-txt">是否开启:</text></view>
|
|
<view class="input-box">
|
|
<switch :checked="form.is_enabled" color="#2d8cf0" @change="e => form.is_enabled = e.detail.value" />
|
|
<text class="hint-txt">开启后，用户可在移动端进行每日签到获取积分</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 2. 每日奖励 -->
|
|
<view class="form-item">
|
|
<view class="label-box"><text class="label-txt">每日签到积分:</text></view>
|
|
<view class="input-box">
|
|
<input class="input-base" type="number" v-model="form.daily_points" placeholder="请输入积分数" />
|
|
<text class="hint-txt">用户每天签到可获得的固定积分奖励</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 3. 连续签到奖励 -->
|
|
<view class="form-item align-start">
|
|
<view class="label-box"><text class="label-txt">连续签到奖励:</text></view>
|
|
<view class="input-box">
|
|
<view class="reward-steps">
|
|
<view class="step-header">
|
|
<text class="th flex-1">连续天数</text>
|
|
<text class="th flex-1">额外奖励积分</text>
|
|
<text class="th" style="width: 60px;">操作</text>
|
|
</view>
|
|
<view v-for="(item, index) in form.continuous_rewards" :key="index" class="step-row">
|
|
<view class="td flex-1">
|
|
<input class="inner-input" type="number" v-model="item.day" placeholder="天数" />
|
|
</view>
|
|
<view class="td flex-1">
|
|
<input class="inner-input" type="number" v-model="item.points" placeholder="积分" />
|
|
</view>
|
|
<view class="td" style="width: 60px;">
|
|
<text class="btn-del" @click="removeRewardStep(index)">删除</text>
|
|
</view>
|
|
</view>
|
|
<view class="btn-add-step" @click="addRewardStep">
|
|
<text class="add-txt">+ 添加阶梯奖励</text>
|
|
</view>
|
|
</view>
|
|
<text class="hint-txt">配置连续签到奖励，例如：连续 3 天额外奖励 20 积分</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 4. 规则说明 -->
|
|
<view class="form-item align-start">
|
|
<view class="label-box"><text class="label-txt">规则说明:</text></view>
|
|
<view class="input-box">
|
|
<textarea class="textarea-base" v-model="form.rules_description" placeholder="请输入签到规则说明" />
|
|
<text class="hint-txt">显示在移动端签到页面的说明文字</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="footer-btns">
|
|
<button class="btn-submit" @click="handleSave" :loading="isSaving">保存设置</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</AdminLayout>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
|
import { fetchSignInConfig, saveSignInConfig, SignInConfig, SignInReward } from '@/services/admin/marketingService.uts'
|
|
|
|
const isSaving = ref(false)
|
|
const isLoading = ref(false)
|
|
|
|
const form = reactive<SignInConfig>({
|
|
is_enabled: true,
|
|
daily_points: 10,
|
|
continuous_rewards: [] as SignInReward[],
|
|
rules_description: '1.每日签到可获得积分奖励；\n2.连续签到满足天数可获得额外阶梯奖励；\n3.签到中断将重新从第一天开始计算。'
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadConfig()
|
|
})
|
|
|
|
async function loadConfig() {
|
|
isLoading.value = true
|
|
try {
|
|
const res = await fetchSignInConfig()
|
|
if (res != null) {
|
|
form.is_enabled = res.is_enabled
|
|
form.daily_points = res.daily_points
|
|
form.continuous_rewards = res.continuous_rewards
|
|
form.rules_description = res.rules_description
|
|
}
|
|
} catch (e) {
|
|
console.error('加载签到配置失败:', e)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
function addRewardStep() {
|
|
form.continuous_rewards.push({
|
|
day: 0,
|
|
points: 0
|
|
} as SignInReward)
|
|
}
|
|
|
|
function removeRewardStep(index: number) {
|
|
form.continuous_rewards.splice(index, 1)
|
|
}
|
|
|
|
async function handleSave() {
|
|
if (isSaving.value) return
|
|
|
|
// 基础校验
|
|
if (form.daily_points < 0) {
|
|
uni.showToast({ title: '每日积分不能为负数', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
isSaving.value = true
|
|
try {
|
|
const success = await saveSignInConfig(form as SignInConfig)
|
|
if (success) {
|
|
uni.showToast({ title: '保存成功', icon: 'success' })
|
|
} else {
|
|
uni.showToast({ title: '保存失败', icon: 'none' })
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: '操作异常', icon: 'none' })
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.signin-rule-page {
|
|
padding: 24px;
|
|
background-color: #f0f2f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header-card {
|
|
margin-bottom: 20px;
|
|
.title { font-size: 20px; font-weight: bold; color: #333; }
|
|
.sub-title { font-size: 14px; color: #999; margin-top: 4px; }
|
|
}
|
|
|
|
.form-card {
|
|
background-color: #fff;
|
|
padding: 40px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.border-shadow {
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 32px;
|
|
&.align-start { align-items: flex-start; }
|
|
}
|
|
|
|
.label-box {
|
|
width: 140px;
|
|
text-align: right;
|
|
margin-right: 24px;
|
|
.label-txt { font-size: 14px; color: #333; font-weight: 500; }
|
|
}
|
|
|
|
.input-box {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.input-base {
|
|
height: 36px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
width: 200px;
|
|
}
|
|
|
|
.textarea-base {
|
|
height: 120px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
.hint-txt { font-size: 12px; color: #999; margin-top: 8px; }
|
|
|
|
/* 奖励阶梯样式 */
|
|
.reward-steps {
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.step-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #f8f9fa;
|
|
height: 40px;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
.th { font-size: 13px; font-weight: bold; color: #666; text-align: center; }
|
|
}
|
|
|
|
.step-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 48px;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
.td { display: flex; justify-content: center; }
|
|
}
|
|
|
|
.inner-input {
|
|
width: 80px;
|
|
height: 28px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.btn-del { font-size: 13px; color: #f5222d; cursor: pointer; }
|
|
|
|
.btn-add-step {
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
.add-txt { font-size: 13px; color: #2d8cf0; }
|
|
}
|
|
|
|
.footer-btns {
|
|
margin-top: 40px;
|
|
padding-left: 164px;
|
|
.btn-submit {
|
|
background-color: #2d8cf0;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0 32px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.flex-1 { flex: 1; }
|
|
</style>
|