minnan/src/pages/blocks/AudioBlock.vue

<template>
  <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
    <Box1AudioPlay
      class="w-100" 
      :title="indexAudioPlayer.currentTitle.value"
      :image="indexAudioPlayer.currentItem?.value?.image"
      :playState="indexAudioPlayer.isPlaying.value"
      :playTime="indexAudioPlayer.timeString.value"
      @playPauseClick="indexAudioPlayer.playpause"
      @arrowClick="handleGoAudioList"
      @nextClick="indexAudioPlayer.next"
      @prevClick="indexAudioPlayer.prev"
      @click="handleGoAudioList"
    />
  </view> 
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { useSimpleListAudioPlayer } from '@/common/composeabe/SimpleAudioPlayer';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import Box1AudioPlay from '@/pages/parts/Box1AudioPlay.vue';

const indexAudioPlayer = useSimpleListAudioPlayer(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(5)
    .setMainBodyColumnId(321)
  , 1, 10)).list.map((p) => {
    return {
      id: p.id,
      title: p.title,
      image: p.thumbnail || p.image,
      src: p.audio as string, 
    }
  });
})
function handleGoAudioList() {
  navTo('/pages/inhert/language/list') 
}

</script>