Skip to content

M
mould-vuecli3
Commit c2acaa84 authored by yimj's avatar yimj
Browse files
Options

提交代码

parent 57dce2db
Hide whitespace changes
Inline Side-by-side
Showing with 356 additions and 245 deletions
src/components/videoConverter/taskComplete.vue 0 → 100644
View file @ c2acaa84
<template>
<div class="taskComplete"></div>
</template>
<script>
export default {
name: 'TaskComplete',
components: {},
props: {},
data() {
return {}
},
computed: {},
watch: {},
methods: {}
}
</script>
<style scoped lang="scss">
.taskComplete {
width: 100%;
height: 100%;
background-color: #fff;
border: 0px solid black;
margin: 0px;
}
</style>
src/components/videoConverter/taskEdit.vue 0 → 100644
View file @ c2acaa84
<template>
<div class="taskEdit">
<ul>
<li
v-for="(item, index) in taskList"
:key="index"
>
<div class="info">
<div class="cove">
视频封面
</div>
<div>
<div>{{ item.name }}.mp4</div>
<div>时长:{{ item.duration }}</div>
</div>
</div>
<div class="operationPanel">
<div
v-show="item.state == 0"
class="wait"
>
<div>输出格式</div>
<div class="selectionFormat">
mp4
</div>
<div
class="delete"
@click="clearTask(item)"
>
删除
</div>
</div>
<div
v-show="item.state == 1"
class="active"
>
<div class="progress">
<div>转换中{{ item.progress }}%</div>
<div class="slide">
<div></div>
</div>
</div>
<div
class="stop"
@click="stopTask(item)"
>
取消
</div>
</div>
</div>
</li>
</ul>
<div class="editBar">
<div
class="addVideo"
@click="addVideo"
>
添加视频
</div>
<div
class="clearList"
@click="clearAllTasks"
>
清空列表
</div>
<div class="clearWatermark">
去除水印
</div>
</div>
<div
class="startAll"
@click="startAllTasks"
>
开始转换
</div>
</div>
</template>
<script>
import { start, stop, clear, checkStatus } from './webApi'
export default {
name: 'TaskEdit',
components: {},
props: {},
data() {
return {
taskList: []
}
},
computed: {},
watch: {},
created() {
for (let i = 1; i < 10; i++) {
this.taskList.push({
cover: '',
name: '视频片段' + i,
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
}
},
methods: {
async startTask(item) {
let result = await start()
if (result) {
item.state = 1
} else {
item.state = 2
}
},
async stopTask(item) {
let result = await stop()
if (result) {
item.state = 0
}
},
async clearTask(item) {
let result = await clear()
if (result) {
let index = this.taskList.indexOf(item)
if (index > -1) {
this.taskList.splice(index, 1)
}
}
},
async checkTaskStatus() {
await checkStatus()
},
addVideo() {
this.taskList.push({
cover: '',
name: '视频片段' + (this.taskList.length + 1),
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
},
clearAllTasks() {
this.taskList = []
},
startAllTasks() {
this.taskList.forEach((task) => {
task.state = 1
})
}
}
}
</script>
<style scoped lang="scss">
.taskEdit {
width: 100%;
height: 100%;
background-color: #fff;
border: 0px solid black;
margin: 0px;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
overflow: hidden;
> ul {
width: 100%;
height: 100%;
border: 1px solid black;
flex-grow: 1;
overflow-y: auto;
> li {
padding: 5px 0;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
> li:nth-of-type(odd) {
background-color: gainsboro;
}
.info {
display: flex;
align-items: center;
.cove {
width: 100px;
height: 40px;
background-color: #ccc;
line-height: 40px;
margin-right: 10px;
}
}
.operationPanel {
width: 300px;
height: 100%;
.wait {
height: 100%;
display: flex;
align-items: center;
.selectionFormat {
height: 30px;
width: 100px;
line-height: 30px;
border: 1px solid black;
margin-left: 20px;
}
.delete {
width: 60px;
height: 30px;
line-height: 30px;
background-color: black;
color: #fff;
margin-left: 20px;
}
}
.active {
height: 100%;
width: 300px;
display: flex;
align-items: center;
.progress {
}
.slide {
width: 200px;
height: 5px;
background: gray;
> div {
width: 120px;
height: 100%;
background-color: black;
}
}
.stop {
width: 60px;
height: 30px;
line-height: 30px;
background-color: black;
color: #fff;
margin-left: 20px;
}
}
}
}
.editBar {
position: relative;
height: 30px;
width: 100%;
margin: 20px 0;
.addVideo {
position: absolute;
left: 0;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
.clearList {
position: absolute;
left: 100px;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
.clearWatermark {
position: absolute;
right: 0;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
}
.startAll {
height: 30px;
width: 100px;
background-color: black;
color: #fff;
line-height: 30px;
}
}
</style>
src/components/videoConverter/webApi.js 0 → 100644
View file @ c2acaa84
async function start() {
let result = await new Promise((resolve) => {
setTimeout(() => {
resolve(true)
}, 1000)
})
return result
}
async function stop() {
let result = await new Promise((resolve) => {
setTimeout(() => {
resolve(true)
}, 500)
})
return result
}
async function clear() {
let result = await new Promise((resolve) => {
setTimeout(() => {
resolve(true)
}, 500)
})
return result
}
async function checkStatus(fakeValue) {
let result = await new Promise((resolve) => {
setTimeout(() => {
resolve(fakeValue++)
}, 500)
})
return result
}
export { start, stop, clear, checkStatus }
src/views/videoConverter.vue
View file @ c2acaa84
<template> <template>
<div class="videoConverter"> <div class="videoConverter">
<ul> <taskEdit></taskEdit>
<li
v-for="(item, index) in taskList"
:key="index"
>
<div class="info">
<div class="cove">
视频封面
</div>
<div>
<div>{{ item.name }}.mp4</div>
<div>时长:{{ item.duration }}</div>
</div>
</div>
<div class="operationPanel">
<div
v-show="item.state == 0"
class="wait"
>
<div>输出格式</div>
<div class="selectionFormat">
mp4
</div>
<div
class="delete"
@click="clearTask(item)"
>
删除
</div>
</div>
<div
v-show="item.state == 1"
class="active"
>
<div class="progress">
<div>转换中{{ item.progress }}%</div>
<div class="slide">
<div></div>
</div>
</div>
<div
class="stop"
@click="stopTask(item)"
>
取消
</div>
</div>
</div>
</li>
</ul>
<div class="editBar">
<div
class="addVideo"
@click="addVideo"
>
添加视频
</div>
<div
class="clearList"
@click="clearAllTasks"
>
清空列表
</div>
<div class="clearWatermark">
去除水印
</div>
</div>
<div
class="startAll"
@click="startAllTasks"
>
开始转换
</div>
</div> </div>
</template> </template>
<script> <script>
import taskEdit from '@/components/videoConverter/taskEdit'
export default { export default {
name: 'VideoConverter', name: 'VideoConverter',
components: {}, components: { taskEdit },
props: {}, props: {},
data() { data() {
return { return {}
taskList: []
}
}, },
computed: {}, computed: {},
watch: {}, watch: {},
created() { created() {},
for (let i = 1; i < 10; i++) { methods: {}
this.taskList.push({
cover: '',
name: '视频片段' + i,
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
}
},
methods: {
addVideo() {
this.taskList.push({
cover: '',
name: '视频片段' + (this.taskList.length + 1),
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
},
stopTask(item) {
item.state = 0
},
clearTask(item) {
let index = this.taskList.indexOf(item)
if (index > -1) {
this.taskList.splice(index, 1)
}
},
clearAllTasks() {
this.taskList = []
},
startAllTasks() {
this.taskList.forEach((task) => {
task.state = 1
})
}
}
} }
</script> </script>
...@@ -142,129 +27,5 @@ export default { ...@@ -142,129 +27,5 @@ export default {
background-color: #fff; background-color: #fff;
border: 0px solid black; border: 0px solid black;
margin: 0px; margin: 0px;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
overflow: hidden;
> ul {
width: 100%;
height: 100%;
border: 1px solid black;
flex-grow: 1;
overflow-y: auto;
> li {
padding: 5px 0;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
> li:nth-of-type(odd) {
background-color: gainsboro;
}
.info {
display: flex;
align-items: center;
.cove {
width: 100px;
height: 40px;
background-color: #ccc;
line-height: 40px;
margin-right: 10px;
}
}
.operationPanel {
width: 300px;
height: 100%;
.wait {
height: 100%;
display: flex;
align-items: center;
.selectionFormat {
height: 30px;
width: 100px;
line-height: 30px;
border: 1px solid black;
margin-left: 20px;
}
.delete {
width: 60px;
height: 30px;
line-height: 30px;
background-color: black;
color: #fff;
margin-left: 20px;
}
}
.active {
height: 100%;
width: 300px;
display: flex;
align-items: center;
.progress {
}
.slide {
width: 200px;
height: 5px;
background: gray;
> div {
width: 120px;
height: 100%;
background-color: black;
}
}
.stop {
width: 60px;
height: 30px;
line-height: 30px;
background-color: black;
color: #fff;
margin-left: 20px;
}
}
}
}
.editBar {
position: relative;
height: 30px;
width: 100%;
margin: 20px 0;
.addVideo {
position: absolute;
left: 0;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
.clearList {
position: absolute;
left: 100px;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
.clearWatermark {
position: absolute;
right: 0;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
}
.startAll {
height: 30px;
width: 100px;
background-color: black;
color: #fff;
line-height: 30px;
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment