表情包列表

src/views/expression/form.vue

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

src/views/expression/hook.tsx

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

src/views/expression/index.vue

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