|
|
@@ -0,0 +1,160 @@
|
|
|
+<template>
|
|
|
+ <div class="index-container">
|
|
|
+ <NavBar :go="{ type: 'push', path: '/isMy' }"/>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="5" 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="19">
|
|
|
+ <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>
|
|
|
+</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>
|
|
|
+.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>
|
gaoxiong
