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