Merge branch 'develop' of gitlab.ilaihua.com:laihua-web/laihua-toolkit into develop

# Conflicts:
#	src/views/videoConverter.vue

.editorconfig

@@ -21,3 +21,6 @@ insert_final_newline = true
 
 # 是否删除行尾的空格  可选择true和false
 trim_trailing_whitespace = true
+
+[*.scss]
+indent_size = 2

.prettierrc.js

@@ -6,7 +6,7 @@ module.exports = {
     // 换行长度
     printWidth: 150,
     // tab缩进大小,默认为2
-    tabWidth: 4,
+    tabWidth: 2,
     // 使用tab缩进，默认false
     useTabs: false,
     // 是否使用分号, 默认true

config/baseUrl.js

@@ -3,17 +3,17 @@ console.log('process.env:', process.env)
 console.log('process.env.NODE_ENV:', process.env.NODE_ENV)
 //
 switch (process.env.NODE_ENV) {
-    case 'development':
-        baseUrl = 'http://localhost:3000/development' //开发环境url
-        break
+  case 'development':
+    baseUrl = 'http://localhost:3000/development' //开发环境url
+    break
 
-    case 'passports': // 注意这里的名字要和步骤二中设置的环境名字对应起来
-        baseUrl = 'http://localhost:3000/passports' //测试环境中的url
-        break
+  case 'passports': // 注意这里的名字要和步骤二中设置的环境名字对应起来
+    baseUrl = 'http://localhost:3000/passports' //测试环境中的url
+    break
 
-    case 'production':
-        baseUrl = 'http://106.13.94.82:3000/production' //生产环境url
-        break
+  case 'production':
+    baseUrl = 'http://106.13.94.82:3000/production' //生产环境url
+    break
 }
 
 export default baseUrl

src/components/videoCutter/videoChange.vue

@@ -17,13 +17,13 @@ export default {
 </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;
+  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

@@ -32,7 +32,7 @@ export default {
       return min + ':' + sec
     }
   },
-    props: ['duration', 'nowTime'], // eslint-disable-line
+  props: ['duration', 'nowTime'], // eslint-disable-line
   data() {
     return {}
   },
@@ -45,27 +45,27 @@ export default {
 </script>
 <style lang="scss" scoped>
 .video-control {
-    display: flex;
-    justify-content: flex-start;
-    align-self: center;
-    width: 200px;
-    user-select: none;
+  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;
+  border: 1px solid #dddddd;
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  margin-right: 10px;
+  cursor: pointer;
 }
 .video-time-content {
-    display: flex;
+  display: flex;
 
-    > div,
-    span {
-        line-height: 30px;
-        color: #474261;
-    }
+  > div,
+  span {
+    line-height: 30px;
+    color: #474261;
+  }
 }
 </style>

src/components/videoCutter/videoPlayer.vue

@@ -64,16 +64,16 @@ export default {
 </script>
 <style lang="scss" scoped>
 .video-player {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    background-color: beige;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: beige;
 
-    video {
-        max-width: 100%;
-        max-height: 100%;
-    }
+  video {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
 </style>

src/components/videoCutter/videoTimeline.vue

+<template>
+  <div class="video-timeline">
+    <div
+      ref="sliderWidth"
+      v-drag
+      class="time-slider"
+    >
+      <div class="time-slider-rail"></div>
+      <div
+        class="time-slider-track"
+        :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>
+</template>
+<script>
+export default {
+  name: 'VideoTimeline',
+  directives: {
+    drag(el, binding, vnode) {
+      let _this = vnode.context,
+        mousemove = null,
+        mouseup = null,
+        dataAction = ''
+
+      mousemove = (e) => {
+        _this.dragMove && _this.dragMove(e.pageX, dataAction, e)
+      }
+
+      mouseup = (e) => {
+        document.removeEventListener('mousemove', mousemove)
+        document.removeEventListener('mouseup', mouseup)
+
+        _this.dragUp && _this.dragUp(e.pageX, dataAction, e)
+      }
+
+      el.onmousedown = (e) => {
+        dataAction = e.target.dataset.action
+
+        if (e.which === 3 || e.which === 2) {
+          e.stopPropagation()
+          return
+        }
+
+        document.addEventListener('mousemove', mousemove)
+        document.addEventListener('mouseup', mouseup)
+
+        _this.dragDown && _this.dragDown(e.pageX, dataAction, e)
+      }
+    }
+  },
+  props: {
+    info: {
+      type: Object,
+      required: true,
+      default: function() {
+        return { step: 0.1, min: 0, max: 10, val: 0, cut: [0, 10] }
+      }
+    }
+  },
+  data() {
+    return {
+      width: 100
+    }
+  },
+  methods: {
+    dragDown(dis, action) {
+      if (!action) return
+      this.width = this.$refs.sliderWidth.clientWidth
+      this.action = action
+      this.dragHand = true
+      this.mpos = {
+        x: dis,
+        v: this.info.val
+      }
+      this.$emit('changeData', { val: this.mpos.v, action: action, type: 'start' })
+    },
+    dragMove(pos) {
+      if (!this.action) return
+      let val = 0
+      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);
+      // 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' })
+    },
+    dragUp() {
+      if (!this.action) return
+      let val = 0
+      this.mpos = null
+      this.dragHand = false
+      this.action = ''
+      this.$emit('changeData', { val: val, action: this.action, type: 'end' })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.video-timeline {
+  width: 100%;
+  height: 50px;
+  background-color: beige;
+}
+.time-slider {
+  position: relative;
+  height: 15px;
+  padding: 5px 0;
+  width: 100%;
+  margin-right: 1px;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  * {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .time-slider-rail {
+    position: absolute;
+    width: 100%;
+    background-color: #d9ddea;
+    height: 4px;
+    border-radius: 3px;
+  }
+
+  .time-slider-track {
+    position: absolute;
+    background-color: #737596;
+    border-radius: 3px;
+    height: 4px;
+    left: 0%;
+    width: 69.1515%;
+  }
+
+  .time-slider-handle {
+    position: absolute;
+    margin-left: -6px;
+    margin-top: -4px;
+    left: 69.1515%;
+    width: 12px;
+    height: 12px;
+    background-color: #737596;
+    cursor: -webkit-grab;
+    cursor: grab;
+    border-radius: 50%;
+    -ms-touch-action: pan-x;
+    touch-action: pan-x;
+  }
+}
+</style>

src/views/screenshot.vue

@@ -76,21 +76,21 @@ export default {
 
 <style lang="scss" scoped>
 .screenshot {
-    width: 100%;
-    height: 100%;
-    margin: 30px;
-    display: flex;
-    flex-direction: column;
-    .content {
-        height: 90%;
-        margin: 20px 30px;
-        background-color: lightcyan;
-    }
-    .operate-area {
-        #select-btn {
-            width: 200px;
-            height: 100px;
-        }
+  width: 100%;
+  height: 100%;
+  margin: 30px;
+  display: flex;
+  flex-direction: column;
+  .content {
+    height: 90%;
+    margin: 20px 30px;
+    background-color: lightcyan;
+  }
+  .operate-area {
+    #select-btn {
+      width: 200px;
+      height: 100px;
     }
+  }
 }
 </style>

src/views/videoConverter.vue

@@ -22,10 +22,38 @@ export default {
 
 <style scoped lang="scss">
 .videoConverter {
+  width: 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: 800px;
     background-color: #fff;
     border: 0px solid black;
     margin: 0px;
+    .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

 <template>
   <div class="video-cutter">
     <div class="video-content">
-      <VideoPlayer
+      <videoPlayer
         @currentTime="changeTime"
         @end="playEnd"
         @timeupdate="timeupdate"
-      ></VideoPlayer>
+      ></videoPlayer>
     </div>
     <div class="video-btn">
       <videoChange @changeVideo="changeVideo"></videoChange>
@@ -14,9 +14,18 @@
         :now-time="nowTime"
         @play="videoPlay"
       ></videoControl>
-      <div></div>
+      <div class="video-water">
+        <input
+          id="cutterRemoveWater"
+          v-model="noWater"
+          type="checkbox"
+        >
+        <label for="cutterRemoveWater">去除水印</label>
+      </div>
+    </div>
+    <div class="timeline-content">
+      <videoTimeline :info="timelineObj"></videoTimeline>
     </div>
-    <div></div>
     <div></div>
   </div>
 </template>
@@ -27,7 +36,8 @@ export default {
   components: {
     VideoPlayer: () => import('@/components/videoCutter/videoPlayer.vue'),
     VideoChange: () => import('@/components/videoCutter/videoChange.vue'),
-    VideoControl: () => import('@/components/videoCutter/videoControl.vue')
+    VideoControl: () => import('@/components/videoCutter/videoControl.vue'),
+    VideoTimeline: () => import('@/components/videoCutter/videoTimeline.vue')
   },
   data() {
     return {
@@ -35,7 +45,9 @@ export default {
       nowTime: 0,
       duration: 0,
       playing: false,
-      canPlay: false
+      canPlay: false,
+      noWater: true,
+      timelineObj: { step: 0.1, min: 0, max: 10, val: 0 }
     }
   },
   created() {},
@@ -48,6 +60,7 @@ export default {
     },
     canPlayFunc(data) {
       this.duration = data
+      this.timelineObj.max = this.duration
       this.canPlay = true
     },
     videoPlay() {
@@ -59,6 +72,7 @@ export default {
         ob.play = true
         if (this.nowTime >= this.duration) {
           ob.time = 0
+          this.timelineObj.val = 0
         }
       }
       this.playing = !this.playing
@@ -70,9 +84,11 @@ export default {
     playEnd() {
       this.playing = false
       this.nowTime = this.duration
+      this.timelineObj.val = this.nowTime
     },
     timeupdate(time) {
       this.nowTime = time
+      this.timelineObj.val = this.nowTime
     }
   }
 }
@@ -81,15 +97,32 @@ export default {
 <style scoped lang="scss">
 /* @import url(); 引入css类 */
 .video-cutter {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 .video-content {
-    width: 100%;
-    height: 700px;
+  width: 100%;
+  height: 700px;
 }
 .video-btn {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
+}
+.video-water {
+  display: flex;
+  align-items: center;
+
+  input {
+    margin-right: 4px;
+  }
+
+  * {
+    cursor: pointer;
+  }
+}
+.timeline-content {
+  width: 100%;
+  margin: 10px 0;
+  padding: 0 20px;
 }
 </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)
 
 module.exports = {
-    // outputDir: process.env.outputDir,
-    // assetsDir: 'static',
-    publicPath: '/',
-    devServer: {
-        open: true,
-        // host: '0.0.0.0',
-        port: 3018,
-        https: false,
-        hotOnly: false,
-        proxy: {
-            webapi: {
-                target: 'https://test2.laihua.com/',
-                ws: true,
-                changeOrigin: true,
-                pathRewrite: { '^/webapi': '/' }
-            }
-        }
-    },
-    chainWebpack: (config) => {
-        config.module
-            .rule('eslint')
-            .use('eslint-loader')
-            .loader('eslint-loader')
-            .tap((options) => {
-                // 保存自动eslint修复
-                options.fix = true
-                return options
-            })
-    },
-    css: {
-        loaderOptions: {
-            sass: {
-                prependData: '@import "@/assets/style/index.scss";'
-            }
-        }
+  // outputDir: process.env.outputDir,
+  // assetsDir: 'static',
+  publicPath: '/',
+  devServer: {
+    open: true,
+    // host: '0.0.0.0',
+    port: 3018,
+    https: false,
+    hotOnly: false,
+    proxy: {
+      webapi: {
+        target: 'https://test2.laihua.com/',
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: { '^/webapi': '/' }
+      }
     }
+  },
+  chainWebpack: (config) => {
+    config.module
+      .rule('eslint')
+      .use('eslint-loader')
+      .loader('eslint-loader')
+      .tap((options) => {
+        // 保存自动eslint修复
+        options.fix = true
+        return options
+      })
+  },
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: '@import "@/assets/style/index.scss";'
+      }
+    }
+  }
 }