fix: 回调配置, 调整信用位置, 套餐
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 6m55s

This commit is contained in:
luo
2026-07-29 18:20:42 +08:00
parent 4394ae0f78
commit 17d2eeebc5
39 changed files with 2687 additions and 1532 deletions

View File

@@ -0,0 +1,290 @@
<template>
<ElDialog
v-model="dialogVisible"
:title="props.dialogType === 'add' ? '添加套餐' : '编辑套餐'"
width="40%"
:close-on-click-modal="false"
@closed="emit('closed')"
>
<ElForm ref="formRef" :model="props.form" :rules="props.rules" label-width="130px">
<ElFormItem v-if="props.dialogType === 'add'" label="选择套餐" prop="package_ids">
<ElSelect
:model-value="props.form.package_ids"
@update:model-value="updateForm({ package_ids: $event })"
placeholder="请选择套餐(可多选)"
style="width: 100%"
filterable
remote
:remote-method="(query: string) => emit('search', query)"
:loading="props.packageLoading"
clearable
multiple
:multiple-limit="100"
popper-class="package-select-dropdown"
>
<template
v-if="props.availablePackages.length === 0 && !props.packageLoading && props.hasSeries"
>
<ElOption disabled value="" label="该系列没有可选套餐" />
</template>
<ElOption
v-for="pkg in props.availablePackages"
:key="pkg.id"
:label="getPackageOptionLabel(pkg)"
:value="pkg.id"
:disabled="pkg.is_authorized"
/>
</ElSelect>
</ElFormItem>
<ElFormItem
v-if="props.dialogType === 'add' && props.form.packages.length"
label="套餐配置"
prop="packages"
>
<div class="package-config-list">
<div v-for="pkg in props.form.packages" :key="pkg.package_id" class="package-config-item">
<div class="package-config-name" :title="pkg.package_name || ''">
{{ pkg.package_name || '套餐名称不可用' }}
</div>
<div class="package-config-cost">
<span class="package-config-field-label">套餐成本价(元)</span>
<ElInputNumber
:model-value="pkg.cost_price_yuan"
:min="pkg.original_cost_price || 0"
:max="getPackageCostPriceMax(pkg)"
:precision="2"
:step="0.01"
:controls="false"
placeholder="请输入成本价"
style="width: 150px"
@update:model-value="updatePackageCost(pkg.package_id, $event)"
/>
</div>
</div>
</div>
</ElFormItem>
<ElFormItem v-if="props.dialogType === 'edit'" label="套餐名称">
<span>{{ props.form.package_name }}</span>
</ElFormItem>
<ElFormItem v-if="props.dialogType === 'edit'" label="套餐编码">
<span>{{ props.form.package_code }}</span>
</ElFormItem>
<ElFormItem v-if="props.dialogType === 'edit'" label="成本价(元)" prop="cost_price_yuan">
<ElInputNumber
:model-value="props.form.cost_price_yuan"
:precision="2"
:step="0.01"
:controls="false"
style="width: 100%"
placeholder="请输入成本价"
@update:model-value="updateForm({ cost_price_yuan: $event ?? 0 })"
/>
<div v-if="props.form.original_cost_price" class="form-tip">
请参考{{ props.form.package_name || '套餐' }} - 套餐成本价: ¥{{
props.form.original_cost_price.toFixed(2)
}}
</div>
</ElFormItem>
<ElFormItem v-if="props.dialogType === 'add' || props.canUpdateExpiryBase" label="生效条件">
<ElSelect
:model-value="props.form.expiry_base_override"
placeholder="请选择生效条件"
style="width: 100%"
@update:model-value="updateForm({ expiry_base_override: $event })"
>
<ElOption label="跟随套餐默认" value="default" />
<ElOption label="购买即生效" value="from_purchase" />
<ElOption label="实名激活时生效" value="from_activation" />
</ElSelect>
<div class="form-tip">仅影响后续新订单,不影响已购买套餐</div>
</ElFormItem>
<template v-if="props.dialogType === 'edit'">
<ElFormItem label="套餐默认生效条件">
{{ props.form.default_expiry_base_name || '-' }}
</ElFormItem>
<ElFormItem label="覆盖生效条件">
{{ props.form.expiry_base_override_name || '跟随套餐默认' }}
</ElFormItem>
<ElFormItem label="最终生效条件">
{{ props.form.effective_expiry_base_name || '-' }}
</ElFormItem>
</template>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="dialogVisible = false">取消</ElButton>
<ElButton type="primary" :loading="props.submitLoading" @click="handleSubmit">
保存
</ElButton>
</div>
</template>
</ElDialog>
</template>
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import {
ElButton,
ElDialog,
ElForm,
ElFormItem,
ElInputNumber,
ElOption,
ElSelect,
type FormInstance,
type FormRules
} from 'element-plus'
import type {
GrantPackageCandidate,
SeriesGrantPackageForm
} from '@/utils/business/seriesGrantPackage'
const props = withDefaults(
defineProps<{
modelValue: boolean
dialogType: 'add' | 'edit'
form: SeriesGrantPackageForm
rules: FormRules
availablePackages: GrantPackageCandidate[]
packageLoading?: boolean
submitLoading?: boolean
canUpdateExpiryBase?: boolean
hasSeries?: boolean
}>(),
{
packageLoading: false,
submitLoading: false,
canUpdateExpiryBase: false,
hasSeries: false
}
)
const emit = defineEmits<{
'update:modelValue': [value: boolean]
'update:form': [form: SeriesGrantPackageForm]
search: [query: string]
submit: []
closed: []
}>()
const formRef = ref<FormInstance>()
const dialogVisible = computed({
get: () => props.modelValue,
set: (value: boolean) => emit('update:modelValue', value)
})
const formatPackageOptionPrice = (price?: number | null) => {
if (price === undefined || price === null) return '未配置'
return `¥${(price / 100).toFixed(2)}`
}
const getPackageOptionLabel = (pkg: GrantPackageCandidate) => {
const packageName = pkg.package_name || '套餐名称不可用'
return `${packageName} - 成本价 ${formatPackageOptionPrice(pkg.cost_price)} - 建议售价 ${formatPackageOptionPrice(pkg.suggested_retail_price)}`
}
const getPackageCostPriceMax = (pkg: {
original_cost_price?: number
suggested_retail_price?: number | null
}) => {
if (pkg.suggested_retail_price !== undefined && pkg.suggested_retail_price !== null) {
return Number((pkg.suggested_retail_price * 1.5).toFixed(2))
}
if (pkg.original_cost_price !== undefined && pkg.original_cost_price !== null) {
return Number((pkg.original_cost_price * 1.5).toFixed(2))
}
return undefined
}
const updateForm = (values: Partial<SeriesGrantPackageForm>) => {
emit('update:form', { ...props.form, ...values })
}
const updatePackageCost = (packageId: number, costPrice: number | undefined) => {
updateForm({
packages: props.form.packages.map((pkg) =>
pkg.package_id === packageId ? { ...pkg, cost_price_yuan: costPrice ?? 0 } : pkg
)
})
}
const handleSubmit = async () => {
if (!formRef.value) return
try {
const valid = await formRef.value.validate()
if (valid) emit('submit')
} catch {
// 表单校验失败时由表单项展示提示
}
}
watch(
() => props.modelValue,
(visible) => {
if (visible) nextTick(() => formRef.value?.clearValidate())
}
)
</script>
<style scoped lang="scss">
.form-tip {
margin-top: 4px;
font-size: 12px;
color: var(--el-text-color-secondary);
}
:global(.package-select-dropdown .el-select-dropdown__item) {
height: auto;
min-height: 34px;
padding-top: 6px;
padding-bottom: 6px;
line-height: 1.5;
white-space: normal;
}
.package-config-list {
width: 100%;
}
.package-config-item {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.package-config-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.package-config-cost {
display: flex;
flex-shrink: 0;
gap: 8px;
align-items: center;
}
.package-config-field-label {
color: var(--el-text-color-secondary);
font-size: 13px;
white-space: nowrap;
}
.dialog-footer {
text-align: right;
}
</style>

View File

@@ -0,0 +1,80 @@
<template>
<ElTable
v-loading="props.loading"
:data="props.data"
row-key="package_id"
border
stripe
:empty-text="props.emptyText"
>
<ElTableColumn prop="package_name" label="套餐名称" min-width="220" show-overflow-tooltip />
<ElTableColumn prop="package_code" label="套餐编码" min-width="180" show-overflow-tooltip />
<ElTableColumn label="成本价" width="120">
<template #default="{ row }">
<span class="amount-value">¥{{ (row.cost_price / 100).toFixed(2) }}</span>
</template>
</ElTableColumn>
<ElTableColumn label="套餐默认生效条件" min-width="150">
<template #default="{ row }">
{{ row.default_expiry_base_name || '-' }}
</template>
</ElTableColumn>
<ElTableColumn label="覆盖生效条件" min-width="150">
<template #default="{ row }">
{{ row.expiry_base_override_name || '跟随套餐默认' }}
</template>
</ElTableColumn>
<ElTableColumn label="最终生效条件" min-width="150">
<template #default="{ row }">
{{ row.effective_expiry_base_name || '-' }}
</template>
</ElTableColumn>
<ElTableColumn label="上架状态" width="100" align="center">
<template #default="{ row }">
<ElTag v-if="row.shelf_status === 1" type="success" size="small">上架</ElTag>
<ElTag v-else-if="row.shelf_status === 2" type="info" size="small">下架</ElTag>
<span v-else>-</span>
</template>
</ElTableColumn>
<ElTableColumn label="状态" width="100" align="center">
<template #default="{ row }">
<ElTag v-if="row.status === 1" type="success" size="small">启用</ElTag>
<ElTag v-else-if="row.status === 2" type="danger" size="small">禁用</ElTag>
<span v-else>-</span>
</template>
</ElTableColumn>
<ElTableColumn v-if="props.showActions" label="操作" :width="props.actionsWidth" fixed="right">
<template #default="{ row }">
<slot name="actions" :row="row" />
</template>
</ElTableColumn>
</ElTable>
</template>
<script setup lang="ts">
import { ElTable, ElTableColumn, ElTag } from 'element-plus'
import type { GrantPackageInfo } from '@/types/api'
const props = withDefaults(
defineProps<{
data: GrantPackageInfo[]
loading?: boolean
emptyText?: string
showActions?: boolean
actionsWidth?: number | string
}>(),
{
loading: false,
emptyText: '暂无套餐',
showActions: false,
actionsWidth: 240
}
)
</script>
<style scoped lang="scss">
.amount-value {
font-weight: 600;
color: var(--el-color-warning);
}
</style>

View File

@@ -0,0 +1,242 @@
<template>
<ElDialog
v-model="dialogVisible"
:title="`调整实际信用额度 - ${currentShop?.shop_name || ''}`"
width="520px"
:close-on-click-modal="false"
@closed="resetDialog"
>
<ElDescriptions :column="1" border class="credit-preview">
<ElDescriptionsItem label="店铺名称">
{{ currentShop?.shop_name || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="当前版本">
{{ currentShop?.version ?? '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="修改前">
{{ formatCreditPreview(currentShop?.credit_enabled, currentShop?.credit_limit) }}
</ElDescriptionsItem>
<ElDescriptionsItem label="修改后">
{{ formatCreditPreview(creditForm.credit_enabled, creditLimitFen) }}
</ElDescriptionsItem>
</ElDescriptions>
<ElAlert
title="实际可用金额、欠款金额和欠款状态以后端刷新后的资金概况为准。"
type="info"
:closable="false"
show-icon
class="credit-dialog-alert"
/>
<ElForm ref="creditFormRef" :model="creditForm" :rules="creditRules" label-width="110px">
<ElFormItem label="启用信用">
<ElSwitch v-model="creditForm.credit_enabled" @change="handleCreditEnabledChange" />
</ElFormItem>
<ElFormItem label="实际信用额度" prop="credit_limit_yuan">
<ElInputNumber
v-model="creditForm.credit_limit_yuan"
:disabled="!creditForm.credit_enabled"
:min="0"
:precision="2"
:step="100"
controls-position="right"
style="width: 100%"
placeholder="请输入实际信用额度"
/>
<div class="credit-dialog-tip">单位:元;关闭信用时额度将自动归零</div>
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="dialogVisible = false">取消</ElButton>
<ElButton type="primary" :loading="submitting" @click="handleSubmit">确认调整</ElButton>
</div>
</template>
</ElDialog>
</template>
<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { CommissionService, ShopService } from '@/api/modules'
import type { ShopFundSummaryItem } from '@/types/api/commission'
import { fenToYuan, formatMoney, yuanToFen } from '@/utils/business/format'
import { normalizeApiError } from '@/utils/business/apiError'
const props = defineProps<{
modelValue: boolean
shop: ShopFundSummaryItem | null
}>()
const emit = defineEmits<{
'update:modelValue': [value: boolean]
submitted: []
}>()
const dialogVisible = computed({
get: () => props.modelValue,
set: (value: boolean) => emit('update:modelValue', value)
})
const creditFormRef = ref<FormInstance>()
const submitting = ref(false)
const currentShop = ref<ShopFundSummaryItem | null>(null)
const creditForm = reactive({
credit_enabled: false,
credit_limit_yuan: 0
})
const creditLimitFen = computed(() =>
creditForm.credit_enabled ? yuanToFen(creditForm.credit_limit_yuan) || 0 : 0
)
const creditRules = computed<FormRules>(() => ({
credit_limit_yuan: [
{
validator: (
_rule: unknown,
value: number | undefined,
callback: (error?: Error) => void
) => {
if (!creditForm.credit_enabled) {
callback()
return
}
if (value === undefined || value === null || Number.isNaN(value)) {
callback(new Error('请输入实际信用额度'))
return
}
if (value <= 0) {
callback(new Error('实际信用额度必须大于0'))
return
}
callback()
},
trigger: 'blur'
}
]
}))
const formatCreditPreview = (enabled?: boolean, creditLimit?: number) =>
enabled ? `启用 / ${formatMoney(creditLimit || 0)}` : '关闭 / ¥0.00'
const syncForm = (summary: ShopFundSummaryItem) => {
creditForm.credit_enabled = Boolean(summary.credit_enabled)
creditForm.credit_limit_yuan = summary.credit_enabled ? fenToYuan(summary.credit_limit) : 0
nextTick(() => creditFormRef.value?.clearValidate())
}
watch(
() => [props.modelValue, props.shop] as const,
([visible, shop]) => {
if (visible && shop) {
currentShop.value = shop
syncForm(shop)
}
},
{ immediate: true }
)
const handleCreditEnabledChange = (enabled: boolean | string | number) => {
if (!enabled) {
creditForm.credit_limit_yuan = 0
creditFormRef.value?.clearValidate('credit_limit_yuan')
}
}
const resetDialog = () => {
creditFormRef.value?.resetFields()
currentShop.value = null
creditForm.credit_enabled = false
creditForm.credit_limit_yuan = 0
}
const loadLatestSummary = async () => {
if (!currentShop.value) return null
const res = await CommissionService.getShopFundSummary({
page: 1,
page_size: 100,
shop_name: currentShop.value.shop_name
})
if (res.code !== 0) return null
return (
(res.data.items || []).find((item) => item.shop_id === currentShop.value?.shop_id) || null
)
}
const isConflict = (error: unknown) => {
const normalized = normalizeApiError(error)
return normalized.kind === 'conflict' || normalized.status === 409
}
const handleSubmit = async () => {
if (!currentShop.value || !creditFormRef.value) return
try {
await creditFormRef.value.validate()
} catch {
return
}
submitting.value = true
try {
const res = await ShopService.updateShopCreditLimit(currentShop.value.shop_id, {
credit_enabled: creditForm.credit_enabled,
credit_limit: creditLimitFen.value,
version: currentShop.value.version
})
if (res.code === 0) {
ElMessage.success('实际信用额度调整成功')
dialogVisible.value = false
emit('submitted')
return
}
if (res.code === 409) {
const latest = await loadLatestSummary()
if (latest) {
currentShop.value = latest
syncForm(latest)
}
ElMessage.warning('资金概况已被其他操作更新,已刷新最新版本;请确认后重新提交')
return
}
ElMessage.error(res.msg || '实际信用额度调整失败')
} catch (error) {
if (isConflict(error)) {
const latest = await loadLatestSummary()
if (latest) {
currentShop.value = latest
syncForm(latest)
}
ElMessage.warning('资金概况已被其他操作更新,已刷新最新版本;请确认后重新提交')
} else {
ElMessage.error(normalizeApiError(error).message)
}
} finally {
submitting.value = false
}
}
</script>
<style scoped lang="scss">
.credit-preview {
margin-bottom: 16px;
}
.credit-dialog-alert {
margin-bottom: 16px;
}
.credit-dialog-tip {
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
color: var(--el-text-color-secondary);
}
</style>