dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/AddReport.vue

<template>
  <div class="report">
    <components class="report-item" :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">完成</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
    },

    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
          }
        })
      },

      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>