index.vue 7.05 KB
<template>
<div class="app-container">
  <div class="app-header">
    <div class="search-logo"></div>
    <el-input prefix-icon="el-icon-search" placeholder="例如:腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
      <el-button slot="append" @click="searchDocument">搜索文档</el-button>
    </el-input>
  </div>
    <div class="content">
        <div class="content-left scroll">
            <div v-if="loadingLeft" class="content-right-content loading loading-left">
                <div class="loading-div">
                    <i class="el-icon-loading loading-center"></i>
                    <div>加载中...</div>
                </div>
            </div>
            <div class="content-left-center scroll">
                <div v-if="!listLeft.length && !loadingLeft" class="not-data">暂无数据</div>
                <div class="left-content" v-for="(item, index) in listLeft" :key="index">
                    <div class="left-content-title">
                      <div class="logo"><img src="../../../assets/image/juliang.png" alt="" class="logo-img"></div>
                      <span class="media text">{{item.media}}</span>
                      <span class="text">更新日期:{{item.data}}</span>
                    </div>
                    <div class="content-text-header">
                        <a class="link" v-if="item.link" :href="item.link" target="_blank">{{item.title}}</a>
                        <span v-else>{{item.title}}</span>
                    </div>
                    <p v-for="(items, index) in item.content" :key="index" class="content-text" v-html="items.contentText"></p>
                </div>
                <pagination v-show="queryParamsLeft.pageContent>0 && loadMoreLeft && listLeft.length"
                :total="queryParamsLeft.pageContent"
                :page.sync="queryParamsLeft.pageNo"
                :limit.sync="queryParamsLeft.pageSize"
                layout="total, prev, pager, next"
                @pagination="seatchInitLeft" />
                <!-- <div class="add-more" v-if="loadMoreLeft && listLeft.length" @click="seatchInitLeft"><span v-if="loadingLeft">加载中</span><span v-else>加载更多</span></div> -->
            </div>
        </div>
    </div>
</div>
</template>

<script>
// 接口调用方法
export default {
  data() {
    return {
        search: '',
        loadingLeft: false,
        loadMoreLeft: true,
        queryParamsLeft: {
            pageNo: 1,
            pageSize: 10,
            pageContent: 0
        },
        listLeft: []
    }
  },
  watch: {},
  created() {
    console.log(this.$route.params.search)
    if (this.$route.params.search) {
       this.search =  this.$route.params.search
       this.searchDocument()
    } else {
       this.clearData() 
    }
  },
  computed: {
  },
  methods: {
    // 搜索
    searchDocument() {
      this.clearData()
      if (!this.search.trim()) {
        this.$message({
          message: '请输入需要搜索的内容',
          type: 'warning'
        })
        return
      }
      this.seatchInitLeft()
    },
    // 搜索左侧
    seatchInitLeft() {
        this.loadingLeft = true
        // listCustomer(this.queryParams)
        //   .then(response => {
        if (this.queryParamsLeft.pageContent === 0) {
           this.queryParamsLeft.pageContent = 0 
           for (let i = 0; i < 10; i++) {
             let data = {
                media: '巨量引擎',
                title: '巨量引擎开放平台' + (i + 1),
                data: '2022-10-18',
                link: 'https://ad.oceanengine.com/pages/login/index.html?source=oceanengine',
                content: [
                  {
                    contentText: '通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。1234', // 这是完整的一段话
                    contentChange:[ // 这段话里有多少变化以及链接出处
                       {
                         text: '或使用v-model',
                         url: 'https://www.baidu.com/'
                       },
                       {
                         text: '输入框内显示的值',
                         url: 'https://www.cnblogs.com/1234wu/p/11055005.html'
                       },
                    ]
                  },
                  {
                    contentText: '视频或直播加热的功能,提升视频或直播间热度。121212', // 这是完整的一段话
                    contentChange: [
                      {
                        text: '提升视频或直播间热度',
                        url: 'https://element.eleme.io/#/zh-CN/component/pagination#events'
                      },
                    ]
                  }
                ]
              }
              let content = data.content
              for (let a = 0; a < content.length; a++) {
                let contentChange = content[a].contentChange
                for (let b = 0; b < contentChange.length; b++) {
                  let text = contentChange[b].text
                  let url = contentChange[b].url
                  if (content[a].contentText.indexOf(text) >= 0) {
                    let values = content[a].contentText.split(text);
                    content[a].contentText = values.join(
                      `<a style="color: rgba(250, 0, 0, 1);" href="${url}" target="_blank">${text}</a>`
                    )
                  }
                }
              }
              this.listLeft.push(data)  
           }
        } else {
            let page = this.queryParamsLeft.pageNo + 1
            let orderSize = this.queryParamsLeft.pageNo * this.queryParamsLeft.pageSize
            let number = page * this.queryParamsLeft.pageSize
            let content = this.queryParamsLeft.pageContent
            if (number >= content) {
                this.loadMoreLeft = false
            } else {
                this.loadMoreLeft = true
            }
            this.listLeft = []
            for (let i = orderSize; i < number; i++) {
              this.listLeft.push({
                media: '巨量' + (i + 1),
                title: '巨量引擎开放平台' + (i + 1),
                data: '2022-10-18',
                link: 'https://ad.oceanengine.com/pages/login/index.html?source=oceanengine',
                content: ['视频或直播加热的功能,提升视频或直播间热度。','视频或直播加热的功能,提升视频或直播间热度。']
              })  
            }
            this.queryParamsLeft.pageNo = page
        // })
        // .catch(error => {
        //   this.loading = false;
        // });
        }
        setTimeout(() => {
          this.loadingLeft = false
        }, 1000);
    },
    // 数据初始化
    clearData() {
        this.loadMoreLeft = true
        this.loadingLeft = false
        this.queryParamsLeft = {
            pageNo: 1,
            pageSize: 10,
            pageContent: 0
        }
        this.listLeft = []
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/views/main.scss';
</style>