Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
M
mould-vuecli3
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lhfe
mould-vuecli3
Commits
c5de000f
Commit
c5de000f
authored
Aug 28, 2020
by
lipengcheng
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
x
parent
396049ae
Show whitespace changes
Inline
Side-by-side
Showing
38 changed files
with
1204 additions
and
1283 deletions
+1204
-1283
.editorconfig
.editorconfig
+2
-2
.eslintrc.js
.eslintrc.js
+64
-69
.prettierrc.js
.prettierrc.js
+4
-4
baseUrl.js
config/baseUrl.js
+9
-9
App.vue
src/App.vue
+39
-39
index.vue
src/components/header/index.vue
+28
-31
tipPanel.vue
src/components/header/tipPanel.vue
+9
-9
tutorialContent.vue
src/components/misc/tutorialContent.vue
+6
-6
uploader.vue
src/components/misc/uploader.vue
+32
-39
completeContent.vue
src/components/modal/completeContent.vue
+8
-8
completeModal.vue
src/components/modal/completeModal.vue
+12
-15
modalLayer.vue
src/components/modal/modalLayer.vue
+20
-20
selectContent.vue
src/components/modal/selectContent.vue
+28
-36
selectModal.vue
src/components/modal/selectModal.vue
+12
-15
index.vue
src/components/rightPanel/index.vue
+12
-12
screenshotPanel.vue
src/components/rightPanel/screenshotPanel.vue
+9
-9
index.vue
src/components/sideNav/index.vue
+37
-37
taskComplete.vue
src/components/videoConverter/taskComplete.vue
+16
-16
taskEdit.vue
src/components/videoConverter/taskEdit.vue
+228
-252
webApi.js
src/components/videoConverter/webApi.js
+25
-25
videoChange.vue
src/components/videoCutter/videoChange.vue
+16
-19
videoControl.vue
src/components/videoCutter/videoControl.vue
+52
-55
videoPlayer.vue
src/components/videoCutter/videoPlayer.vue
+62
-65
videoTimeline.vue
src/components/videoCutter/videoTimeline.vue
+118
-129
main.js
src/main.js
+19
-19
registerServiceWorker.js
src/registerServiceWorker.js
+24
-24
index.js
src/router/index.js
+41
-41
global.js
src/store/global.js
+11
-11
index.js
src/store/index.js
+12
-12
moduleA.js
src/store/modules/moduleA.js
+12
-12
uploader.js
src/store/modules/uploader.js
+16
-16
index.vue
src/test/index.vue
+17
-0
About.vue
src/views/About.vue
+3
-3
bao2.vue
src/views/bao2.vue
+9
-9
bao3.vue
src/views/bao3.vue
+10
-10
screenshot.vue
src/views/screenshot.vue
+74
-85
videoConverter.vue
src/views/videoConverter.vue
+20
-20
videoCutter.vue
src/views/videoCutter.vue
+88
-100
No files found.
.editorconfig
View file @
c5de000f
...
@@ -11,7 +11,7 @@ charset = utf-8
...
@@ -11,7 +11,7 @@ charset = utf-8
indent_style = space
indent_style = space
#缩进数量可选整数值2 or 4,或者tab
#缩进数量可选整数值2 or 4,或者tab
indent_size =
2
indent_size =
4
#换行符的格式 换行符,lf、cr和crlf
#换行符的格式 换行符,lf、cr和crlf
end_of_line = lf
end_of_line = lf
...
@@ -23,4 +23,4 @@ insert_final_newline = true
...
@@ -23,4 +23,4 @@ insert_final_newline = true
trim_trailing_whitespace = true
trim_trailing_whitespace = true
[*.scss]
[*.scss]
indent_size =
2
indent_size =
4
.eslintrc.js
View file @
c5de000f
...
@@ -10,16 +10,11 @@ module.exports = {
...
@@ -10,16 +10,11 @@ module.exports = {
// 3: ESLint + Standard config
// 3: ESLint + Standard config
// extends: [ 'plugin:vue/essential', '@vue/airbnb',],
// extends: [ 'plugin:vue/essential', '@vue/airbnb',],
// ESLint + Prettier
// ESLint + Prettier
extends
:
[
'plugin:vue/recommended'
,
'eslint:recommended
'
],
extends
:
[
'plugin:vue/recommended'
,
'eslint:recommended'
,
'@vue/prettier
'
],
plugins
:
[],
plugins
:
[],
parserOptions
:
{
parserOptions
:
{
parser
:
'babel-eslint'
parser
:
'babel-eslint'
},
},
globals
:
{
axios
:
false
,
//全局使用axios
__PROJECTPATH__
:
false
,
__GATEWAYPATH__
:
false
},
/**add your custom rules here
/**add your custom rules here
* 下面这些rules是用来设置从插件来的规范代码的规则,使用必须去掉前缀eslint-plugin-
* 下面这些rules是用来设置从插件来的规范代码的规则,使用必须去掉前缀eslint-plugin-
* 主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
* 主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
...
@@ -32,40 +27,40 @@ module.exports = {
...
@@ -32,40 +27,40 @@ module.exports = {
// "prettier/prettier": "warn",
// "prettier/prettier": "warn",
// "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
// "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
'no-console'
:
[
0
,
{
llow
:
[
'warn'
,
'error'
]
}],
'no-console'
:
[
0
,
{
llow
:
[
'warn'
,
'error'
]
}],
'no-debugger'
:
process
.
env
.
NODE_ENV
===
'production'
?
'warn'
:
'off'
,
'no-debugger'
:
process
.
env
.
NODE_ENV
===
'production'
?
'warn'
:
'off'
indent
:
[
//
indent: [
'error'
,
//
'error',
2
,
//
2,
{
//
{
SwitchCase
:
1
,
//
SwitchCase: 1,
flatTernaryExpressions
:
true
//
flatTernaryExpressions: true
}
//
}
],
//
],
'comma-dangle'
:
[
'error'
,
'never'
],
//
'comma-dangle': ['error', 'never'],
quotes
:
[
'error'
,
'single'
],
//
quotes: ['error', 'single'],
semi
:
[
'error'
,
'always'
],
//
semi: ['error', 'always'],
'vue/html-indent'
:
[
//
'vue/html-indent': [
'error'
,
//
'error',
2
,
//
2,
{
//
{
attribute
:
1
,
//
attribute: 1,
baseIndent
:
1
,
//
baseIndent: 1,
closeBracket
:
0
,
//
closeBracket: 0,
alignAttributesVertically
:
true
,
//
alignAttributesVertically: true,
ignores
:
[]
//
ignores: []
}
//
}
],
//
],
'vue/html-self-closing'
:
[
//
'vue/html-self-closing': [
'error'
,
//
'error',
{
//
{
html
:
{
//
html: {
void
:
'never'
,
//
void: 'never',
normal
:
'never'
,
//
normal: 'never',
component
:
'never'
//
component: 'never'
},
//
},
svg
:
'never'
,
//
svg: 'never',
math
:
'always'
//
math: 'always'
}
//
}
]
//
]
}
}
}
}
.prettierrc.js
View file @
c5de000f
module
.
exports
=
{
module
.
exports
=
{
// 不使用prettier格式化的文件填写在项目的.prettierignore文件中
// 不使用prettier格式化的文件填写在项目的.prettierignore文件中
ignorePath
:
".prettierignore"
,
//
ignorePath: ".prettierignore",
// 与eslint集成(让prettier使用eslint的代码格式进行校验)
// 与eslint集成(让prettier使用eslint的代码格式进行校验)
eslintIntegration
:
true
,
//
eslintIntegration: true,
// 换行长度
// 换行长度
printWidth
:
150
,
printWidth
:
150
,
// tab缩进大小,默认为2
// tab缩进大小,默认为2
tabWidth
:
2
,
tabWidth
:
4
,
// 使用tab缩进,默认false
// 使用tab缩进,默认false
useTabs
:
false
,
useTabs
:
false
,
// 是否使用分号, 默认true
// 是否使用分号, 默认true
...
@@ -35,7 +35,7 @@ module.exports = {
...
@@ -35,7 +35,7 @@ module.exports = {
// always 总是有括号
// always 总是有括号
arrowParens
:
'always'
,
arrowParens
:
'always'
,
// 结尾是 \n \r \n\r auto
// 结尾是 \n \r \n\r auto
endOf
l
ine
:
"auto"
,
endOf
L
ine
:
"auto"
,
// 在jsx中把'>' 是否单独放一行
// 在jsx中把'>' 是否单独放一行
jsxBracketSameLine
:
false
,
jsxBracketSameLine
:
false
,
}
}
...
...
config/baseUrl.js
View file @
c5de000f
src/App.vue
View file @
c5de000f
...
@@ -12,7 +12,7 @@
...
@@ -12,7 +12,7 @@
</
template
>
</
template
>
<
script
>
<
script
>
import
CommonHeader
from
'@/components/header/index.vue'
;
import
CommonHeader
from
'@/components/header/index.vue'
export
default
{
export
default
{
components
:
{
components
:
{
CommonHeader
,
CommonHeader
,
...
@@ -22,13 +22,13 @@ export default {
...
@@ -22,13 +22,13 @@ export default {
Uploader
:
()
=>
import
(
'@/components/misc/uploader.vue'
)
Uploader
:
()
=>
import
(
'@/components/misc/uploader.vue'
)
},
},
data
()
{
data
()
{
return
{};
return
{}
},
},
async
created
()
{
async
created
()
{
let
result
=
await
this
.
$http
.
get
(
'/webapi/home/banner?type=1&category=18'
);
let
result
=
await
this
.
$http
.
get
(
'/webapi/home/banner?type=1&category=18'
)
console
.
log
(
'result:'
,
result
);
console
.
log
(
'result:'
,
result
)
}
}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
...
...
src/components/header/index.vue
View file @
c5de000f
...
@@ -5,10 +5,7 @@
...
@@ -5,10 +5,7 @@
当前的宝
当前的宝
</div>
</div>
<tip-panel></tip-panel>
<tip-panel></tip-panel>
<div
<div
class=
"show-modal"
@
click=
"showModal"
>
class=
"show-modal"
@
click=
"showModal"
>
show-modal
show-modal
</div>
</div>
</div>
</div>
...
@@ -20,16 +17,16 @@ export default {
...
@@ -20,16 +17,16 @@ export default {
tipPanel
:
()
=>
import
(
'@/components/header/tipPanel.vue'
)
tipPanel
:
()
=>
import
(
'@/components/header/tipPanel.vue'
)
},
},
data
()
{
data
()
{
return
{};
return
{}
},
},
created
()
{},
created
()
{},
mounted
()
{},
mounted
()
{},
methods
:
{
methods
:
{
showModal
()
{
showModal
()
{
this
.
$modal
.
show
(
'selectModal'
);
this
.
$modal
.
show
(
'selectModal'
)
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/components/header/tipPanel.vue
View file @
c5de000f
...
@@ -7,11 +7,11 @@
...
@@ -7,11 +7,11 @@
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{};
return
{}
},
},
created
()
{},
created
()
{},
mounted
()
{}
mounted
()
{}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/components/misc/tutorialContent.vue
View file @
c5de000f
...
@@ -5,10 +5,10 @@
...
@@ -5,10 +5,10 @@
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{};
return
{}
},
},
methods
:
{}
methods
:
{}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
></
style
>
<
style
lang=
"scss"
scoped
></
style
>
src/components/misc/uploader.vue
View file @
c5de000f
<
template
>
<
template
>
<div>
<div>
<input
<input
id=
"video-input"
ref=
"videoInput"
type=
"file"
accept=
"video/mp4, video/NMP4"
@
change=
"onVideoInputChange"
@
click=
"onInputClick"
/>
id=
"video-input"
ref=
"videoInput"
type=
"file"
accept=
"video/mp4, video/NMP4"
@
change=
"onVideoInputChange"
@
click=
"onInputClick"
>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
import
{
mapActions
}
from
'vuex'
;
import
{
mapActions
}
from
'vuex'
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
videoInput
:
{}
videoInput
:
{}
};
}
},
},
mounted
()
{
mounted
()
{
this
.
videoInput
=
this
.
$refs
.
videoInput
;
this
.
videoInput
=
this
.
$refs
.
videoInput
},
},
methods
:
{
methods
:
{
...
mapActions
({
...
mapActions
({
upload
:
'uploader/upload'
upload
:
'uploader/upload'
}),
}),
onVideoInputChange
()
{
onVideoInputChange
()
{
let
file
=
this
.
videoInput
.
files
[
0
];
let
file
=
this
.
videoInput
.
files
[
0
]
console
.
log
(
'turbo: onVideoInputChange -> file'
,
file
);
console
.
log
(
'turbo: onVideoInputChange -> file'
,
file
)
},
},
onInputClick
()
{
onInputClick
()
{
const
vm
=
this
;
const
vm
=
this
window
.
addEventListener
(
'focus'
,
function
h
()
{
window
.
addEventListener
(
'focus'
,
function
h
()
{
vm
.
clearInputValue
(
vm
.
videoInput
);
vm
.
clearInputValue
(
vm
.
videoInput
)
console
.
log
(
'turbo: h -> this.videoInput'
,
vm
.
videoInput
);
console
.
log
(
'turbo: h -> this.videoInput'
,
vm
.
videoInput
)
window
.
removeEventListener
(
'focus'
,
h
);
window
.
removeEventListener
(
'focus'
,
h
)
});
})
},
},
clearInputValue
(
el
)
{
clearInputValue
(
el
)
{
if
(
el
)
{
if
(
el
)
{
el
.
value
=
''
;
el
.
value
=
''
}
}
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
></
style
>
<
style
lang=
"scss"
scoped
></
style
>
src/components/modal/completeContent.vue
View file @
c5de000f
...
@@ -7,10 +7,10 @@
...
@@ -7,10 +7,10 @@
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{};
return
{}
},
},
methods
:
{}
methods
:
{}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
></
style
>
<
style
lang=
"scss"
scoped
></
style
>
src/components/modal/completeModal.vue
View file @
c5de000f
<
template
>
<
template
>
<modal
<modal
name=
"completeModal"
:click-to-close=
"false"
>
name=
"completeModal"
:click-to-close=
"false"
>
<complete-content></complete-content>
<complete-content></complete-content>
</modal>
</modal>
</
template
>
</
template
>
<
script
>
<
script
>
import
CompleteContent
from
'./completeContent'
;
import
CompleteContent
from
'./completeContent'
export
default
{
export
default
{
components
:
{
components
:
{
CompleteContent
CompleteContent
},
},
data
()
{
data
()
{
return
{};
return
{}
},
},
methods
:
{}
methods
:
{}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
></
style
>
<
style
lang=
"scss"
scoped
></
style
>
src/components/modal/modalLayer.vue
View file @
c5de000f
...
@@ -6,18 +6,18 @@
...
@@ -6,18 +6,18 @@
</
template
>
</
template
>
<
script
>
<
script
>
import
CompleteModal
from
'@/components/modal/completeModal'
;
import
CompleteModal
from
'@/components/modal/completeModal'
import
SelectModal
from
'@/components/modal/selectModal'
;
import
SelectModal
from
'@/components/modal/selectModal'
export
default
{
export
default
{
components
:
{
components
:
{
CompleteModal
,
CompleteModal
,
SelectModal
SelectModal
},
},
data
()
{
data
()
{
return
{};
return
{}
},
},
methods
:
{}
methods
:
{}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
...
...
src/components/modal/selectContent.vue
View file @
c5de000f
<
template
>
<
template
>
<div>
<div>
<div
<div
class=
"close-btn"
@
click=
"close"
>
class=
"close-btn"
@
click=
"close"
>
close
close
</div>
</div>
<div>
选择视频
</div>
<div>
选择视频
</div>
<ul>
<ul>
<li
<li
v-for=
"(item, i) in items"
:key=
"i"
class=
"item"
@
click=
"itemClick(
{ item, index: i })">
v-for=
"(item, i) in items"
:key=
"i"
class=
"item"
@
click=
"itemClick(
{ item, index: i })"
>
{{
item
.
text
}}
{{
item
.
text
}}
</li>
</li>
</ul>
</ul>
...
@@ -25,23 +17,23 @@ export default {
...
@@ -25,23 +17,23 @@ export default {
data
()
{
data
()
{
return
{
return
{
items
:
[{
text
:
'本地上传'
,
type
:
'upload'
},
{
text
:
'视频库'
},
{
text
:
'我的作品'
}]
items
:
[{
text
:
'本地上传'
,
type
:
'upload'
},
{
text
:
'视频库'
},
{
text
:
'我的作品'
}]
};
}
},
},
methods
:
{
methods
:
{
close
()
{
close
()
{
this
.
$modal
.
hide
(
'selectModal'
);
this
.
$modal
.
hide
(
'selectModal'
)
},
},
triggerUpload
()
{
triggerUpload
()
{
const
el
=
document
.
getElementById
(
'video-input'
);
const
el
=
document
.
getElementById
(
'video-input'
)
el
&&
el
.
click
();
el
&&
el
.
click
()
},
},
itemClick
({
item
=
{}
}
=
{})
{
itemClick
({
item
=
{}
}
=
{})
{
if
(
item
.
type
===
'upload'
)
{
if
(
item
.
type
===
'upload'
)
{
this
.
triggerUpload
();
this
.
triggerUpload
()
}
}
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
></
style
>
<
style
lang=
"scss"
scoped
></
style
>
src/components/modal/selectModal.vue
View file @
c5de000f
<
template
>
<
template
>
<modal
<modal
name=
"selectModal"
:click-to-close=
"false"
>
name=
"selectModal"
:click-to-close=
"false"
>
<select-content></select-content>
<select-content></select-content>
</modal>
</modal>
</
template
>
</
template
>
<
script
>
<
script
>
import
SelectContent
from
'./selectContent'
;
import
SelectContent
from
'./selectContent'
export
default
{
export
default
{
components
:
{
components
:
{
SelectContent
SelectContent
},
},
data
()
{
data
()
{
return
{};
return
{}
},
},
methods
:
{}
methods
:
{}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
></
style
>
<
style
lang=
"scss"
scoped
></
style
>
src/components/rightPanel/index.vue
View file @
c5de000f
...
@@ -7,11 +7,11 @@
...
@@ -7,11 +7,11 @@
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{};
return
{}
},
},
created
()
{},
created
()
{},
mounted
()
{}
mounted
()
{}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/components/rightPanel/screenshotPanel.vue
View file @
c5de000f
...
@@ -7,11 +7,11 @@
...
@@ -7,11 +7,11 @@
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{};
return
{}
},
},
created
()
{},
created
()
{},
mounted
()
{}
mounted
()
{}
}
;
}
</
script
>
</
script
>
<
style
></
style
>
<
style
></
style
>
src/components/sideNav/index.vue
View file @
c5de000f
...
@@ -21,11 +21,11 @@
...
@@ -21,11 +21,11 @@
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{};
return
{}
},
},
created
()
{},
created
()
{},
mounted
()
{}
mounted
()
{}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/components/videoConverter/taskComplete.vue
View file @
c5de000f
...
@@ -8,12 +8,12 @@ export default {
...
@@ -8,12 +8,12 @@ export default {
components
:
{},
components
:
{},
props
:
{},
props
:
{},
data
()
{
data
()
{
return
{};
return
{}
},
},
computed
:
{},
computed
:
{},
watch
:
{},
watch
:
{},
methods
:
{}
methods
:
{}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/components/videoConverter/taskEdit.vue
View file @
c5de000f
<
template
>
<
template
>
<div
class=
"taskEdit"
>
<div
class=
"taskEdit"
>
<ul>
<ul>
<li
<li
v-for=
"(item, index) in taskList"
:key=
"index"
>
v-for=
"(item, index) in taskList"
:key=
"index"
>
<div
class=
"info"
>
<div
class=
"info"
>
<div
class=
"cove"
>
<div
class=
"cove"
>
视频封面
视频封面
...
@@ -15,25 +12,16 @@
...
@@ -15,25 +12,16 @@
</div>
</div>
</div>
</div>
<div
class=
"operationPanel"
>
<div
class=
"operationPanel"
>
<div
<div
v-show=
"item.state == 0"
class=
"wait"
>
v-show=
"item.state == 0"
class=
"wait"
>
<div>
输出格式
</div>
<div>
输出格式
</div>
<div
class=
"selectionFormat"
>
<div
class=
"selectionFormat"
>
mp4
mp4
</div>
</div>
<div
<div
class=
"delete"
@
click=
"clearTask(item)"
>
class=
"delete"
@
click=
"clearTask(item)"
>
删除
删除
</div>
</div>
</div>
</div>
<div
<div
v-show=
"item.state == 1"
class=
"active"
>
v-show=
"item.state == 1"
class=
"active"
>
<div
class=
"progress"
>
<div
class=
"progress"
>
<div>
转换中
{{
item
.
progress
}}
%
</div>
<div>
转换中
{{
item
.
progress
}}
%
</div>
<div
class=
"slide"
>
<div
class=
"slide"
>
...
@@ -41,10 +29,7 @@
...
@@ -41,10 +29,7 @@
</div>
</div>
</div>
</div>
<div
<div
class=
"stop"
@
click=
"stopTask(item)"
>
class=
"stop"
@
click=
"stopTask(item)"
>
取消
取消
</div>
</div>
</div>
</div>
...
@@ -53,16 +38,10 @@
...
@@ -53,16 +38,10 @@
</ul>
</ul>
<div
class=
"editBar"
>
<div
class=
"editBar"
>
<div
<div
class=
"addVideo"
@
click=
"addVideo"
>
class=
"addVideo"
@
click=
"addVideo"
>
添加视频
添加视频
</div>
</div>
<div
<div
class=
"clearList"
@
click=
"clearAllTasks"
>
class=
"clearList"
@
click=
"clearAllTasks"
>
清空列表
清空列表
</div>
</div>
<div
class=
"clearWatermark"
>
<div
class=
"clearWatermark"
>
...
@@ -70,17 +49,14 @@
...
@@ -70,17 +49,14 @@
</div>
</div>
</div>
</div>
<div
<div
class=
"startAll"
@
click=
"startAllTasks"
>
class=
"startAll"
@
click=
"startAllTasks"
>
开始转换
开始转换
</div>
</div>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
import
{
start
,
stop
,
clear
,
checkStatus
}
from
'./webApi'
;
import
{
start
,
stop
,
clear
,
checkStatus
}
from
'./webApi'
export
default
{
export
default
{
name
:
'TaskEdit'
,
name
:
'TaskEdit'
,
components
:
{},
components
:
{},
...
@@ -88,7 +64,7 @@ export default {
...
@@ -88,7 +64,7 @@ export default {
data
()
{
data
()
{
return
{
return
{
taskList
:
[]
taskList
:
[]
};
}
},
},
computed
:
{},
computed
:
{},
watch
:
{},
watch
:
{},
...
@@ -101,35 +77,35 @@ export default {
...
@@ -101,35 +77,35 @@ export default {
state
:
0
,
state
:
0
,
progress
:
60
,
progress
:
60
,
outputFormat
:
'mp4'
outputFormat
:
'mp4'
});
})
}
}
},
},
methods
:
{
methods
:
{
async
startTask
(
item
)
{
async
startTask
(
item
)
{
let
result
=
await
start
();
let
result
=
await
start
()
if
(
result
)
{
if
(
result
)
{
item
.
state
=
1
;
item
.
state
=
1
}
else
{
}
else
{
item
.
state
=
2
;
item
.
state
=
2
}
}
},
},
async
stopTask
(
item
)
{
async
stopTask
(
item
)
{
let
result
=
await
stop
();
let
result
=
await
stop
()
if
(
result
)
{
if
(
result
)
{
item
.
state
=
0
;
item
.
state
=
0
}
}
},
},
async
clearTask
(
item
)
{
async
clearTask
(
item
)
{
let
result
=
await
clear
();
let
result
=
await
clear
()
if
(
result
)
{
if
(
result
)
{
let
index
=
this
.
taskList
.
indexOf
(
item
);
let
index
=
this
.
taskList
.
indexOf
(
item
)
if
(
index
>
-
1
)
{
if
(
index
>
-
1
)
{
this
.
taskList
.
splice
(
index
,
1
);
this
.
taskList
.
splice
(
index
,
1
)
}
}
}
}
},
},
async
checkTaskStatus
()
{
async
checkTaskStatus
()
{
await
checkStatus
();
await
checkStatus
()
},
},
addVideo
()
{
addVideo
()
{
this
.
taskList
.
push
({
this
.
taskList
.
push
({
...
@@ -139,18 +115,18 @@ export default {
...
@@ -139,18 +115,18 @@ export default {
state
:
0
,
state
:
0
,
progress
:
60
,
progress
:
60
,
outputFormat
:
'mp4'
outputFormat
:
'mp4'
});
})
},
},
clearAllTasks
()
{
clearAllTasks
()
{
this
.
taskList
=
[];
this
.
taskList
=
[]
},
},
startAllTasks
()
{
startAllTasks
()
{
this
.
taskList
.
forEach
((
task
)
=>
{
this
.
taskList
.
forEach
((
task
)
=>
{
task
.
state
=
1
;
task
.
state
=
1
});
})
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/components/videoConverter/webApi.js
View file @
c5de000f
async
function
start
()
{
async
function
start
()
{
let
result
=
await
new
Promise
((
resolve
)
=>
{
let
result
=
await
new
Promise
((
resolve
)
=>
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
resolve
(
true
);
resolve
(
true
)
},
1000
);
},
1000
)
});
})
return
result
;
return
result
}
}
async
function
stop
()
{
async
function
stop
()
{
let
result
=
await
new
Promise
((
resolve
)
=>
{
let
result
=
await
new
Promise
((
resolve
)
=>
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
resolve
(
true
);
resolve
(
true
)
},
500
);
},
500
)
});
})
return
result
;
return
result
}
}
async
function
clear
()
{
async
function
clear
()
{
let
result
=
await
new
Promise
((
resolve
)
=>
{
let
result
=
await
new
Promise
((
resolve
)
=>
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
resolve
(
true
);
resolve
(
true
)
},
500
);
},
500
)
});
})
return
result
;
return
result
}
}
async
function
checkStatus
(
fakeValue
)
{
async
function
checkStatus
(
fakeValue
)
{
let
result
=
await
new
Promise
((
resolve
)
=>
{
let
result
=
await
new
Promise
((
resolve
)
=>
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
resolve
(
fakeValue
++
);
resolve
(
fakeValue
++
)
},
500
);
},
500
)
});
})
return
result
;
return
result
}
}
export
{
start
,
stop
,
clear
,
checkStatus
}
;
export
{
start
,
stop
,
clear
,
checkStatus
}
src/components/videoCutter/videoChange.vue
View file @
c5de000f
<
template
>
<
template
>
<div
<div
class=
"video-change"
@
click=
"changeVideo"
>
class=
"video-change"
@
click=
"changeVideo"
>
替换视频
替换视频
</div>
</div>
</
template
>
</
template
>
...
@@ -10,10 +7,10 @@
...
@@ -10,10 +7,10 @@
export
default
{
export
default
{
methods
:
{
methods
:
{
changeVideo
()
{
changeVideo
()
{
this
.
$emit
(
'changeVideo'
);
this
.
$emit
(
'changeVideo'
)
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.video-change
{
.video-change
{
...
...
src/components/videoCutter/videoControl.vue
View file @
c5de000f
<
template
>
<
template
>
<div
class=
"video-control"
>
<div
class=
"video-control"
>
<div
<div
class=
"video-play-btn"
@
click=
"play()"
>
class=
"video-play-btn"
@
click=
"play()"
>
播放
播放
</div>
</div>
<div
class=
"video-time-content"
>
<div
class=
"video-time-content"
>
...
@@ -21,27 +18,27 @@
...
@@ -21,27 +18,27 @@
export
default
{
export
default
{
filters
:
{
filters
:
{
formatTime
(
duration
)
{
formatTime
(
duration
)
{
if
(
duration
<=
0
)
return
'00:00'
;
if
(
duration
<=
0
)
return
'00:00'
if
(
!
duration
)
return
'--:--'
;
if
(
!
duration
)
return
'--:--'
let
min
=
~~
(
duration
/
60
);
let
min
=
~~
(
duration
/
60
)
min
=
(
min
+
''
).
length
===
1
?
'0'
+
min
:
min
;
min
=
(
min
+
''
).
length
===
1
?
'0'
+
min
:
min
let
sec
=
Math
.
floor
(
duration
%
60
);
let
sec
=
Math
.
floor
(
duration
%
60
)
sec
=
(
sec
+
''
).
length
===
1
?
'0'
+
sec
:
sec
;
sec
=
(
sec
+
''
).
length
===
1
?
'0'
+
sec
:
sec
min
=
min
||
'00'
;
min
=
min
||
'00'
sec
=
sec
||
'00'
;
sec
=
sec
||
'00'
return
min
+
':'
+
sec
;
return
min
+
':'
+
sec
}
}
},
},
props
:
[
'duration'
,
'nowTime'
],
// eslint-disable-line
props
:
[
'duration'
,
'nowTime'
],
// eslint-disable-line
data
()
{
data
()
{
return
{};
return
{}
},
},
methods
:
{
methods
:
{
play
()
{
play
()
{
this
.
$emit
(
'play'
);
this
.
$emit
(
'play'
)
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.video-control
{
.video-control
{
...
...
src/components/videoCutter/videoPlayer.vue
View file @
c5de000f
<
template
>
<
template
>
<div
class=
"video-player"
>
<div
class=
"video-player"
>
<video
<video
ref=
"videoDom"
src=
"https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"
></video>
ref=
"videoDom"
src=
"https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"
></video>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
...
@@ -13,54 +10,54 @@ export default {
...
@@ -13,54 +10,54 @@ export default {
state
:
'pluse'
,
state
:
'pluse'
,
times
:
0
,
times
:
0
,
canPlay
:
false
canPlay
:
false
};
}
},
},
mounted
()
{
mounted
()
{
this
.
$bus
.
on
(
'videoPlayer.play'
,
(
data
)
=>
{
this
.
$bus
.
on
(
'videoPlayer.play'
,
(
data
)
=>
{
if
(
data
.
time
!==
undefined
)
{
if
(
data
.
time
!==
undefined
)
{
this
.
currentTime
(
data
.
time
);
this
.
currentTime
(
data
.
time
)
}
}
if
(
data
.
play
)
{
if
(
data
.
play
)
{
this
.
play
();
this
.
play
()
}
else
{
}
else
{
this
.
pause
();
this
.
pause
()
}
}
});
})
this
.
$nextTick
(()
=>
{
this
.
$nextTick
(()
=>
{
this
.
$refs
.
videoDom
.
addEventListener
(
'canplay'
,
this
.
canPlayFunc
);
this
.
$refs
.
videoDom
.
addEventListener
(
'canplay'
,
this
.
canPlayFunc
)
this
.
$refs
.
videoDom
.
addEventListener
(
'ended'
,
()
=>
{
this
.
$refs
.
videoDom
.
addEventListener
(
'ended'
,
()
=>
{
this
.
$emit
(
'ended'
);
this
.
$emit
(
'ended'
)
});
})
this
.
$refs
.
videoDom
.
addEventListener
(
'timeupdate'
,
()
=>
{
this
.
$refs
.
videoDom
.
addEventListener
(
'timeupdate'
,
()
=>
{
this
.
$emit
(
'timeupdate'
,
this
.
$refs
.
videoDom
.
currentTime
);
this
.
$emit
(
'timeupdate'
,
this
.
$refs
.
videoDom
.
currentTime
)
});
})
});
})
},
},
beforeDestroy
()
{
beforeDestroy
()
{
this
.
$refs
.
videoDom
.
removeEventListener
(
'canplay'
);
this
.
$refs
.
videoDom
.
removeEventListener
(
'canplay'
)
this
.
$refs
.
videoDom
.
removeEventListener
(
'ended'
);
this
.
$refs
.
videoDom
.
removeEventListener
(
'ended'
)
this
.
$refs
.
videoDom
.
removeEventListener
(
'timeupdate'
);
this
.
$refs
.
videoDom
.
removeEventListener
(
'timeupdate'
)
},
},
methods
:
{
methods
:
{
canPlayFunc
()
{
canPlayFunc
()
{
this
.
canPlay
=
true
;
this
.
canPlay
=
true
let
from
=
this
.
$parent
.
$options
.
name
||
'videoPlayer'
;
let
from
=
this
.
$parent
.
$options
.
name
||
'videoPlayer'
this
.
$bus
.
emit
(
`
${
from
}
.canPlay`
,
this
.
$refs
.
videoDom
.
duration
);
this
.
$bus
.
emit
(
`
${
from
}
.canPlay`
,
this
.
$refs
.
videoDom
.
duration
)
},
},
play
()
{
play
()
{
if
(
!
this
.
canPlay
)
return
;
if
(
!
this
.
canPlay
)
return
this
.
$refs
.
videoDom
.
play
();
this
.
$refs
.
videoDom
.
play
()
},
},
pause
()
{
pause
()
{
if
(
!
this
.
canPlay
)
return
;
if
(
!
this
.
canPlay
)
return
this
.
$refs
.
videoDom
.
pause
();
this
.
$refs
.
videoDom
.
pause
()
},
},
currentTime
(
time
)
{
currentTime
(
time
)
{
if
(
!
this
.
canPlay
)
return
;
if
(
!
this
.
canPlay
)
return
this
.
$refs
.
videoDom
.
currentTime
=
time
;
this
.
$refs
.
videoDom
.
currentTime
=
time
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.video-player
{
.video-player
{
...
...
src/components/videoCutter/videoTimeline.vue
View file @
c5de000f
<
template
>
<
template
>
<div
class=
"video-timeline"
>
<div
class=
"video-timeline"
>
<div
<div
ref=
"sliderWidth"
v-drag
class=
"time-slider"
>
ref=
"sliderWidth"
v-drag
class=
"time-slider"
>
<div
class=
"time-slider-rail"
></div>
<div
class=
"time-slider-rail"
></div>
<div
<div
class=
"time-slider-track"
:style=
"
{ width: ((info.val - info.min) / info.max) * 100 + '%' }">
</div>
class=
"time-slider-track"
<div
data-action=
"handle"
class=
"time-slider-handle"
:style=
"
{ left: ((info.val - info.min) / info.max) * 100 + '%' }">
</div>
:style=
"
{ width: ((info.val - info.min) / info.max) * 100 + '%' }"
>
</div>
<div
data-action=
"handle"
class=
"time-slider-handle"
:style=
"
{ left: ((info.val - info.min) / info.max) * 100 + '%' }"
>
</div>
</div>
</div>
</div>
</div>
</
template
>
</
template
>
...
@@ -26,32 +15,32 @@ export default {
...
@@ -26,32 +15,32 @@ export default {
let
_this
=
vnode
.
context
,
let
_this
=
vnode
.
context
,
mousemove
=
null
,
mousemove
=
null
,
mouseup
=
null
,
mouseup
=
null
,
dataAction
=
''
;
dataAction
=
''
mousemove
=
(
e
)
=>
{
mousemove
=
(
e
)
=>
{
_this
.
dragMove
&&
_this
.
dragMove
(
e
.
pageX
,
dataAction
,
e
);
_this
.
dragMove
&&
_this
.
dragMove
(
e
.
pageX
,
dataAction
,
e
)
};
}
mouseup
=
(
e
)
=>
{
mouseup
=
(
e
)
=>
{
document
.
removeEventListener
(
'mousemove'
,
mousemove
);
document
.
removeEventListener
(
'mousemove'
,
mousemove
)
document
.
removeEventListener
(
'mouseup'
,
mouseup
);
document
.
removeEventListener
(
'mouseup'
,
mouseup
)
_this
.
dragUp
&&
_this
.
dragUp
(
e
.
pageX
,
dataAction
,
e
);
_this
.
dragUp
&&
_this
.
dragUp
(
e
.
pageX
,
dataAction
,
e
)
};
}
el
.
onmousedown
=
(
e
)
=>
{
el
.
onmousedown
=
(
e
)
=>
{
dataAction
=
e
.
target
.
dataset
.
action
;
dataAction
=
e
.
target
.
dataset
.
action
if
(
e
.
which
===
3
||
e
.
which
===
2
)
{
if
(
e
.
which
===
3
||
e
.
which
===
2
)
{
e
.
stopPropagation
();
e
.
stopPropagation
()
return
;
return
}
}
document
.
addEventListener
(
'mousemove'
,
mousemove
);
document
.
addEventListener
(
'mousemove'
,
mousemove
)
document
.
addEventListener
(
'mouseup'
,
mouseup
);
document
.
addEventListener
(
'mouseup'
,
mouseup
)
_this
.
dragDown
&&
_this
.
dragDown
(
e
.
pageX
,
dataAction
,
e
);
_this
.
dragDown
&&
_this
.
dragDown
(
e
.
pageX
,
dataAction
,
e
)
};
}
}
}
},
},
props
:
{
props
:
{
...
@@ -59,45 +48,45 @@ export default {
...
@@ -59,45 +48,45 @@ export default {
type
:
Object
,
type
:
Object
,
required
:
true
,
required
:
true
,
default
:
function
()
{
default
:
function
()
{
return
{
step
:
0.1
,
min
:
0
,
max
:
10
,
val
:
0
,
cut
:
[
0
,
10
]
};
return
{
step
:
0.1
,
min
:
0
,
max
:
10
,
val
:
0
,
cut
:
[
0
,
10
]
}
}
}
}
}
},
},
data
()
{
data
()
{
return
{
return
{
width
:
100
width
:
100
};
}
},
},
methods
:
{
methods
:
{
dragDown
(
dis
,
action
)
{
dragDown
(
dis
,
action
)
{
if
(
!
action
)
return
;
if
(
!
action
)
return
this
.
width
=
this
.
$refs
.
sliderWidth
.
clientWidth
;
this
.
width
=
this
.
$refs
.
sliderWidth
.
clientWidth
this
.
action
=
action
;
this
.
action
=
action
this
.
dragHand
=
true
;
this
.
dragHand
=
true
this
.
mpos
=
{
this
.
mpos
=
{
x
:
dis
,
x
:
dis
,
v
:
this
.
info
.
val
v
:
this
.
info
.
val
};
}
this
.
$emit
(
'changeData'
,
{
val
:
this
.
mpos
.
v
,
action
:
action
,
type
:
'start'
});
this
.
$emit
(
'changeData'
,
{
val
:
this
.
mpos
.
v
,
action
:
action
,
type
:
'start'
})
},
},
dragMove
(
pos
)
{
dragMove
(
pos
)
{
if
(
!
this
.
action
)
return
;
if
(
!
this
.
action
)
return
let
val
=
0
;
let
val
=
0
console
.
log
(
pos
,
'<_-------------'
);
console
.
log
(
pos
,
'<_-------------'
)
// let pre = Math.round(((pos.x - this.mpos.x) / 120 * this.item.len + this.mpos.v) / this.item.step) / (1 / this.item.step);
// let pre = Math.round(((pos.x - this.mpos.x) / 120 * this.item.len + this.mpos.v) / this.item.step) / (1 / this.item.step);
// this.item.val = pre > this.item.max ? this.item.max : pre
<
this
.
item
.
min
?
this
.
item
.
min
:
pre
;
// this.item.val = pre > this.item.max ? this.item.max : pre
<
this
.
item
.
min
?
this
.
item
.
min
:
pre
;
this
.
$emit
(
'changeData'
,
{
val
:
val
,
action
:
this
.
action
,
type
:
'change'
});
this
.
$emit
(
'changeData'
,
{
val
:
val
,
action
:
this
.
action
,
type
:
'change'
})
},
},
dragUp
()
{
dragUp
()
{
if
(
!
this
.
action
)
return
;
if
(
!
this
.
action
)
return
let
val
=
0
;
let
val
=
0
this
.
mpos
=
null
;
this
.
mpos
=
null
this
.
dragHand
=
false
;
this
.
dragHand
=
false
this
.
action
=
''
;
this
.
action
=
''
this
.
$emit
(
'changeData'
,
{
val
:
val
,
action
:
this
.
action
,
type
:
'end'
});
this
.
$emit
(
'changeData'
,
{
val
:
val
,
action
:
this
.
action
,
type
:
'end'
})
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.video-timeline
{
.video-timeline
{
...
...
src/main.js
View file @
c5de000f
import
Vue
from
'vue'
;
import
Vue
from
'vue'
import
App
from
'./App.vue'
;
import
App
from
'./App.vue'
import
router
from
'./router'
;
import
router
from
'./router'
import
store
from
'./store'
;
import
store
from
'./store'
import
'./registerServiceWorker'
;
import
'./registerServiceWorker'
import
'./assets/style/index.scss'
;
import
'./assets/style/index.scss'
import
axios
from
'axios'
;
import
axios
from
'axios'
import
VueBus
from
'vue-bus'
;
import
VueBus
from
'vue-bus'
import
VModal
from
'vue-js-modal'
;
import
VModal
from
'vue-js-modal'
Vue
.
use
(
VueBus
)
;
Vue
.
use
(
VueBus
)
Vue
.
use
(
VModal
)
;
Vue
.
use
(
VModal
)
import
baseURL
from
'../config/baseUrl.js'
;
import
baseURL
from
'../config/baseUrl.js'
console
.
log
(
'baseURL:'
,
baseURL
)
;
console
.
log
(
'baseURL:'
,
baseURL
)
Vue
.
config
.
productionTip
=
false
;
Vue
.
config
.
productionTip
=
false
Vue
.
prototype
.
$http
=
axios
;
Vue
.
prototype
.
$http
=
axios
new
Vue
({
new
Vue
({
router
,
router
,
store
,
store
,
render
:
(
h
)
=>
h
(
App
)
render
:
(
h
)
=>
h
(
App
)
}).
$mount
(
'#app'
)
;
}).
$mount
(
'#app'
)
src/registerServiceWorker.js
View file @
c5de000f
/* eslint-disable no-console */
/* eslint-disable no-console */
import
{
register
}
from
'register-service-worker'
;
import
{
register
}
from
'register-service-worker'
if
(
process
.
env
.
NODE_ENV
===
'production'
)
{
if
(
process
.
env
.
NODE_ENV
===
'production'
)
{
register
(
`
${
process
.
env
.
BASE_URL
}
service-worker.js`
,
{
register
(
`
${
process
.
env
.
BASE_URL
}
service-worker.js`
,
{
ready
()
{
ready
()
{
console
.
log
(
'App is being served from cache by a service worker.
\
n'
+
'For more details, visit https://goo.gl/AFskqB'
);
console
.
log
(
'App is being served from cache by a service worker.
\
n'
+
'For more details, visit https://goo.gl/AFskqB'
)
},
},
registered
()
{
registered
()
{
console
.
log
(
'Service worker has been registered.'
);
console
.
log
(
'Service worker has been registered.'
)
},
},
cached
()
{
cached
()
{
console
.
log
(
'Content has been cached for offline use.'
);
console
.
log
(
'Content has been cached for offline use.'
)
},
},
updatefound
()
{
updatefound
()
{
console
.
log
(
'New content is downloading.'
);
console
.
log
(
'New content is downloading.'
)
},
},
updated
()
{
updated
()
{
console
.
log
(
'New content is available; please refresh.'
);
console
.
log
(
'New content is available; please refresh.'
)
},
},
offline
()
{
offline
()
{
console
.
log
(
'No internet connection found. App is running in offline mode.'
);
console
.
log
(
'No internet connection found. App is running in offline mode.'
)
},
},
error
(
error
)
{
error
(
error
)
{
console
.
error
(
'Error during service worker registration:'
,
error
);
console
.
error
(
'Error during service worker registration:'
,
error
)
}
}
});
})
}
}
src/router/index.js
View file @
c5de000f
import
Vue
from
'vue'
;
import
Vue
from
'vue'
import
VueRouter
from
'vue-router'
;
import
VueRouter
from
'vue-router'
import
Bao3
from
'../views/bao3.vue'
;
import
Bao3
from
'../views/bao3.vue'
import
Screenshot
from
'../views/screenshot.vue'
;
import
Screenshot
from
'../views/screenshot.vue'
import
screenshotPanel
from
'../components/rightPanel/screenshotPanel.vue'
;
import
screenshotPanel
from
'../components/rightPanel/screenshotPanel.vue'
Vue
.
use
(
VueRouter
)
;
Vue
.
use
(
VueRouter
)
const
routes
=
[
const
routes
=
[
{
{
...
@@ -37,12 +37,12 @@ const routes = [
...
@@ -37,12 +37,12 @@ const routes = [
panel
:
screenshotPanel
panel
:
screenshotPanel
}
}
}
}
]
;
]
const
router
=
new
VueRouter
({
const
router
=
new
VueRouter
({
mode
:
'history'
,
mode
:
'history'
,
base
:
process
.
env
.
BASE_URL
,
base
:
process
.
env
.
BASE_URL
,
routes
routes
})
;
})
export
default
router
;
export
default
router
src/store/global.js
View file @
c5de000f
...
@@ -3,19 +3,19 @@
...
@@ -3,19 +3,19 @@
const
state
=
{
const
state
=
{
_test
:
1
_test
:
1
}
;
}
const
getters
=
{
const
getters
=
{
test
:
(
state
)
=>
state
.
_test
test
:
(
state
)
=>
state
.
_test
}
;
}
const
mutations
=
{}
;
const
mutations
=
{}
const
actions
=
{}
;
const
actions
=
{}
export
default
{
export
default
{
state
,
state
,
getters
,
getters
,
mutations
,
mutations
,
actions
actions
}
;
}
src/store/index.js
View file @
c5de000f
import
Vue
from
'vue'
;
import
Vue
from
'vue'
import
Vuex
from
'vuex'
;
import
Vuex
from
'vuex'
import
global
from
'./global'
;
import
global
from
'./global'
import
moduleA
from
'./modules/moduleA'
;
import
moduleA
from
'./modules/moduleA'
import
uploader
from
'./modules/uploader'
;
import
uploader
from
'./modules/uploader'
Vue
.
use
(
Vuex
)
;
Vue
.
use
(
Vuex
)
export
default
new
Vuex
.
Store
({
export
default
new
Vuex
.
Store
({
...
global
,
...
global
,
...
@@ -13,4 +13,4 @@ export default new Vuex.Store({
...
@@ -13,4 +13,4 @@ export default new Vuex.Store({
moduleA
,
moduleA
,
uploader
uploader
}
}
})
;
})
src/store/modules/moduleA.js
View file @
c5de000f
...
@@ -3,15 +3,15 @@
...
@@ -3,15 +3,15 @@
const
state
=
{
const
state
=
{
_moduleState
:
'moduleState'
_moduleState
:
'moduleState'
}
;
}
const
getters
=
{
const
getters
=
{
moduleState
:
(
state
)
=>
state
.
_moduleState
moduleState
:
(
state
)
=>
state
.
_moduleState
}
;
}
const
mutations
=
{}
;
const
mutations
=
{}
const
actions
=
{}
;
const
actions
=
{}
export
default
{
export
default
{
namespaced
:
true
,
namespaced
:
true
,
...
@@ -19,4 +19,4 @@ export default {
...
@@ -19,4 +19,4 @@ export default {
getters
,
getters
,
mutations
,
mutations
,
actions
actions
}
;
}
src/store/modules/uploader.js
View file @
c5de000f
...
@@ -3,20 +3,20 @@
...
@@ -3,20 +3,20 @@
const
state
=
{
const
state
=
{
video
:
{}
video
:
{}
}
;
}
const
getters
=
{
const
getters
=
{
video
:
(
state
)
=>
state
.
video
video
:
(
state
)
=>
state
.
video
}
;
}
const
mutations
=
{}
;
const
mutations
=
{}
const
actions
=
{
const
actions
=
{
async
upload
(
store
,
payload
)
{
async
upload
(
store
,
payload
)
{
console
.
log
(
'turbo: upload -> store, payload'
,
store
,
payload
);
console
.
log
(
'turbo: upload -> store, payload'
,
store
,
payload
)
},
},
async
storeMaterial
()
{}
async
storeMaterial
()
{}
}
;
}
export
default
{
export
default
{
namespaced
:
true
,
namespaced
:
true
,
...
@@ -24,4 +24,4 @@ export default {
...
@@ -24,4 +24,4 @@ export default {
getters
,
getters
,
mutations
,
mutations
,
actions
actions
}
;
}
src/test/index.vue
0 → 100644
View file @
c5de000f
<
template
>
<div
class=
"page-test"
>
test
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{}
}
}
</
script
>
<
style
scoped
lang=
"scss"
>
/* @import url(); 引入css类 */
</
style
>
src/views/About.vue
View file @
c5de000f
src/views/bao2.vue
View file @
c5de000f
...
@@ -7,11 +7,11 @@
...
@@ -7,11 +7,11 @@
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{};
return
{}
},
},
created
()
{},
created
()
{},
mounted
()
{}
mounted
()
{}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/views/bao3.vue
View file @
c5de000f
...
@@ -8,11 +8,11 @@
...
@@ -8,11 +8,11 @@
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{};
return
{}
},
},
created
()
{},
created
()
{},
mounted
()
{}
mounted
()
{}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/views/screenshot.vue
View file @
c5de000f
<
template
>
<
template
>
<div
class=
"screenshot"
>
<div
class=
"screenshot"
>
<div
class=
"content"
>
<div
class=
"content"
>
<video
<video
id=
"screenshot-video"
width=
"400"
height=
"300"
:src=
"srcUrl"
controls
></video>
id=
"screenshot-video"
width=
"400"
height=
"300"
:src=
"srcUrl"
controls
></video>
</div>
</div>
<div
class=
"operate-area"
>
<div
class=
"operate-area"
>
<div
class=
"play-area"
>
<div
class=
"play-area"
>
<input
<input
id=
"screenshot-input"
type=
"file"
style=
"display:none;"
@
change=
"changeFile"
/>
id=
"screenshot-input"
type=
"file"
style=
"display:none;"
@
change=
"changeFile"
>
<label
id=
"select-btn"
>
<label
id=
"select-btn"
>
<span>
选择文件
</span>
<span>
选择文件
</span>
</label>
</label>
...
@@ -40,26 +29,26 @@ export default {
...
@@ -40,26 +29,26 @@ export default {
videoEle
:
null
,
videoEle
:
null
,
current
:
0
,
current
:
0
,
duration
:
10
duration
:
10
};
}
},
},
created
()
{},
created
()
{},
mounted
()
{
mounted
()
{
let
input
=
document
.
getElementById
(
'screenshot-input'
);
let
input
=
document
.
getElementById
(
'screenshot-input'
)
let
fileBtn
=
document
.
getElementById
(
'select-btn'
);
let
fileBtn
=
document
.
getElementById
(
'select-btn'
)
fileBtn
.
addEventListener
(
'click'
,
function
()
{
fileBtn
.
addEventListener
(
'click'
,
function
()
{
input
.
click
();
input
.
click
()
});
})
let
video
=
document
.
getElementById
(
'screenshot-video'
);
let
video
=
document
.
getElementById
(
'screenshot-video'
)
video
.
onerror
=
function
(
e
)
{
video
.
onerror
=
function
(
e
)
{
console
.
log
(
'onerror'
,
e
);
console
.
log
(
'onerror'
,
e
)
};
}
video
.
addEventListener
(
'loadedmetadata'
,
function
(
e
)
{
video
.
addEventListener
(
'loadedmetadata'
,
function
(
e
)
{
console
.
log
(
'loadedmetadata'
,
e
);
console
.
log
(
'loadedmetadata'
,
e
)
//webkitVideoDecodedByteCount
//webkitVideoDecodedByteCount
if
(
e
.
target
.
webkitVideoDecodedByteCount
<
1
)
{
if
(
e
.
target
.
webkitVideoDecodedByteCount
<
1
)
{
console
.
error
(
'格式不支持'
);
console
.
error
(
'格式不支持'
)
}
}
});
})
//loadedmetadata
//loadedmetadata
},
},
...
@@ -67,11 +56,11 @@ export default {
...
@@ -67,11 +56,11 @@ export default {
changeFile
(
e
)
{
changeFile
(
e
)
{
//console.log('changeFile', e)
//console.log('changeFile', e)
if
(
e
.
target
.
files
[
0
])
{
if
(
e
.
target
.
files
[
0
])
{
this
.
srcUrl
=
URL
.
createObjectURL
(
e
.
target
.
files
[
0
]);
this
.
srcUrl
=
URL
.
createObjectURL
(
e
.
target
.
files
[
0
])
}
}
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
...
...
src/views/videoConverter.vue
View file @
c5de000f
...
@@ -5,19 +5,19 @@
...
@@ -5,19 +5,19 @@
</
template
>
</
template
>
<
script
>
<
script
>
import
taskEdit
from
'@/components/videoConverter/taskEdit'
;
import
taskEdit
from
'@/components/videoConverter/taskEdit'
export
default
{
export
default
{
name
:
'VideoConverter'
,
name
:
'VideoConverter'
,
components
:
{
taskEdit
},
components
:
{
taskEdit
},
props
:
{},
props
:
{},
data
()
{
data
()
{
return
{};
return
{}
},
},
computed
:
{},
computed
:
{},
watch
:
{},
watch
:
{},
created
()
{},
created
()
{},
methods
:
{}
methods
:
{}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
src/views/videoCutter.vue
View file @
c5de000f
<
template
>
<
template
>
<div
class=
"video-cutter"
>
<div
class=
"video-cutter"
>
<div
class=
"video-content"
>
<div
class=
"video-content"
>
<videoPlayer
<videoPlayer
@
currentTime=
"changeTime"
@
end=
"playEnd"
@
timeupdate=
"timeupdate"
></videoPlayer>
@
currentTime=
"changeTime"
@
end=
"playEnd"
@
timeupdate=
"timeupdate"
></videoPlayer>
</div>
</div>
<div
class=
"video-btn"
>
<div
class=
"video-btn"
>
<videoChange
@
changeVideo=
"changeVideo"
></videoChange>
<videoChange
@
changeVideo=
"changeVideo"
></videoChange>
<videoControl
<videoControl
:duration=
"duration"
:now-time=
"nowTime"
@
play=
"videoPlay"
></videoControl>
:duration=
"duration"
:now-time=
"nowTime"
@
play=
"videoPlay"
></videoControl>
<div
class=
"video-water"
>
<div
class=
"video-water"
>
<input
<input
id=
"cutterRemoveWater"
v-model=
"noWater"
type=
"checkbox"
/>
id=
"cutterRemoveWater"
<label
for=
"cutterRemoveWater"
>
去除ddf 水印
</label>
v-model=
"noWater"
type=
"checkbox"
>
<label
for=
"cutterRemoveWater"
>
去除水印
</label>
</div>
</div>
</div>
</div>
<div
class=
"timeline-content"
>
<div
class=
"timeline-content"
>
...
@@ -48,50 +36,50 @@ export default {
...
@@ -48,50 +36,50 @@ export default {
canPlay
:
false
,
canPlay
:
false
,
noWater
:
true
,
noWater
:
true
,
timelineObj
:
{
step
:
0.1
,
min
:
0
,
max
:
10
,
val
:
0
}
timelineObj
:
{
step
:
0.1
,
min
:
0
,
max
:
10
,
val
:
0
}
};
}
},
},
created
()
{},
created
()
{},
mounted
()
{
mounted
()
{
this
.
$bus
.
on
(
'VideoCutter.canPlay'
,
this
.
canPlayFunc
);
this
.
$bus
.
on
(
'VideoCutter.canPlay'
,
this
.
canPlayFunc
)
},
},
methods
:
{
methods
:
{
changeVideo
()
{
changeVideo
()
{
console
.
log
(
'todo change video, <-----lilei'
);
console
.
log
(
'todo change video, <-----lilei'
)
},
},
canPlayFunc
(
data
)
{
canPlayFunc
(
data
)
{
this
.
duration
=
data
;
this
.
duration
=
data
this
.
timelineObj
.
max
=
this
.
duration
;
this
.
timelineObj
.
max
=
this
.
duration
this
.
canPlay
=
true
;
this
.
canPlay
=
true
},
},
videoPlay
()
{
videoPlay
()
{
if
(
!
this
.
canPlay
)
return
;
if
(
!
this
.
canPlay
)
return
let
ob
=
{};
let
ob
=
{}
if
(
this
.
playing
)
{
if
(
this
.
playing
)
{
ob
.
play
=
false
;
ob
.
play
=
false
}
else
{
}
else
{
ob
.
play
=
true
;
ob
.
play
=
true
if
(
this
.
nowTime
>=
this
.
duration
)
{
if
(
this
.
nowTime
>=
this
.
duration
)
{
ob
.
time
=
0
;
ob
.
time
=
0
this
.
timelineObj
.
val
=
0
;
this
.
timelineObj
.
val
=
0
}
}
}
}
this
.
playing
=
!
this
.
playing
;
this
.
playing
=
!
this
.
playing
this
.
$bus
.
emit
(
'videoPlayer.play'
,
ob
);
this
.
$bus
.
emit
(
'videoPlayer.play'
,
ob
)
},
},
changeTime
(
data
)
{
changeTime
(
data
)
{
console
.
log
(
data
);
console
.
log
(
data
)
},
},
playEnd
()
{
playEnd
()
{
this
.
playing
=
false
;
this
.
playing
=
false
this
.
nowTime
=
this
.
duration
;
this
.
nowTime
=
this
.
duration
this
.
timelineObj
.
val
=
this
.
nowTime
;
this
.
timelineObj
.
val
=
this
.
nowTime
},
},
timeupdate
(
time
)
{
timeupdate
(
time
)
{
this
.
nowTime
=
time
;
this
.
nowTime
=
time
this
.
timelineObj
.
val
=
this
.
nowTime
;
this
.
timelineObj
.
val
=
this
.
nowTime
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment