业绩管理模块的静态样式

This commit is contained in:
2025-07-06 22:25:17 +08:00
parent 06debc411c
commit c3b2fcd433
18 changed files with 1317 additions and 233 deletions

View File

@ -289,28 +289,12 @@ const limitPrice = (value: number, field: keyof CourseDetail) => {
if (value < 0) (editData.value as any)[field] = 0;
};
const limitRate = (value: number, field: keyof CourseDetail) => {
if (!editData.value) return;
// 确保是数字
if (isNaN(value)) {
(editData.value as any)[field] = 0;
return;
}
// 限制佣金比例在0-100之间
if (value < 0) (editData.value as any)[field] = 0;
if (value > 100) (editData.value as any)[field] = 100;
};
// 添加输入时实时限制 - 立即修正值
const handlePriceInput = (value: number, field: keyof CourseDetail) => {
limitPrice(value, field);
};
const handleRateInput = (value: number, field: keyof CourseDetail) => {
limitRate(value, field);
};
</script>
<template>
@ -349,14 +333,7 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
<label>折扣价</label>
<div class="value">¥{{ courseData.discountPrice }}</div>
</div>
<div class="info-item">
<label>一级佣金比例</label>
<div class="value">{{ courseData.firstLevelRate }}%</div>
</div>
<div class="info-item">
<label>二级佣金比例</label>
<div class="value">{{ courseData.secondLevelRate }}%</div>
</div>
</div>
</div>
@ -366,10 +343,6 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
<div class="rich-content" v-html="courseData.detail"></div>
</div>
<div class="rich-section" v-if="courseData.promoCodeDesc">
<h2 class="section-title">推广码说明</h2>
<div class="rich-content" v-html="courseData.promoCodeDesc"></div>
</div>
</div>
<!-- 编辑页 -->
@ -433,43 +406,6 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item
label="一级佣金比例(%"
name="firstLevelRate"
>
<a-input-number
v-model:value="editData.firstLevelRate"
style="width: 100%"
:min="0"
:max="100"
@keypress="handleNumberInput"
@paste="handlePaste"
@change="(val:any) => handleRateInput(val, 'firstLevelRate')"
placeholder="0-100"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="二级佣金比例(%"
name="secondLevelRate"
>
<a-input-number
v-model:value="editData.secondLevelRate"
style="width: 100%"
:min="0"
:max="100"
@keypress="handleNumberInput"
@paste="handlePaste"
@change="(val:any) => handleRateInput(val, 'secondLevelRate')"
placeholder="0-100"
/>
</a-form-item>
</a-col>
</a-row>
<a-form-item label="课程图片">
<div class="file-upload">
@ -517,14 +453,6 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
/>
</div>
<div class="rich-text-group">
<span class="label-text">推广码说明</span>
<RichTextEditor
v-model="editData.promoCodeDesc"
:disable="false"
@content-change="(html: string) => { if (editData) editData.promoCodeDesc = html }"
/>
</div>
</div>
</div>
</div>
@ -619,9 +547,6 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
font-weight: 500;
}
.section {
margin-bottom: 2.5rem;
}
.section-title {
font-size: 1.4rem;
@ -631,10 +556,6 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
margin: 1.5rem 0;
}
.section-content {
line-height: 1.6;
color: #444;
}
.rich-section {
margin-bottom: 2.5rem;
@ -710,9 +631,6 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
margin-top: 2rem;
}
.ql-container {
min-height: 120px;
}
.file-upload {
position: relative;
@ -809,12 +727,7 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
margin-top: 1.5rem;
}
.rich-text-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
.rich-text-group {
display: flex;
@ -862,24 +775,5 @@ const handleRateInput = (value: number, field: keyof CourseDetail) => {
border: none !important;
}
.textarea-field {
min-height: 100px;
resize: vertical;
}
.textarea-field:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none;
}
.textarea-field {
width: 100%;
padding: 0.8rem 1.2rem;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
transition: all 0.3s ease;
font-size: 1rem;
background: white;
}
</style>