成果展示项目附件

src/views/resultShow/resultShowDetail.vue

@@ -224,7 +224,7 @@
                                 >
                                 </vpdf>
                             </div>
-                            <div class="FileShowArea_Right">
+                            <div class="FileShowArea_Right core_dialogue">
                                 <div class="FileList"><span>1.文档</span>xxxxxxx</div>
                             </div>
                         </div>
@@ -390,16 +390,9 @@
             <!-- 项目附件开始 -->
             <div class="BaseMessage" v-show="pageState==3">
                 <div class="BaseTitle" type="3">
-                    <span>项目活动过程</span>
+                    <span>项目附件</span>
                 </div>
                 <div class="brief">
-                    <div class="brief_title" type="3.1">
-                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
-                        <span>阶段一</span>
-                    </div>
-                    <div class="TextView">
-                        {{ ProjectBaseMessage.evaluation }}
-                    </div>
                     <div class="material">
                         <div class="material_title">
                             <img src="@/assets/anliDetail/fileList.png" alt="">
@@ -407,40 +400,25 @@
                         </div>
                         <div class="FileShowArea">
                             <div class="FileShowArea_Left">
+                                <vword
+                                    style="width: 100%; height: 100%; overflow: auto"
+                                    class="fullStyle"
+                                    v-if="checkFileType(ProjectLookFile.url)['type']!='pdf'&&checkFileType(ProjectLookFile.url)['name']!='图片'"
+                                    :pdfUrl="'https://view.officeapps.live.com/op/view.aspx?src='+ProjectLookFile.url"
+                                ></vword>
                                 <vpdf
                                     style="width: 100%; height: 100%; overflow: auto"
                                     class="fullStyle"
-                                >
-                                </vpdf>
+                                    :pdfUrl="ProjectLookFile.url"
+                                    v-if="checkFileType(ProjectLookFile.url)['type']=='pdf'"
+                                ></vpdf>
+                                <img :src="ProjectLookFile.url" alt="图片哦" v-if="checkFileType(ProjectLookFile.url)['name']=='图片'" style="width: 100%;height: 100%;">
                             </div>
-                            <div class="FileShowArea_Right">
-                                <div class="FileList"><span>1.文档</span>xxxxxxx</div>
+                            <div class="FileShowArea_Right core_dialogue">
+                                <div v-for="(item,index) in ProjectFile" :key="item.url" @click="changeUrl(item)" :class="['FileList',ProjectLookFile['url']==item.url?'lookFile':'']"><span>{{ index+1 }}.{{ checkFileType(item.url)["name"] }}</span><div>{{ item.fileName }}</div></div>
                             </div>
                         </div>
                     </div>
-
-                    <div class="brief_title" type="3.2">
-                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
-                        <span>阶段二</span>
-                    </div>
-                    <div class="TextView">
-                        {{ ProjectBaseMessage.evaluation }}
-                    </div>
-
-                </div>
-
-                <div class="BaseTitle" type="4">
-                    <span>取得成果</span>
-                </div>
-
-                <div class="brief">
-                    <div class="brief_title">
-                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
-                        <span>取得成果</span>
-                    </div>
-                    <div class="TextView">
-                        {{ ProjectBaseMessage.evaluation }}
-                    </div>
                 </div>
                 </div>
 
@@ -476,6 +454,8 @@
             pageState:0,
             TitleMessage:{},
             DetailMessage:[],
+            ProjectFile:[],
+            ProjectLookFile:{url:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf"},
             ProjectBaseMessage:{
                 Name:"人工智能测试数据",
                 curator:"张紫林",
@@ -493,7 +473,8 @@
                 ]
             },
             canonical:{
-                Image:/^\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
+                Image:/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
+                File:/^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i
             },
             Develop:{
                 arrangement1:false,
@@ -503,29 +484,40 @@
         },
         methods:{
             getData(){
-                // console.log(1)
                 this.ajax.get(this.$store.state.api+"/GetProjectDetailIsConclusion",{
                     uid:this.$store.state.userInfo.userid,
                     pid:this.$route.query["Id"]
                 }).then(res=>{
                     console.log(res)
                     let data = res.data;
+                    console.log(data)
                     this.TitleMessage = data[0][0]
                     this.TitleMessage['course_student'] = JSON.parse(this.TitleMessage['course_student']);
                     this.DetailMessage= JSON.parse(data[1][0]['chapters'])[0];
-                    console.log(this.DetailMessage)
+                    this.ProjectFile = JSON.parse(data[2][0]['projectFile'])
+                    this.ProjectLookFile = this.ProjectFile[0] || ''
+                    console.log(this.ProjectLookFile)
                 }).catch(err=>{
                     console.log(err)
                 })
-
+            },
+            changeUrl(file) {
+                this.ProjectLookFile = file;
+            },
+            checkFileType(url){
+                let urlSplit = url.split(".");
+                const type = urlSplit[urlSplit.length-1]
+                if(this.canonical.Image.test(url))return {type:type,name:"图片"}
+                if(this.canonical.File.test(url))return {type:type,name:"文档"}
             }
+
         },
         mounted(){
             //监听元素滚动
             let Nav = document.querySelector("#Nav");
             document.querySelector(".rs1apply").addEventListener("scroll",(e)=>{
                 let scrollTop = e.target.scrollTop;
-                if(scrollTop>=300){
+                if(scrollTop>=200){
                     Nav.style = `width:100%;padding:0 20%;box-sizing: border-box;border-radius:0;display:flex;justify-content: space-around;position: fixed;top:calc(60px - 20px);z-index:99;align-items: center;box-shadow: 0 0 5px gray;`
                 }else{
                     Nav.style = ``
@@ -669,6 +661,7 @@
             background-color: white;
             padding: 10px 10px 20px 10px;
             margin-bottom: 20px;
+            position: relative;
         }
         .brief_title{
             width: 100%;
@@ -739,7 +732,8 @@
     }
     .material{
         width: 100%;
-        height: 700px;
+        height: 900px;
+        // height: 1000px;
         margin-top: 20px;
         border-radius: 5px;
         box-sizing: border-box;
@@ -780,13 +774,22 @@
                     background-color: white;
                     margin-top: 20px;
                     border-radius: 10px;
-                    overflow: hidden;
-                    display: flex;
-                    align-items: center;
                     font-size: 18px;
                     cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    overflow: hidden;
+                    div{
+                        height: auto;
+                        width: 70%;
+                        display: block;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
                     span{
-                        width: 80px;
+                        max-width: 20%;
+                        min-width: 20%;
                         height: 100%;
                         display: flex;
                         align-items: center;
@@ -794,6 +797,7 @@
                         color: white;
                         background-color: #0c74ab;
                         margin-right: 10px;
+                        float: left;
                     }
                 }
                 .FileList:hover{
@@ -903,4 +907,7 @@
     /deep/ .ql-container.ql-snow{
         border:none !important;
     }
+    .lookFile{
+        color: grey;
+    }
   </style>