timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update point rule edit style

Browse Source
This commit is contained in:
Timi
2026-08-12 23:29:54 +08:00
parent a7747b4d21
commit b4ba0062a9
3 changed files with 166 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CardContainer.vue
+72
View File
@@ -0,0 +1,72 @@
<template>
<div class="card-container">
<card-title :title="title" :description="description">
<template v-if="$slots.title" #title>
<slot name="title" />
</template>
<template v-if="$slots.description" #description>
<slot name="description" />
</template>
</card-title>
<div v-if="$slots.default" class="content bg-white">
<slot />
</div>
<div v-if="tips || $slots.tips" class="tips">
<slot name="tips">
<span v-text="tips" />
</slot>
</div>
</div>
</template>
<script setup lang="ts">
interface Props {
title?: string;
description?: string;
tips?: string;
}
defineProps<Props>();
defineSlots<{
default?: () => unknown;
title?: () => unknown;
description?: () => unknown;
tips?: () => unknown;
}>();
defineOptions({
name: "CardContainer"
});
</script>
<style scoped lang="less">
.card-container {
margin: 0 1rem;
.content {
overflow: hidden;
box-shadow: var(--td-shadow-1);
border-radius: 1rem;
}
.tips {
color: #52607a;
font-size: .8125rem;
line-height: 1.5;
padding: .25rem 1rem;
}
}
:global(html.theme-dark) {
.card-container {
background: rgba(15, 23, 42, .88);
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
.tips {
color: #94a3b8;
background: rgba(148, 163, 184, .14);
}
}
}
</style>
src/pages/point/PointRuleEdit.vue
+93 -78
View File
@@ -1,78 +1,86 @@
<template>
<div v-can="pageAccess" class="point-rule-edit">
<t-form class="form" label-align="left" label-width="6rem">
<t-form-item v-if="isGlobalManager" label="门店" required-mark :arrow="isCreateMode" @click="openStorePicker">
<span class="picker-text" v-text="selectedStoreName" />
</t-form-item>
<t-form-item label="登记事件" required-mark arrow @click="openEventPicker">
<span class="picker-text" v-text="selectedEventName" />
</t-form-item>
<t-form-item label="规则名称" required-mark>
<t-input v-model.trim="formModel.name" borderless placeholder="例如：每次登记加 10 分" />
</t-form-item>
<t-form-item label="规则状态" arrow @click="openStatusPicker">
<span class="picker-text" v-text="getStatusText(formModel.status)" />
</t-form-item>
<t-form-item label="触发类型" arrow @click="openTriggerPicker">
<span class="picker-text" v-text="getTriggerText(formModel.triggerType)" />
</t-form-item>
<t-form-item label="积分值模式" arrow @click="openModePicker">
<span class="picker-text" v-text="getModeText(formModel.pointMode)" />
</t-form-item>
<t-form-item v-if="formModel.pointMode === 'FIXED'" label="固定积分" required-mark>
<t-input
v-model.trim="formModel.pointValueText"
type="number"
align="right"
borderless
placeholder="请输入正整数"
/>
</t-form-item>
<t-form-item v-if="formModel.triggerType === 'AFTER_COUNT_EVERY_TIME'" label="触发阈值" required-mark>
<t-input
v-model.trim="formModel.thresholdText"
type="number"
align="right"
borderless
placeholder="累计登记达到几次"
/>
</t-form-item>
<div v-if="formModel.pointMode === 'SOURCE_VALUE'" class="source-condition">
<div class="source-title">自定义积分范围</div>
<div class="source-inputs">
<t-input v-model.trim="formModel.minText" type="number" align="right" borderless placeholder="最小值" />
<span>至</span>
<t-input v-model.trim="formModel.maxText" type="number" align="right" borderless placeholder="最大值" />
<card-container>
<t-form-item v-if="isGlobalManager" label="门店" required-mark :arrow="isCreateMode" @click="openStorePicker">
<span class="picker-text" v-text="selectedStoreName" />
</t-form-item>
<t-form-item label="登记事件" required-mark arrow @click="openEventPicker">
<span class="picker-text" v-text="selectedEventName" />
</t-form-item>
<t-form-item label="规则名称" required-mark>
<t-input v-model.trim="formModel.name" align="right" borderless placeholder="例如：每次登记加 10 分" />
</t-form-item>
<t-form-item label="规则状态" arrow @click="openStatusPicker">
<span class="picker-text" v-text="getStatusText(formModel.status)" />
</t-form-item>
<t-form-item label="规则备注">
<t-textarea v-model.trim="formModel.remark" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="规则说明" />
</t-form-item>
</card-container>
<card-container>
<t-form-item label="触发类型" arrow @click="openTriggerPicker">
<span class="picker-text" v-text="getTriggerText(formModel.triggerType)" />
</t-form-item>
<t-form-item label="积分值模式" arrow @click="openModePicker">
<span class="picker-text" v-text="getModeText(formModel.pointMode)" />
</t-form-item>
<t-form-item v-if="formModel.pointMode === 'FIXED'" label="固定积分" required-mark>
<t-input
v-model.trim="formModel.pointValueText"
type="number"
align="right"
borderless
placeholder="请输入正整数"
/>
</t-form-item>
<t-form-item v-if="formModel.triggerType === 'AFTER_COUNT_EVERY_TIME'" label="触发阈值" required-mark>
<t-input
v-model.trim="formModel.thresholdText"
type="number"
align="right"
borderless
placeholder="累计登记达到几次"
/>
</t-form-item>
<div v-if="formModel.pointMode === 'SOURCE_VALUE'" class="source-condition">
<div class="source-title">自定义积分范围</div>
<div class="source-inputs">
<t-input v-model.trim="formModel.minText" type="number" align="right" borderless placeholder="最小值" />
<span>至</span>
<t-input v-model.trim="formModel.maxText" type="number" align="right" borderless placeholder="最大值" />
</div>
<span class="tips">登记时只有输入在此范围内的正整数，系统才会按本规则发放积分</span>
</div>
<p>登记时只有输入在此范围内的正整数，后端才会按本规则发放积分。</p>
</div>
<t-form-item label="生效开始" arrow @click="openBeginAtPicker">
<div class="time-value">
<span class="picker-text" v-text="formModel.beginAtText || '不限'" />
<t-button v-if="formModel.beginAtText" size="extra-small" content="不限" @click.stop="clearBeginAt" />
</div>
</t-form-item>
<t-form-item label="生效结束" arrow @click="openEndAtPicker">
<div class="time-value">
<span class="picker-text" v-text="formModel.endAtText || '不限'" />
<t-button v-if="formModel.endAtText" size="extra-small" content="不限" @click.stop="clearEndAt" />
</div>
</t-form-item>
<t-form-item label="优先级" required-mark>
<t-input v-model.trim="formModel.priorityText" type="number" align="right" borderless placeholder="数值越小越优先" />
</t-form-item>
<t-form-item label="独占匹配" content-align="right">
<t-switch v-model="formModel.exclusive" />
</t-form-item>
<t-form-item label="规则备注">
<t-textarea v-model.trim="formModel.remark" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="规则说明" />
</t-form-item>
</card-container>
<card-container>
<t-form-item label="生效开始" arrow @click="openBeginAtPicker">
<div class="time-value">
<span class="picker-text" v-text="formModel.beginAtText || '不限'" />
<t-button v-if="formModel.beginAtText" size="extra-small" content="不限" @click.stop="clearBeginAt" />
</div>
</t-form-item>
<t-form-item label="生效结束" arrow @click="openEndAtPicker">
<div class="time-value">
<span class="picker-text" v-text="formModel.endAtText || '不限'" />
<t-button v-if="formModel.endAtText" size="extra-small" content="不限" @click.stop="clearEndAt" />
</div>
</t-form-item>
</card-container>
<card-container tips="命中规则并发放积分后不再匹配其他规则">
<t-form-item label="优先级" required-mark>
<t-input v-model.trim="formModel.priorityText" type="number" align="right" borderless placeholder="数值越小越优先" />
</t-form-item>
<t-form-item label="独占匹配" content-align="right">
<t-switch size="small" v-model="formModel.exclusive" />
</t-form-item>
</card-container>
</t-form>
<div class="bottom-actions">
<t-button
v-if="!isCreateMode"
v-can="permissionCodes.pointRule.delete"
class="delete"
class="delete bg-white"
theme="danger"
variant="outline"
:loading="isRemoving"
@@ -607,11 +615,18 @@ onMounted(async () => {
padding: calc(var(--app-nav-height) + 1rem) 0 5rem;
.form {
margin: 0 1rem;
padding: .5rem 0;
background: rgba(255, 255, 255, .92);
box-shadow: var(--td-shadow-1);
border-radius: 1.4rem;
gap: 1rem;
margin: 0;
display: flex;
background: transparent;
flex-direction: column;
.card {
margin: 0 1rem;
background: rgba(255, 255, 255, .92);
box-shadow: var(--td-shadow-1);
border-radius: 1rem;
}
.picker-text {
color: #52607a;
@@ -643,16 +658,16 @@ onMounted(async () => {
.t-input {
flex: 1;
border: 1px solid var(--td-component-border);
border-radius: .75rem;
padding: .25rem .5rem;
border-radius: .5rem;
}
}
}
p {
color: #52607a;
margin: .5rem 0 0;
font-size: .75rem;
line-height: 1.5;
}
.tips {
color: #52607a;
font-size: .75rem;
line-height: 1.5;
}
}
src/styles/tdesign-custom.css
+1 -1
View File
@@ -109,7 +109,7 @@
--td-component-stroke: var(--td-gray-color-3);
--td-border-level-2-color: var(--td-gray-color-4);
--td-component-border: var(--td-gray-color-4);
--td-shadow-1: 0 1px 6px rgba(0, 0, 0, 0.05),0 3px 4px rgba(0, 0, 0, 0.04),0 1px 2px -1px rgba(0, 0, 0, 0.08);
--td-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.03);
--td-shadow-2: 0 3px 10px 2px rgba(0, 0, 0, 0.04),0 6px 8px rgba(0, 0, 0, 0.05),0 4px 4px -2px rgba(0, 0, 0, 0.08);
--td-shadow-3: 0 4px 18px 5px rgba(0, 0, 0, 0.05),0 10px 9px 2px rgba(0, 0, 0, 0.04),0 3px 5px -3px rgba(0, 0, 0, 0.08);
--td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 6%);