gree_leran/components/cardVideo.vue

<template>
  <div class="container">
    <div class="video-box">
      <video class="video" ref="videoStatus" @play="propsPlay" :src="Videos.src"></video>
      <div class="box-bottom">
        <!-- 点赞按钮 -->
        <up-icon v-if="info.isLike" @click="toLike" name="heart-fill" color="#ff0004" size="28"></up-icon>
        <up-icon v-else name="heart" @click="toLike" color="#ff0004" size="28"></up-icon>
        <!-- 收藏按钮 -->
        <up-icon v-if="info.isCollection" @click="toCollection" name="star-fill" color="#ff0004" size="28"></up-icon>
        <up-icon v-else name="star" @click="toCollection" color="#ff0004" size="28"></up-icon>
      </div>
      <div class="bottom-title">
        <span class="title">{{ Videos.titleName }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// Props
const props = defineProps({
  VideoId: {
    type: Number,
    default: null
  },
  Videos: {
    type: Object,
    default: () => ({
      src: "",
      avatar: '',
      username: 'sdsd',
      titleName: 'asdsdas',
      tagName: 'sdasd'
    })
  }
});

// Local state
const videoContent = ref(null);
const info = reactive({
  isLike: false,
  isCollection: false
});

// Methods
const propsPlay = (e) => {
  const videoContext = videoContent.value;
  const videoStatus = ref(null);
  videoStatus.value = e.target;
  // Emit event to parent
  emit('onplay', {
    e,
    videoStatus,
    videoContext
  });
};

const toLike = () => {
  info.isLike = !info.isLike;
};

const toCollection = () => {
  info.isCollection = !info.isCollection;
};

// Lifecycle hook
onMounted(() => {
  videoContent.value = uni.createVideoContext('video', this);
});
</script>

<style scoped lang="scss">
$videoBoxradius: 30rpx;
$backColor: rgba(170, 85, 255, 0.6);

.container {
  padding: 20rpx;

  .video-box {
    overflow: hidden;
    border-radius: $videoBoxradius;
    background-color: $backColor;
    width: 100%;

    .video {
      width: 100%;
    }

    .box-bottom {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 4%;
    }

    .bottom-title {
      text-align: center;
      color: #fff;
      font-size: $uni-font-size-subtitle;
      height: 80rpx;

      .title {
        line-height: 80rpx;
      }
    }
  }
}
</style>