dvcp_v2_wxcp_app/src/project/caw/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>
      <div class="report-btns">
        <span @click="back">返回</span>
        <h2>拼图模板</h2>
        <span @click="save">保存</span>
      </div>
      <div class="report-wrapper">
        <div
            class="report-item"
            :key="index"
            v-for="(item, index) in configList"
            :class="[currIndex === index ? 'active' : '']"
            @click="changeComponent(item, index)">
          <image class="img" :src="item.thum"/>
          <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png"/>
          <span @click="toEdit">编辑</span>
        </div>
      </div>
    </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,
      albumId: ''
    }
  },

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

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

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

  onLoad(query) {
    this.albumId = query.id || ''
    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
        }
      })
    },

    back() {
      uni.navigateBack({
        delta: 1
      })
    },

    toEdit() {
      this.$refs.reportItem.linkTo()
    },

    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?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 {
  position: relative;
  padding-bottom: 330px;

  .report-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;
    padding: 0 32px;

    span {
      color: #222222;
      font-size: 32px;
      font-weight: 600;
    }

    h2 {
      color: #333333;
      font-size: 28px;
      font-weight: 600;
    }
  }


  * {
    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 {
      position: relative;
      width: 176px;
      height: 208px;
      border: 4px solid transparent;

      .img {
        width: 100%;
        height: 208px;
      }

      span {
        display: none;
        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>