120 lines
3.6 KiB
Vue
Raw Normal View History

<template>
<ContentWrap>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="hideId" v-show="false">
<el-input v-model="formData.id" />
</el-form-item>
2023-09-03 21:14:44 +08:00
<el-tabs>
<el-tab-pane label="积分">
2023-09-05 22:31:35 +08:00
<el-form-item label="积分抵扣" prop="tradeDeductEnable">
2023-09-03 21:14:44 +08:00
<el-switch v-model="formData.tradeDeductEnable" style="user-select: none" />
<el-text class="w-full" size="small" type="info">下单积分是否抵用订单金额</el-text>
</el-form-item>
<el-form-item label="积分抵扣" prop="tradeDeductUnitPrice">
<el-input-number
v-model="computedTradeDeductUnitPrice"
placeholder="请输入积分抵扣金额"
:precision="2"
/>
<el-text class="w-full" size="small" type="info">
积分抵用比例(1 积分抵多少金额)单位
</el-text>
</el-form-item>
<el-form-item label="积分抵扣最大值" prop="tradeDeductMaxPrice">
<el-input-number
v-model="formData.tradeDeductMaxPrice"
placeholder="请输入积分抵扣最大值"
/>
<el-text class="w-full" size="small" type="info">
单次下单积分使用上限0 不限制
</el-text>
</el-form-item>
<el-form-item label="1 元赠送多少分" prop="tradeGivePoint">
<el-input-number
v-model="formData.tradeGivePoint"
placeholder="请输入 1 元赠送多少积分"
/>
<el-text class="w-full" size="small" type="info">
下单支付金额按比例赠送积分实际支付 1 元赠送多少积分
</el-text>
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</ContentWrap>
</template>
<script lang="ts" setup>
import * as ConfigApi from '@/api/member/config'
defineOptions({ name: 'MemberConfig' })
2023-08-20 10:14:36 +08:00
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formData = ref({
2023-09-03 21:14:44 +08:00
id: undefined,
tradeDeductEnable: true,
tradeDeductUnitPrice: 0,
tradeDeductMaxPrice: 0,
2023-09-05 22:31:35 +08:00
tradeGivePoint: 0
})
2023-08-20 10:14:36 +08:00
// 创建一个计算属性,用于将 tradeDeductUnitPrice 显示为带两位小数的形式
const computedTradeDeductUnitPrice = computed({
get: () => (formData.value.tradeDeductUnitPrice / 100).toFixed(2),
set: (newValue: number) => {
formData.value.tradeDeductUnitPrice = Math.round(newValue * 100)
}
})
const formRules = reactive({})
const formRef = ref() // 表单 Ref
2023-07-02 23:18:45 +08:00
/** 修改积分配置 */
const onSubmit = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ConfigApi.ConfigVO
await ConfigApi.saveConfig(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
} finally {
formLoading.value = false
}
}
2023-07-02 23:18:45 +08:00
/** 获得积分配置 */
const getConfig = async () => {
try {
const data = await ConfigApi.getConfig()
2023-08-20 10:14:36 +08:00
if (data === null) {
return
}
formData.value = data
} finally {
}
}
2023-07-02 23:18:45 +08:00
onMounted(() => {
getConfig()
})
</script>