travel/admin/src/views/qa/problem.vue

<template>
  <div class="problem">
    <el-row>
      <el-col :span="24">
        <div class="problem_form">
          <el-form :inline="true" ref="form" :model="dataForm" label-width="60px">
            <el-form-item label="关键字:">
              <el-input v-model="dataForm.keyword" placeholder="请输入搜索关键字" style="width: 400px;" class="filter-item" />
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <div class="problem_container">
      <div class="problem_left">
        <div @click="handleQacityl(item.city_id)" class="btn" v-for="item in getQaCityList">{{ item.city_name }}</div>
      </div>
      <div class="problem_right">
        <ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-immediate="false" style="overflow:auto">
          <li class="problem_right_container" v-for="item in getQaLists">
            <div class="title">
              <span v-html="handleprant(item.title)"></span>
              <el-button @click="handleZip(item.img_zip)" type="primary">下载图片</el-button>
              <el-button @click="handleZip(item.trip_zip)" type="primary">下载行程</el-button>
            </div>
            <div class="desc_container" v-for="list in item.qaQuestions">
              <div style="font-weight: 700;color: #46a6ff;" class="desc" v-html="handleprant(list.title)"></div>
              <div class="desc" v-html="handleprantHtml(list.content)"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getQaCityList, getQaList } from '@/api/qa'

export default {
  data() {
    return {
      getQaCityList: [],
      getQaLists: [],
      dataForm: {
        keyword: '',
        city_id: ''
      }
    }
  },
  created() {
    getQaCityList().then(res => {
      this.getQaCityList = res.data
    })
  },
  watch: {
    'dataForm.keyword': function (newVal) {
      if (newVal) {
        this.onSubmit();
      }
    }
  },
  methods: {
    handleQacityl(val) {
      getQaList({ city_id: val }).then(res => {
        this.getQaLists = res.data.data
      })
    },
    handleZip(url) {
      if (url) {
        window.open(url)
      } else {
        this.$message({
          showClose: true,
          message: '暂无下载链接'
        })
      }
    },
    load() {
      console.log('load')
    },
    handleprant(val) {
      if (!val) return ''; // 处理空值情况，避免返回 undefined 或其他非字符串值

      let replaceReg = new RegExp(this.dataForm.keyword, "ig");
      let replaceString = `<span style="color: #fff;background-color: #FC0421FF;">${this.dataForm.keyword}</span>`;
      return val.replace(replaceReg, replaceString);
    },
    handleprantHtml(val) {
      if (!val) return '';

      let p = this.dataForm.keyword;
      let regexp = new RegExp(p, "g");
      let replacedHtml = val.replace(/(?<=>)[^>]+(?=<[/]?\w+.*>)/g, (v) => {
        return v.replace(regexp, `<span style='color: #fff;background-color: #FC0421FF;'>${p}</span>`);
      });
      // 检查是否有替换发生
      if (replacedHtml === val) {
        // 如果没有替换发生，则调用handleprant
        return this.handleprant(val);
      }
      return replacedHtml;
    },
    onSubmit() {
      getQaList(this.dataForm).then(res => {
        this.getQaLists = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/fonts/font.css";
body {
  font-family: PingFang !important;
}
.infinite-list {
  list-style-type: none;
  height: calc(100vh - 154px);
  padding: 0;
  margin: 0;
}
.desc_container {
  & + .desc_container {
    margin-top: 10px;
    padding-top: 10px;
  }
  .desc_title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
    margin-bottom: 10px;
  }
  .desc_content {
    font-size: 14px;
    font-weight: 300;
  }
}
.problem {
  .problem_form {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  .problem_container {
    display: flex;
    .problem_left {
      font-family: PingFang, sans-serif;
      font-weight: 300;
      width: 18%;
      background: #fff;
      padding: 0 20px;
      border-right: 2px solid #46a6ff;
      height: calc(100vh - 154px);
      .btn {
        color: #fff;
        padding: 10px 20px;
        cursor: pointer;
        text-align: center;
        background: #46a6ff;
        border-radius: 10px;
        & + .btn {
          margin-top: 10px;
        }
      }
    }
    .problem_right {
      width: 100%;
      background: #fff;
      padding: 0 20px;
      .problem_right_container {
        & + .problem_right_container {
          margin-top: 20px;
        }
        .title {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 10px;
          color: #46a6ff;
          &>:nth-child(1) {
            margin-right: 40px;
          }
        }
        .desc {
          font-size: 14px;
          color: #666;
          line-height: 24px;
        }
      }
    }
  }
}
</style>