parent
71e9e99ff4
commit
0f82d48ef8
@ -1,10 +1,178 @@
|
||||
<scipt setup>
|
||||
import { ref, reactive, watch, onMounted } from "vue";
|
||||
</scipt>
|
||||
<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>
|
||||
info
|
||||
<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>
|
||||
Loading…
Reference in new issue