soc_app/src/views/menu/operate/index.vue

<template>
  <div class="index-container">
    <NavBar  :go="{ type: 'push', path: '/isMy' }"/>
    <div class="item-container">
      <van-row>
        <van-col span="8" class="side_list">
          <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item :title="item.sourceName" v-for="item in sources" />
          </van-sidebar>
        </van-col>
        <van-col span="16">
          <div class="sidebar-content">
            <div class="operator-card" v-for="item in list" :key="item" :title="item.fileName"  @click="showFile(item)">
              <van-image
                width="1rem"
                height="1rem"
                style="margin-left: 10px;float: left"
                :src="getFileType(item.fileType)"
              />
              <span class="sid-content-title">{{item.fileName}}</span>
            </div>

          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { Sidebar, SidebarItem,Notify  } from 'vant';
import {getOperatings} from '@/views/menu/operate/api'
import { imgUrl } from '@/utils'
export default {
  name: 'operate',
  components: {
    NavBar,
    Sidebar,
    SidebarItem,
    Notify
  },
  data() {
    return {
      activeKey: 0,
      sources:[],
      list: [],
    }
  },
  created() {
  },
  mounted() {
    this.initData();
  },
  methods: {
    getFileType(type){
      if(type === 'pdf'){
        return require('@/assets/img/my/Pdf.png');
      }
      if(type === 'doc' || type === 'docx'){
        return require('@/assets/img/my/WORD.png')
      }
    },
    initData(){
      getOperatings().then(res => {
        this.sources = res.data;
        this.onChange(0);
      });
    },
    onChange(index) {
      let data = this.sources[index];
      this.list = data.list;
    },
    showFile(item){
      let url = item.fileUrl;
      let system = this.isAndroidOrIos();
      const parms = {
        url: url.indexOf('http') > -1 ?   url : imgUrl(url),
        name: item.fileName
      }
      if(system === 1){
        //android
        // 判断当前环境是是否存在 js桥 'sap'
        const hasSap = window.hasOwnProperty('sap');
        if (hasSap) {
          // 判断是否存在方法 ?preview
          const fun = sap.hasOwnProperty('preview');
          if (fun) {
            sap.preview(JSON.stringify(parms));
          }
        }
      }

      if(system === 2){
        //ios
        // 判断 ios是否存在方法 preview
        const fun = window.webkit.messageHandlers.hasOwnProperty('preview')
        if (fun) {
          window.webkit.messageHandlers.preview.postMessage(JSON.stringify(parms))
        }
      }
    },
    isAndroidOrIos(){
      const urls = navigator.userAgent;
      let isAndroid = urls.indexOf('Android') > -1 || urls.indexOf('Linux') > -1;
      let isIos = !!urls.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isAndroid){
        return 1;
      }
      if(isIos){
        return 2;
      }
      return 3;
    },
  }
}
</script>
<style lang="scss" scoped>
.item-container{
  height: calc(100vh - 94px);
  overflow: auto;
  -border:1px solid red;
}
.sid-content-title{
  font-size: 3.2vw;
  line-height: 12vw;
  margin-left: 3vw;
}
.index-container {
  .van-sidebar-item--select::before {
    background-color: #008cd6;
    width: 1.066667vw;
    height: 15.266667vw;
  }
  .van-sidebar-item {
    background-color:#ffffff
  }
  .van-sidebar-item--select{
    background-color: #f7f7f7;
    color: #008cd6;
  }

}
.sidebar-content{
  margin-left: 2px;
}
.index-container{
    height: 100vh;
    background-color: #f7f8fa;
  }
.side_list{
  background-color: #FFFFFF;
  height: 100vh;
}
.operator-card{
  height: 6vh;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2%;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 12px #ebedf0;

}
</style>