|
|
|
@ -100,12 +100,12 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="count_prop > 0 && typeId == 11"> |
|
|
|
<div> |
|
|
|
<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};`"> |
|
|
|
<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("相框标题") }} |
|
|
|
{{ toValueWithout("相框标题") }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div :style="`padding: 10px ${config.styles.spacing.pagePadding};`"> |
|
|
|
<div :style="`padding: 10px ${config.styles.spacing.pagePadding};`"> |
|
|
|
<el-input type="text" v-model="scene_prop" maxlength="8" show-word-limit :placeholder="toValueWithout('请输入相框标题')" @input="scenePropInputText" /> |
|
|
|
<el-input type="text" v-model="scene_prop" :placeholder="toValueWithout('请输入相框标题')" @input="scenePropInputText" /> |
|
|
|
<div class="photo-upload-tip" style="color: red;"> |
|
|
|
<div class="photo-upload-tip" style="color: red;"> |
|
|
|
*{{ toValueWithout("相框标题将用于生成图片,请输入简洁明了的相框标题") }} |
|
|
|
*{{ toValueWithout("相框标题将用于生成图片,请输入简洁明了的相框标题") }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -155,52 +155,22 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="typeId == 9"> |
|
|
|
<div v-if="count_prop > 0 && 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};`"> |
|
|
|
<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("场景道具") }} |
|
|
|
{{ toValueWithout("场景道具") }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div :style="`padding: 10px ${config.styles.spacing.pagePadding};`"> |
|
|
|
<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-if="method == 2" :style="`margin-top: 16px;`"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-for="(_item, index) in scenePropsInputs" |
|
|
|
|
|
|
|
:key="index" |
|
|
|
|
|
|
|
:style="`display: flex; align-items: center; margin-bottom: 12px;`" |
|
|
|
:style="`display: flex; align-items: center; margin-bottom: 12px;`" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-input |
|
|
|
<el-input |
|
|
|
v-model="scenePropsInputs[index]" |
|
|
|
v-model="scene_prop" |
|
|
|
:placeholder="toValueWithout('请输入场景道具')" |
|
|
|
:placeholder="toValueWithout('请输入场景道具')" |
|
|
|
:style="`flex: 1; margin-right: 8px;`" |
|
|
|
:style="`flex: 1; margin-right: 8px;`" |
|
|
|
@input="updateSceneProp" |
|
|
|
@input="updateSceneProp" |
|
|
|
clearable |
|
|
|
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> |
|
|
|
</div> |
|
|
|
@ -365,10 +335,26 @@ const kindChange = (item: any) => { |
|
|
|
count_prop.value = item.count_prop |
|
|
|
count_prop.value = item.count_prop |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 限制最多 8 个字符,空格和特殊字符均计入,不做过滤 |
|
|
|
// 计算字符单位:中文占2个,英文/数字/空格/符号占1个 |
|
|
|
|
|
|
|
const getCharUnits = (str: string) => { |
|
|
|
|
|
|
|
let units = 0 |
|
|
|
|
|
|
|
for (const char of str) { |
|
|
|
|
|
|
|
units += /[\u4e00-\u9fff\u3400-\u4dbf]/.test(char) ? 2 : 1 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return units |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 限制最多 12 个字符单位:中文占2个,英文/数字/空格/符号占1个 |
|
|
|
const scenePropInputText = (val: string) => { |
|
|
|
const scenePropInputText = (val: string) => { |
|
|
|
if (val.length > 8) { |
|
|
|
if (getCharUnits(val) > 12) { |
|
|
|
val = val.slice(0, 8) |
|
|
|
let units = 0 |
|
|
|
|
|
|
|
let i = 0 |
|
|
|
|
|
|
|
for (; i < val.length; i++) { |
|
|
|
|
|
|
|
const add = /[\u4e00-\u9fff\u3400-\u4dbf]/.test(val[i]) ? 2 : 1 |
|
|
|
|
|
|
|
if (units + add > 12) break |
|
|
|
|
|
|
|
units += add |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
val = val.slice(0, i) |
|
|
|
} |
|
|
|
} |
|
|
|
scene_prop.value = val |
|
|
|
scene_prop.value = val |
|
|
|
} |
|
|
|
} |
|
|
|
@ -412,51 +398,11 @@ const rideChange = (item: any) => { |
|
|
|
mountsId.value = item.id |
|
|
|
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 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 updateSceneProp = (value: string) => { |
|
|
|
// 过滤空值,然后用逗号连接 |
|
|
|
scene_prop.value = value |
|
|
|
const validInputs = scenePropsInputs.value.filter(input => input && input.trim() !== '') |
|
|
|
|
|
|
|
scene_prop.value = validInputs.join(',') |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const isLoading = ref(false) |
|
|
|
const isLoading = ref(false) |
|
|
|
|