|
|
@@ -0,0 +1,224 @@
|
|
|
+<template>
|
|
|
+ <!-- 分销配置对话框 -->
|
|
|
+ <el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :destroy-on-close="true" v-model="dialogVisible"
|
|
|
+ @close="handleClose" width="600px" style="height: 400px;">
|
|
|
+ <template #header>
|
|
|
+ <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
|
|
+ 分销配置
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-scrollbar v-loading="loading" class="ba-table-form-scrollbar">
|
|
|
+ <div class="ba-operate-form">
|
|
|
+ <el-form ref="formRef" :model="formData" :rules="rules" :label-width="140">
|
|
|
+ <el-form-item label="默认分销佣金比例" prop="default_rate">
|
|
|
+ <div class="input-with-unit">
|
|
|
+ <el-input-number v-model="formData.default_rate" :min="0" :max="100" :precision="2"
|
|
|
+ placeholder="请输入默认分销佣金比例" style="width: 100%" controls-position="right" />
|
|
|
+ <span class="form-unit">%</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="最低提现金额" prop="min_withdrawal">
|
|
|
+ <div class="input-with-unit">
|
|
|
+ <el-input-number v-model="formData.min_withdrawal" :min="0" :precision="2"
|
|
|
+ placeholder="请输入最低提现金额" style="width: 100%" controls-position="right"
|
|
|
+ @change="handleMinWithdrawalChange" />
|
|
|
+ <span class="form-unit">元</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="最高提现金额" prop="max_withdrawal">
|
|
|
+ <div class="input-with-unit">
|
|
|
+ <el-input-number v-model="formData.max_withdrawal" :min="0" :precision="2"
|
|
|
+ placeholder="请输入最高提现金额" style="width: 100%" controls-position="right" />
|
|
|
+ <span class="form-unit">元</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="提现手续费比例" prop="withdrawal_fee_rate">
|
|
|
+ <div class="input-with-unit">
|
|
|
+ <el-input-number v-model="formData.withdrawal_fee_rate" :min="0" :max="100" :precision="2"
|
|
|
+ placeholder="请输入提现手续费比例" style="width: 100%" controls-position="right" />
|
|
|
+ <span class="form-unit">%</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="handleClose" size="default">取消</el-button>
|
|
|
+ <el-button v-blur :loading="loading" @click="handleSubmit" type="primary" size="default">
|
|
|
+ 保存
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, computed } from 'vue'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+import { getSetting, updateSetting } from '/@/api/backend/order/distribution'
|
|
|
+
|
|
|
+const { t } = useI18n()
|
|
|
+
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const loading = ref(false)
|
|
|
+const formRef = ref<FormInstance>()
|
|
|
+
|
|
|
+const formData = reactive({
|
|
|
+ default_rate: 0,
|
|
|
+ min_withdrawal: 0,
|
|
|
+ max_withdrawal: 0,
|
|
|
+ withdrawal_fee_rate: 0,
|
|
|
+})
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const rules = reactive<FormRules>({
|
|
|
+ default_rate: [
|
|
|
+ { required: true, message: '请输入默认分销佣金比例', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: number, callback: Function) => {
|
|
|
+ if (value < 0 || value > 100) {
|
|
|
+ callback(new Error('默认分销佣金比例必须在0-100之间'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ min_withdrawal: [
|
|
|
+ { required: true, message: '请输入最低提现金额', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: number, callback: Function) => {
|
|
|
+ if (value < 0) {
|
|
|
+ callback(new Error('最低提现金额必须大于等于0'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ max_withdrawal: [
|
|
|
+ { required: true, message: '请输入最高提现金额', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: number, callback: Function) => {
|
|
|
+ if (value < 0) {
|
|
|
+ callback(new Error('最高提现金额必须大于等于0'))
|
|
|
+ } else if (value < formData.min_withdrawal) {
|
|
|
+ callback(new Error('最高提现金额必须大于等于最低提现金额'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ withdrawal_fee_rate: [
|
|
|
+ { required: true, message: '请输入提现手续费比例', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: number, callback: Function) => {
|
|
|
+ if (value < 0 || value > 100) {
|
|
|
+ callback(new Error('提现手续费比例必须在0-100之间'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+})
|
|
|
+
|
|
|
+// 打开对话框
|
|
|
+const open = () => {
|
|
|
+ dialogVisible.value = true
|
|
|
+ loadSetting()
|
|
|
+}
|
|
|
+
|
|
|
+// 加载分销设置
|
|
|
+const loadSetting = () => {
|
|
|
+ loading.value = true
|
|
|
+ getSetting({}).then((res: any) => {
|
|
|
+ formData.default_rate = res.data.default_rate || 0
|
|
|
+ formData.min_withdrawal = res.data.min_withdrawal || 0
|
|
|
+ formData.max_withdrawal = res.data.max_withdrawal || 0
|
|
|
+ formData.withdrawal_fee_rate = res.data.withdrawal_fee_rate || 0
|
|
|
+ }).finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const handleSubmit = () => {
|
|
|
+ if (!formRef.value) return
|
|
|
+
|
|
|
+ formRef.value.validate((valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ loading.value = true
|
|
|
+
|
|
|
+ const params = {
|
|
|
+ default_rate: formData.default_rate,
|
|
|
+ min_withdrawal: formData.min_withdrawal,
|
|
|
+ max_withdrawal: formData.max_withdrawal,
|
|
|
+ withdrawal_fee_rate: formData.withdrawal_fee_rate,
|
|
|
+ }
|
|
|
+
|
|
|
+ updateSetting(params).then(() => {
|
|
|
+ dialogVisible.value = false
|
|
|
+ emit('success')
|
|
|
+ }).finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 最低提现金额改变时,重新验证最高提现金额
|
|
|
+const handleMinWithdrawalChange = () => {
|
|
|
+ if (formRef.value) {
|
|
|
+ formRef.value.validateField('max_withdrawal', () => { })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 关闭对话框
|
|
|
+const handleClose = () => {
|
|
|
+ dialogVisible.value = false
|
|
|
+ formRef.value?.clearValidate()
|
|
|
+}
|
|
|
+
|
|
|
+const emit = defineEmits(['success'])
|
|
|
+
|
|
|
+// 导出方法供父组件调用
|
|
|
+defineExpose({
|
|
|
+ open,
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.input-with-unit {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ :deep(.el-input-number) {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-unit {
|
|
|
+ margin-left: 8px;
|
|
|
+ color: var(--el-text-color-regular);
|
|
|
+ font-size: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|