优化发布页默认输入与在线时间校验
This commit is contained in:
@@ -210,6 +210,14 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.radio-btn.disabled,
|
||||
.radio-btn:disabled {
|
||||
border-color: #e5e7eb;
|
||||
background: #f3f4f6;
|
||||
color: #a8b0bd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.time-row,
|
||||
.result-grid {
|
||||
display: grid;
|
||||
|
||||
@@ -23,6 +23,8 @@ const {
|
||||
quantityValues,
|
||||
quantityModes,
|
||||
selectedSkins,
|
||||
disabledOnlineStartOptions,
|
||||
disabledOnlineEndOptions,
|
||||
serverOptions,
|
||||
faceOptions,
|
||||
rankOptions,
|
||||
@@ -61,6 +63,14 @@ const {
|
||||
isMultiScreenshotSlot,
|
||||
canAddScreenshot,
|
||||
getScreenshotLimitHint,
|
||||
isAllDayOnline,
|
||||
isOnlineStartPresetActive,
|
||||
isOnlineEndPresetActive,
|
||||
selectAllDayOnline,
|
||||
selectOnlineStart,
|
||||
selectOnlineEnd,
|
||||
handleOnlineStartChange,
|
||||
handleOnlineEndChange,
|
||||
handleFireLevelInput,
|
||||
handleAcceleratedSaleRatioInput,
|
||||
useRecommendedDeposit,
|
||||
@@ -100,31 +110,6 @@ function openPublishAgreement(agreement: AgreementContent) {
|
||||
function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
|
||||
setter(value)
|
||||
}
|
||||
|
||||
function isAllDayOnline() {
|
||||
return form.online_start === '00:00' && form.online_end === '23:59'
|
||||
}
|
||||
|
||||
function isOnlineStartPresetActive(value: string) {
|
||||
return !isAllDayOnline() && form.online_start === value
|
||||
}
|
||||
|
||||
function isOnlineEndPresetActive(value: string) {
|
||||
return !isAllDayOnline() && form.online_end === value
|
||||
}
|
||||
|
||||
function selectAllDayOnline() {
|
||||
form.online_start = '00:00'
|
||||
form.online_end = '23:59'
|
||||
}
|
||||
|
||||
function selectOnlineStart(value: string) {
|
||||
form.online_start = value
|
||||
}
|
||||
|
||||
function selectOnlineEnd(value: string) {
|
||||
form.online_end = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -373,6 +358,7 @@ function selectOnlineEnd(value: string) {
|
||||
label="在线开始"
|
||||
type="time"
|
||||
class="publish-field time-field"
|
||||
@update:model-value="handleOnlineStartChange"
|
||||
/>
|
||||
<div class="radio-group small time-preset-chips">
|
||||
<button
|
||||
@@ -388,7 +374,11 @@ function selectOnlineEnd(value: string) {
|
||||
:key="`start-${opt}`"
|
||||
type="button"
|
||||
class="radio-btn"
|
||||
:class="{ active: isOnlineStartPresetActive(opt) }"
|
||||
:class="{
|
||||
active: isOnlineStartPresetActive(opt),
|
||||
disabled: disabledOnlineStartOptions.includes(opt),
|
||||
}"
|
||||
:disabled="disabledOnlineStartOptions.includes(opt)"
|
||||
@click="selectOnlineStart(opt)"
|
||||
>
|
||||
{{ opt }}
|
||||
@@ -401,6 +391,7 @@ function selectOnlineEnd(value: string) {
|
||||
label="在线结束"
|
||||
type="time"
|
||||
class="publish-field time-field"
|
||||
@update:model-value="handleOnlineEndChange"
|
||||
/>
|
||||
<div class="radio-group small time-preset-chips">
|
||||
<button
|
||||
@@ -416,7 +407,11 @@ function selectOnlineEnd(value: string) {
|
||||
:key="`end-${opt}`"
|
||||
type="button"
|
||||
class="radio-btn"
|
||||
:class="{ active: isOnlineEndPresetActive(opt) }"
|
||||
:class="{
|
||||
active: isOnlineEndPresetActive(opt),
|
||||
disabled: disabledOnlineEndOptions.includes(opt),
|
||||
}"
|
||||
:disabled="disabledOnlineEndOptions.includes(opt)"
|
||||
@click="selectOnlineEnd(opt)"
|
||||
>
|
||||
{{ opt }}
|
||||
|
||||
@@ -32,6 +32,8 @@ const {
|
||||
selectedSkins,
|
||||
uploadedScreenshotCount,
|
||||
requiredScreenshotCount,
|
||||
disabledOnlineStartOptions,
|
||||
disabledOnlineEndOptions,
|
||||
serverOptions,
|
||||
faceOptions,
|
||||
rankOptions,
|
||||
@@ -74,6 +76,12 @@ const {
|
||||
isMultiScreenshotSlot,
|
||||
canAddScreenshot,
|
||||
getScreenshotLimitHint,
|
||||
isAllDayOnline,
|
||||
selectAllDayOnline,
|
||||
selectOnlineStart,
|
||||
selectOnlineEnd,
|
||||
handleOnlineStartChange,
|
||||
handleOnlineEndChange,
|
||||
handleFireLevelInput,
|
||||
handleAcceleratedSaleRatioInput,
|
||||
useRecommendedDeposit,
|
||||
@@ -116,23 +124,6 @@ function openPublishAgreement(agreement: AgreementContent) {
|
||||
function selectDailyLoss(value: string | number) {
|
||||
form.daily_loss_m = Number(value)
|
||||
}
|
||||
|
||||
function isAllDayOnline() {
|
||||
return form.online_start === '00:00' && form.online_end === '23:59'
|
||||
}
|
||||
|
||||
function selectAllDayOnline() {
|
||||
form.online_start = '00:00'
|
||||
form.online_end = '23:59'
|
||||
}
|
||||
|
||||
function selectOnlineStart(value: string | number) {
|
||||
form.online_start = String(value)
|
||||
}
|
||||
|
||||
function selectOnlineEnd(value: string | number) {
|
||||
form.online_end = String(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -161,29 +152,32 @@ function selectOnlineEnd(value: string | number) {
|
||||
<div class="compact-grid panel-input-grid">
|
||||
<label class="input-block">
|
||||
<span>哈夫币/M<b>*</b></span>
|
||||
<el-input-number
|
||||
<el-input
|
||||
v-model="form.haf_coin_amount"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
min="0"
|
||||
placeholder="100M 写 100"
|
||||
/>
|
||||
</label>
|
||||
<label class="input-block">
|
||||
<span>绝密KD</span>
|
||||
<el-input-number
|
||||
<el-input
|
||||
v-model="form.secret_kd"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
:step="0.1"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
min="0"
|
||||
step="0.1"
|
||||
placeholder="填写绝密KD"
|
||||
/>
|
||||
</label>
|
||||
<label class="input-block">
|
||||
<span>烽火等级<b>*</b></span>
|
||||
<el-input-number
|
||||
<el-input
|
||||
:model-value="form.fire_level"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
min="0"
|
||||
:placeholder="fireLevelPlaceholder"
|
||||
@update:model-value="handleFireLevelInput"
|
||||
/>
|
||||
@@ -335,6 +329,7 @@ function selectOnlineEnd(value: string | number) {
|
||||
format="HH:mm"
|
||||
placeholder="开始时间"
|
||||
class="time-input"
|
||||
@change="handleOnlineStartChange"
|
||||
/>
|
||||
<div class="time-preset-actions">
|
||||
<button
|
||||
@@ -348,6 +343,7 @@ function selectOnlineEnd(value: string | number) {
|
||||
<OptionChips
|
||||
:options="commonOnlineTimes"
|
||||
:model-value="isAllDayOnline() ? '' : form.online_start"
|
||||
:disabled-values="disabledOnlineStartOptions"
|
||||
key-prefix="start-"
|
||||
@select="selectOnlineStart"
|
||||
/>
|
||||
@@ -363,6 +359,7 @@ function selectOnlineEnd(value: string | number) {
|
||||
format="HH:mm"
|
||||
placeholder="结束时间"
|
||||
class="time-input"
|
||||
@change="handleOnlineEndChange"
|
||||
/>
|
||||
<div class="time-preset-actions">
|
||||
<button
|
||||
@@ -376,6 +373,7 @@ function selectOnlineEnd(value: string | number) {
|
||||
<OptionChips
|
||||
:options="commonOnlineTimes"
|
||||
:model-value="isAllDayOnline() ? '' : form.online_end"
|
||||
:disabled-values="disabledOnlineEndOptions"
|
||||
key-prefix="end-"
|
||||
@select="selectOnlineEnd"
|
||||
/>
|
||||
|
||||
@@ -4,6 +4,7 @@ const props = withDefaults(
|
||||
options: Array<string | number>
|
||||
modelValue?: string | number
|
||||
activeValues?: Array<string | number>
|
||||
disabledValues?: Array<string | number>
|
||||
keyPrefix?: string
|
||||
compact?: boolean
|
||||
suffix?: string
|
||||
@@ -11,6 +12,7 @@ const props = withDefaults(
|
||||
{
|
||||
modelValue: undefined,
|
||||
activeValues: () => [],
|
||||
disabledValues: () => [],
|
||||
keyPrefix: '',
|
||||
compact: false,
|
||||
suffix: '',
|
||||
@@ -26,7 +28,12 @@ function isActive(value: string | number) {
|
||||
return props.activeValues.includes(value) || props.modelValue === value
|
||||
}
|
||||
|
||||
function isDisabled(value: string | number) {
|
||||
return props.disabledValues.includes(value)
|
||||
}
|
||||
|
||||
function selectValue(value: string | number) {
|
||||
if (isDisabled(value)) return
|
||||
emit('update:modelValue', value)
|
||||
emit('select', value)
|
||||
}
|
||||
@@ -39,7 +46,8 @@ function selectValue(value: string | number) {
|
||||
:key="`${keyPrefix}${option}`"
|
||||
type="button"
|
||||
class="chip"
|
||||
:class="{ active: isActive(option) }"
|
||||
:class="{ active: isActive(option), disabled: isDisabled(option) }"
|
||||
:disabled="isDisabled(option)"
|
||||
@click="selectValue(option)"
|
||||
>
|
||||
{{ option }}{{ suffix }}
|
||||
@@ -81,4 +89,11 @@ function selectValue(value: string | number) {
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chip.disabled {
|
||||
border-color: #e5e7eb;
|
||||
background: #f3f4f6;
|
||||
color: #a8b0bd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user