jayq_vue_newbigdata/src/views/server/left/evaluateDetailDialog.vue

<template>
  <div class="container">
    <!-- 遮罩层区域 -->
    <div class="mask" @click="handleClose"></div>
    <!-- 主体内容区域 -->
    <div class="detail">
      <!-- 标题区域 -->
      <div class="detail_title"></div>

      <!-- 关闭按钮区域 -->
      <div class="close_icon" @click="handleClose"></div>

      <!-- 筛选区域 -->
      <div class="detail_search">
        姓名
        <el-input
          v-model="nameValue"
          style="width: 575px; height: 75px; margin: 0 50px 0 30px"
          size="large"
          placeholder="请输入姓名"
          :suffix-icon="Search"
          @change="handleSearch"
        />

        评价时间
        <el-date-picker
          v-model="timeRang"
          type="daterange"
          range-separator="至"
          start-placeholder="请选择日期"
          end-placeholder="请选择日期"
          size="large"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 575px; height: 75px; margin: 0 50px 0 30px"
          @change="handleSearch"
        />
        舆情等级
        <el-select
          v-model="levelValue"
          placeholder="全部"
          size="large"
          style="width: 575px; margin-left: 30px"
          @change="handleSearch"
        >
          <el-option
            v-for="(item, index) in levelList"
            :key="index"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </div>

      <!-- 表格区域 -->
      <div class="detail_table">
        <el-table :data="tableData" height="835px" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="100"
          />
          <el-table-column label="头像" align="center">
            <template #default="{ row }">
              <el-image
                class="table_img"
                fit="contain"
                :src="row.photo"
                :preview-src-list="[row.photo]"
                hide-on-click-modal
                preview-teleported
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="comment_name" label="姓名" align="center" />

          <el-table-column label="评价时间" align="center">
            <template #default="{ row }">
              {{ dayjs(row.create_date).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>

          <el-table-column
            prop="comment_status"
            label="来源渠道"
            align="center"
          />
          <el-table-column prop="booking_id" label="订单号" align="center" />
          <el-table-column prop="content" label="评价内容" align="center" />

          <el-table-column label="舆情等级" align="center">
            <template #default="{ row }">
              {{ row.comment_status == 0 ? "优" : "良" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <div class="table_btn" @click="lookDetail(row)">查看详情</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器区域 -->
      <div class="pagination">
        <el-pagination
          hide-on-single-page
          background
          :pager-count="5"
          layout="prev, pager, next"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
        />
      </div>

      <!-- 评价详情弹窗区域 -->
      <Transition name="fade">
        <EvaluateMsgDialog
          v-if="showMsg"
          :showObj="showObj"
          @closeMsg="closeMsg"
        />
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import EvaluateMsgDialog from "./evaluateMsgDialog.vue";
// 引入旅游服务相关的接口
import { reqGetCommentInfo } from "@/api/serve/index";
import dayjs from "dayjs";

const $emit = defineEmits(["closeDialog"]);

// 时间输入框绑定数据
const nameValue = ref("");

// 舆情等级筛选框绑定数据
const levelValue = ref("");

// 评价时间选择框绑定数据
const timeRang = ref([]);

// 舆情等级数组
const levelList = ref([
  {
    text: "全部",
    value: "",
  },
  {
    text: "优",
    value: 0,
  },
  {
    text: "良",
    value: 1,
  },
]);

// 每页多少条
const pageSize = ref(8);

// 当前页
const currentPage = ref(1);

// 总条数
const total = ref(0);

// 评价信息列表
const tableData = ref([]);

// 单个评价详细信息
const showObj = ref({});

// 评价详情弹窗显示隐藏控制
const showMsg = ref<boolean>(false);

onMounted(() => {
  // 获取用户评价列表数据
  getCommentInfo();
});

// 获取用户评价列表数据
const getCommentInfo = async () => {
  const res = await reqGetCommentInfo({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    startTime: timeRang.value ? timeRang.value[0] : "",
    endTime: timeRang.value ? timeRang.value[1] : "",
    name: nameValue.value,
    flag: levelValue.value,
  });
  // console.log(res);

  if ((res as any).code == 200 && res.data.commentInfoList) {
    tableData.value = res.data.commentInfoList;
    total.value = res.data.total;
  } else {
    tableData.value = [];
    total.value = 0;
  }
};

// 点击关闭按钮回调
const handleClose = () => {
  $emit("closeDialog", false);
};

// 点击查看详情按钮回调
const lookDetail = (row: any) => {
  showMsg.value = true;
  showObj.value = row;
};

// 自定义事件
const closeMsg = (data: boolean) => {
  showMsg.value = data;
};

// 筛选条件触发的回调
const handleSearch = () => {
  currentPage.value = 1;
  getCommentInfo();
};
</script>

<style lang="scss" scoped>
.container {
  z-index: 9999;
  position: absolute;
  top: -362px;
  left: -140px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7072px;
  height: 1872px;
  background-color: rgba($color: #000000, $alpha: 0.4);

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 7072px;
    height: 1872px;
  }

  .detail {
    position: relative;
    width: 2687px;
    height: 1302px;
    background-image: url(@/assets/images/9.png);
    background-size: 100% 100%;

    .detail_title {
      margin-top: 51px;
      margin-left: 51px;
      width: 2521px;
      height: 96px;
      background-image: url(@/assets/images/79.png);
      background-size: 100% 100%;
    }

    .close_icon {
      position: absolute;
      top: 59px;
      right: 17px;
      width: 82px;
      height: 82px;
      cursor: pointer;
      background-image: url(@/assets/images/12.png);
      background-size: 100% 100%;
    }

    .detail_search {
      display: flex;
      align-items: center;
      margin-left: 53px;
      width: 2567px;
      height: 176px;
      font-size: 30px;
    }

    .detail_table {
      margin-left: 53px;
      width: 2567px;
      height: 835px;

      .table_img {
        width: 52px;
        height: 63px;
      }

      .table_btn {
        color: #0aadda;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-left: 53px;
      width: 2567px;
      height: 100px;
    }
  }
}

::v-deep(.el-input__wrapper) {
  font-size: 30px;
  background-color: rgba(36, 98, 125, 0.5);
}

::v-deep(.el-input__inner) {
  color: #fff;
}

::v-deep(.el-range-input),
::v-deep(.el-range-separator) {
  color: #fff;
  font-size: 30px;
}

::v-deep(.el-date-editor .el-range__icon),
::v-deep(.el-date-editor .el-range__close-icon),
::v-deep(.el-select__caret) {
  font-size: 30px;
}

::v-deep(.el-select--large .el-select__wrapper) {
  height: 75px;
  font-size: 30px;
  background-color: rgba(36, 98, 125, 0.5);
}

::v-deep(.el-select__placeholder) {
  color: #fff;
  line-height: 75px;
}

/*最外层透明*/
.detail_table ::v-deep(.el-table),
.detail_table ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.detail_table ::v-deep(.el-table th),
.detail_table ::v-deep(.el-table tr),
.detail_table ::v-deep(.el-table td) {
  background-color: transparent !important;
  color: white;
  font-size: 16px;
  border-color: rgba(255, 255, 255, 0.1);
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(41, 67, 102, 0.7);
}

::v-deep(.el-pagination.is-background .el-pager li),
::v-deep(.el-pagination.is-background .btn-next),
::v-deep(.el-pagination.is-background .btn-prev) {
  color: #000;
  background-color: #cccccc;
}

::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  color: #fff;
  background-color: #0aadda;
}

// ::v-deep(.el-pagination__goto),
// ::v-deep(.el-pagination__classifier),
// ::v-deep(.el-input__inner) {
//   color: #b0b0b0;
// }
</style>