112 lines
4.2 KiB
Vue
112 lines
4.2 KiB
Vue
<script setup lang="ts">
|
||
import { ref, onBeforeMount } from "vue";
|
||
import uploadImage from '@/components/UploadImage/index.vue';
|
||
import { queryAdornmentList } from '@/api/modules/activities';
|
||
const ruleFormRef = ref();
|
||
const formRules = ref({
|
||
// level: [{ required: true, message: "请输入等级", trigger: "blur" }],
|
||
// change_value: [{ required: true, message: "请输入升级所需经验值", trigger: "blur" }],
|
||
// image: [{ required: true, message: "请上传等级图标", trigger: "change" }],
|
||
// rights_icon: [{ required: true, message: "请上传特权图标", trigger: "change" }],
|
||
// name: [{ required: true, message: "请输入等级名称", trigger: "blur" }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
|
||
});
|
||
// 挂件上的头像位置：0-上，1-右上，2-右，3-右下，4-下，5-左下，6-左，7-左上
|
||
const directionList = ref([
|
||
{ name: '上', id: 0 },
|
||
{ name: '右上', id: 1 },
|
||
{ name: '右', id: 2 },
|
||
{ name: '右下', id: 3 },
|
||
{ name: '下', id: 4 },
|
||
{ name: '左下', id: 5 },
|
||
{ name: '左', id: 6 },
|
||
{ name: '左上', id: 7 }
|
||
])
|
||
const props = defineProps(["formInline"]);
|
||
const newFormInline = ref(
|
||
props.formInline
|
||
? props.formInline
|
||
: {
|
||
level: "",
|
||
name: "",
|
||
image: "",
|
||
change_value: "",
|
||
rights_icon: "",
|
||
bg_image: "",
|
||
color: ""
|
||
}
|
||
);
|
||
function getRef() {
|
||
return ruleFormRef.value;
|
||
}
|
||
function handleFileSuccess(list) {
|
||
newFormInline.value.image = list.join(',')
|
||
}
|
||
function handleIconSuccess(list) {
|
||
newFormInline.value.rights_icon = list.join(',')
|
||
}
|
||
function handleBgSuccess(list) {
|
||
newFormInline.value.pendant = list.join(',')
|
||
}
|
||
const AdornmentList = ref([])
|
||
const getAdornmentList = async () => {
|
||
// 坐骑是2 头像框是3
|
||
const { data, code } = await queryAdornmentList({ type: 2 })
|
||
AdornmentList.value = code ? data : []
|
||
}
|
||
const AvatarList = ref([])
|
||
const getAvatarList = async () => {
|
||
// 坐骑是2 头像框是3
|
||
const { data, code } = await queryAdornmentList({ type: 1 })
|
||
AvatarList.value = code ? data : []
|
||
}
|
||
onBeforeMount(() => {
|
||
getAdornmentList()
|
||
getAvatarList()
|
||
})
|
||
defineExpose({ getRef });
|
||
</script>
|
||
|
||
<template>
|
||
<!-- pendant cp装扮 rights_icon CP特效地址-->
|
||
<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
|
||
<el-form-item label="等级/段位" prop="level">
|
||
<el-input v-model="newFormInline.level" clearable placeholder="请输入等级" />
|
||
</el-form-item>
|
||
<el-form-item label="等级名称" prop="name">
|
||
<el-input v-model="newFormInline.name" clearable placeholder="请输入等级名称" />
|
||
</el-form-item>
|
||
<el-form-item label="等级图标" prop="image">
|
||
<uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.image" />
|
||
</el-form-item>
|
||
<el-form-item label="升级所需经验值" prop="change_value">
|
||
<el-input-number v-model="newFormInline.change_value"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="CP特效" prop="rights_icon">
|
||
<uploadImage @handleSuccess="handleIconSuccess" :acceptType="'.mp4'" :limit="1"
|
||
:echoUrl="newFormInline.rights_icon" />
|
||
</el-form-item>
|
||
<el-form-item label="CP装扮" prop="pendant">
|
||
<uploadImage @handleSuccess="handleBgSuccess" :acceptType="'.mp4'" :limit="1" :echoUrl="newFormInline.pendant" />
|
||
</el-form-item>
|
||
<el-form-item label="头像框" prop="dress_id">
|
||
<el-select v-model="newFormInline.dress_id" placeholder="请选择头像框">
|
||
<el-option v-for="item in AvatarList" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="坐骑" prop="jiajia_id">
|
||
<el-select v-model="newFormInline.jiajia_id" placeholder="请选择坐骑">
|
||
<el-option v-for="item in AdornmentList" :key="item.id
|
||
" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label=" 挂件位置" prop="direction">
|
||
<el-select v-model="newFormInline.direction" placeholder="请选择位置">
|
||
<el-option v-for="item in directionList" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|