DataFront/components/tools/qqazk/QqazkDetails.vue

<script setup lang="ts">
import {Action} from "element-plus";

const props = defineProps({
  id:String
})
interface Word{
  bsm:string
  hz:string
  pyJs:string[]
}
let showCards = reactive<Word>({
  pyJs:[],
  bsm:"",
  hz:""
})
const isloading = ref(true)
const ret:any  =await $fetch(`/api/tools/qqazk/details`,{params:{id:props.id}})
isloading.value=false
if(ret.haveMess){
  ElMessageBox.alert(ret.message,"获取资源错误",{
    confirmButtonText: '确认',
    callback:(action:Action)=>{

    }
  })
}
const d = ret.data

  const arr: string[] = []
  d.pyJs.forEach((df:any)=>{
    let dfArr = df.split("。")
    if (dfArr.length==1){
      arr.push(dfArr[0])
    }else {
      dfArr.forEach((de:any)=>{
        arr.push(de+"。")
      })
    }
  })
  const nI={
    bsm:d.bsm,
    hz:d.hz,
    pyJs:arr
  }
showCards.pyJs = nI.pyJs
showCards.bsm = nI.bsm
showCards.hz = nI.hz
useHead({
  title: "'"+showCards.hz+"'汉字详情",
})
// console.log(showCards)
</script>

<template>
    <el-card class="box-card" v-loading="isloading">
      <template #header>
        <div class="card-header">
          <span style="margin-right: 10px;font-size: 40px"> {{showCards.hz}} </span>
        </div>
      </template>
      <div>笔顺码： {{showCards.bsm}}</div>
      <div style="margin-top: 10px" v-for="i in showCards.pyJs" v-show="i!='。'">
        {{i}}
      </div>
    </el-card>
</template>

<style scoped>

</style>