gree_leran/components/cardVideo.vue

113 lines
2.3 KiB
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>