shuhi-ui/src/views/marketing/shareDiscount/rules/index.vue

<template>
    <ele-page flex-table :bodyStyle="{ padding: 0 }">
        <div class="common-section p-6 bg-white rounded-lg">
            <div class="text-lg font-bold mb-6">降价营销规则</div>
            <div class="flex">
                <div class="flex-1 max-w-3xl">
                    <el-form :model="form" label-width="200px" class="rules-form" v-loading="loading">
                        <el-form-item label="分享一人降价比例：">
                            <div class="flex items-center">
                                <el-input-number v-model="form.reduceRate" :min="0" :max="100" />
                                <span class="ml-2">(%)</span>
                            </div>
                        </el-form-item>

                        <el-form-item label="降价限制时间：">
                            <div class="flex items-center">
                                <el-input-number v-model="form.inviteExpireHour" :min="0" />
                                <span class="ml-2">(小时)</span>
                                <span class="ml-4 text-gray-400">以助力成功计算</span>
                            </div>
                        </el-form-item>

                        <el-form-item label="每单每本书可降价次数：">
                            <div class="flex items-center">
                                <el-input-number v-model="form.reduceTimesPerIsbn" :min="0" />
                                <span class="ml-2">(次)</span>
                            </div>
                        </el-form-item>

                        <el-form-item label="每个ID每天助力限制：">
                            <div class="flex items-center">
                                <el-input-number v-model="form.assistTimesEveryDay" :min="0" />
                                <span class="ml-2">(次)</span>
                            </div>
                        </el-form-item>

                        <el-form-item label="分享一人最高降价：">
                            <div class="flex items-center">
                                <el-input-number v-model="form.maxPerHelp" :min="0" :precision="2" />
                                <span class="ml-2">(元)</span>
                            </div>
                        </el-form-item>

                        <el-form-item label="分享一人最低降价：">
                            <div class="flex items-center">
                                <el-input-number v-model="form.minPerHelp" :min="0" :precision="2" />
                                <span class="ml-2">(元)</span>
                            </div>
                        </el-form-item>

                        <el-form-item label="降价取消场景：">
                            <div class="flex items-center w-full">
                                <dict-data v-model="form.upsellValidScenario" code="upsell_valid_scenario"
                                    type="multipleSelect" style="width:300px" />
                            </div>
                        </el-form-item>

                        <el-form-item label="预留手机号：">
                            <div class="flex items-center">
                                <el-input v-model="form.mobile" placeholder="请输入手机号" style="width: 300px" />
                            </div>
                        </el-form-item>

                        <el-form-item label="验证码：" v-if="needVerification">
                            <div class="flex items-center">
                                <el-input v-model="form.code" placeholder="请输入验证码" style="width: 200px" />
                                <el-button type="primary" link class="ml-4" @click="handleResendCode"
                                    :disabled="cooldown > 0">
                                    {{ cooldown > 0 ? `${cooldown}秒后重发` : '获取验证码' }}
                                </el-button>
                            </div>
                        </el-form-item>

                        <el-form-item label="营销降价书单：">
                            <div class="flex items-center">
                                <dict-data v-model="form.reduceScope" code="reduce_scope" style="width:300px" />
                            </div>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- Right Side Note -->
                <div class="w-64 ml-8">
                    <div class="bg-yellow-50 border border-yellow-200 p-4 rounded text-sm text-gray-600">
                        <p class="mb-2 font-bold">注意事项：</p>
                        <p class="mb-2">单本金额不能为负，最低为0</p>
                        <p>
                            降价金额为一般品金额，不管用户选择什么品相
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </ele-page>
</template>

<script setup>
    import { reactive, ref, onMounted, onUnmounted } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import request from '@/utils/request';

    defineOptions({ name: 'ShareDiscountRules' });

    const loading = ref(false);
    const saving = ref(false);
    const needVerification = ref(false);
    const cooldown = ref(0);
    let timer = null;

    const form = reactive({
        reduceRate: void 0,
        inviteExpireHour: void 0,
        reduceTimesPerIsbn: void 0,
        assistTimesEveryDay: void 0,
        maxPerHelp: void 0,
        minPerHelp: void 0,
        upsellValidScenario: [],
        mobile: '',
        reduceScope: void 0,
        code: ''
    });

    const startCooldown = () => {
        cooldown.value = 60;
        if (timer) clearInterval(timer);
        timer = setInterval(() => {
            if (cooldown.value > 0) {
                cooldown.value--;
            } else {
                clearInterval(timer);
                timer = null;
            }
        }, 1000);
    };

    const fetchRules = async () => {
        loading.value = true;
        try {
            const res = await request.get('/activity/reduce/manage/rule/get');
            if (res.data.code === 0 || res.data.code === 200) {
                const data = res.data.data;
                Object.assign(form, data);
                form.upsellValidScenario = data.upsellValidScenario.map(v => v.toString());
                form.reduceScope = data.reduceScope?.toString();
                if(form.mobile){
                    needVerification.value = true;
                }
            }
        } catch (error) {
            console.error(error);
        } finally {
            loading.value = false;
        }
    };

    const updateRule = async () => {
        try {
            const res = await request.post('/activity/reduce/manage/rule/update', form);
            if (res.data.code === 0 || res.data.code === 200) {
                EleMessage.success('保存成功');
                form.code = '';
            } else {
                EleMessage.error(res.data.msg || '保存失败');
            }
        } catch (error) {
            console.error(error);
            EleMessage.error('保存失败');
        }
    };

    const handleResendCode = async () => {
        try {
            const res = await request.post('/activity/reduce/manage/rule/getCode');
            if (res.data.code === 0 || res.data.code === 200) {
                if (res.data.data === 1) {
                    EleMessage.success('验证码已发送');
                    startCooldown();
                } else {
                    EleMessage.info('无需验证码');
                    needVerification.value = false;
                }
            } else {
                EleMessage.error(res.data.msg || '获取验证码失败');
            }
        } catch (error) {
            console.error(error);
            EleMessage.error('获取验证码失败');
        }
    };

    const handleSave = async () => {
        saving.value = true;
        try {
            if (form.code) {
                await updateRule();
            } else {
                // Check if verification is needed
                const res = await request.post('/activity/reduce/manage/rule/getCode');
                if (res.data.code === 0 || res.data.code === 200) {
                    if (res.data.data === 1) {
                        needVerification.value = true;
                        EleMessage.success('验证码已发送，请输入验证码');
                        startCooldown();
                    } else {
                        await updateRule();
                    }
                } else {
                    EleMessage.error(res.data.msg || '获取验证码失败');
                }
            }
        } catch (error) {
            console.error(error);
            EleMessage.error('操作失败');
        } finally {
            saving.value = false;
        }
    };

    onMounted(() => {
        fetchRules();
    });

    onUnmounted(() => {
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
    });
</script>

<style scoped>
    .rules-form :deep(.el-form-item__label) {
        font-weight: 500;
    }
</style>