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

.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
 
 来画工具宝

package.json

@@ -25,7 +25,7 @@
   },
   "lint-staged": {
     "**/*.{js,vue}": [
-        "prettier --write",
+      "prettier --write",
       "eslint --fix"
     ]
   },
@@ -34,8 +34,10 @@
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
+    "vue-bus": "^1.2.1",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "vue-js-modal": "^2.0.0-rc.6"
   },
   "config": {
     "commitizen": {

src/App.vue

@@ -21,7 +21,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)
     }
@@ -44,5 +43,6 @@ export default {
     flex: 1;
     display: flex;
     justify-content: space-between;
+    overflow: hidden;
 }
 </style>

src/components/videoCutter/videoPlayer.vue

 <template>
     <div class="video-player">
-        <video></video>
+        <video
+            ref="videoDom"
+            src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"
+        ></video>
     </div>
 </template>
 <script>
 export default {
     data() {
-        return {}
+        return {
+            state: 'pluse',
+            times: 0,
+            canPlay: false
+        }
+    },
+    mounted() {
+        this.$bus.on('videoPlayer.play', (data) => {
+            console.log(data)
+            // if(data.state)
+        })
+        this.$nextTick(() => {
+            this.$refs.videoDom.addEventListener('canplay', () => {
+                this.canPlay = true
+            })
+        })
+    },
+    methods: {
+        play() {
+            if (!this.canPlay) return
+            this.$refs.videoDom.play()
+        }
     }
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.video-player {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: beige;
+
+    video {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+</style>

src/main.js

@@ -5,6 +5,11 @@ import store from './store'
 import './registerServiceWorker'
 import './assets/style/index.scss'
 import axios from 'axios'
+import VueBus from 'vue-bus'
+import VModal from 'vue-js-modal'
+
+Vue.use(VueBus)
+Vue.use(VModal)
 
 import baseURL from '../config/baseUrl.js'
 console.log('baseURL:', baseURL)

src/registerServiceWorker.js

@@ -5,7 +5,10 @@ import { register } from 'register-service-worker'
 if (process.env.NODE_ENV === 'production') {
     register(`${process.env.BASE_URL}service-worker.js`, {
         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() {
             console.log('Service worker has been registered.')

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

src/views/videoCutter.vue

@@ -31,4 +31,8 @@ export default {
     width: 100%;
     height: 100%;
 }
+.video-content {
+    width: 100%;
+    height: 700px;
+}
 </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)