evshop_admin/src/pages/affiliate/Info.vue

<script setup>
import { onMounted, ref } from 'vue'
import { Delete } from "@element-plus/icons-vue";

import { getAffiliateConfig, setAffiliateConfig } from "@/api/affiliate";

const defaultForm = {
    on: "1",
    config: {
        separator_type: "1",
        expire: "24",
        expire_unit: "hour",
        level_money_all: "0",
        level_point_all: "0",
        level_register_all: "0",
        level_register_up: "0",
    },
    item: []
}

const form = ref(defaultForm)

onMounted(async () => {
    let res = await getAffiliateConfig()
    if(res.code === 200) {
        form.value = res.data
    }else{
        ElMessage.error('讀取推薦設定失敗')
    }
})

const handleAddLevel = () => {
    form.value.item.push({
        level_money: "0",
        level_point: "0",
    })
}

const handleDeleteLevel = (key) => {
    form.value.item.splice(key, 1)
    ElMessage.success("刪除成功")
}

const onSubmit = async() => {
    let res = await setAffiliateConfig(form.value)
    if(res.code === 200) {
        ElMessage.success("設定成功")
    }else{
        ElMessage.error("設定失敗")
    }
}
</script>

<template>
    <div class="main">
        <!-- Breadcrumb: Start -->
        <el-page-header :icon="null" title=" " @back="onBack">
            <template #breadcrumb>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item> 電商管理中心 </el-breadcrumb-item>
                    <el-breadcrumb-item>推薦設置</el-breadcrumb-item>
                </el-breadcrumb>
            </template>
            <template #content>
                <span class="text-large font-600 mr-3"> 推薦設置 </span>
            </template>
        </el-page-header>
        <!-- Breadcrumb: End -->
        <hr>
        <el-form :model="form" label-width="120px">
            <el-form-item label="是否開啟推薦">
                <el-radio-group v-model="form.on">
                    <el-radio label="1">開啟</el-radio>
                    <el-radio label="0">關閉</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="form.on==='1'">
                <el-form-item label="分成方式">
                    <el-radio-group v-model="form.config.separator_type">
                        <el-radio label="1">推薦註冊分成</el-radio>
                        <el-radio label="2">推薦訂單分成</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="推薦時效">
                    <el-input v-model="form.config.expire" placeholder="">
                        <template #append>Hour</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="推薦分成">
                    <el-input v-model="form.config.level_money_all" placeholder="">
                        <template #append>%</template>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="form.config.separator_type === '1'">
                    <div class="list-div">
                        <div class="level-op-btn">
                            <el-button type="primary" @click="handleAddLevel">增加層級</el-button>
                        </div>
                        <table class="table table-borderd">
                            <tr>
                                <th>級別</th>
                                <th>現金分成(%)</th>
                                <th>積分分成(%)</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(v, k) in form.item" :key="k">
                                <td>
                                    {{ k + 1 }}
                                </td>
                                <td> <el-input v-model="v.level_money" placeholder="">
                                        <template #append>%</template>
                                    </el-input>
                                </td>
                                <td>
                                    <el-input v-model="v.level_point" placeholder="">
                                        <template #append>%</template>
                                    </el-input>
                                </td>
                                <td>
                                    <el-icon @click="handleDeleteLevel(k)">
                                        <delete />
                                    </el-icon>
                                </td>
                            </tr>
                        </table>
                    </div>
                </el-form-item>
            </template>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">確定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template >

<style lang="less" scoped>
.el-input {
    max-width: 200px;
}



.list-div {
    table {
        width: 100%;
        background-color: #eee;

        td {
            padding: 0.25rem;
            vertical-align: middle;
            background-color: #fff;
        }

        td:first-child {
            width: 50px;
            text-align: center;
        }

        td:last-child {
            width: 50px;
            text-align: center;
        }

        .el-input {
            max-width: 100%;
        }
    }

    .table-borderd {
        border: 1px solid #dee2e6;
    }

    .level-op-btn {
        padding: 10px;
        text-align: right;
    }
}
</style>