更新cp等级

src/api/modules/activities.ts

@@ -19,10 +19,10 @@ export const queryGiftList = params => {
     { params }
   );
 };
-export const queryAdornmentList = () => {
+export const queryAdornmentList = (params) => {
   return http.request<Result>(
     "get",
-    "/adminapi/Activities/decorate_list");
+    "/adminapi/Activities/decorate_list", { params });
 };
 export const getActivitiesBoxInfo = params => {
   return http.request<Result>(

src/api/modules/level.ts

@@ -81,4 +81,29 @@ export const deleteSingData = data => {
   return http.request<Result>("post", "/adminapi/SingerSong/singerLevelDel", {
     data
   });
-}
+}
+// Cp
+export const queryCpList = (params) => {
+  return http.request<Result>(
+    "get",
+    "/adminapi/UserCp/userCpLevelList",
+    { params }
+  );
+};
+export const editCpData = data => {
+  return http.request<Result>("post", "/adminapi/UserCp/userCpLevelEdit", {
+    data
+  });
+}
+export const deleteCpData = data => {
+  return http.request<Result>("post", "/adminapi/UserCp/userCpLevelDel", {
+    data
+  });
+}
+export const getCpInfo = (params) => {
+  return http.request<Result>(
+    "get",
+    "/adminapi/UserCp/userCpLevelInfo",
+    { params }
+  );
+};

src/views/Level/cpLevel/detail.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, onBeforeMount } from "vue";
+import { getCpInfo } from '@/api/modules/level';
+const props = defineProps(["roomDetail"]);
+const detailData = ref({})
+const getDetailData = async () => {
+  const { data, code } = await getCpInfo({ id: props.roomDetail.id })
+  console.log(data, code)
+  detailData.value = code ? data : null
+
+}
+
+onBeforeMount(() => {
+  getDetailData()
+})
+</script>
+
+<template>
+  <div v-if="detailData">
+    <!-- {{ detailData }} -->
+    <el-descriptions class="margin-top" :column="2" border>
+      <!-- <el-descriptions-item label="CP等级">
+        {{ detailData.level }}
+      </el-descriptions-item> -->
+      <el-descriptions-item label="CP名称">
+        {{ detailData.name }}
+      </el-descriptions-item>
+      <el-descriptions-item label="CP等级图标">
+        <el-image style="width: 100px; height: 100px" :src="detailData.image" :fit="'cover'"></el-image>
+      </el-descriptions-item>
+      <el-descriptions-item label="cp装扮">
+        <video :src="detailData.pendant" style="width: 100px; height: 100px" autoplay></video>
+      </el-descriptions-item>
+      <el-descriptions-item label="CP特效">
+        <video :src="detailData.rights_icon" style="width: 100px; height: 100px" autoplay></video>
+      </el-descriptions-item>
+      <el-descriptions-item label="头像框">
+        <el-image style="width: 100px; height: 100px" :src="detailData.jiajia" :fit="'cover'"></el-image>
+      </el-descriptions-item>
+      <el-descriptions-item label="坐骑">
+        <el-image style="width: 100px; height: 100px" :src="detailData.jiajia" :fit="'cover'"></el-image>
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>

src/views/Level/cpLevel/form.vue

@@ -0,0 +1,111 @@
+<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>

src/views/Level/cpLevel/hook.tsx

@@ -0,0 +1,189 @@
+import { ref, h } from "vue";
+import editForm from "./form.vue";
+import detailView from './detail.vue';
+import { message } from "@/utils/message";
+import {
+  queryCpList,
+  editCpData,
+  deleteCpData
+} from "@/api/modules/level";
+import { addDialog } from "@/components/ReDialog";
+export function useData() {
+  const formRef = ref();
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    pageSizes: [10, 20, 50, 100],
+    currentPage: 1,
+    background: true
+  });
+  const tableLabel = ref([
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "等级",
+      prop: "level"
+    },
+    {
+      label: "等级名称",
+      prop: "name"
+    },
+    {
+      label: "经验值",
+      prop: "change_value"
+    },
+    {
+      label: "等级图标",
+      prop: "image",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.image}
+          preview-src-list={Array.of(row.image)}
+          class="w-[24px] h-[24px] rounded-full align-middle"
+        />
+      ),
+    },
+    // {
+    //   label: "状态",
+    //   prop: "status",
+    //   cellRenderer: ({ row }) => (
+    //     <el-tag type={row.status === 1 ? 'success' : 'error'}>{row.status === 1 ? '显示' : '隐藏'}</el-tag>
+    //   )
+    // },
+    {
+      label: "发布时间",
+      prop: "createtime"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ]);
+  const onSearch = async () => {
+    loading.value = true;
+    const { data, code } = await queryCpList({
+      page: pagination.value.currentPage,
+      page_limit: pagination.value.pageSize
+    });
+    if (code) {
+      tableList.value = data.lists;
+      pagination.value.total = data.count;
+      pagination.value.currentPage = data.page;
+    }
+    loading.value = false;
+  };
+  const handleSizeChange = (val: number) => {
+    pagination.value.pageSize = val;
+    onSearch();
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch();
+  };
+  const handleDelete = async rowData => {
+    const { code } = await deleteCpData({ id: rowData.id });
+    if (code) {
+      message(`删除成功`, {
+        type: "success"
+      });
+      onSearch();
+    }
+  };
+  // 新增
+  const openDialog = (title = "新增", rowData: any) => {
+    addDialog({
+      title: `${title}CP等级`,
+      props: {
+        formInline: {
+          level: rowData?.level ?? "",
+          name: rowData?.name ?? "",
+          image: rowData?.image ?? "",
+          change_value: rowData?.change_value ?? "",
+          rights_icon: rowData?.rights_icon ?? "",
+          dress_id: rowData?.dress_id ?? "",
+          jiajia_id: rowData?.jiajia_id ?? "",
+          pendant: rowData?.pendant ?? "",
+          direction: rowData?.direction ?? ""
+        }
+      },
+      width: "40%",
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline;
+        const saveData = async form => {
+          //  新增不传id
+          const { code, msg } = await editCpData(form);
+          if (code) {
+            message("新增成功", { type: "success" });
+            onSearch();
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        const updateData = async form => {
+          const { code, msg } = await editCpData({
+            ...form,
+            id: rowData.id
+          });
+          if (code) {
+            message("修改成功", { type: "success" });
+            onSearch();
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        FormRef.validate(valid => {
+          if (valid) {
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              saveData(curData);
+            } else {
+              // 实际开发先调用修改接口，再进行下面操作
+              updateData(curData);
+            }
+          }
+        });
+      }
+    });
+  };
+  // 查看
+  const viewDetail = (rowData) => {
+    addDialog({
+      title: `查看CP等级详情`,
+      props: {
+        roomDetail: rowData,
+      },
+      fullscreen: false,
+      hideFooter: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(detailView, { ref: formRef, formInline: null })
+    });
+  }
+  return {
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading,
+    handleDelete,
+    openDialog,
+    viewDetail
+  };
+}

src/views/Level/cpLevel/index.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useData } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { deviceDetection } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+const {
+  onSearch,
+  isShow,
+  tableList,
+  pagination,
+  tableLabel,
+  handleSizeChange,
+  handleCurrentChange,
+  handleDelete,
+  loading,
+  viewDetail,
+  openDialog
+} = useData();
+defineOptions({
+  name: "charmGrade"
+});
+onMounted(() => {
+  onSearch();
+});
+</script>
+
+
+<template>
+  <div class="main">
+    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
+      <PureTableBar title="CP等级列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
+        :columns="tableLabel" @refresh="onSearch">
+        <template #buttons>
+          <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
+            新增CP等级
+          </el-button>
+        </template>
+        <template v-slot="{ size, dynamicColumns }">
+          <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" default-expand-all
+            :loading="loading" :size="size" row-key="id" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
+            :data="tableList" :columns="dynamicColumns" :pagination="{ ...pagination, size }" :header-cell-style="{
+              background: 'var(--el-fill-color-light)',
+              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="viewDetail(row)">
+                查看
+              </el-button>
+              <el-button link type="primary" :size="size" @click="openDialog('编辑', row)">
+                编辑
+              </el-button>
+              <el-popconfirm :title="`是否确认删除这条数据`" @confirm="handleDelete(row)">
+                <template #reference>
+                  <el-button link type="primary" :size="size"> 删除 </el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>

src/views/room/hourlyChart/reward.vue

@@ -47,7 +47,8 @@ const getList = async () => {
 // 道具
 const AdornmentList = ref([])
 const getAdornmentList = async () => {
-  const { data, code } = await queryAdornmentList()
+
+  const { data, code } = await queryAdornmentList({})
   AdornmentList.value = code ? data : []
 }
 // 选择礼物