zhgh_hmc/src/main/resources/static/components/mobile/cahd/info.vue

<template>
  <div style="padding-bottom: 20px;">

    <van-form readonly input-align="right">
      <div class="van-cell-group__title">
        <div class="van-sidebar-item van-sidebar-item--select">
          基础信息
        </div>
      </div>
      <van-cell-group>
        <van-field readonly :value="viewData.username" label="姓名"></van-field>
        <van-field readonly :value="viewData.loginname" label="工资号"></van-field>
        <van-field readonly :value="viewData.unitname" label="单位"></van-field>
        <van-field readonly :value="viewData.unionname" label="工会"></van-field>
      </van-cell-group>
      <div class="van-cell-group__title">
        <div class="van-sidebar-item van-sidebar-item--select">
          作品信息
        </div>
      </div>
      <van-cell-group>
        <van-field readonly name="type" :value="viewData.zpzt" label="作品主题"></van-field>
        <van-field readonly name="type" :value="viewData.lname" label="活动类别"></van-field>
        <van-field readonly name="type" :value="viewData.zname" label="作品类别"></van-field>
        <van-field readonly :value="viewData.zpms" label="简介"
                   input-align="left"
                   style="flex-flow: column"
                   rows="2" maxlength="200" type="textarea" show-word-limit autosize></van-field>

        <van-field label="照片" style="flex-flow: column" input-align="left">
          <template #label>
            <div class="mb10">照&emsp;&emsp;片</div>
          </template>
          <template #input>
            <vant-file-upload :files.sync="img2List" view :del="false"
                              v-if="img2List&&img2List.length>0"></vant-file-upload>
            <span v-else>暂无</span>
          </template>
        </van-field>

        <van-field label="视频" style="flex-flow: column" input-align="left">
          <template #label>
            <div class="mb10">视&emsp;&emsp;频</div>
          </template>
          <template #input>
            <template v-for="item in videoList" v-if="videoList.length>0">
              <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
                     width="640" height="264"
                     data-setup="{}" webkit-playsinline='true' playsinline='true' x-webkit-airplay='true'
                     x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-ignore-metadata='true'>
                <source :src="FILE_DOMAIN+item.filepath" type="video/mp4">
              </video>
            </template>
            <div v-else style="text-align: center;color: #c2bbbb;font-size: 10px;">
              没有音频。
            </div>

          </template>
        </van-field>

        <van-field label="音频" style="flex-flow: column" input-align="left">
          <template #label>
            <div class="mb10">音&emsp;&emsp;频</div>
          </template>
          <template #input>
            <template v-for="item in videoList" v-if="audioList.length>0">
              <audio id="amusic" preload="auto" controls style="width: 100%;outline: none;">
                <source :src="FILE_DOMAIN+item.filepath"/>
              </audio>
            </template>
            <div v-else style="text-align: center;color: #c2bbbb;font-size: 10px;">
              没有音频。
            </div>

          </template>
        </van-field>

        <van-field label="文档" style="flex-flow: column" input-align="left">
          <template #label>
            <div class="mb10">文&emsp;&emsp;档</div>
          </template>
          <template #input>
            <template v-for="(item,index) in docList" v-if="docList.length>0">
              <div class="text-nowrap color-puple"
                   @click="previewFile(item.filepath,item.filename,docList,index,item.id)">
                {{ item.filename }}
              </div>
            </template>
            <div v-else style="text-align: center;color: #c2bbbb;font-size: 10px;">
              没有文档。
            </div>

          </template>
        </van-field>


      </van-cell-group>
    </van-form>


    <template v-if="handle">
      <slot name="handle"></slot>
    </template>

  </div>
</template>

<script>
module.exports = {
  props: {
    handle: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '审核'
    },
    id: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      viewData: {},
      videoList: [],
      prevImgList: [],
      img2List: [],
      audioList: [],
      docList: [],
      imgtype: ['gif', 'jpg', 'png', 'jpeg'],
      videotype: ['flv', 'swf', 'mkv', 'avi', 'rm', 'rmvb', 'wmv', 'mp4', 'mov', 'mpg', 'mpeg'],
      doctype: ['doc', 'docx'],
      audiotype: ['mp3', 'wma', 'flac', 'wav', 'm4a', 'amr', 'au'],
    }
  },
  components: {
    'vant-file-upload': httpVueLoader('/components/plugins/VantFileUpload.vue')
  },
  methods: {
    async getInfo(id) {
      const {data, code, msg} = await $.get("/platform/hd/wmhd/findOneById", {id})
      const refs = await $.get("/mobile/cahd/list/findOne", {id})

      if (refs) {
        this.viewData = refs[0]
        data.forEach(val => {
          val.fjname = val.filename
          val.fjurl = val.filepath
          val.url = FILE_DOMAIN + val.filepath
          let filetype = val.fjname.substring(val.fjname.lastIndexOf('.') + 1, val.fjname.length).toLowerCase();
          if (this.videotype.indexOf(filetype) > -1) {
            this.videoList.push(val);
          } else if (this.imgtype.indexOf(filetype) > -1) {
            this.prevImgList.push(FILE_DOMAIN + val.filepath)
            this.img2List.push(val);
          } else if (this.doctype.indexOf(filetype) > -1) {
            this.docList.push(val);
          } else if (this.audiotype.indexOf(filetype) > -1) {
            this.audioList.push(val);
          }
        })
      } else {
        this.viewData = {}
        this.$toast.fail('获取信息失败');
      }
    },
  },
  async created() {
  }
}
</script>
<style>
.van-cell-group__title {
  padding-left: 0 !important;
}

.van-sidebar-item {
  font-size: 16px !important;
  text-indent: 4px !important;
}

.van-sidebar-item--select::before {
  left: 5px !important;
}


</style>