yuedu

litian

2024-05-28 4e1859708f3c00c9a7b79a3489ac9a6640f8f7b7

 src/views/components/dictionary.vue

@@ -1,13 +1,13 @@
<template>
  <div class="page">
    <div class="searchBox">
    <div class="search-Box">
      <el-input class="custom-input" placeholder="请输入内容" v-model="searchContent">
        <template #suffix>
          <el-icon @click="getSearchResult" class="hover"><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="resultBox">
    <div class="resultBox" v-if="searchResult.length > 0">
      <div v-for="result in searchResult" :key="result.id">
        <div class="phone_con">
          <div class="per-phone">英 /<span>{{result.ukPhone}}</span>/</div>
@@ -21,7 +21,7 @@
            </div>
          </div>
        </div>
        <div class="trans">
        <div class="trans" v-if="result.phrase">
          <div class="title">词组短语</div>
          <div v-for="(item,index) in result.phrase" :key="item">
            <div class="itemList">
@@ -31,7 +31,7 @@
            </div>
          </div>
        </div>
        <div class="trans">
        <div class="trans" v-if="result.syno">
          <div class="title">近义词</div>
          <div v-for="item in result.syno" :key="item">
            <div class="itemList">
@@ -43,7 +43,7 @@
            </div>
          </div>
        </div>
        <div class="trans">
        <div class="trans" v-if="result.sentence">
          <div class="title">例句</div>
          <div v-for="(item,index) in result.sentence" :key="item">
            <div class="itemList1">
@@ -54,44 +54,39 @@
        </div>
      </div>
    </div>
    <div class="noResultBox" v-else>
      暂无内容
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted, inject } from 'vue'
const request = inject('request')
const props = defineProps({
  searchCon: Boolean
})
const MG: any = inject('MG')
const searchContent = ref('')
const isFull = ref(false)
watch(props, (newValue) => {
  // 统监听props的值变化，动态修改isShow的值
  searchContent.value = newValue.searchCon

onMounted(() => {
})

const searchResult = ref([])


const getSearchResult = () => {
  if (searchContent.value) {
    request({
      url: '/edu/api/FindWords',
      method: 'post',
      data: {
    MG.edu.findWords([{
        word: searchContent.value,
        isFull: isFull.value
      }
    }).then((res) => {
      console.log(JSON.parse(res[0].sentence)[0].sCn)
      // encodeURIComponent(res[0].syno[0].tran)
      }]).then((res) => {
        console.log(res)
      if (res.length > 0) {
        res.map((item) => {
        res[0].map((item) => {
          item.phrase = JSON.parse(item.phrase)
          item.relWord = JSON.parse(item.relWord)
          item.sentence = JSON.parse(item.sentence)
          item.syno = JSON.parse(item.syno)
          item.trans = JSON.parse(item.trans)
        })
        searchResult.value = res
        searchResult.value = res[0]
      }
    })
  }
@@ -103,7 +98,7 @@
  height:100%;
  overflow-y:auto
}
.searchBox {
.search-Box {
  width: 400px;
  margin: 0 auto;
  .custom-input {
@@ -123,6 +118,10 @@
    }
  }
}
.noResultBox{
  padding:40px;
  text-align: center;
}
.resultBox{
  padding:20px;
  .phone_con{