修改礼物弹窗
This commit is contained in:
170-carry
parent
5132c286ad
commit
4f54e460bb
@ -458,19 +458,27 @@ void loadData(true);
|
||||
<Modal
|
||||
:confirm-loading="saving"
|
||||
:open="modalOpen"
|
||||
class="game-edit-modal"
|
||||
destroy-on-close
|
||||
title="编辑游戏"
|
||||
width="720px"
|
||||
width="960px"
|
||||
@cancel="modalOpen = false"
|
||||
@ok="submitForm"
|
||||
>
|
||||
<Form layout="vertical">
|
||||
<FormItem label="封面">
|
||||
<div class="upload-row">
|
||||
<Button :loading="uploadLoading" @click="openUpload">
|
||||
上传封面
|
||||
</Button>
|
||||
<Image v-if="form.cover" :src="form.cover" class="cover" />
|
||||
<Form class="game-edit-form" layout="vertical">
|
||||
<section class="form-section form-section-hero">
|
||||
<div class="section-title">封面资源</div>
|
||||
<div class="cover-editor">
|
||||
<div class="cover-preview">
|
||||
<Image v-if="form.cover" :src="form.cover" class="modal-cover" />
|
||||
<div v-else class="cover-placeholder">暂无封面</div>
|
||||
</div>
|
||||
<div class="cover-actions">
|
||||
<Button :loading="uploadLoading" type="primary" @click="openUpload">
|
||||
上传封面
|
||||
</Button>
|
||||
<span class="cover-tip">支持图片格式，保存后会同步到游戏列表封面。</span>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref="fileInput"
|
||||
@ -479,106 +487,122 @@ void loadData(true);
|
||||
type="file"
|
||||
@change="handleUpload"
|
||||
>
|
||||
</FormItem>
|
||||
<FormItem label="系统">
|
||||
<SysOriginSelect
|
||||
v-model:value="form.sysOrigin"
|
||||
:options="sysOriginOptions"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="游戏源">
|
||||
<Select
|
||||
v-model:value="form.gameOrigin"
|
||||
:options="gameOriginOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择游戏源"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="客户端">
|
||||
<Select
|
||||
v-model:value="form.clientOrigin"
|
||||
:options="clientOriginOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择客户端"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="是否自研">
|
||||
<Select
|
||||
v-model:value="form.self"
|
||||
:options="booleanOptions"
|
||||
allow-clear
|
||||
option-label-prop="label"
|
||||
placeholder="请选择是否自研"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.self" label="自研游戏Code">
|
||||
<Input v-model:value="form.selfGameCode" placeholder="请输入自研游戏Code" />
|
||||
</FormItem>
|
||||
<FormItem label="游戏ID">
|
||||
<Input v-model:value="form.gameId" placeholder="请输入游戏ID" />
|
||||
</FormItem>
|
||||
<FormItem label="游戏分类">
|
||||
<Select
|
||||
v-model:value="form.category"
|
||||
:options="categoryOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择游戏分类"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="名称">
|
||||
<Input v-model:value="form.name" placeholder="请输入名称" />
|
||||
</FormItem>
|
||||
<FormItem label="编号">
|
||||
<Input v-model:value="form.gameCode" placeholder="请输入编号" />
|
||||
</FormItem>
|
||||
<FormItem label="金额">
|
||||
<Input v-model:value="form.amounts" placeholder="金币必须是整数多个逗号隔开" />
|
||||
</FormItem>
|
||||
<FormItem label="是否全屏">
|
||||
<Select
|
||||
v-model:value="form.fullScreen"
|
||||
:options="booleanOptions"
|
||||
allow-clear
|
||||
option-label-prop="label"
|
||||
placeholder="请选择是否全屏"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="游戏模式">
|
||||
<Select
|
||||
v-model:value="form.gameMode"
|
||||
:options="gameModeOptions"
|
||||
allow-clear
|
||||
option-label-prop="label"
|
||||
placeholder="请选择游戏模式"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="宽">
|
||||
<Input v-model:value="form.width" placeholder="宽度" />
|
||||
</FormItem>
|
||||
<FormItem label="高">
|
||||
<Input v-model:value="form.height" placeholder="高度" />
|
||||
</FormItem>
|
||||
<FormItem label="状态">
|
||||
<Select
|
||||
v-model:value="form.showcase"
|
||||
:options="showcaseOptions"
|
||||
allow-clear
|
||||
option-label-prop="label"
|
||||
placeholder="请选择状态"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="排序">
|
||||
<InputNumber v-model:value="form.sort" :max="99999" :min="0" style="width: 100%" />
|
||||
</FormItem>
|
||||
<FormItem label="区域">
|
||||
<Select
|
||||
v-model:value="form.regionList"
|
||||
:options="regionSelectOptions"
|
||||
mode="multiple"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择区域"
|
||||
/>
|
||||
</FormItem>
|
||||
</section>
|
||||
|
||||
<section class="form-section">
|
||||
<div class="section-title">基础信息</div>
|
||||
<div class="form-grid">
|
||||
<FormItem label="系统">
|
||||
<SysOriginSelect
|
||||
v-model:value="form.sysOrigin"
|
||||
:options="sysOriginOptions"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="游戏源">
|
||||
<Select
|
||||
v-model:value="form.gameOrigin"
|
||||
:options="gameOriginOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择游戏源"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="客户端">
|
||||
<Select
|
||||
v-model:value="form.clientOrigin"
|
||||
:options="clientOriginOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择客户端"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="名称">
|
||||
<Input v-model:value="form.name" placeholder="请输入名称" />
|
||||
</FormItem>
|
||||
<FormItem label="游戏ID">
|
||||
<Input v-model:value="form.gameId" placeholder="请输入游戏ID" />
|
||||
</FormItem>
|
||||
<FormItem label="编号">
|
||||
<Input v-model:value="form.gameCode" placeholder="请输入编号" />
|
||||
</FormItem>
|
||||
<FormItem label="游戏分类">
|
||||
<Select
|
||||
v-model:value="form.category"
|
||||
:options="categoryOptions"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择游戏分类"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="是否自研">
|
||||
<Select
|
||||
v-model:value="form.self"
|
||||
:options="booleanOptions"
|
||||
allow-clear
|
||||
option-label-prop="label"
|
||||
placeholder="请选择是否自研"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.self" class="form-item-wide" label="自研游戏Code">
|
||||
<Input v-model:value="form.selfGameCode" placeholder="请输入自研游戏Code" />
|
||||
</FormItem>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="form-section">
|
||||
<div class="section-title">展示配置</div>
|
||||
<div class="form-grid">
|
||||
<FormItem label="金额">
|
||||
<Input v-model:value="form.amounts" placeholder="金币必须是整数多个逗号隔开" />
|
||||
</FormItem>
|
||||
<FormItem label="是否全屏">
|
||||
<Select
|
||||
v-model:value="form.fullScreen"
|
||||
:options="booleanOptions"
|
||||
allow-clear
|
||||
option-label-prop="label"
|
||||
placeholder="请选择是否全屏"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="游戏模式">
|
||||
<Select
|
||||
v-model:value="form.gameMode"
|
||||
:options="gameModeOptions"
|
||||
allow-clear
|
||||
option-label-prop="label"
|
||||
placeholder="请选择游戏模式"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="宽">
|
||||
<Input v-model:value="form.width" placeholder="宽度" />
|
||||
</FormItem>
|
||||
<FormItem label="高">
|
||||
<Input v-model:value="form.height" placeholder="高度" />
|
||||
</FormItem>
|
||||
<FormItem label="状态">
|
||||
<Select
|
||||
v-model:value="form.showcase"
|
||||
:options="showcaseOptions"
|
||||
allow-clear
|
||||
option-label-prop="label"
|
||||
placeholder="请选择状态"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="排序">
|
||||
<InputNumber v-model:value="form.sort" :max="99999" :min="0" style="width: 100%" />
|
||||
</FormItem>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="form-section">
|
||||
<div class="section-title">区域配置</div>
|
||||
<FormItem label="区域">
|
||||
<Select
|
||||
v-model:value="form.regionList"
|
||||
:options="regionSelectOptions"
|
||||
mode="multiple"
|
||||
option-label-prop="label"
|
||||
placeholder="请选择区域"
|
||||
/>
|
||||
</FormItem>
|
||||
</section>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Page>
|
||||
@ -605,6 +629,85 @@ void loadData(true);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.game-edit-form {
|
||||
max-height: 68vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: rgb(248 250 252);
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 16px 4px;
|
||||
}
|
||||
|
||||
.form-section-hero {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: rgb(15 23 42);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: 0 16px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.form-item-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.cover-editor {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.cover-preview {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: 1px dashed rgb(203 213 225);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
height: 112px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.modal-cover {
|
||||
height: 112px;
|
||||
object-fit: cover;
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
color: rgb(148 163 184);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cover-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cover-tip {
|
||||
color: rgb(100 116 139);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@ -615,4 +718,25 @@ void loadData(true);
|
||||
color: rgb(100 116 139);
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-item-wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.cover-editor {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user