YangZhouDaYunHeDaDu/src/components/MsgContent.vue

<template>
  <div
    class="msg-content"
    @click="handleContent"
  >
    <div
      class="msg-content__inner"
      @click="emits('back')"
      v-html="curMsg"
    />
    <img
      style="width: 100%"
      src="@/assets/images/Group-420.png"
    >
    <img
      v-if="_curIndex < list.length - 1"
      class="msg-content__more"
      src="@/assets/images/tbn_nex.png"
    >

    <div
      v-if="showTips"
      class="msg-content__tips"
    >
      <img
        src="@/assets/images/hotspot-relic/tipsbox-min.png"
      >
      <p>点击对话框关闭对话</p>
    </div>
  </div>
</template>

<script setup>
import { computed, onBeforeUnmount, watch, ref } from 'vue'

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(1920, 970)
const props = defineProps(['list', 'curIndex'])
const emits = defineEmits(['update:cur-index', 'end', 'back'])

const TIPS_KEY = 'ydd-msg-tips'

const showTips = ref(!localStorage.getItem(TIPS_KEY))

const _curIndex = computed({
  get() {
    return props.curIndex
  },
  set(v) {
    emits('update:cur-index', v)
  }
})
const curMsg = computed(() => {
  const item = props.list[_curIndex.value]
  return typeof item === 'string' ? item : item.inner
})

let audio = null

const removeAudio = () => {
  if (!audio) return
  audio.pause()
  audio.remove()
  audio = null
}

const handleAudio = () => {
  const item = props.list[_curIndex.value]
  if (typeof item === 'object') {
    audio = new Audio(require(`@/assets/audios/${props.list[_curIndex.value].audio}`))
    audio.volume = 0.7
    audio.play()
  }
}

const handleContent = () => {
  if (_curIndex.value < props.list.length - 1) {
    _curIndex.value += 1
  } else {
    _curIndex.value = 0
    emits('end')
  }
  removeAudio()

  if (showTips.value) {
    showTips.value = false
    localStorage.setItem(TIPS_KEY, 1)
  }
}

onBeforeUnmount(() => {
  removeAudio()
})

watch(curMsg, handleAudio, {
  immediate: true
})
</script>

<style lang="less">
  .msg-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    font-size: 0;
    z-index: 3;

    &__tips {
      position: absolute;
      top: -167px;
      right: 109px;
      width: 298px;

      img {
        width: inherit;
      }
      p {
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        font-size: 18px;
        color: rgba(255,255,255,0.85);
        text-align: center;
      }
    }
    &__inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      top: 0;
      left: calc(21vw + constant(safe-area-inset-left));
      left: calc(21vw + env(safe-area-inset-left));
      right: 10vw;
      bottom: 0;
      color: #FFF1BE;
      font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      letter-spacing: 4px;
      line-height: 37px;
      text-indent: 2em;

      p {
        font-family: "Source Han Sans SC Normal" !important;
      }
    }
    img:first-child {
      width: 100%;
    }
    &__more {
      position: absolute;
      right: 36px;
      bottom: 23px;
      width: calc(121 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
</style>