qjkankan_v1.1.1/packages/qjkankan-editor/src/views/base/openingAnimationSettings.vue

<template>
  <div class="opening-animation-settings">
    <span class="title">{{ $i18n.t(`edit_settings.opening_setting`) }}</span>
    <br />
    <div class="switch-wrapper">
      <span class="label">{{
        $i18n.t("edit_settings.opening_animation_show")
      }}</span>
      <Switcher
        :value="info.isShowOpeningAnimation"
        @change="onSwitcherChange"
      ></Switcher>
    </div>
    <div class="btns-and-video">
      <div class="btn-wrapper">
        <button
          v-for="item of openingTypeList"
          :key="item"
          class="opening-selection-btn"
          :class="{ 'active-opening-type': info.openingAnimationType === item }"
          @click="info.openingAnimationType = item"
        >
          {{ $i18n.t(`baseSetting.opa${item}`) }}
        </button>
      </div>
      <div class="video-wrapper">
        <video
          ref="opvideo"
          :src="
            require(`@/assets/videos/opa${fallbackOpeningAnimationType(
              info.openingAnimationType
            )}_x264.mp4`)
          "
          autoplay
          loop
        ></video>
        <i
          v-if="playing"
          @click="bofang"
          class="iconfont iconshow_playback"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Switcher from "@/components/shared/Switcher";

export default {
  components: {
    Switcher,
  },
  data() {
    return {
      // openingTypeList: [
      //   '小行星开场',
      //   '小行星巡游开场',
      //   '小行星缩放开场',
      //   '水平巡游开场',
      //   '水晶球开场',
      // ],
      openingTypeList: [1, 2, 3, 4, 5],

      playing: true,
    };
  },
  computed: {
    ...mapGetters({
      info: "info",
    }),
    fallbackOpeningAnimationType() {
      return (val) => {
        if (!val) {
          return 1;
        } else {
          if (typeof val === "string") {
            if (val.match(/[\u3400-\u9FBF]/)) {
              return 1;
            } else {
              return Number(val.replace("opa", ""));
            }
          } else {
            return val;
          }
        }
      };
    },
  },
  methods: {
    bofang() {
      this.$refs.opvideo.play();
    },
    onSwitcherChange(data) {
      this.info.isShowOpeningAnimation = data;
    },
  },
  mounted() {
    if (this.info.isShowOpeningAnimation === undefined) {
      this.$set(this.info, "isShowOpeningAnimation", false);
    }
    if (
      !this.info.openingAnimationType ||
      (typeof this.info.openingAnimationType === "string" &&
        this.info.openingAnimationType.match(/[\u3400-\u9FBF]/))
    ) {
      this.$set(this.info, "openingAnimationType", this.openingTypeList[0]);
    }
    this.$nextTick(() => {
      // console.log(this.$refs.opvideo);

      this.$refs.opvideo &&
        this.$refs.opvideo.addEventListener("playing", () => {
          if (this.playing) {
            this.playing = false;
          }
        });
    });
  },
};
</script>

<style lang="less" scoped>
.opening-animation-settings {
  padding: 24px 30px;
  background: #252526;
  height: 546px;

  .title {
    font-size: 18px;
    color: #ffffff;
  }

  .switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    .label {
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
    }
  }

  .btns-and-video {
    margin-top: 16px;
    display: flex;
    align-items: flex-start;

    .btn-wrapper {
      .opening-selection-btn {
        width: 210px;
        height: 40px;
        background: #1a1b1d;
        border-radius: 2px;
        border: 1px solid #404040;
        margin-bottom: 16px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        display: block;

        &::after {
          content: "";
          height: 100%;
          vertical-align: middle;
          display: inline-block;
        }
      }

      .active-opening-type {
        color: #0076f6;
      }
    }

    .video-wrapper {
      width: 469px;
      height: 264px;
      margin-left: 20px;
      position: relative;
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .iconfont {
        position: absolute;
        font-size: 36px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
      }
    }
  }
}
</style>