hy/yumi-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改礼物弹窗

Browse Source
This commit is contained in:
170-carry 2026-04-27 12:38:35 +08:00
parent 5132c286ad
commit 4f54e460bb
1 changed files with 232 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

340
apps/src/views/operate/game-config.vue
View File

@ -458,19 +458,27 @@ void loadData(true);
<Modal <Modal
:confirm-loading="saving" :confirm-loading="saving"
:open="modalOpen" :open="modalOpen"
class="game-edit-modal"
destroy-on-close destroy-on-close
title="编辑游戏" title="编辑游戏"
width="720px" width="960px"
@cancel="modalOpen = false" @cancel="modalOpen = false"
@ok="submitForm" @ok="submitForm"
> >
<Form layout="vertical"> <Form class="game-edit-form" layout="vertical">
<FormItem label="封面"> <section class="form-section form-section-hero">
<div class="upload-row"> <div class="section-title">封面资源</div>
<Button :loading="uploadLoading" @click="openUpload"> <div class="cover-editor">
上传封面 <div class="cover-preview">
</Button> <Image v-if="form.cover" :src="form.cover" class="modal-cover" />
<Image v-if="form.cover" :src="form.cover" class="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> </div>
<input <input
ref="fileInput" ref="fileInput"
@ -479,106 +487,122 @@ void loadData(true);
type="file" type="file"
@change="handleUpload" @change="handleUpload"
> >
</FormItem> </section>
<FormItem label="系统">
<SysOriginSelect <section class="form-section">
v-model:value="form.sysOrigin" <div class="section-title">基础信息</div>
:options="sysOriginOptions" <div class="form-grid">
/> <FormItem label="系统">
</FormItem> <SysOriginSelect
<FormItem label="游戏源"> v-model:value="form.sysOrigin"
<Select :options="sysOriginOptions"
v-model:value="form.gameOrigin" />
:options="gameOriginOptions" </FormItem>
option-label-prop="label" <FormItem label="游戏源">
placeholder="请选择游戏源" <Select
/> v-model:value="form.gameOrigin"
</FormItem> :options="gameOriginOptions"
<FormItem label="客户端"> option-label-prop="label"
<Select placeholder="请选择游戏源"
v-model:value="form.clientOrigin" />
:options="clientOriginOptions" </FormItem>
option-label-prop="label" <FormItem label="客户端">
placeholder="请选择客户端" <Select
/> v-model:value="form.clientOrigin"
</FormItem> :options="clientOriginOptions"
<FormItem label="是否自研"> option-label-prop="label"
<Select placeholder="请选择客户端"
v-model:value="form.self" />
:options="booleanOptions" </FormItem>
allow-clear <FormItem label="名称">
option-label-prop="label" <Input v-model:value="form.name" placeholder="请输入名称" />
placeholder="请选择是否自研" </FormItem>
/> <FormItem label="游戏ID">
</FormItem> <Input v-model:value="form.gameId" placeholder="请输入游戏ID" />
<FormItem v-if="form.self" label="自研游戏Code"> </FormItem>
<Input v-model:value="form.selfGameCode" placeholder="请输入自研游戏Code" /> <FormItem label="编号">
</FormItem> <Input v-model:value="form.gameCode" placeholder="请输入编号" />
<FormItem label="游戏ID"> </FormItem>
<Input v-model:value="form.gameId" placeholder="请输入游戏ID" /> <FormItem label="游戏分类">
</FormItem> <Select
<FormItem label="游戏分类"> v-model:value="form.category"
<Select :options="categoryOptions"
v-model:value="form.category" option-label-prop="label"
:options="categoryOptions" placeholder="请选择游戏分类"
option-label-prop="label" />
placeholder="请选择游戏分类" </FormItem>
/> <FormItem label="是否自研">
</FormItem> <Select
<FormItem label="名称"> v-model:value="form.self"
<Input v-model:value="form.name" placeholder="请输入名称" /> :options="booleanOptions"
</FormItem> allow-clear
<FormItem label="编号"> option-label-prop="label"
<Input v-model:value="form.gameCode" placeholder="请输入编号" /> placeholder="请选择是否自研"
</FormItem> />
<FormItem label="金额"> </FormItem>
<Input v-model:value="form.amounts" placeholder="金币必须是整数多个逗号隔开" /> <FormItem v-if="form.self" class="form-item-wide" label="自研游戏Code">
</FormItem> <Input v-model:value="form.selfGameCode" placeholder="请输入自研游戏Code" />
<FormItem label="是否全屏"> </FormItem>
<Select </div>
v-model:value="form.fullScreen" </section>
:options="booleanOptions"
allow-clear <section class="form-section">
option-label-prop="label" <div class="section-title">展示配置</div>
placeholder="请选择是否全屏" <div class="form-grid">
/> <FormItem label="金额">
</FormItem> <Input v-model:value="form.amounts" placeholder="金币必须是整数多个逗号隔开" />
<FormItem label="游戏模式"> </FormItem>
<Select <FormItem label="是否全屏">
v-model:value="form.gameMode" <Select
:options="gameModeOptions" v-model:value="form.fullScreen"
allow-clear :options="booleanOptions"
option-label-prop="label" allow-clear
placeholder="请选择游戏模式" option-label-prop="label"
/> placeholder="请选择是否全屏"
</FormItem> />
<FormItem label="宽"> </FormItem>
<Input v-model:value="form.width" placeholder="宽度" /> <FormItem label="游戏模式">
</FormItem> <Select
<FormItem label="高"> v-model:value="form.gameMode"
<Input v-model:value="form.height" placeholder="高度" /> :options="gameModeOptions"
</FormItem> allow-clear
<FormItem label="状态"> option-label-prop="label"
<Select placeholder="请选择游戏模式"
v-model:value="form.showcase" />
:options="showcaseOptions" </FormItem>
allow-clear <FormItem label="宽">
option-label-prop="label" <Input v-model:value="form.width" placeholder="宽度" />
placeholder="请选择状态" </FormItem>
/> <FormItem label="高">
</FormItem> <Input v-model:value="form.height" placeholder="高度" />
<FormItem label="排序"> </FormItem>
<InputNumber v-model:value="form.sort" :max="99999" :min="0" style="width: 100%" /> <FormItem label="状态">
</FormItem> <Select
<FormItem label="区域"> v-model:value="form.showcase"
<Select :options="showcaseOptions"
v-model:value="form.regionList" allow-clear
:options="regionSelectOptions" option-label-prop="label"
mode="multiple" placeholder="请选择状态"
option-label-prop="label" />
placeholder="请选择区域" </FormItem>
/> <FormItem label="排序">
</FormItem> <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> </Form>
</Modal> </Modal>
</Page> </Page>
@ -605,6 +629,85 @@ void loadData(true);
gap: 12px; 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 { .pager {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -615,4 +718,25 @@ void loadData(true);
color: rgb(100 116 139); color: rgb(100 116 139);
line-height: 32px; 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> </style>