new_school_ecology_manage/src/views/alumni-square/alumni-square.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">广场信息管理</span>
    </div>
    <div class="scroll">
      <div class="middle">
        <div class="filter">
          <div class="condition">
            <span>发帖人 :</span>
            <el-input
              clearable
              v-model.trim="searchInput.userName"
              class="w-50 m-2"
              placeholder="请输入发帖人"
              style="width: 180px"
            />
          </div>
          <div class="condition">
            <span>审核状态 :</span>
            <el-select
              clearable
              v-model="searchInput.isPass"
              placeholder="请选择审核状态"
            >
              <el-option label="待审核" :value="1" />
              <el-option label="已通过" :value="2" />
              <el-option label="已拒绝" :value="3" />
            </el-select>
          </div>
          <div class="condition">
            <span>创建时间 :</span>
            <el-date-picker
              v-model="searchInput.createTime"
              unlink-panels
              type="datetimerange"
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择日期"
            />
          </div>
          <el-button
            style="margin-left: 20px"
            color="rgba(38, 151, 255, 1)"
            type="primary"
            class="search"
            @click="searchBtn"
            ><span>查询</span></el-button
          >
          <el-button @click="resetBtn" plain color="rgba(43, 153, 255, 1)"
            >重置</el-button
          >
        </div>
        <!-- 按钮列表 -->
        <div class="gongneng">
          <el-button
            type="primary"
            style="margin-left: 0"
            color="rgba(38, 151, 255, 1)"
            @click="addlist"
            >发布动态</el-button
          >
        </div>
      </div>
      <div class="footer" v-loading="loading">
        <div class="card_all">
          <el-space wrap>
            <el-card
              style="max-width: 480px"
              v-for="i in tableData.list"
              :key="i.id"
            >
              <template #header>
                <div class="card-header">
                  <img v-viewer :src="i.image" alt="" />
                  <div class="issuer">
                    <p>{{ i.userName }}</p>
                    <span>{{ i.updateTime }}</span>
                  </div>
                </div>
              </template>
              <p @click="viewDetails(i)" class="content">
                {{ i.content }}
              </p>
              <div class="img-preview-list" style="height: 92px;overflow: hidden;">
                <div
                  class="img-item"
                  v-for="(url, index) in i.imageLists"
                  :key="index"
                   style="height: 80px;margin-bottom: 10px;"
                >
                  <video
                    v-if="isMp4Link(url)"
                    class="preview-img"
                    :src="url"
                    controls
                  ></video>
                  <img
                    v-else
                    :src="url"
                    alt="图片预览"
                    class="preview-img"
                    v-viewer
                    @click="handlePreview(i.imageLists, index)"
                  />
                </div>
              </div>
              <div class="dianzan">
                <div class="icon">
                  <img src="../../assets/img/pinglun.png" alt="" />
                  <span>{{ i.commentNum }}</span>
                </div>
                <div class="icon">
                  <img src="../../assets/img/dianzan.png" alt="" />
                  <span>{{ i.likeNum }}</span>
                </div>
              </div>
              <template #footer>
                <div class="card-footer">
                  <div class="footer_left">
                    <img
                      v-if="i.passName == '待审核'"
                      style="width: 25px; margin-right: 5px"
                      src="../../assets/img/yuandian.png"
                      alt=""
                    />
                    <img
                      v-if="i.passName == '已通过'"
                      style="width: 25px; margin-right: 5px"
                      src="../../assets/img/yuandian2.png"
                      alt=""
                    />
                    <img
                      v-if="i.passName == '已拒绝'"
                      style="width: 25px; margin-right: 5px"
                      src="../../assets/img/yuandian3.png"
                      alt=""
                    />
                    <span style="margin-right: 20px">{{ i.passName }}</span>
                    <span>{{ i.passTime }}</span>
                  </div>
                  <el-dropdown placement="bottom" :hide-on-click="false">
                    <el-icon :size="20"><MoreFilled /></el-icon>
                    <template #dropdown>
                      <el-dropdown-menu v-if="i.passName == '待审核'">
                        <el-dropdown-item @click="operationPassChange(i)"
                          ><span style="color: #0095ff"
                            >通过</span
                          ></el-dropdown-item
                        >
                        <el-dropdown-item @click="operationRefuseChange(i)"
                          ><span style="color: #ff8d1a"
                            >拒绝</span
                          ></el-dropdown-item
                        >
                        <el-dropdown-item @click="deleteS(i)"
                          ><span style="color: #d43030"
                            >删除</span
                          ></el-dropdown-item
                        >
                      </el-dropdown-menu>
                      <el-dropdown-menu
                        v-if="i.passName == '已通过' || i.passName == '已拒绝'"
                      >
                        <el-dropdown-item @click="deleteS(i)"
                          ><span style="color: #d43030"
                            >删除</span
                          ></el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>
            </el-card>
          </el-space>
        </div>
        <!-- 分页组件 -->
        <div class="pageSize">
          <span></span>
          <el-pagination
            background
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total,sizes, prev, pager, next, jumper, slot"
            :total="total"
            @size-change="handleSizeChange"
            @update:current-page="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 添加账号弹窗 -->
    <el-dialog
      class="addStaff"
      v-model="addDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialongTitle"
      align-center
      width="650"
      :before-close="cancelAdd"
      destroy-on-close
      draggable
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="right"
        status-icon
      >
        <el-form-item label="组织分类 :" prop="categoryId">
          <!-- <el-select
            v-model="ruleForm.categoryId"
            clearable
            placeholder="请选择组织分类"
          >
            <el-option
              v-for="i in categoryData"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            />
          </el-select> -->
          <el-select
            v-model="ruleForm.categoryId"
            filterable
            clearable
            remote
            reserve-keyword
            placeholder="请搜索或选择组织"
            :remote-method="remoteMethod"
            :loading="clubLoading"
          >
            <el-option
              v-for="i in clubData"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="内容 :" prop="content">
          <el-input
            v-model.trim="ruleForm.content"
            placeholder="请输入内容"
            clearable
            :autosize="{ minRows: 4 }"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="照片 :" prop="imageLists">
          <div class="img-preview-list">
            <div
              class="img-item"
              v-for="(url, index) in ruleForm.imageLists"
              :key="index"
            >
              <video
                v-if="isMp4Link(url)"
                class="preview-img"
                :src="url"
                controls
              ></video>
              <img
                v-else
                :src="url"
                alt="图片预览"
                class="preview-img"
                v-viewer
                @click="handlePreview(ruleForm.imageLists, index)"
              />
              <span class="delete-btn" @click="handleDelete(index)">
                <el-icon><Delete /></el-icon>
              </span>
            </div>
            <el-upload
              action="#"
              :auto-upload="false"
              :on-change="handleFileChange"
              :before-upload="beforeUpload"
              class="upload-btn"
              accept=".jpg,.jpeg,.png,.gif,.mp4,.avi,.mov,.wmv,.flv"
            >
              <el-icon><Plus /></el-icon>
              <span class="upload-txt">点击图片或视频</span>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item class="options">
          <el-button @click="cancelAdd">取消</el-button>
          <el-button
            color="rgba(0, 97, 255, 1)"
            class="queding"
            type="primary"
            @click="submitAdd(ruleFormRef)"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      class="addStaff"
      v-model="operationVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="operationTitle"
      align-center
      width="540"
      :before-close="cancelOperation"
      destroy-on-close
      draggable
    >
      <el-form
        ref="operationRef"
        :model="operationRuleForm"
        :rules="operationRules"
        label-width="90px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="right"
        status-icon
      >
        <el-form-item
          label="审批意见 :"
          :prop="operationTitle == '拒绝审批' ? 'passValue' : ''"
        >
          <el-input
            v-model.trim="operationRuleForm.passValue"
            placeholder="请输入审批意见"
            clearable
            :autosize="{ minRows: 4 }"
            type="textarea"
          />
        </el-form-item>
        <el-form-item class="options">
          <el-button @click="cancelOperation">取消</el-button>
          <el-button
            color="rgba(0, 97, 255, 1)"
            class="queding"
            type="primary"
            @click="operationSubmitAdd(operationRef)"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog
      class="details"
      v-model="detailsVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="详情"
      align-center
      width="680"
      :before-close="cancelDetails"
      destroy-on-close
      draggable
    >
      <div>
        <div class="card-header">
          <img style="border-radius: 50%" :src="detailData.image" alt="" />
          <div class="issuer">
            <p>{{ detailData.userName }}</p>
            <span>{{ detailData.updateTime }}</span>
          </div>
        </div>
        <p style="text-indent: 2em; line-height: 1.8">
          {{ detailData.content }}
        </p>
        <div class="img-preview-list" style="margin-bottom: 15px;">
          <div
            class="img-item"
            v-for="(url, index) in detailData.imageLists"
            :key="index"
          >
            <video
              v-if="isMp4Link(url)"
              class="preview-img"
              :src="url"
              controls
            ></video>
            <img
              v-else
              :src="url"
              alt="图片预览"
              class="preview-img"
              v-viewer
              @click="handlePreview(detailData.imageLists, index)"
            />
            <span class="delete-btn" @click="handleDelete(index)">
              <el-icon><Delete /></el-icon>
            </span>
          </div>
        </div>

        <p class="comment-count">{{ detailData.commentNum }}条评论数</p>
        <div class="card-footer" v-loading="commentLoading">
          <div class="user" v-for="(i, index) in commentData" :key="i.id">
            <img style="border-radius: 0" :src="i.image" alt="" />
            <div class="user-info">
              <div class="upvote">
                <span class="username">{{ i.commentName }}</span>
                <div class="num">
                  <img src="../../assets/img/upvote.png" alt="" />
                  <span>{{ i.likeNum }}</span>
                </div>
              </div>
              <div class="comment">
                <p style="margin: 5px 0">{{ i.content }}</p>
                <span style="font-size: 12px; margin-bottom: 10px">{{
                  i.createTime
                }}</span>
                <div
                  v-if="i.commentNum > 0 && !i.children"
                  style="
                    font-size: 12px;
                    margin-bottom: 10px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                  "
                  @click="openComment(i, index)"
                >
                  查看全部 {{ i.commentNum }} 回复
                  <el-icon><ArrowRightBold /></el-icon>
                </div>
                <div v-else>
                  <div
                    v-loading="commentLoading"
                    class="user"
                    v-for="j in i.children"
                    :key="j.id"
                  >
                    <img
                      style="border-radius: 0; margin: 10px 10px 0 0"
                      :src="j.image"
                      alt=""
                    />
                    <div class="user-info">
                      <div class="upvote">
                        <span class="username">{{ j.commentName }}</span>
                        <div class="num">
                          <img src="../../assets/img/upvote.png" alt="" />
                          <span>{{ j.likeNum }}</span>
                        </div>
                      </div>
                      <div class="comment">
                        <p style="margin: 5px 0">{{ j.content }}</p>
                        <span style="font-size: 12px; margin-bottom: 10px">{{
                          j.createTime
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="user">
            <img src="../../assets/img/nanchang.png" alt="" />
            <div class="user-info">
              <div class="upvote">
                <span class="username">用户名</span>
                <div class="num">
                  <img src="../../assets/img/upvote.png" alt="" />
                  <span>1</span>
                </div>
              </div>
              <div class="comment">
                <p>内容内容内容内容内容内容内容内容内容内容</p>
                <span>2016-12-12 12:30:00</span>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  watch,
  reactive,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { genFileId, ElMessage, ElMessageBox } from "element-plus";
import { dayjs } from "element-plus";
import lodash from "lodash";
import {
  MoreFilled,
  ArrowRightBold,
  Delete,
  Plus,
} from "@element-plus/icons-vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";
import {
  insertPosts,
  queryCategoryDatas,
  toExaminePosts,
  deletePostsById,
  queryPostsPage,
  queryCommetns,
} from "@/api/alumni-square";
import { uploadFile } from "@/api/uploadFile";
import { api as viewerApi } from "v-viewer";

const router = useRouter();
const store = useCounterStore();

// 为避免解构时失去响应性
const { name, age, isCollapse, realAge, collegeRole } = storeToRefs(store);

// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [{}],
});
const activeIndex = ref(); // 默认跳转路由
const dialongTitle = ref("新增账号"); // 弹窗标题

const searchInput = reactive({
  userName: "",
  isPass: null,
  createTime: null,
}); // 搜索按钮数据

const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(0); // 当前总数
const selectIds = ref([]); // 勾选的全部数据

const addDialogVisible = ref(false); // 控制添加账号弹窗

// 表单数据
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  categoryId: "",
  content: "",
  imageLists: [],
  id: "",
});
// 表单验证
const rules = reactive({
  categoryId: [
    { required: true, message: "组织分类不能为空", trigger: "blur" },
  ],
  content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
  // imageLists: [{ required: true, message: "图片或视频不能为空", trigger: "blur" }],
});

const detailsVisible = ref(false); // 详情弹窗
const detailData = ref();
const commentData = ref();
const commentLoading = ref(false);

const operationVisible = ref();
const operationTitle = ref();
const operationRef = ref(); // 操作按钮
const operationRuleForm = reactive({
  passValue: "",
  id: "",
});
// 表单验证
const operationRules = reactive({
  passValue: [{ required: true, message: "审批意见不能为空", trigger: "blur" }],
});

// 获取账户列表
const getList = async () => {
  loading.value = true;
  let params = {
    currentPage: currentPage.value, // 当前页
    pageCount: pageSize.value, // 一页数据条数
    userName: searchInput.userName,
    isPass: searchInput.isPass,
  };
  if (searchInput.createTime) {
    params.startTime = searchInput.createTime[0];
    params.endTime = searchInput.createTime[1];
  }
  queryPostsPage(params).then((res) => {
    console.log(res, "获取帖子分页数据");
    if (res.code == 200) {
      tableData.list = res.data.list;
      total.value = res.data.totalCount;
      loading.value = false;
    } else {
      loading.value = false;
      ElMessage({
          type: "error",
          showClose: true,
          message: res.message,
          center: true,
        });
    }
  });
};

// 完整的MP4链接判断函数
const isMp4Link = (url) => {
  if (!url || typeof url !== "string") return false;

  // 步骤1：去掉URL中的参数和哈希（? 或 # 之后的内容）
  const pureUrl = url.split(/[?#]/)[0]; // 按 ? 或 # 拆分，取第一部分

  // 步骤2：转为小写 + 判断是否以 .mp4 结尾
  return pureUrl.toLowerCase().endsWith(".mp4");
};
const handleDelete = (index) => {
  ruleForm.imageLists.splice(index, 1);
};

const handlePreview = (images, index) => {
  // 核心：复制数组，把点击的图片移到第一位
  const newImages = [...images]; // 拷贝原数组，避免修改原数据
  const currentImg = newImages.splice(index, 1)[0]; // 取出当前点击的图片
  newImages.unshift(currentImg); // 放到数组开头

  // 传给预览器，此时插件显示的第一张就是点击的图片
  // viewerApi({
  //   images: newImages,
  //   zIndex: 3000,
  // });
};

// 可选：限制上传文件大小（单位：MB）
const MAX_SIZE = 50; // 图片/视频最大50MB
// 上传前的校验
const beforeUpload = (file) => {
  // 定义允许的文件类型（MIME类型 + 后缀名双重校验）
  // const allowTypes = [
  //   // 图片类型
  //   'image/jpeg', 'image/png', 'image/gif', 'image/jpg',
  //   // 视频类型
  //   'video/mp4', 'video/avi', 'video/quicktime', 'video/x-ms-wmv', 'video/x-flv'
  // ]
  // const allowExts = ['jpg', 'jpeg', 'png', 'gif', 'mp4', 'avi', 'mov', 'wmv', 'flv']

  const allowTypes = [
    // 图片类型
    "image/jpeg",
    "image/png",
    "image/gif",
    "image/jpg",
    // 视频类型
    "video/mp4",
  ];
  const allowExts = ["jpg", "jpeg", "png", "gif", "mp4"];

  // 获取文件后缀名（小写）
  const fileExt = file.name.split(".").pop().toLowerCase();
  // 获取文件MIME类型
  const fileType = file.type;

  // 校验格式
  if (!allowTypes.includes(fileType) && !allowExts.includes(fileExt)) {
    ElMessage.error("仅支持上传 jpg/jpeg/png/gif 图片或 mp4 视频！");
    return false; // 阻止上传
  }

  // 校验大小（可选）
  // const fileSize = file.size / 1024 / 1024 // 转MB
  // if (fileSize > MAX_SIZE) {
  //   ElMessage.error(`文件大小不能超过 ${MAX_SIZE}MB！`)
  //   return false // 阻止上传
  // }

  return true; // 校验通过
};

// 文件选择变化时触发
const handleFileChange = async (file, newFileList) => {
  console.log(file);
  let formData = new FormData();
  formData.append("file", file.raw);
  let res = await uploadFile(formData);
  console.log(res);
  if (res.code == 200) {
    ruleForm.imageLists.push(res.data.fileUrl); // 赋值给响应式fileList，页面自动刷新
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};

const clubData = ref();
const clubLoading = ref(false); // 加载状态
const pageParams = reactive({
  pageNum: 1, // 当前页
  pageSize: 500, // 每页条数
  keyword: "", // 搜索关键词（可选）
});
// 获取组织下拉列表数据
const clubList = async () => {
  let params = {
    currentPage: pageParams.pageNum,
    pageCount: pageParams.pageSize,
    keyword: pageParams.keyword,
  };
  let res = await queryCategoryDatas(params);
  console.log(res, "获取组织下拉列表数据");
  if (res.code == 200) {
    clubData.value = res.data.list;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};
const remoteMethod = (query) => {
  console.log(query);
  pageParams.keyword = query;
  clubLoading.value = true;
  clubList().then(() =>{
    clubLoading.value = false;
  })
};
// const categoryData = ref();
// const categoryList = async () => {
//   let params = {
//     currentPage: 1,
//     pageCount: 1000,
//   }
//   let res = await queryCategoryDatas(params);
//   if (res.code == 200) {
//     categoryData.value = res.data.list;
//   } else {
//     ElMessage({
//       type: "error",
//       showClose: true,
//       message: res.message,
//       center: true,
//     });
//   }
// };

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  currentPage.value = 1;
  getList();
}, 300);
const resetBtn = lodash.debounce(async () => {
  searchInput.userName = "";
  searchInput.isPass = null;
  searchInput.createTime = null;
  currentPage.value = 1;
  getList();
}, 300);

// 添加账号
const addlist = () => {
  dialongTitle.value = "发布动态";
  addDialogVisible.value = true;
  ruleForm.categoryId = "";
  ruleForm.content = "";
  ruleForm.id = "";
  ruleForm.imageLists = [];
};

const deleteS = async (row) => {
  ElMessageBox.confirm("是否删除此数据?", "提示!!!", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let params = {
        id: row.id,
      };
      let res = await deletePostsById(params);
      if (res.code == 200) {
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.message,
          center: true,
        });
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

// 确认添加员工
const submitAdd = lodash.debounce(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        categoryId: ruleForm.categoryId,
        content: ruleForm.content,
        imageLists: ruleForm.imageLists,
      };
      let res = await insertPosts(data);
      if (res.code == 200) {
        addDialogVisible.value = false;
        ElMessage({
          type: "success",
          showClose: true,
          message: res.message,
          center: true,
        });
        getList();
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 1000);

const cancelAdd = () => {
  addDialogVisible.value = false;
};

// 查看详情
const viewDetails = async (i) => {
  console.log(i, "查看详情");
  commentLoading.value = true;
  detailsVisible.value = true;
  detailData.value = i;
  let params = {
    postsId: i.id,
    commentId: 0,
  };
  let res = await queryCommetns(params);
  if (res.code == 200) {
    commentLoading.value = false;
    console.log(res, "评论");
    commentData.value = res.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};
// 查看更多回复
const openComment = async (i, index) => {
  commentLoading.value = true;
  let params = {
    postsId: i.id,
    commentId: i.id,
  };
  let res = await queryCommetns(params);
  if (res.code == 200) {
    // console.log(res, "回复评论");
    commentLoading.value = false;
    commentData.value[index].children = res.data;
    console.log(commentData.value, "全部评论");
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};

// 通过
const operationPassChange = async (row) => {
  operationTitle.value = "通过审批";
  operationVisible.value = true;
  operationRuleForm.passValue = null;
  operationRuleForm.id = row.id;
};
// 拒绝
const operationRefuseChange = async (row) => {
  operationTitle.value = "拒绝审批";
  operationVisible.value = true;
  operationRuleForm.passValue = null;
  operationRuleForm.id = row.id;
};

// 确认审批
const operationSubmitAdd = lodash.debounce(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        id: operationRuleForm.id,
        isPass: operationTitle.value == "通过审批" ? 2 : 3,
        passValue: operationRuleForm.passValue,
      };
      let res = await toExaminePosts(data);
      if (res.code == 200) {
        operationVisible.value = false;
        ElMessage({
          type: "success",
          showClose: true,
          message: res.message,
          center: true,
        });
        getList();
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 1000);

const cancelOperation = () => {
  operationVisible.value = false;
};

// 每页显示条数
const handleSizeChange = (value) => {
  console.log(value, "每页显示条数");
  pageSize.value = value;
  getList()
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList()
};

onBeforeMount(() => {
  getList();
  clubList();
  //   collegeList();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column;

  .svg {
    width: 22px;
    height: 22px;
  }

  .left {
    width: calc(100% - 60px);
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    .camera {
      margin-right: 15px;
      color: #4392f7;
    }
  }
  .scroll {
    width: calc(100% - 60px);
    height: calc(100% - 61px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .middle {
      width: calc(100%);
      color: #000;
      .filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .search {
          margin-left: 0 !important;
          color: #fff;
        }
        .condition {
          display: flex;
          align-items: center;
          margin: 10px 30px 10px 0;
          :deep(.el-input .el-input__inner) {
            font-size: 14px;
          }
          .el-select {
            width: 220px;
          }
          span {
            margin: 0 10px 0 0;
          }
        }
      }
      .gongneng {
        margin: 10px 0;
        .el-button {
          color: #fff;
          margin-right: 15px;
        }
      }
    }
    .footer {
      width: calc(100%);
      flex: 1;
      margin: 0 auto;
      overflow: auto;

      .card_all {
        height: calc(100% - 60px);
        overflow: auto;
        // display: flex;

        .el-card {
          width: 360px !important;
          // height: 184px;
        }
        :deep(.el-card__header) {
          padding: 15px 20px 0;
          border: 0;
          .card-header {
            display: flex;
            // justify-content: space-between;
            align-items: center;
            font-weight: 800;
            img {
              width: 50px;
              height: 50px;
              margin-right: 20px;
              border-radius: 50%;
            }
            .issuer {
              p {
                font-size: 18px;
                margin: 5px 0;
              }
              span {
                font-size: 12px;
                color: #999;
              }
            }
          }
        }
        :deep(.el-card__body) {
          padding: 0 20px 10px;
          font-size: 13px;
          .content {
            height: 50px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.6;
            cursor: pointer;
            font-size: 16px;
          }
          .dianzan {
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .icon {
              margin: 0 15px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              img {
                // cursor: pointer;
                width: 18px;
                height: 18px;
                margin-right: 8px;
              }
              span {
                font-size: 16px;
              }
            }
          }
        }
        :deep(.el-card__footer) {
          padding: 10px 20px;
          .card-footer {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            .el-dropdown .el-icon:focus {
              // outline: none !important;
              // box-shadow: none !important;
              outline: 2px solid rgba(38, 151, 255, 0.5) !important;
              // outline-offset: 2px;
            }
            .footer_left {
              display: flex;
              align-items: center;
            }
          }
        }
      }
      /* WebKit 内核浏览器（Chrome、Edge、Safari）的滚动条样式 */
      .card_all::-webkit-scrollbar {
        /* 滚动条宽度 */
        width: 6px;
        height: 6px;
      }

      /* 滚动条轨道 */
      .card_all::-webkit-scrollbar-track {
        background: #f5f7fa;
        border-radius: 3px;
      }

      /* 滚动条滑块 */
      .card_all::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;
        /* 鼠标悬停时滑块变色 */
        transition: background 0.3s;
      }

      .card_all::-webkit-scrollbar-thumb:hover {
        background: #909399;
      }

      .pageSize {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 30px;
        height: 60px;

        span {
          color: #000;
        }

        .el-pagination {
          // width: 1600px;
          :deep(.el-pagination__total) {
            color: #000;
          }

          :deep(.el-pagination__goto) {
            color: #000;
          }

          :deep(.el-pagination__classifier) {
            color: #000;
          }

          :deep(.el-input__wrapper) {
            border: 1px solid rgba(0, 0, 0, 1);
            border-radius: 5px;
            box-shadow: none;
          }

          :deep(.el-pager li) {
            margin: 0 5px;
            border: 1px solid rgba(0, 0, 0, 1);
            border-radius: 5px;
            background-color: transparent;
          }

          :deep(.el-pager li.is-active) {
            // background-color: rgba(0, 97, 255, 0.8);
            border: 1px solid rgba(0, 97, 255, 1);
            color: rgba(0, 97, 255, 1);
          }

          :deep(.btn-prev) {
            margin-right: 5px;
            border: 1px solid rgba(0, 0, 0, 1);
            border-radius: 5px;
            background-color: transparent;
          }

          :deep(.btn-next) {
            margin-left: 5px;
            border: 1px solid rgba(0, 0, 0, 1);
            border-radius: 5px;
            background-color: transparent;
          }
        }
      }
    }
  }

  // 添加员工弹窗样式
  .addStaff {
    .el-select {
      width: 400px;
    }
    .el-textarea {
      width: 400px;
    }
    .options {
      // border: 1px solid red;
      margin-top: 40px;
    }
  }

  // 添加员工弹窗样式
  .details {
    .card-header {
      display: flex;
      align-items: center;
      img {
        width: 80px;
        height: 80px;
        margin-right: 20px;
      }
      .issuer {
        p {
          font-size: 20px;
          font-weight: 800;
          margin: 0 0 10px;
        }
      }
    }
    .comment-count {
      padding: 10px;
      margin: 0;
      font-weight: 800;
      background-color: #f5f7fa;
      border-bottom: 0.5px solid #e0e0e0;
    }
    .card-footer {
      max-height: 450px;
      overflow: auto;
      background-color: #f5f7fa;
      min-height: 100px;
      margin-bottom: 20px;
      .comment-count {
        padding: 10px 10px 20px;
        margin: 0;
        font-weight: 800;
      }
      .user {
        display: flex;
        // align-items: center;
        img {
          width: 40px;
          height: 40px;
          margin: 10px 15px;
        }
        .user-info {
          flex: 1;
          // margin-bottom: 10px;
          .upvote {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 8px 0 0;
            .username {
              font-weight: 800;
              // color: #2A82E4;
              // color: #aaabad;
            }
            img {
              width: 19px;
              height: 19px;
              margin: 0 10px;
            }
            .num {
              display: flex;
              align-items: center;
              margin-right: 20px;
            }
          }
          .comment {
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
    /* WebKit 内核浏览器（Chrome、Edge、Safari）的滚动条样式 */
    .card-footer::-webkit-scrollbar {
      /* 滚动条宽度 */
      width: 6px;
      height: 6px;
    }

    /* 滚动条轨道 */
    .card-footer::-webkit-scrollbar-track {
      background: #f5f7fa;
      border-radius: 3px;
    }

    /* 滚动条滑块 */
    .card-footer::-webkit-scrollbar-thumb {
      background: #c0c4cc;
      border-radius: 3px;
      /* 鼠标悬停时滑块变色 */
      transition: background 0.3s;
    }

    .card-footer::-webkit-scrollbar-thumb:hover {
      background: #909399;
    }
    .el-textarea {
      width: 400px;
    }
  }
}
</style>