forked from natuka/web.puabadge.com
修改:场景手办
This commit is contained in:
1 parent
ab7987bd54
commit
fbb14eafe4
2 files changed
+125
-21
No files matched your search
+120
-21
@@ -159,30 +159,80 @@
|
||||
upload-icon="plus" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="typeId == 8 && mountsList.length > 0">
|
||||
<div :style="`font-size: 16px; color: ${config.styles.colors.textPrimary}; font-weight: bold; margin-top: ${config.styles.spacing.sectionMargin};padding: 0 ${config.styles.spacing.pagePadding};`">
|
||||
{{ toValueWithout("坐骑类型") }}
|
||||
<div v-if="typeId == 8 && mountsList.length > 0">
|
||||
<div :style="`font-size: 16px; color: ${config.styles.colors.textPrimary}; font-weight: bold; margin-top: ${config.styles.spacing.sectionMargin};padding: 0 ${config.styles.spacing.pagePadding};`">
|
||||
{{ toValueWithout("坐骑类型") }}
|
||||
</div>
|
||||
<div class="mounts-list-container" :style="`padding: 0 ${config.styles.spacing.pagePadding};`">
|
||||
<div v-for="item in mountsList" :key="item.id" class="mounts-item" @click="rideChange(item)">
|
||||
<div class="mounts-item-list">
|
||||
<img
|
||||
class="mounts-item-image"
|
||||
:src="getImageUrl(item.cover_path)"
|
||||
:alt="toValueWithout(item.name)"
|
||||
/>
|
||||
<van-icon
|
||||
v-if="item.id == mountsId"
|
||||
class="mounts-icon"
|
||||
:color="config.styles.colors.success"
|
||||
name="checked"
|
||||
size="18px"
|
||||
/>
|
||||
</div>
|
||||
<div class="mounts-item-text">{{ toValueWithout(item.name) }}</div>
|
||||
</div>
|
||||
<div class="mounts-list-container" :style="`padding: 0 ${config.styles.spacing.pagePadding};`">
|
||||
<div v-for="item in mountsList" :key="item.id" class="mounts-item" @click="rideChange(item)">
|
||||
<div class="mounts-item-list">
|
||||
<img
|
||||
class="mounts-item-image"
|
||||
:src="getImageUrl(item.cover_path)"
|
||||
:alt="toValueWithout(item.name)"
|
||||
/>
|
||||
<van-icon
|
||||
v-if="item.id == mountsId"
|
||||
class="mounts-icon"
|
||||
:color="config.styles.colors.success"
|
||||
name="checked"
|
||||
size="18px"
|
||||
/>
|
||||
</div>
|
||||
<div class="mounts-item-text">{{ toValueWithout(item.name) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="typeId == 9">
|
||||
<div :style="`font-size: 16px; color: ${config.styles.colors.textPrimary}; font-weight: bold; margin-top: ${config.styles.spacing.sectionMargin};padding: 0 ${config.styles.spacing.pagePadding};`">
|
||||
{{ toValueWithout("场景道具") }}
|
||||
</div>
|
||||
<div :style="`padding: 10px ${config.styles.spacing.pagePadding};`">
|
||||
<el-radio-group
|
||||
v-model="method"
|
||||
text-color="#000"
|
||||
fill="#43CF7C"
|
||||
@change="handleScenePropsChange"
|
||||
>
|
||||
<el-radio-button v-for="item in scenePropsList" :key="item.id" :label="item.id">
|
||||
{{ toValueWithout(item.name) }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div v-if="method == 2" :style="`margin-top: 16px;`">
|
||||
<div
|
||||
v-for="(_item, index) in scenePropsInputs"
|
||||
:key="index"
|
||||
:style="`display: flex; align-items: center; margin-bottom: 12px;`"
|
||||
>
|
||||
<el-input
|
||||
v-model="scenePropsInputs[index]"
|
||||
:placeholder="toValueWithout('请输入场景道具')"
|
||||
:style="`flex: 1; margin-right: 8px;`"
|
||||
@input="updateSceneProp"
|
||||
clearable
|
||||
/>
|
||||
<el-button
|
||||
v-if="index === scenePropsInputs.length - 1 && scenePropsInputs.length < 4"
|
||||
type="primary"
|
||||
circle
|
||||
size="small"
|
||||
@click="addScenePropsInput"
|
||||
>
|
||||
<span style="font-size: 16px; line-height: 1;">+</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scenePropsInputs.length > 1"
|
||||
type="danger"
|
||||
circle
|
||||
size="small"
|
||||
@click="removeScenePropsInput(index)"
|
||||
>
|
||||
<span style="font-size: 16px; line-height: 1;">−</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="`height: 120px;`"></div>
|
||||
<div class="design-action-bar">
|
||||
<div class="design-left">
|
||||
@@ -214,6 +264,7 @@ import example1 from '@/assets/badge/1.png'
|
||||
import example2 from '@/assets/badge/2.png'
|
||||
import example3 from '@/assets/badge/3.png'
|
||||
import example4 from '@/assets/badge/4.png'
|
||||
// Element Plus 图标通过组件自动导入,这里使用文本符号作为替代
|
||||
|
||||
// 初始化翻译功能
|
||||
const { t } = useTranslation();
|
||||
@@ -377,6 +428,53 @@ const rideChange = (item: any) => {
|
||||
mountsId.value = item.id
|
||||
}
|
||||
|
||||
// 场景道具相关
|
||||
const method = ref(1) // 1: 智能生成, 2: 自定义
|
||||
const scenePropsList = ref([
|
||||
{ id: 1, name: '智能生成' },
|
||||
{ id: 2, name: '自定义' }
|
||||
])
|
||||
const scenePropsInputs = ref<string[]>(['']) // 初始显示一个输入框
|
||||
const scene_prop = ref('') // 最终存储的字符串,用逗号连接
|
||||
|
||||
// 处理场景道具选择变化
|
||||
const handleScenePropsChange = (val: number) => {
|
||||
method.value = val
|
||||
if (val === 1) {
|
||||
// 选择不使用场景道具时,清空输入和结果
|
||||
scenePropsInputs.value = ['']
|
||||
scene_prop.value = ''
|
||||
} else if (val === 2) {
|
||||
// 选择自定义场景道具时,确保至少有一个输入框
|
||||
if (scenePropsInputs.value.length === 0) {
|
||||
scenePropsInputs.value = ['']
|
||||
}
|
||||
updateSceneProp()
|
||||
}
|
||||
}
|
||||
|
||||
// 添加输入框
|
||||
const addScenePropsInput = () => {
|
||||
if (scenePropsInputs.value.length < 4) {
|
||||
scenePropsInputs.value.push('')
|
||||
}
|
||||
}
|
||||
|
||||
// 删除输入框
|
||||
const removeScenePropsInput = (index: number) => {
|
||||
if (scenePropsInputs.value.length > 1) {
|
||||
scenePropsInputs.value.splice(index, 1)
|
||||
updateSceneProp()
|
||||
}
|
||||
}
|
||||
|
||||
// 更新场景道具字符串
|
||||
const updateSceneProp = () => {
|
||||
// 过滤空值,然后用逗号连接
|
||||
const validInputs = scenePropsInputs.value.filter(input => input && input.trim() !== '')
|
||||
scene_prop.value = validInputs.join(',')
|
||||
}
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
// 生成图片
|
||||
@@ -661,7 +759,8 @@ const createLog = () => {
|
||||
type_id: typeId.value,
|
||||
kind_id: kindId.value,
|
||||
mounts_id: mountsId.value || undefined,
|
||||
subject_id: subjectId.value
|
||||
subject_id: subjectId.value,
|
||||
scene_prop: typeId.value === 9 && method.value === 2 && scene_prop.value ? scene_prop.value : undefined
|
||||
},
|
||||
})
|
||||
}, 1000);
|
||||
|
||||
Reference in new issue
Block a user