minnan/src/pages/parts/Box1AudioPlay.vue

<template>
    <view 
      :class="'position-relative d-flex w-100 flex-row align-center bg-light-light-primary radius-base p-25 '+ innerClass"
    >
    <image 
      class="width-150 height-150 radius-base" 
      :src="image || 'https://mncdn.wenlvti.net/app_static/minnan/images/home/ImageTest.jpg'" 
      mode="aspectFill" 
      @click="$emit('click')"
    />
    <view 
      class="d-flex flex-col ml-25 flex-one"
      @click="$emit('click')"
    >
      <text class="color-second-text">{{ title }}</text>
      <view class="d-flex flex-row align-center mt-3">
        <image 
          v-if="showPrev" 
          class="width-50 height-50 mr-2" 
          style="transform:rotate(180deg);" 
          src="https://mncdn.wenlvti.net/app_static/minnan/images/home/NextButtonSmall.png" 
          @click.stop="$emit('prevClick')"
        />
        <image 
          v-if="playState"
          class="width-50 height-50 mr-2" 
          src="https://mncdn.wenlvti.net/app_static/minnan/images/home/PauseButtonSmall.png"
          @click.stop="$emit('playPauseClick')"
        />
        <image 
          v-else
          class="width-50 height-50 mr-2"
          src="https://mncdn.wenlvti.net/app_static/minnan/images/home/PlayButtonSmall.png"
          @click.stop="$emit('playPauseClick')"
        />
        <image 
          v-if="showNext"
          class="width-50 height-50 mr-2"
          src="https://mncdn.wenlvti.net/app_static/minnan/images/home/NextButtonSmall.png"
          @click.stop="$emit('nextClick')"
        />
        <text class="color-second-text size-s ml-2">{{ playTime }}</text>
      </view>
    </view>
    <text class="iconfont icon-arrow-right color-primary" />
    <view 
      class="position-absolute r-0 t-0 b-0 width-50"
      :style="{zIndex:11}"
      @click="$emit('arrowClick')"
    ></view>
  </view>
</template>

<script setup lang="ts">

const props = defineEmits([	
  "click",
  "arrowClick",
  "nextClick",
  "prevClick",
  'playPauseClick',
])
defineProps({
  title: {
    type: String,
    default: '',
  },
  image: {
    type: String,
    default: 'https://mncdn.wenlvti.net/app_static/minnan/images/home/ImageTest.jpg',
  },
  playState: {
    type: Boolean,
    default: false,
  },
  playTime: {
    type: String,
    default: '', 
  },
  showNext: {
    type: Boolean,
    default: true,
  },
  showPrev: {
    type: Boolean,
    default: true,
  },
  innerClass: {
    type: String,
    default: '',
  },
})

</script>