视频详情

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

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
}
} }
/** /**
* *
*/ */

View File

@ -3,18 +3,20 @@
<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>
{{date}}
</div> </div>
<div class="item"> <div class="item">
<img src="" alt=""> <img src="@/static/images/watch.png" alt="" />
<span>sdasjdkasfklasjkfjakl</span> <span>播放量</span>
{{watch}}
</div> </div>
<div class="item"> <div class="item">
<img src="" alt=""> <img src="@/static/images/share.png" alt="" />
<span>sdasjdkasfklasjkfjakl</span> <span>转发量</span>
{{share}}
</div> </div>
</div> </div>
<div class="button"> <div class="button">
<div class="modify">修改该视频</div> <div class="modify">修改该视频</div>
@ -23,44 +25,44 @@
</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{ .info {
.item{ .item {
display: flex; display: flex;
align-content: center; align-content: center;
margin-top: 23px; margin-top: 23px;
>img{ > img {
width: 24px; width: 24px;
height: 24px; height: 24px;
background-color: #0f0; background-color: #0f0;
} }
>span{ > span {
font-size: 11px; font-size: 11px;
color: #666; color: #666;
margin-left: 10px; margin-left: 10px;
} }
} }
} }
.button{ .button {
position: absolute; position: absolute;
width: 260px; width: 260px;
bottom: 28px; bottom: 28px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
>div{ > div {
width: 114px; width: 114px;
height: 23px; height: 23px;
border-radius: 3px; border-radius: 3px;
@ -69,19 +71,29 @@
line-height: 23px; line-height: 23px;
text-align: center; text-align: center;
} }
.modify{ .modify {
background-color: #08AE98; background-color: #08ae98;
} }
.del{ .del {
background-color: #D12C2E; 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>

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)
} }

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
}
} }
}) })