Merge pull request 'zj' (#45) from zj into master

Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/45
This commit is contained in:
asd 2020-10-14 18:53:55 +08:00
commit 397e7b8f36
5 changed files with 220 additions and 99 deletions

View File

@ -3,7 +3,7 @@ import store from '@/store';
import { LiveList, LoginData, UserInfo, VideoInfo } from '@/types'; import { LiveList, LoginData, UserInfo, VideoInfo } from '@/types';
import { saveValue } from '@/utils/common'; import { saveValue } from '@/utils/common';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { get, post, setToken } from './base' import { del, get, post, setToken } from './base'
/** /**
@ -178,6 +178,9 @@ export async function liveadd(data:any) {
*/ */
export async function videoadd(data:any) { export async function videoadd(data:any) {
const res=await post<Liveaddrule>('video',data) const res=await post<Liveaddrule>('video',data)
if(res.code==0){
message.success("发布成功")
}
} }
/** /**
@ -197,19 +200,56 @@ 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,ifupdate?:number) {
const res=await get<VideoDetail>('video/'+data) const res=await get<VideoDetail>('video/'+data)
return res.data if(ifupdate){
console.log(111)
return{
title: res.data.title,
img: res.data.img,
fileid: res.data.fileid,
fileurl: res.data.fileurl,
fileduration: res.data.fileduration,
desc:res.data.desc,
video:[res.data.fileurl],
}
}else{
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
}
}
} }
/** /**
* *
*/ */
export async function videodel(data:any) { export async function videodel(data:any) {
const res = await post<Liveaddrule>('live',data); const res = await del<Liveaddrule>('video/'+data);
if(res.code==0){
message.success("删除成功")
}
console.log(res) console.log(res)
} }

View File

@ -1,87 +1,147 @@
<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> <span>{{date}}</span>
<div class="item">
<img src="" alt="">
<span>sdasjdkasfklasjkfjakl</span>
</div>
<div class="item">
<img src="" alt="">
<span>sdasjdkasfklasjkfjakl</span>
</div>
</div>
<div class="item">
<img src="@/static/images/watch.png" alt="" />
<span>播放量</span>
<span> {{watch}}</span>
</div>
<div class="item">
<img src="@/static/images/share.png" alt="" />
<span>转发量</span>
<span>{{share}}</span>
</div>
<div class="item item1" v-if="status==0">
<span>状态</span>
<span class="status">正在审核中情耐心等待</span>
</div> </div>
<div class="button"> <div class="item item1" v-if="status==2">
<div class="modify">修改该视频</div> <span>状态</span>
<div class="del">删除该视频</div> <span class="status1">审核未通过</span>
</div> </div>
<div class="item item1" v-if="status==1">
<span style="flex-shrink:0">原因</span>
<span class="status">您的视频中含有大量敏感词汇请修改后再次上传感谢您对Beelink的技术支持 </span>
</div>
</div> </div>
<div class="button">
<div class="modify" @click="update(videoid)">修改该视频</div>
<div class="del" @click="drop(videoid)">删除该视频</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 {
.item1{
position: relative;
left:-12px
}
.status{
color: #07AD97!important;
// font-weight: bold;
}
.status1{
color: #D12C2D!important;
}
.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 { videodel } from '@/api';
import router from '@/router';
import { defineComponent } from "vue";
import { useRoute } from 'vue-router';
export default defineComponent({ export default defineComponent({
props:{
}) date:{
type:String
},
watch:{
type:Number
},
share:{
type:Number
},
status:{
type:Number
},
videoid:{
type:Number
}
},
setup(){
console.log(1)
function drop(e: number){
console.log(e)
videodel(e)
}
function update(e: number) {
router.push("/mine/video?id="+e)
}
return{
drop,
update
}
}
});
</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

@ -103,13 +103,14 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, Ref, ref, toRaw } from "vue"; import { defineComponent, onMounted, reactive, Ref, ref, toRaw } from "vue";
import { PlaySquareOutlined, PlusOutlined } from "@ant-design/icons-vue"; import { PlaySquareOutlined, PlusOutlined } from "@ant-design/icons-vue";
import NavBottom from "@/components/NavBottom.vue"; import NavBottom from "@/components/NavBottom.vue";
import { previewCover } from "@/utils/common"; import { previewCover } from "@/utils/common";
import { FromSend, ImgInfo, VideoInfo } from "@/types"; import { FromSend, ImgInfo, VideoInfo } from "@/types";
import { uploadflie } from "@/utils/vod"; import { uploadflie } from "@/utils/vod";
import { videoadd } from "@/api"; import { videoadd, videodetail } from "@/api";
import { useRoute } from 'vue-router';
export default defineComponent({ export default defineComponent({
name: "ReleaseWebcast", name: "ReleaseWebcast",
@ -125,7 +126,7 @@ export default defineComponent({
const fileList: Array<FileItem> = []; const fileList: Array<FileItem> = [];
// //
const form = reactive({ const form = ref<any>({
title: "", title: "",
img: "", img: "",
fileid: "", fileid: "",
@ -134,6 +135,14 @@ export default defineComponent({
desc: "", desc: "",
video:[""], video:[""],
}); });
onMounted(async () => {
if(useRoute().query.id){
console.log(useRoute().query.id)
form.value = await videodetail(useRoute().query.id,1)
console.log(form.value,"fornm")
}
})
// //
const viewCover: Ref<boolean> = ref(false), const viewCover: Ref<boolean> = ref(false),
previewImage: Ref<string> = ref(""); previewImage: Ref<string> = ref("");
@ -169,9 +178,9 @@ export default defineComponent({
* @param index 删除文件的索引 * @param index 删除文件的索引
*/ */
function removeFile(index: number): void { function removeFile(index: number): void {
const newFileList = form.video.slice(); const newFileList = form.value.video.slice();
newFileList.splice(index, 1); newFileList.splice(index, 1);
form.video = newFileList; form.value.video = newFileList;
} }
/** /**
@ -191,7 +200,7 @@ export default defineComponent({
uploadpicprogress.value = info.percent.toFixed(2) * 100; uploadpicprogress.value = info.percent.toFixed(2) * 100;
}); });
console.log(res); console.log(res);
form.img = res.video.url; form.value.img = res.video.url;
} }
/** /**
@ -200,12 +209,12 @@ export default defineComponent({
const uploadprogress: Ref<number> = ref(0); const uploadprogress: Ref<number> = ref(0);
async function uploads(file: AntUpload) { async function uploads(file: AntUpload) {
uploadprogress.value=0 uploadprogress.value=0
form.video=[""] form.value.video=[""]
console.log(file); console.log(file);
videofile.value = file.file; videofile.value = file.file;
videos.value[0].addEventListener("durationchange", () => { videos.value[0].addEventListener("durationchange", () => {
console.log(videos.value[0].duration); console.log(videos.value[0].duration);
form.fileduration = videos.value[0].duration; form.value.fileduration = videos.value[0].duration;
}); });
let res = await uploadflie(file.file, (info: any) => { let res = await uploadflie(file.file, (info: any) => {
console.log(info); console.log(info);
@ -213,9 +222,9 @@ export default defineComponent({
}); });
console.log(res); console.log(res);
form.fileid = res.fileId; form.value.fileid = res.fileId;
form.fileurl = res.video.url; form.value.fileurl = res.video.url;
form.video[0]=res.video.url form.value.video[0]=res.video.url
} }
/** /**
@ -223,8 +232,8 @@ export default defineComponent({
*/ */
const onSubmit = async (e: FromSend) => { const onSubmit = async (e: FromSend) => {
e.preventDefault(); e.preventDefault();
console.log(toRaw(form), 111); console.log(toRaw(form.value), 111);
videoadd(toRaw(form)); // videoadd(toRaw(form));
}; };
return { return {

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 :videoid="result.videoid" :date="result.created_at" :watch="result.watch" :share="result.share" :status="result.status"></VideoCont>
</div> </div>
<VideoReview class="review"></VideoReview> <VideoReview class="review" ></VideoReview>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -21,11 +21,10 @@
} }
</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";
import router from '@/router';
import { videodetail } from '@/api'; import { videodetail } from '@/api';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
export default defineComponent({ export default defineComponent({
@ -37,8 +36,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
}
} }
}) })