copyright-official-website/src/components/HelpCenter.vue

<template>
  <div class="help-center">
    <div class="box-top">
      <div class="title">
        <h4>AI著作权·帮助中心</h4>
        <p>灵活搭建更高效的著作权办理平台</p>
      </div>
    </div>
    <div class="box-bottom">
      <div class="box">
        <div class="boxTitle">
          <h3>帮助中心</h3>
          <span>
            <input type="text" id="txtInput" placeholder="输入问题关键字" v-model="searchQuery">
            <button id="search" @click="search" @input="onInput">搜索</button>
            <!-- <input id="search" name value="搜索" onclick="sendSearchRequest()"> -->
          </span>
        </div>
        <div class="boxContent">

          <el-container>
            <el-aside width="200px" style="height: 100vh;">
              <el-row class="tac">
                <el-col>
                   <!-- <h5 class="mb-2">帮助中心</h5> -->
                  <el-menu
                    active-text-color="#febe54"
                    default-active="item.index" 
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    mode="vertical"                   
                  >
                    
                    <!-- 一级标题 -->
                    <el-sub-menu  v-for="(item, index) in items" :key="index" :menuId="item.id" :hasDetail="item.hasDetail" @click="menuIdContend(item.id,item.hasDetail)" :index="item.index">
                      <template #title>
                        <el-icon><Expand /></el-icon>
                        <span>{{ item.name }}</span>
                        <!-- <i :class="{'el-sub-menu__icon-arrow': item.subList && item.subList.length > 0}"></i> -->
                        <!-- <i v-if="item.subList && item.subList.length > 0" class="el-icon-arrow-down el-sub-menu__icon-arrow"></i> -->
                        <i v-if="item.subList && item.subList.length > 0" class="el-icon-arrow-down"></i>
                      </template>
                      

                      <!-- 二级标题 -->
                      <el-sub-menu v-for="(item2, index) in item.subList" :key="index" :menuId="item2.id" 
                      :hasDetail="item2.hasDetail" @click="menuIdContend(item2.id, item2.hasDetail)" :index="item2.index">
                        <template #title>{{ item2.name}}</template>

                        <!-- 三级标题 -->
                        <el-menu-item v-for="(item3, index) in item2.subList" :key="index" :menuId="item3.id" 
                        :hasDetail="item3.hasDetail" @click="menuIdContend(item3.id, item3.hasDetail)" :index="item3.index">
                          {{ item3.name }}
                        </el-menu-item>

                      </el-sub-menu>

                    </el-sub-menu>
                    
                  </el-menu>
                </el-col>
            
              </el-row>
            </el-aside>
            
            <el-main>
                <!-- <router-view :key="activeIndex"></router-view>              -->
                <div class="contentBox" id="contentArea">
                  <div class="dataList">
                    <ul class="data">
                      <li class="list">
                        <h4 class="dataTitle"></h4>
                        <p class="dataContent"></p>
                      </li>
                    </ul>
                    <div class="pagin">
                      <!-- <el-pagination
                        :page-size="pageSize"
                        :current-page="currentPage"
                        :total="data.length"
                        @current-change="handlePageChange"
                      ></el-pagination> -->
                    </div>
                  </div>
                </div>
            </el-main>
          </el-container>

        </div>
        <div class="boxFooter">

        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMenu, ElSubMenu, ElMenuItem, ElPagination } from 'element-plus'
// import { ref, reactive } from 'vue'
import axios from 'axios'
// import $ from 'jquery'
// import func from 'vue-editor-bridge'
export default {
  // props: {
  //   query: String
  // },
  setup() {
    const searchQuery = ref('')
    const result = ref('')
    const route = useRoute()
  

    onMounted(() => {
      if (route.query.q) {
        searchQuery.value = route.query.q
        
          search()
          // fetchSearchResults()
      }
    })

    watch(() => route.query.q, (newQuery) => {
      if(newQuery) {
        searchQuery.value = newQuery
          search()
          // fetchSearchResults()
      }
    })

    // const onInput = () => {
    //   router.push({ 
    //     name: 'HelpCenter', 
    //     query: { q: searchQuery.value } 
    //   })
    // }

    const search = async () => {
      try {
        
        const response = await axios.get(`https://www.aimzhu.com/operator/app/help-detail/listrelease?keywords=${searchQuery.value}`)
        // alert(11)
        // console.log(response.data);
        
        let searchContent = response.data
        if (searchContent.length !== 0) {
          document.getElementById('contentArea').innerHTML = response.data[0].richContent
          // alert(11)
        } else {
          document.getElementById('contentArea').innerHTML = '很抱歉，没有找到符合的记录，请更换关键词重新搜索！'
        }
        
      } catch (error) {
        console.error(error)
      }
      
    }
    return {
      searchQuery,
      result,
      // search
      // onInput
    };
  },


  
  data() {
    return {
      number: 0,
      items: [],    
      content: [],
      // 默认展开的菜单项索引数组
      defaultOpeneds: [], 
      // 用于追踪每个子菜单的展开状态 
      // openedMenus: [],
      // data: [],
      // currentPage: 1,
      // pageSize: 10,
    }
  },
  methods: {
    change: function (index) {
      this.number = index  
    },
    menuIdContend (itemId0,itemHasDetail) {
      // console.log(itemId);
      var contendId = itemId0
      var detail = itemHasDetail
      let contentBox = document.querySelector('.contentBox')
      // var url = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + contendId
      // axios.get(url).then(response => {
      //   var content = response.data[0].richContent
      //   // console.log(content) 
      //   contentBox.innerHTML = content 
      // })

      if(detail === 1 ) {
        var url = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + contendId
        axios.get(url).then(response => {
          var content = response.data[0].richContent
          // console.log(content) 
          contentBox.innerHTML = content 
          
        })
      } else {
        // alert(11)
      }

    },

    search() {
      var textInput = document.querySelector('#txtInput').value
      // var pageSize = 10; 
      // var currentPage = 1;
      axios.get('https://www.aimzhu.com/operator/app/help-detail/listrelease?keywords=' + textInput)
      // axios.get(`https://www.aimzhu.com/operator/app/help-detail/listrelease/${pageSize}/${currentPage}?keywords=${textInput}`)
      .then(response => {
        // alert( response.data[0].richContent)
        console.log(response);
        console.log(response.data);
        let searchContent = response.data
        if (searchContent.length !== 0) {
          document.getElementById('contentArea').innerHTML = response.data[0].richContent
        } else {
          document.getElementById('contentArea').innerHTML = '很抱歉，没有找到符合的记录，请更换关键词重新搜索！'
        }
        // document.getElementById('contentArea').innerHTML = response.data[0].richContent
        // console.log(response.data);

      })
      .catch(function (error) {
        console.log(error)
      })
    },


    handleOpen(key, keyPath) {  
      // 只保留当前展开的菜单项索引  
      this.defaultOpeneds = [key] 

      // // 只展开当前点击的菜单  
      // this.openedMenus = [key]
    },  
    handleClose(key, keyPath) {  
      // 关闭时清空默认展开的菜单项索引数组  
      this.defaultOpeneds = []

      // const index = this.openedMenus.indexOf(key);  
      // if (index !== -1) {  
      //   // 只收起当前点击的菜单  
      //   this.openedMenus.splice(index, 1)
      // }  
    }, 
    
  },
  mounted() {
    axios.get('https://www.aimzhu.com/operator/app/help-type/helpAllListrelease').then(response => {
      console.log(response.data)
      // this.items = response.data.name
      this.items = response.data      
      
      var textInput = document.querySelector('#txtInput').value
      if(textInput === '') {
        // 默认渲染的数据
        let contendId0 = response.data[0].id
        let url0 = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + contendId0
        axios.get(url0).then(response => {
          console.log(response.data[0].richContent);
          var content0 = response.data[0].richContent
          let contentBox0 = document.querySelector('.contentBox')
          contentBox0.innerHTML = content0
        })
      } else {

      }
      


    })
    .catch(error => {
      console.error('Error fetching data:', error)
    });
    
  },
  
}
</script>

<style scoped>
.help-center {
  position: relative;
}

.help-center .box-top {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 605px;
  background: url(/assets/img/helpcenter-bj.png) no-repeat;
  background-size: cover;
}

.help-center .box-top .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 1000px;
  height: 150px;
  margin: 0 auto;
  /* border: 2px solid red; */
}

.help-center .box-top h4 {
  width: 500px;
  font-size: 30px;
  color: #74491a;
  margin-bottom: 10px;
}

.help-center .box-top p {
  width: 500px;
  font-size: 16px;
  letter-spacing: 5px;
  color: #9a7148;
}

.help-center .box-bottom {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  /* height: 700px; */
  background-color: #f5f5f5;
}

.help-center .box-bottom .box {
  position: relative;
  display: flex;
  flex-direction: column;
  top: -200px;
  bottom: 50px;
  width: 1000px;
  /* height: 750px; */
  /* padding: 25px; */
  background-color: #FFF;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.help-center .box-bottom .box .boxTitle {
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 60px;
  line-height: 60px;
  margin: 25px;
  /* border: 1px solid red; */
}

.help-center .box-bottom .box .boxTitle h3 {
  display: flex;
  font-size: 24px;
  color: #333;
  padding-left: 15px;
}

.help-center .box-bottom .box .boxTitle span {
  display: flex;
  height: 38px;
  margin: auto 0;
  /* align-content: center; */
}

.help-center .box-bottom .box .boxTitle span #txtInput {
  display: block;
  width: 380px;
  height: 38px;
  margin-top: 0;
  padding-left: 14px;
  font-size: 14px;
  border: 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  border-radius: 3px 0 0 3px,

}

.help-center .box-bottom .box .boxTitle span #search {
  display: block;
  width: 85px;
  height: 38px;
  border: none;
  background-color: #febe54;
  font-size: 15px;
  letter-spacing: 2px;
  color: #FFF;
}

</style>