html2canvas 转至cdn

package.json

@@ -46,7 +46,6 @@
     "core-js": "^3.11.0",
     "dayjs": "^1.10.6",
     "echarts": "^4.9.0",
-    "html2canvas": "^1.4.1",
     "recorder-core": "^1.1.21080800",
     "regenerator-runtime": "^0.12.1",
     "vue": "^2.6.11",

src/project/caw/AppCountryAlbum/AddReport.vue

@@ -9,13 +9,13 @@
       </div>
       <div class="report-wrapper">
         <div
-          class="report-item"
+            class="report-item"
-          :key="index"
+            :key="index"
-          v-for="(item, index) in configList"
+            v-for="(item, index) in configList"
-          :class="[currIndex === index ? 'active' : '']"
+            :class="[currIndex === index ? 'active' : '']"
-          @click="changeComponent(item, index)">
+            @click="changeComponent(item, index)">
-          <image class="img" :src="item.thum" />
+          <image class="img" :src="item.thum"/>
-          <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
+          <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png"/>
           <span @click="toEdit">编辑</span>
         </div>
       </div>
@@ -24,211 +24,211 @@
 </template>
 
 <script>
-  import Daily from './components/report/Daily'
+import Daily from './components/report/Daily'
-  import WorkReport from './components/report/WorkReport'
+import WorkReport from './components/report/WorkReport'
-  import InspectLog from './components/report/InspectLog'
+import InspectLog from './components/report/InspectLog'
-  import MeetingMminutes from './components/report/MeetingMminutes'
+import MeetingMminutes from './components/report/MeetingMminutes'
 
-  export default {
+export default {
-    name: 'Report',
+  name: 'Report',
 
-    appName: '拼图汇报',
+  appName: '拼图汇报',
 
-    data () {
+  data() {
-      return {
+    return {
-        component: 'WorkReport',
+      component: 'WorkReport',
-        configList: [],
+      configList: [],
-        currIndex: 0,
+      currIndex: 0,
-        albumId: ''
+      albumId: ''
-      }
+    }
-    },
+  },
 
-    components: {
+  components: {
-      Daily,
+    Daily,
-      InspectLog,
+    InspectLog,
-      WorkReport,
+    WorkReport,
-      MeetingMminutes
+    MeetingMminutes
-    },
+  },
 
-    computed: {
+  computed: {
-      currConfig () {
+    currConfig() {
-        if (this.currIndex < 0 || !this.configList.length) return []
+      if (this.currIndex < 0 || !this.configList.length) return []
 
-        return this.configList[this.currIndex].itemList
+      return this.configList[this.currIndex].itemList
-      }
+    }
-    },
+  },
 
-    onLoad (query) {
+  onLoad(query) {
-      this.albumId = query.id || ''
+    this.albumId = query.id || ''
-      this.getConfig()
+    this.getConfig()
-    },
+  },
 
-    methods: {
+  methods: {
-      getConfig () {
+    getConfig() {
-        this.$http.post(`/api/appalbumtemplate/list?size=100&templateType=1&status=1`).then(res => {
+      this.$http.post(`/api/appalbumtemplate/list?size=100&templateType=1&status=1`).then(res => {
-          if (res.code === 0) {
+        if (res.code === 0) {
-            this.configList = res.data.records
+          this.configList = res.data.records
-          }
-        })
-      },
-
-      back () {
-        uni.navigateBack({
-          delta: 1
-        })
-      },
-
-      toEdit () {
-        this.$refs.reportItem.linkTo()
-      },
-
-      save () {
-        this.$loading()
-        this.$refs.reportItem.screenshot() && this.$refs.reportItem.screenshot().then(canvas => {
-          let dataURL = canvas.toDataURL('image/png')
-          const file = this.dataURLtoFile(dataURL, 'photo.png')
-          let formData = new FormData()
-          formData.append('file', file)
-          this.$http.post('/admin/file/add2?type=image', formData).then(res => {
-            if (res.code === 0) {
-              const data = this.configList[this.currIndex]
-              uni.navigateTo({
-                url: `./ReportImg?albumId=${this.albumId}&img=${res.data.url}&fileId=${res.data.id}&type=${data.watermarkType}&templateId=${data.id}`
-              })
-            }
-
-            uni.hideLoading()
-          })
-        }).catch(e => {
-          console.log(e)
-        })
-      },
-
-      dataURLtoFile (dataurl, filename) {
-        let arr = dataurl.split(',')
-        let mime = arr[0].match(/:(.*?);/)[1]
-        let bstr = atob(arr[1])
-        let n = bstr.length
-        let u8arr = new Uint8Array(n)
-        while (n--) {
-          u8arr[n] = bstr.charCodeAt(n)
         }
-        return new File([u8arr], filename, { type: mime })
+      })
-      },
+    },
 
-      changeComponent (e, index) {
+    back() {
-        this.currIndex = index
+      uni.navigateBack({
-        this.component = this.mapComponent(e.watermarkType)
+        delta: 1
-      },
+      })
+    },
 
-      mapComponent (type) {
+    toEdit() {
-        return {
+      this.$refs.reportItem.linkTo()
-          '9': 'WorkReport',
+    },
-          '10': 'Daily',
+
-          '11': 'InspectLog',
+    save() {
-          '12': 'MeetingMminutes'
+      this.$loading()
-        }[type]
+      this.$refs.reportItem?.screenshot().then(canvas => {
+        let dataURL = canvas.toDataURL('image/png')
+        const file = this.dataURLtoFile(dataURL, 'photo.png')
+        let formData = new FormData()
+        formData.append('file', file)
+        this.$http.post('/admin/file/add2?type=image', formData).then(res => {
+          if (res.code === 0) {
+            const data = this.configList[this.currIndex]
+            uni.navigateTo({
+              url: `./ReportImg?albumId=${this.albumId}&img=${res.data.url}&fileId=${res.data.id}&type=${data.watermarkType}&templateId=${data.id}`
+            })
+          }
+
+          uni.hideLoading()
+        })
+      }).catch(e => {
+        console.log(e)
+      })
+    },
+
+    dataURLtoFile(dataurl, filename) {
+      let arr = dataurl.split(',')
+      let mime = arr[0].match(/:(.*?);/)[1]
+      let bstr = atob(arr[1])
+      let n = bstr.length
+      let u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
       }
+      return new File([u8arr], filename, {type: mime})
+    },
+
+    changeComponent(e, index) {
+      this.currIndex = index
+      this.component = this.mapComponent(e.watermarkType)
+    },
+
+    mapComponent(type) {
+      return {
+        '9': 'WorkReport',
+        '10': 'Daily',
+        '11': 'InspectLog',
+        '12': 'MeetingMminutes'
+      }[type]
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .report {
+.report {
-    position: relative;
+  position: relative;
-    padding-bottom: 330px;
+  padding-bottom: 330px;
 
-    .report-btns {
+  .report-btns {
-      display: flex;
+    display: flex;
-      align-items: center;
+    align-items: center;
-      justify-content: space-between;
+    justify-content: space-between;
-      height: 96px;
+    height: 96px;
-      padding: 0 32px;
+    padding: 0 32px;
 
-      span {
+    span {
-        color: #222222;
+      color: #222222;
-        font-size: 32px;
+      font-size: 32px;
-        font-weight: 600;
+      font-weight: 600;
-      }
-
-      h2 {
-        color: #333333;
-        font-size: 28px;
-        font-weight: 600;
-      }
     }
 
+    h2 {
+      color: #333333;
+      font-size: 28px;
+      font-weight: 600;
+    }
+  }
 
-    * {
+
-      box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+
+  .report-item {
+    padding-bottom: 20px;
+  }
+
+  .report-list {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding-bottom: 16px;
+    background: #FFFFFF;
+
+    .report-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 24px;
     }
 
     .report-item {
-      padding-bottom: 20px;
+      position: relative;
-    }
+      width: 176px;
+      height: 208px;
+      border: 4px solid transparent;
 
-    .report-list {
+      .img {
-      position: fixed;
+        width: 100%;
-      left: 0;
+        height: 208px;
-      bottom: 0;
-      width: 100%;
-      padding-bottom: 16px;
-      background: #FFFFFF;
-
-      .report-wrapper {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 24px;
       }
 
-      .report-item {
+      span {
-        position: relative;
+        display: none;
-        width: 176px;
+        position: absolute;
-        height: 208px;
+        top: 50%;
-        border: 4px solid transparent;
+        left: 50%;
+        z-index: 1;
+        width: 128px;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+        color: #fff;
+        font-size: 32px;
+        background: rgba(0, 0, 0, 0.8);
+        border-radius: 8px;
+        transform: translate(-50%, -50%);
+      }
 
+      .checked {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        width: 64px;
+        height: 64px;
+      }
+
+      &.active {
         .img {
-          width: 100%;
+          border: 4px solid #408EF6;
-          height: 208px;
         }
 
         span {
-          display: none;
+          display: block;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          z-index: 1;
-          width: 128px;
-          height: 56px;
-          line-height: 56px;
-          text-align: center;
-          color: #fff;
-          font-size: 32px;
-          background: rgba(0, 0, 0, 0.8);
-          border-radius: 8px;
-          transform: translate(-50%, -50%);
-        }
-
-        .checked {
-          position: absolute;
-          top: 0;
-          right: 0;
-          z-index: 1;
-          width: 64px;
-          height: 64px;
-        }
-
-        &.active {
-          .img {
-            border: 4px solid #408EF6;
-          }
-
-          span {
-            display: block;
-          }
         }
       }
     }
   }
+}
 </style>

src/project/caw/AppCountryAlbum/AppCountryAlbum.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="form">
-    <component ref="TabPage" :is="component" @change="onChange" :params="params"/>
+    <component v-if="html2canvas" ref="TabPage" :is="component" @change="onChange" :params="params"/>
   </div>
 </template>
 
 <script>
 import Tabbar from './components/Tabbar.vue'
-import { mapActions, mapState } from "vuex"
+import {mapActions, mapState} from "vuex"
 
 export default {
   name: 'AppCountryAlbum',
@@ -14,6 +14,7 @@ export default {
 
   data() {
     return {
+      html2canvas: null,
       component: 'Tabbar',
       params: {}
     }
@@ -23,7 +24,7 @@ export default {
     Tabbar
   },
 
-  onLoad () {
+  onLoad() {
     uni.setStorageSync('address', {
       lat: '',
       lng: '',
@@ -31,7 +32,9 @@ export default {
       weather: '',
       cityCode: ``
     })
-
+    this.$injectLib("https://cdn.cunwuyun.cn/html2canvas.min.js", () => {
+      this.html2canvas = window?.html2canvas
+    })
 
     setTimeout(() => {
       this.getLocation()
@@ -54,7 +57,7 @@ export default {
       this.component = e.type
     },
 
-    getLocation () {
+    getLocation() {
       this.injectJWeixin(['getLocation']).then(() => {
         wx.getLocation({
           type: 'wgs84',
@@ -83,7 +86,7 @@ export default {
       })
     },
 
-    getWeather (code) {
+    getWeather(code) {
       this.$http.post(`/api/bdweather/wdata?districtId=${code}`).then(res => {
         if (res.code === 0) {
           const data = res.data.result.now

src/project/caw/AppCountryAlbum/Watermark.vue

@@ -111,7 +111,6 @@
 </template>
 
 <script>
-  import html2canvas from 'html2canvas'
   import Watermark1 from './components/watermark/Watermark1'
   import Watermark2 from './components/watermark/Watermark2'
   import Watermark3 from './components/watermark/Watermark3'

src/project/caw/AppCountryAlbum/components/report/Daily.vue

@@ -40,7 +40,6 @@
 </template>
 
 <script>
-  import html2canvas from 'html2canvas'
   import RenderContent from './RenderContent.vue'
   import { mapFieldLable } from '../../config'
   export default {

src/project/caw/AppCountryAlbum/components/report/InspectLog.vue

@@ -42,7 +42,6 @@
 </template>
 
 <script>
-  import html2canvas from 'html2canvas'
   import { mapFieldLable } from '../../config'
   import RenderContent from './RenderContent.vue'
   export default {

src/project/caw/AppCountryAlbum/components/report/MeetingMminutes.vue

@@ -53,7 +53,6 @@
 </template>
 
 <script>
-  import html2canvas from 'html2canvas'
   import RenderContent from './RenderContent.vue'
   import { mapFieldLable } from '../../config'
   export default {

src/project/caw/AppCountryAlbum/components/report/WorkReport.vue

@@ -39,7 +39,6 @@
 </template>
 
 <script>
-  import html2canvas from 'html2canvas'
   import RenderContent from './RenderContent.vue'
   import { mapFieldLable } from '../../config'