意见反馈功能页面提交

package.json

@@ -25,6 +25,7 @@
     "echarts": "4.1.0",
     "element-ui": "2.4.6",
     "file-saver": "1.3.8",
+    "html2canvas": "^1.0.0-rc.3",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
     "jszip": "3.1.5",
@@ -33,6 +34,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "screenfull": "3.3.3",
+    "simple-drawing-board": "^2.0.1",
     "vue": "2.5.17",
     "vue-count-to": "1.0.13",
     "vue-router": "3.0.2",

src/layout/Layout.vue

@@ -5,6 +5,13 @@
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
+        <div class="feedback">
+            <el-tooltip class="item" effect="dark" content="建议反馈" placement="left">
+              <el-button type="text" @click="doFeedback">
+                <svg-icon  style="font-size: 28px;color: #606266;" icon-class="codeConsole" />
+              </el-button>
+            </el-tooltip>
+          </div>
         <tags-view v-if="needTagsView" />
       </div>
       <app-main />
@@ -12,6 +19,7 @@
         <settings />
       </right-panel>
     </div>
+    <feedback :showDialog.sync="feedbackShow"></feedback>
   </div>
 </template>
 
@@ -20,6 +28,7 @@ import RightPanel from '@/components/RightPanel'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
+import feedback from './feedback.vue'
 
 export default {
   name: 'Layout',
@@ -29,7 +38,13 @@ export default {
     Settings,
     Sidebar,
     TagsView,
-    RightPanel
+    RightPanel,
+    feedback
+  },
+  data() {
+    return {
+      feedbackShow: false
+    }
   },
   mixins: [ResizeMixin],
   computed: {
@@ -51,6 +66,10 @@ export default {
   methods: {
     handleClickOutside() {
       this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+    },
+    doFeedback() {
+      console.log(111)
+      this.feedbackShow = true
     }
   }
 }
@@ -99,4 +118,12 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+
+  .feedback {
+    position: fixed;
+    z-index: 999999;
+    right: 10px;
+    bottom: 60px;
+  }
 </style>
+

src/layout/feedback.vue

+<template>
+  <div>
+    <el-dialog data-html2canvas-ignore="true" title="意见反馈" :visible.sync="show" class="" @open="init" width="60%" @close="close" center>
+      <el-form :model="feedback" ref="form" label-width="0px" class="feedback-add-form">
+        <el-form-item label="" prop="info">
+          <el-input v-model="feedback.info" :rows="2" type="textarea" placeholder="告诉我们你的建议或遇到的问题。"></el-input>
+        </el-form-item>
+        <el-form-item label="">
+          <span>屏幕截图 (可选)：</span>
+        </el-form-item>
+        <el-form-item label="" v-show="submitScreenshot" v-loading="dataLoading">
+          <div id="screenshot">
+          </div>
+        </el-form-item>
+        <el-form-item label="">
+          <el-checkbox v-model="submitScreenshot">提交屏幕截图</el-checkbox>
+        </el-form-item>
+      </el-form>
+      <el-button slot="footer" class="confirm-btn" type="primary" @click="submit" :loading="confirmLoading">提交</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import SimpleDrawingBoard from 'simple-drawing-board'
+import html2canvas from 'html2canvas'
+export default {
+  props: ['showDialog'],
+
+  data() {
+    return {
+      feedback: {
+        info: ''
+      },
+      submitScreenshot: true,
+      dataLoading: false,
+      confirmLoading: false
+    }
+  },
+
+  computed: {
+    show: {
+      get() {
+        return this.showDialog
+      },
+      set(val) {
+        this.$emit('update:showDialog', val)
+      }
+    }
+  },
+
+  methods: {
+    async loadLibrary () {
+      if (typeof html2canvas === 'undefined') {
+        try {
+          console.error('html2canvas not import', e.toString())
+        } catch (e) {
+          console.error('html2canvas.min.js is missing', e.toString())
+          return null
+        }
+      }
+      return html2canvas
+    },
+    async init() {
+      await this.loadLibrary()
+      this.dataLoading = true
+      this.$nextTick(() => {
+        // modal层处理，截屏时忽略遮罩层
+        let modals = document.getElementsByClassName('v-modal')
+        for (let i = 0; i < modals.length; i++) {
+          modals[i].setAttribute('data-html2canvas-ignore', 'true')
+        }
+
+      html2canvas(document.body, { logging: false })
+          .then(canvas => {
+            let screenshot = document.getElementById('screenshot')
+            canvas.setAttribute('style', 'width:100%')
+            screenshot.appendChild(canvas)
+            this.dataLoading = false
+            window.sdb = new SimpleDrawingBoard(screenshot.getElementsByTagName('canvas')[0], {
+              lineColor: '#ff0000',
+              lineSize: 4
+            })
+          })
+          .catch(e => {
+            this.dataLoading = false
+            util.showErrorMessageBox(e)
+          })
+      })
+    },
+
+    close() {
+      let screenshot = document.getElementById('screenshot')
+      let canvas = screenshot.getElementsByTagName('canvas')[0]
+      screenshot.removeChild(canvas)
+    },
+
+    async submit() {
+      try {
+        this.confirmLoading = true
+        let formData = new FormData()
+        if (window.sdb) {
+          if (this.submitScreenshot) {
+            let screenshot = window.sdb.getImg()
+            formData.append('file', screenshot)
+          }
+          formData.append('feedback', this.feedback.info)
+        }
+        let res = await axios.post('http://', formData, {
+          headers: {
+            'Origin': window.location.origin,
+            'Content-Type': 'multipart/form-data'
+          },
+          changeOrigin: true
+        })
+        this.confirmLoading = false
+
+        util.showResponseMessage(res.data.data)
+        if (res.data.data.status === 1) {
+          this.show = false
+        }
+      } catch (e) {
+        util.showErrorMessageBox(e)
+        this.confirmLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+#screenshot {
+  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABGdBTUEAALGPC/xhBQAAARpJREFUOBGdkr1KA0EUhTcxEkSQQIpAihQWPoedD2BnIVsZQiBVEkiR7SwtBDsJqXwBLQwEgoWNjY2FjYUQ38Ei5Oc7sBeGLTKze+Djzsyecxh2N4ryq0zkHpYQQ2H1SW5TNsxukaZzQsewACvTvIBg3eFUaABHMEv3OruBIN3icm8wZl+FZ3iBQ/AqweGW2FrlKlChV0McFsxOvaegm/T2lLzzTC/dqzaO7A1s/8GzE28Dhhj0f1jQnZ+c18CrKxxrcMO2/uK87m3AcAkrsKA7vzlvQJAmuNywrX84bwY1YBrBATyCFWj+QguCJKNCU1DZQ7r/Y55CsK5x2i2eWFcggTPIJd3Eiv5Zd3KlU3OJOQd9lVd4A5Xl1g4YG2GGhwRfegAAAABJRU5ErkJggg==) 0 17,
+    default;
+}
+.confirm-btn {
+  width: 30%;
+}
+</style>