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>
|