dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/AddReport.vue

<template>
  <div class="report">
    <components class="report-item" ref="reportItem" :config="currConfig" v-if="currConfig.length" :is="component"></components>
    <div class="report-list" data-html2canvas-ignore>
      <image
        v-for="(item, index) in configList"
        :src="item.thum"
        :key="index"
        :class="[currIndex === index ? 'active' : '']"
        @click="changeComponent(item, index)" />
    </div>
    <div class="report-btn" data-html2canvas-ignore @click="save">完成</div>
  </div>
</template>

<script>
  import Daily from './components/report/Daily'
  import WorkReport from './components/report/WorkReport'
  import InspectLog from './components/report/InspectLog'
  import MeetingMminutes from './components/report/MeetingMminutes'

  export default {
    name: 'Report',

    appName: '拼图汇报',

    data () {
      return {
        component: 'WorkReport',
        configList: [],
        currIndex: 0
      }
    },

    components: {
      Daily,
      InspectLog,
      WorkReport,
      MeetingMminutes
    },

    computed: {
      currConfig () {
        if (this.currIndex < 0 || !this.configList.length) return []

        return this.configList[this.currIndex].itemList
      }
    },

    onLoad () {
      this.getConfig()
    },

    methods: {
      getConfig () {
        this.$http.post(`/api/appalbumtemplate/list?size=100&templateType=1&status=1`).then(res => {
          if (res.code === 0) {
            this.configList = res.data.records
          }
        })
      },

      save () {
        this.$loading()
        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?img=${res.data.url}&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 {
    position: relative;
    padding-bottom: 240px;

    .report-btn {
      position: fixed;
      bottom: 272px;
      left: 32px;
      z-index: 11;
      width: 144px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: #FFFFFF;
      font-size: 32px;
      color: #408EF6;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
      border-radius: 40px;

      &:active {
        opacity: 0.7;
      }
    }


    * {
      box-sizing: border-box;
    }

    .report-item {
      padding-bottom: 20px;
    }

    .report-list {
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 240px;
      padding: 0 24px;
      background: #FFFFFF;

      image {
        width: 156px;
        height: 208px;
        margin-right: 16px;
        border: 4px solid transparent;

        &:last-child {
          margin-right: 0;
        }

        &.active {
          border: 4px solid #408EF6;
        }
      }
    }
  }
</style>