update point rule edit style
This commit is contained in:
Timi
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user