Merge remote-tracking branch 'origin/develop' into develop

# Conflicts:
#	src/components/sideNav/index.vue
#	src/views/screenshot.vue
#	src/views/videoConverter.vue
#	src/views/videoCutter.vue

.eslintignore

@@ -9,3 +9,5 @@ assets/
 static/
 dist/
 node_modules/
+
+# src/views/screenshot.vue

README.md

@@ -3,7 +3,7 @@
 
 ## 项目介绍
 
-> node 12.18.3
+> node 8.11.0+ (推荐12.18.3)
 > npm 6.14.6
 
 来画工具宝

src/App.vue

@@ -24,7 +24,6 @@ export default {
         return {}
     },
     async created() {
-        console.log('this.$http:', this.$http)
         let result = await this.$http.get('/webapi/home/banner?type=1&category=18')
         console.log('result:', result)
     }
@@ -48,5 +47,6 @@ export default {
     flex: 1;
     display: flex;
     justify-content: space-between;
+    overflow: hidden;
 }
 </style>

src/components/sideNav/index.vue

@@ -10,7 +10,7 @@
       cutter
     </router-link>
     <router-link to="/videoConverter">
-      videoConverter
+      转换宝
     </router-link>
     <router-link to="/screenshot">
       screenshot

src/components/videoCutter/videoChange.vue

+<template>
+  <div
+    class="video-change"
+    @click="changeVideo"
+  >
+    替换视频
+  </div>
+</template>
+<script>
+export default {
+    methods: {
+        changeVideo() {
+            this.$emit('changeVideo')
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.video-change {
+    width: 100px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    user-select: none;
+    cursor: pointer;
+}
+</style>

src/components/videoCutter/videoControl.vue

+<template>
+  <div class="video-control">
+    <div
+      class="video-play-btn"
+      @click="play()"
+    >
+      播放
+    </div>
+    <div class="video-time-content">
+      <div class="now-time">
+        {{ duration | formatTime }}
+      </div>
+      <span>/</span>
+      <div class="total-time">
+        {{ duration | formatTime }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+    data() {
+        return {}
+    },
+    props: { duration: { type: Number, default: 0 }, nowTime: { type: Number, default: 0 } },
+    methods: {
+        play() {
+            this.$emit('play')
+        }
+    },
+    filters: {
+        formatTime(duration) {
+            if (duration <= 0) return '00:00'
+            if (!duration) return '--:--'
+            let min = ~~(duration / 60)
+            min = (min + '').length === 1 ? '0' + min : min
+            let sec = Math.floor(duration % 60)
+            sec = (sec + '').length === 1 ? '0' + sec : sec
+            min = min || '00'
+            sec = sec || '00'
+            return min + ':' + sec
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.video-control {
+    display: flex;
+    justify-content: flex-start;
+    align-self: center;
+    width: 200px;
+    user-select: none;
+}
+.video-play-btn {
+    border: 1px solid #dddddd;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.video-time-content {
+    display: flex;
+
+    > div,
+    span {
+        line-height: 30px;
+        color: #474261;
+    }
+}
+</style>

src/components/videoCutter/videoPlayer.vue

@@ -17,20 +17,45 @@ export default {
     },
     mounted() {
         this.$bus.on('videoPlayer.play', (data) => {
-            console.log(data)
-            // if(data.state)
+            if (data.time !== undefined) {
+                this.currentTime(data.time)
+            }
+            if (data.play) {
+                this.play()
+            } else {
+                this.pause()
+            }
         })
         this.$nextTick(() => {
-            this.$refs.videoDom.addEventListener('canplay', () => {
-                this.canPlay = true
+            this.$refs.videoDom.addEventListener('canplay', this.canPlayFunc)
+            this.$refs.videoDom.addEventListener('ended', () => {
+                this.$emit('ended')
             })
         })
     },
     methods: {
+        canPlayFunc() {
+            this.canPlay = true
+            let from = this.$parent.$options.name || 'videoPlayer'
+            this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration)
+        },
         play() {
             if (!this.canPlay) return
             this.$refs.videoDom.play()
+            this.$emit('currentTime', this.$refs.videoDom.currentTime)
+        },
+        pause() {
+            if (!this.canPlay) return
+            this.$refs.videoDom.pause()
+        },
+        currentTime(time) {
+            if (!this.canPlay) return
+            this.$refs.videoDom.currentTime = time
         }
+    },
+    beforeDestroy() {
+        this.$refs.videoDom.removeEventListener('canplay')
+        this.$refs.videoDom.removeEventListener('ended')
     }
 }
 </script>

src/store/global.js

+// 全局vuex信息
+// getter调用示例：this.$store.getters['test']
+
+const state = {
+    _test: 1
+}
+
+const getters = {
+    test: (state) => state._test
+}
+
+const mutations = {}
+
+const actions = {}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import global from './global'
+import moduleA from './modules/moduleA'
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-    state: {},
-    mutations: {},
-    actions: {},
-    modules: {}
+    ...global,
+    modules: {
+        moduleA
+    }
 })

src/store/modules/moduleA.js

+// 模块化vuex数据
+// getter调用示例：this.$store.getters['moduleA/moduleState']
+
+const state = {
+    _moduleState: 'moduleState'
+}
+
+const getters = {
+    moduleState: (state) => state._moduleState
+}
+
+const mutations = {}
+
+const actions = {}
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions
+}

src/views/screenshot.vue

 <template>
   <div class="screenshot">
-    screenshot view
+    <div class="content">
+      <video id="screenshot-video" />
+    </div>
+    <div class="operate-area">
+      <input
+        id="screenshot-input"
+        type="file"
+        style="display:none;"
+      >
+    </div>
   </div>
 </template>
 
@@ -8,7 +17,9 @@
 export default {
     name: 'Screenshot',
     data() {
-        return {}
+        return {
+            srcUrl: null
+        }
     },
     created() {},
     mounted() {}
@@ -20,5 +31,11 @@ export default {
     width: 100%;
     height: 100%;
     margin: 30px;
+    display: flex;
+    flex-direction: column;
+    .content {
+        margin: 20px 30px;
+        background-color: lightcyan;
+    }
 }
 </style>

src/views/videoConverter.vue

 <template>
   <div class="videoConverter">
-    转换baby
+    <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
+            class="wait"
+            v-show="item.state == 0"
+          >
+            <div>输出格式</div>
+            <div class="selectionFormat">
+              mp4
+            </div>
+            <div
+              class="delete"
+              @click="clearAllTasks(item)"
+            >
+              删除
+            </div>
+          </div>
+          <div
+            class="active"
+            v-show="item.state == 1"
+          >
+            <div class="progress">
+              <div>转换中{{ item.progress }}%</div>
+              <div class="slide">
+                <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>
 
@@ -10,20 +85,186 @@ export default {
     components: {},
     props: {},
     data() {
-        return {}
+        return {
+            taskList: []
+        }
     },
     computed: {},
     watch: {},
-    methods: {}
+    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(item)
+            if (index > -1) {
+                this.taskList.splice(index, 1)
+            }
+        },
+        clearAllTasks() {
+            this.taskList = []
+        },
+        startAllTasks() {
+            this.taskList.forEach((task) => {
+                task.state = 1
+            })
+        }
+    },
+    created() {
+        for (let i = 1; i < 10; i++) {
+            this.taskList.push({
+                cover: '',
+                name: '视频片段' + i,
+                duration: '10:00',
+                state: 0,
+                progress: 60,
+                outputFormat: 'mp4'
+            })
+        }
+    }
 }
 </script>
 
 <style scoped lang="scss">
 .videoConverter {
     width: 100%;
-    height: 100%;
+    height: 800px;
     background-color: #fff;
     border: 0px solid black;
     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: scroll;
+        > 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/views/videoCutter.vue

@@ -2,26 +2,84 @@
   <div class="video-cutter">
     <div class="video-content">
       <video-player />
+      <div class="video-cutter">
+        <div class="video-content">
+          <VideoPlayer
+            @currentTime="changeTime"
+            @end="playEnd"
+          />
+        </div>
+        <div class="video-btn">
+          <videoChange @changeVideo="changeVideo" />
+          <videoControl
+            :duration="duration"
+            :now-time="nowTime"
+            @play="videoPlay"
+          />
+          <div />
+        </div>
+        <div />
+        <div />
+      </div>
     </div>
-    <div />
-    <div />
-    <div />
   </div>
 </template>
 
 <script>
 import VideoPlayer from '@/components/videoCutter/videoPlayer.vue'
+import VideoChange from '@/components/videoCutter/videoChange.vue'
+import VideoControl from '@/components/videoCutter/videoControl.vue'
+
 export default {
     components: {
-        VideoPlayer
+        VideoPlayer,
+        VideoChange,
+        VideoControl
     },
+    name: 'VideoCutter',
     data() {
         return {
-            name: ''
+            name: '',
+            nowTime: 0,
+            duration: 0,
+            playing: false,
+            canPlay: false
         }
     },
     created() {},
-    mounted() {}
+    mounted() {
+        this.$bus.on('videoCutter.canPlay', this.canPlayFunc)
+    },
+    methods: {
+        changeVideo() {
+            console.log('todo change video, <-----lilei')
+        },
+        canPlayFunc(data) {
+            this.duration = data
+            this.canPlay = true
+        },
+        videoPlay() {
+            if (!this.canPlay) return
+            let ob = {}
+            if (this.playing) {
+                ob.play = false
+            } else {
+                ob.play = true
+                if (this.nowTime >= this.duration) {
+                    ob.time = 0
+                }
+            }
+            this.playing = !this.playing
+            this.$bus.emit('videoPlayer.play', ob)
+        },
+        changeTime(data) {
+            console.log(data)
+        },
+        playEnd() {
+            this.playing = false
+            this.nowTime = this.duration
+        }
+    }
 }
 </script>
 
@@ -35,4 +93,8 @@ export default {
     width: 100%;
     height: 700px;
 }
+.video-btn {
+    display: flex;
+    justify-content: space-between;
+}
 </style>

vue.config.js

+/*
+ * @Date: 2020-08-27 09:05:54
+ * @LastEditors: OBKoro1
+ * @LastEditTime: 2020-08-27 15:30:17
+ * @FilePath: /vue.config.js
+ * @Description: 描述
+ * @Author: huacong
+ * @
+ */
 // console.log(`process.env1:`, process.env);
-console.log(`process.env.NODE_ENV1:`, process.env.NODE_ENV)
+console.log('process.env.NODE_ENV1:', process.env.NODE_ENV)
 
 module.exports = {
     // outputDir: process.env.outputDir,
@@ -34,7 +43,7 @@ module.exports = {
     css: {
         loaderOptions: {
             sass: {
-                prependData: `@import "@/assets/style/index.scss";`
+                prependData: '@import "@/assets/style/index.scss";'
             }
         }
     }