视频详情
This commit is contained in:
parent
8703d9b303
commit
f9066bcdf1
@ -197,14 +197,34 @@ interface VideoDetail{
|
||||
deleted_at: null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
share:number,
|
||||
watch:number
|
||||
}
|
||||
|
||||
export async function videodetail(data?:any) {
|
||||
const res=await get<VideoDetail>('video/'+data)
|
||||
return res.data
|
||||
console.log(res,"lllk")
|
||||
return {
|
||||
videoid: res.data.videoid,
|
||||
memberid: res.data.memberid,
|
||||
title: res.data.title,
|
||||
img: res.data.img,
|
||||
fileid: res.data.fileid,
|
||||
fileurl: res.data.fileurl,
|
||||
fileduration: res.data.fileduration,
|
||||
status: res.data.status,
|
||||
desc: res.data.desc,
|
||||
deleted_at: res.data.deleted_at,
|
||||
created_at: res.data.created_at,
|
||||
updated_at: res.data.updated_at,
|
||||
watch:res.data.watch,
|
||||
share:res.data.share
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 删除视频
|
||||
*/
|
||||
|
||||
@ -1,87 +1,99 @@
|
||||
<template>
|
||||
<div class="cont">
|
||||
<div class="title">视频数据</div>
|
||||
<div class="info">
|
||||
<div class="item">
|
||||
<img src="" alt="">
|
||||
<span>sdasjdkasfklasjkfjakl</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="" alt="">
|
||||
<span>sdasjdkasfklasjkfjakl</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="" alt="">
|
||||
<span>sdasjdkasfklasjkfjakl</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="button">
|
||||
<div class="modify">修改该视频</div>
|
||||
<div class="del">删除该视频</div>
|
||||
</div>
|
||||
<div class="cont">
|
||||
<div class="title">视频数据</div>
|
||||
<div class="info">
|
||||
<div class="item">
|
||||
<img src="@/static/images/livewatch.png" alt="" />
|
||||
<span> 上传时间： </span>
|
||||
{{date}}
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="@/static/images/watch.png" alt="" />
|
||||
<span>播放量</span>
|
||||
{{watch}}
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="@/static/images/share.png" alt="" />
|
||||
<span>转发量</span>
|
||||
{{share}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<div class="modify">修改该视频</div>
|
||||
<div class="del">删除该视频</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.cont{
|
||||
width: 316px;
|
||||
height: 563px;
|
||||
background-color: #fff;
|
||||
border-radius: 17px;
|
||||
padding: 0 28px;
|
||||
position: relative;
|
||||
.title{
|
||||
padding: 23px 0 11px 0;
|
||||
font-size: 13px;
|
||||
color: #111;
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #eee;
|
||||
.cont {
|
||||
width: 316px;
|
||||
height: 563px;
|
||||
background-color: #fff;
|
||||
border-radius: 17px;
|
||||
padding: 0 28px;
|
||||
position: relative;
|
||||
.title {
|
||||
padding: 23px 0 11px 0;
|
||||
font-size: 13px;
|
||||
color: #111;
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.info {
|
||||
.item {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
margin-top: 23px;
|
||||
> img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #0f0;
|
||||
}
|
||||
> span {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
.item{
|
||||
display: flex;
|
||||
align-content: center;
|
||||
margin-top: 23px;
|
||||
>img{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #0f0;
|
||||
}
|
||||
>span{
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button {
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
bottom: 28px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
width: 114px;
|
||||
height: 23px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
}
|
||||
.button{
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
bottom: 28px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
width: 114px;
|
||||
height: 23px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
}
|
||||
.modify{
|
||||
background-color: #08AE98;
|
||||
}
|
||||
.del{
|
||||
background-color: #D12C2E;
|
||||
}
|
||||
.modify {
|
||||
background-color: #08ae98;
|
||||
}
|
||||
.del {
|
||||
background-color: #d12c2e;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
})
|
||||
props:{
|
||||
date:{
|
||||
type:String
|
||||
},
|
||||
watch:{
|
||||
type:Number
|
||||
},
|
||||
share:{
|
||||
type:Number
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="video">
|
||||
<video src=""></video>
|
||||
|
||||
<video :src="url" :controls="true"></video>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@ -8,7 +9,8 @@
|
||||
width: 976px;
|
||||
height: 563px;
|
||||
border-radius: 17px;
|
||||
background-color: #0f0;
|
||||
background: white;
|
||||
// background-color: #0f0;
|
||||
overflow: hidden;
|
||||
>video{
|
||||
width: 100%;
|
||||
@ -20,6 +22,11 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props:{
|
||||
url:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
setup(){
|
||||
console.log(1)
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="videoinfo">
|
||||
<div class="info">
|
||||
<VideoPlay></VideoPlay>
|
||||
<VideoCont></VideoCont>
|
||||
<VideoPlay :url="result.fileurl"></VideoPlay>
|
||||
<VideoCont :date="result.created_at" :watch="result.watch" :share="result.share"></VideoCont>
|
||||
</div>
|
||||
<VideoReview class="review"></VideoReview>
|
||||
<VideoReview class="review" ></VideoReview>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import VideoPlay from "@/components/VideoPlay.vue"
|
||||
import VideoCont from "@/components/VideoCont.vue"
|
||||
import VideoReview from "@/components/VideoReview.vue"
|
||||
@ -37,8 +37,14 @@ export default defineComponent({
|
||||
setup(){
|
||||
// console.log(1)
|
||||
console.log(useRoute().query)
|
||||
const result= videodetail(useRoute().query.id)
|
||||
console.log(result,46546)
|
||||
const result=ref({})
|
||||
onMounted(async () => {
|
||||
result.value= await videodetail(useRoute().query.id)
|
||||
})
|
||||
|
||||
return {
|
||||
result
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user