mingnan/src/pages/inhert/language/list.vue

<template>
  <view class="d-flex flex-col bg-base" style="min-height:100vh"> 
    <view class="top-tab bg-base">
      <u-tabs 
        :list="tabs.content.value || []" 
        lineWidth="30"
        lineColor="#d9492e"
        :activeStyle="{
          color: '#000',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)'
        }"
        :scrollable="true"
        class="top-tab"
        @click="(e: any) => tab = e.id"
      />
    </view>

    <view class="d-flex flex-col p-2">
      <uni-search-bar 
        v-model="searchValue"
        radius="100" 
        bgColor="#fff" 
        placeholder="搜索闽南语" 
        clearButton="auto" 
        cancelButton="none"
        @clear="doSearch"
        @confirm="doSearch"
      />
      <view class="d-flex flex-row justify-between align-center pl-3 pr-3">
        <view class="d-flex flex-row align-center">
          自动连播
          <switch 
            class="ml-1"
            color="#d9492e"
            :checked="playAuto" 
            @change="(e: any) => playAuto = e.detail.value" 
            style="transform:scale(0.6)" 
          />
        </view>
        <view>
          <text class="iconfont icon-play mr-1"></text>
          <text v-if="playMode=='list'" @click="playMode='loop'">列表播放</text>
          <text v-else-if="playMode=='loop'" @click="playMode='random'">单个循环</text>
          <text v-else-if="playMode=='random'" @click="playMode='list'">随机播放</text>
          <text v-else @click="playMode='list'">播放模式</text>
        </view>
      </view>
    </view>
    <view class="d-flex flex-col p-2 pt-0">
      <SimpleListAudioPlayer
        ref="player"
        :list="listLoader.list.value ?? []"
        :playMode="playMode"
        :playAuto="playAuto"
      >
        <template #default="{ currentPlayItemId, isPlaying }">
          <view
            v-for="item in listLoader.list.value"
            :key="item.id"
          >
            <Box2LinePlayRightArrow 
              classNames="ml-2 mb-3"
              titleColor="title-text"
              :image="item.image"
              :title="item.title"
              :isCurrent="item.id == currentPlayItemId"
              :isPlaying="isPlaying"
              @click="player.playpause(item.id)"
            />
          </view>
        </template>
      </SimpleListAudioPlayer>
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>

<script setup lang="ts">


import { ref, watch } from 'vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { navTo } from '@/common/utils/PageAction';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import AppCofig from '@/common/config/AppCofig';
import Box2LinePlayRightArrow from '@/pages/parts/Box2LinePlayRightArrow.vue';
import SimpleListAudioPlayer from '@/common/components/SimpleListAudioPlayer.vue';

const tabs = useSimpleDataLoader(async () => {
  const res = await CommonContent.getModelColumList(5, 1, 50);
  tab.value = res[0].id
  return res;
}, true);

const player = ref();
const playMode = ref<'loop'|'random'|'list'>(uni.getStorageSync('LanguagePlayMode') || 'list');
const playAuto = ref(Boolean(uni.getStorageSync('LanguageAutoPlay')));

console.log(playAuto);

const searchValue = ref('');
const tab = ref(0)
const listLoader = useSimplePageListLoader(8, async (page, pageSize) => {
  const res = await CommonContent.getContentList(new GetContentListParams()
    .setModelId(5)
    .setKeywords(searchValue.value)
    .setMainBodyColumnId(tab.value)
  , page, pageSize);
  return { list: res.list.map((item) => {
    return {
      id: item.id,
      image: item.thumbnail || item.image || AppCofig.defaultImage,
      title: item.title,
      src: item.audio as string,
    }
  }), total: res.total }
});

watch(playMode, () => uni.setStorageSync('LanguagePlayMode', playMode.value));
watch(playAuto, () => uni.setStorageSync('LanguageAutoPlay', playAuto.value))
watch(tab, () => listLoader.loadData(undefined, true));

function doSearch() {
  listLoader.loadData(undefined, true);
}
</script>