114 lines
2.6 KiB
Vue
114 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
||
import type { MemberConfigApi } from '#/api/member/config';
|
||
|
||
import { onMounted, ref } from 'vue';
|
||
|
||
import { Page } from '@vben/common-ui';
|
||
|
||
import { ElCard, ElMessage } from 'element-plus';
|
||
|
||
import { useVbenForm } from '#/adapter/form';
|
||
import { getConfig, saveConfig } from '#/api/member/config';
|
||
import { $t } from '#/locales';
|
||
|
||
const emit = defineEmits(['success']);
|
||
const formData = ref<MemberConfigApi.Config>();
|
||
|
||
const [Form, formApi] = useVbenForm({
|
||
commonConfig: {
|
||
// 所有表单项
|
||
labelClass: 'w-2/6',
|
||
},
|
||
layout: 'horizontal',
|
||
wrapperClass: 'grid-cols-1',
|
||
schema: [
|
||
{
|
||
component: 'Input',
|
||
fieldName: 'id',
|
||
dependencies: {
|
||
triggerFields: [''],
|
||
show: () => false,
|
||
},
|
||
},
|
||
{
|
||
component: 'Switch',
|
||
fieldName: 'pointTradeDeductEnable',
|
||
label: '积分抵扣',
|
||
help: '开启后，用户可以积分抵扣',
|
||
},
|
||
{
|
||
component: 'InputNumber',
|
||
fieldName: 'pointTradeDeductUnitPrice',
|
||
label: '积分抵扣单价',
|
||
help: '用户每消费1元，可以抵扣多少积分',
|
||
componentProps: {
|
||
min: 0,
|
||
precision: 2,
|
||
class: 'w-full',
|
||
},
|
||
},
|
||
{
|
||
component: 'InputNumber',
|
||
fieldName: 'pointTradeDeductMaxPrice',
|
||
label: '积分抵扣最大值',
|
||
help: '单次下单积分使用上限，0 不限制',
|
||
componentProps: {
|
||
min: 0,
|
||
class: 'w-full',
|
||
},
|
||
},
|
||
{
|
||
component: 'InputNumber',
|
||
fieldName: 'pointTradeGivePoint',
|
||
label: '1 元赠送多少分',
|
||
help: '下单支付金额按比例赠送积分（实际支付 1 元赠送多少积分）',
|
||
componentProps: {
|
||
min: 0,
|
||
class: 'w-full',
|
||
},
|
||
},
|
||
],
|
||
// 提交函数
|
||
handleSubmit: onSubmit,
|
||
});
|
||
|
||
async function onSubmit() {
|
||
const { valid } = await formApi.validate();
|
||
if (!valid) {
|
||
return;
|
||
}
|
||
// 提交表单
|
||
const data = (await formApi.getValues()) as MemberConfigApi.Config;
|
||
formApi.setState({ commonConfig: { disabled: true } });
|
||
try {
|
||
await saveConfig(data);
|
||
// 关闭并提示
|
||
emit('success');
|
||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||
} finally {
|
||
formApi.setState({ commonConfig: { disabled: false } });
|
||
}
|
||
}
|
||
|
||
async function getConfigInfo() {
|
||
try {
|
||
const res = await getConfig();
|
||
formData.value = res;
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
getConfigInfo();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Page auto-content-height>
|
||
<ElCard title="积分设置">
|
||
<Form class="w-1/4" />
|
||
</ElCard>
|
||
</Page>
|
||
</template>
|