theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

视频详情

Browse Source
This commit is contained in:
asd 2020-10-14 16:27:24 +08:00
parent 8703d9b303
commit f9066bcdf1
4 changed files with 128 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/index.ts
View File

@ -197,14 +197,34 @@ interface VideoDetail{
deleted_at: null; deleted_at: null;
created_at: string; created_at: string;
updated_at: string; updated_at: string;
share:number,
watch:number
} }
export async function videodetail(data?:any) { export async function videodetail(data?:any) {
const res=await get<VideoDetail>('video/'+data) 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
}
} }
/** /**
* 删除视频 * 删除视频
*/ */

160
src/components/VideoCont.vue
View File

@ -1,87 +1,99 @@
<template> <template>
<div class="cont"> <div class="cont">
<div class="title">视频数据</div> <div class="title">视频数据</div>
<div class="info"> <div class="info">
<div class="item"> <div class="item">
<img src="" alt=""> <img src="@/static/images/livewatch.png" alt="" />
<span>sdasjdkasfklasjkfjakl</span> <span> 上传时间： </span>
</div> {{date}}
<div class="item"> </div>
<img src="" alt=""> <div class="item">
<span>sdasjdkasfklasjkfjakl</span> <img src="@/static/images/watch.png" alt="" />
</div> <span>播放量</span>
<div class="item"> {{watch}}
<img src="" alt=""> </div>
<span>sdasjdkasfklasjkfjakl</span> <div class="item">
</div> <img src="@/static/images/share.png" alt="" />
<span>转发量</span>
</div> {{share}}
<div class="button"> </div>
<div class="modify">修改该视频</div>
<div class="del">删除该视频</div>
</div>
</div> </div>
<div class="button">
<div class="modify">修改该视频</div>
<div class="del">删除该视频</div>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.cont{ .cont {
width: 316px; width: 316px;
height: 563px; height: 563px;
background-color: #fff; background-color: #fff;
border-radius: 17px; border-radius: 17px;
padding: 0 28px; padding: 0 28px;
position: relative; position: relative;
.title{ .title {
padding: 23px 0 11px 0; padding: 23px 0 11px 0;
font-size: 13px; font-size: 13px;
color: #111; color: #111;
line-height: 1; line-height: 1;
border-bottom: 1px solid #eee; 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{ .button {
display: flex; position: absolute;
align-content: center; width: 260px;
margin-top: 23px; bottom: 28px;
>img{ display: flex;
width: 24px; justify-content: space-between;
height: 24px; > div {
background-color: #0f0; width: 114px;
} height: 23px;
>span{ border-radius: 3px;
font-size: 11px; font-size: 10px;
color: #666; color: #fff;
margin-left: 10px; line-height: 23px;
} text-align: center;
}
} }
.button{ .modify {
position: absolute; background-color: #08ae98;
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;
}
} }
.del {
background-color: #d12c2e;
}
}
} }
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
props:{
}) date:{
type:String
},
watch:{
type:Number
},
share:{
type:Number
}
}
});
</script> </script>

11
src/components/VideoPlay.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="video"> <div class="video">
<video src=""></video>
<video :src="url" :controls="true"></video>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -8,7 +9,8 @@
width: 976px; width: 976px;
height: 563px; height: 563px;
border-radius: 17px; border-radius: 17px;
background-color: #0f0; background: white;
// background-color: #0f0;
overflow: hidden; overflow: hidden;
>video{ >video{
width: 100%; width: 100%;
@ -20,6 +22,11 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
props:{
url:{
type:String
}
},
setup(){ setup(){
console.log(1) console.log(1)
} }

18
src/views/regime/VideoInfo.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="videoinfo"> <div class="videoinfo">
<div class="info"> <div class="info">
<VideoPlay></VideoPlay> <VideoPlay :url="result.fileurl"></VideoPlay>
<VideoCont></VideoCont> <VideoCont :date="result.created_at" :watch="result.watch" :share="result.share"></VideoCont>
</div> </div>
<VideoReview class="review"></VideoReview> <VideoReview class="review" ></VideoReview>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -21,7 +21,7 @@
} }
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, onMounted, ref } from 'vue';
import VideoPlay from "@/components/VideoPlay.vue" import VideoPlay from "@/components/VideoPlay.vue"
import VideoCont from "@/components/VideoCont.vue" import VideoCont from "@/components/VideoCont.vue"
import VideoReview from "@/components/VideoReview.vue" import VideoReview from "@/components/VideoReview.vue"
@ -37,8 +37,14 @@ export default defineComponent({
setup(){ setup(){
// console.log(1) // console.log(1)
console.log(useRoute().query) console.log(useRoute().query)
const result= videodetail(useRoute().query.id) const result=ref({})
console.log(result,46546) onMounted(async () => {
result.value= await videodetail(useRoute().query.id)
})
return {
result
}
} }
}) })