FANYIN/midi-admin
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

表情包列表

Browse Source
This commit is contained in:
yziiy
2025-10-22 11:16:39 +08:00
parent 05e60b5877
commit fdad0344ad
4 changed files with 73 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/views/expression/TypeList/index.vue Normal file
View File

120
src/views/expression/form.vue
View File

@@ -1,135 +1,77 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import uploadImage from '@/components/UploadImage/index.vue'; import uploadImage from '@/components/UploadImage/index.vue';
import { getGiftTypeOrLabel } from '@/api/modules/gift' import { queryClassifyList } from '@/api/modules/expression'
const ruleFormRef = ref(); const ruleFormRef = ref();
const typeList = ref([]) const typeList = ref([])
const labelList = ref([]) const labelList = ref([])
const formRules = ref({ const formRules = ref({
type: [{ required: true, message: "请选择分类", trigger: "change" }], type_id: [{ required: true, message: "请选择表情分类", trigger: "change" }],
label: [{ required: true, message: "请输入礼物标签", trigger: "blur" }], name: [{ required: true, message: "请输入表情名称", trigger: "blur" }],
base_image: [{ required: true, message: "请上传礼物展示图片", trigger: "change" }], image: [{ required: true, message: "请上传表情图", trigger: "change" }],
play_image: [], status: [{ required: true, message: "请选择状态", trigger: "change" }]
gift_type: [{ required: true, message: "请选择", trigger: "change" }],
is_public_screen: [{ required: true, message: "请选择", trigger: "change" }],
is_public_server: [{ required: true, message: "请选择", trigger: "change" }],
is_show: [{ required: true, message: "请选择", trigger: "change" }],
is_can_buy: [{ required: true, message: "请选择", trigger: "change" }],
sort: [],
file_type: [{ required: true, message: "请选择文件类型", trigger: "change" }],
gift_price: [{ required: true, message: "请输入礼物价格", trigger: "blur" }],
gift_name: [{ required: true, message: "请输入礼物名称", trigger: "blur" }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
}); });
const props = defineProps(["formInline"]); const props = defineProps(["formInline"]);
const newFormInline = ref( const newFormInline = ref(
props.formInline props.formInline
? props.formInline ? props.formInline
: { : {
gift_name: "", pid: "",
type: "", name: "",
label: "", image: "",
gift_price: "", animate_image: "",
base_image: "", sort: "",
file_type: "", type_id: "",
play_image: "", status: ""
gift_type: "",
is_public_screen: "",
is_public_server: "",
is_show: "",
is_can_buy: "",
sort: ""
} }
); );
function getRef() { function getRef() {
return ruleFormRef.value; return ruleFormRef.value;
} }
function handleFileSuccess(list) { function handleFileSuccess(list) {
newFormInline.value.base_image = list.join(',') newFormInline.value.animate_image = list.join(',')
} }
function handlePlayFileSuccess(list) { function handlePlayFileSuccess(list) {
newFormInline.value.play_image = list.join(',') newFormInline.value.image = list.join(',')
} }
const getTypeList = async () => { const getTypeList = async () => {
const { data, code } = await getGiftTypeOrLabel({ type: 1 }) const { data, code } = await queryClassifyList({})
typeList.value = code ? data : [] typeList.value = code ? data : []
} console.log(typeList.value)
const getLableList = async () => {
const { data, code } = await getGiftTypeOrLabel({ type: 2, type_id: newFormInline.value.type || '' })
labelList.value = code ? data : []
}
const changeType = () => {
getLableList()
} }
onMounted(() => { onMounted(() => {
getTypeList() getTypeList()
getLableList()
}) })
defineExpose({ getRef }); defineExpose({ getRef });
</script> </script>
<template> <template>
<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px"> <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
<el-form-item label="礼物名称" prop="gift_name"> <el-form-item label="上级ID" prop="pid">
<el-input v-model="newFormInline.gift_name" clearable placeholder="请输入礼物名称" /> <el-input v-model="newFormInline.pid" clearable placeholder="请输入上级ID" />
</el-form-item> </el-form-item>
<el-form-item label="礼物类型" prop="type"> <el-form-item label="表情类型" prop="type_id">
<el-select v-model="newFormInline.type" placeholder="请选择礼物类型" @change="changeType"> <el-select v-model="newFormInline.type_id" placeholder="请选择表情类型">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> <el-option v-for="item in typeList" :key="item.id" :label="item.type_name" :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="礼物标签" prop="label"> <el-form-item label="表情名称" prop="name">
<el-select v-model="newFormInline.label" placeholder="请选择礼物标签"> <el-input v-model="newFormInline.name" clearable placeholder="请输入表情名称" />
<el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="礼物价格" prop="gift_price"> <el-form-item label="表情图" prop="image">
<el-input-number v-model="newFormInline.gift_price" :precision="2" :step="0.01"></el-input-number> <uploadImage @handleSuccess="handlePlayFileSuccess" :acceptType="'.jpg,.jpeg,.png,.gif'" :limit="1"
:echoUrl="newFormInline.image" />
</el-form-item> </el-form-item>
<el-form-item label="展示图片" prop="base_image"> <el-form-item label="表情动图" prop="animate_image">
<uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.base_image" /> <uploadImage @handleSuccess="handleFileSuccess" :acceptType="'.jpg,.jpeg,.png,.gif'" :limit="1"
:echoUrl="newFormInline.animate_image" />
</el-form-item> </el-form-item>
<el-form-item label="文件类型" prop="file_type"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="newFormInline.file_type"> <el-radio-group v-model="newFormInline.status">
<el-radio :label="1">SVGA</el-radio>
<el-radio :label="2">MP4</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="礼物特效图" prop="play_image">
<uploadImage @handleSuccess="handlePlayFileSuccess"
:acceptType="newFormInline.file_type === 1 ? '.svg,.svga' : '.mp4'" :limit="1"
:echoUrl="newFormInline.play_image" />
</el-form-item>
<el-form-item label="是否有特效" prop="gift_type">
<el-radio-group v-model="newFormInline.gift_type">
<el-radio :label="2">是</el-radio>
<el-radio :label="1">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否公屏" prop="is_public_screen">
<el-radio-group v-model="newFormInline.is_public_screen">
<el-radio :label="1">是</el-radio>
<el-radio :label="2">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否全服播报" prop="is_public_server">
<el-radio-group v-model="newFormInline.is_public_server">
<el-radio :label="1">是</el-radio>
<el-radio :label="2">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否显示" prop="is_show">
<el-radio-group v-model="newFormInline.is_show">
<el-radio :label="1">显示</el-radio> <el-radio :label="1">显示</el-radio>
<el-radio :label="2">隐藏</el-radio> <el-radio :label="2">隐藏</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="是否可购买" prop="is_can_buy">
<el-radio-group v-model="newFormInline.is_can_buy">
<el-radio :label="1">可购买</el-radio>
<el-radio :label="2">禁止购买</el-radio>
</el-radio-group>
</el-form-item>
</el-form> </el-form>
</template> </template>

63
src/views/expression/hook.tsx
View File

@@ -36,26 +36,30 @@ export function useData() {
}, },
{ {
label: "表情名称", label: "表情名称",
prop: "gift_name" prop: "name"
}, },
{ {
label: "图片", label: "图片",
prop: "base_image", prop: "image",
cellRenderer: ({ row }) => ( cellRenderer: ({ row }) => (
<el-image <el-image
fit="cover" fit="cover"
preview-teleported={true} preview-teleported={true}
src={row.base_image} src={row.image}
preview-src-list={Array.of(row.base_image)} preview-src-list={Array.of(row.image)}
class="w-[50px] h-[50px] align-middle" class="w-[50px] h-[50px] align-middle"
/> />
) )
}, },
{
label: "表情分类",
prop: "type_str"
},
{ {
label: "状态", label: "状态",
prop: "is_can_buy", prop: "status",
cellRenderer: ({ row }) => ( cellRenderer: ({ row }) => (
<el-tag type={row.is_can_buy === 1 ? 'success' : 'error'}>{row.is_can_buy === 1 ? '可购买' : '禁止购买'}</el-tag> <el-tag type={row.status === 1 ? 'success' : 'error'}>{row.status_str}</el-tag>
) )
}, },
{ {
@@ -82,7 +86,7 @@ export function useData() {
page_limit: pagination.value.pageSize page_limit: pagination.value.pageSize
}); });
if (code) { if (code) {
tableList.value = data.lists; tableList.value = data.list;
pagination.value.total = data.count; pagination.value.total = data.count;
pagination.value.currentPage = data.page; pagination.value.currentPage = data.page;
} }
@@ -97,9 +101,9 @@ export function useData() {
onSearch(searchForm.value); onSearch(searchForm.value);
}; };
const handleDelete = async rowData => { const handleDelete = async rowData => {
const { code } = await removeGiftData({ gid: rowData.gid }); const { code } = await removeData({ id: rowData.id });
if (code) { if (code) {
message(`您删除了礼物名称为【${rowData.gift_name}】的这条数据`, { message(`您删除了表情名称为【${rowData.name}】的这条数据`, {
type: "success" type: "success"
}); });
onSearch(searchForm.value); onSearch(searchForm.value);
@@ -107,24 +111,17 @@ export function useData() {
}; };
// 新增 // 新增
const openDialog = async (title = "新增", rowData: any) => { const openDialog = async (title = "新增", rowData: any) => {
const { data, code } = await getGiftInfo({ gid: rowData.gid })
addDialog({ addDialog({
title: `${title}礼物`, title: `${title}礼物`,
props: { props: {
formInline: { formInline: {
gift_name: rowData?.gift_name ?? "", pid: rowData?.pid ?? "",
type: data?.type ?? "", name: rowData?.name ?? "",
label: data?.label ?? "", image: rowData?.image ?? "",
base_image: rowData?.base_image ?? "", animate_image: rowData?.animate_image ?? "",
gift_price: rowData?.gift_price ?? "", sort: rowData?.sort ?? "",
file_type: data?.file_type ?? "", type_id: rowData?.type_id ?? "",
play_image: data?.play_image ?? "", status: rowData?.status ?? ""
gift_type: data?.gift_type ?? "",
is_public_screen: rowData?.is_public_screen ?? "",
is_public_server: rowData?.is_public_server ?? "",
is_show: rowData?.is_show ?? "",
is_can_buy: rowData?.is_can_buy ?? "",
sort: rowData?.sort ?? ""
} }
}, },
width: "40%", width: "40%",
@@ -134,7 +131,8 @@ export function useData() {
const FormRef = formRef.value.getRef(); const FormRef = formRef.value.getRef();
const curData = options.props.formInline; const curData = options.props.formInline;
const saveData = async form => { const saveData = async form => {
const { code, msg } = await addGiftData(form); console.log(form)
const { code, msg } = await addData(form);
if (code) { if (code) {
message("新增成功", { type: "success" }); message("新增成功", { type: "success" });
onSearch(searchForm.value); onSearch(searchForm.value);
@@ -144,9 +142,9 @@ export function useData() {
} }
}; };
const updateData = async form => { const updateData = async form => {
const { code, msg } = await editGiftData({ const { code, msg } = await editData({
...form, ...form,
gid: rowData.gid id: rowData.id
}); });
if (code) { if (code) {
message("修改成功", { type: "success" }); message("修改成功", { type: "success" });
@@ -172,6 +170,16 @@ export function useData() {
} }
}); });
}; };
// 查看表情分类
const openTypeDialog = () => {
addDialog({
title: `表情包分类列表`,
width: "60%",
closeOnClickModal: false,
hideFooter: true,
// contentRenderer: () => h(, { ref: formRef, formInline: null })
});
}
return { return {
searchForm, searchForm,
searchLabel, searchLabel,
@@ -184,6 +192,7 @@ export function useData() {
handleCurrentChange, handleCurrentChange,
loading, loading,
handleDelete, handleDelete,
openDialog openDialog,
openTypeDialog
}; };
} }

9
src/views/expression/index.vue
View File

@@ -17,6 +17,8 @@ const {
handleSizeChange, handleSizeChange,
handleCurrentChange, handleCurrentChange,
loading, loading,
handleDelete,
openTypeDialog,
openDialog openDialog
} = useData(); } = useData();
defineOptions({ defineOptions({
@@ -35,6 +37,7 @@ onMounted(() => {
<PureTableBar title="表情包列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']" :columns="tableLabel" <PureTableBar title="表情包列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']" :columns="tableLabel"
@refresh="onSearch"> @refresh="onSearch">
<template #buttons> <template #buttons>
<el-button type="text" @click="openTypeDialog">表情分类列表</el-button>
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})"> <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
新增表情包 新增表情包
</el-button> </el-button>
@@ -47,14 +50,14 @@ onMounted(() => {
color: 'var(--el-text-color-primary)' color: 'var(--el-text-color-primary)'
}" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange"> }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
<template #operation="{ row }"> <template #operation="{ row }">
<!-- <el-button link type="primary" :size="size" @click="openDialog('编辑', row)"> <el-button link type="primary" :size="size" @click="openDialog('编辑', row)">
编辑 编辑
</el-button> </el-button>
<el-popconfirm :title="`是否确认删除礼物名称为【${row.gift_name}】的这条数据`" @confirm="handleDelete(row)"> <el-popconfirm :title="`是否确认删除表情名称为【${row.name}】的这条数据`" @confirm="handleDelete(row)">
<template #reference> <template #reference>
<el-button link type="primary" :size="size"> 删除 </el-button> <el-button link type="primary" :size="size"> 删除 </el-button>
</template> </template>
</el-popconfirm> --> </el-popconfirm>
</template> </template>
</pure-table> </pure-table>
</template> </template>