评价详情图片和视频展示问题. 视频的样式问题需要梅姐优化

src/api/enterprise.js

@@ -25,6 +25,8 @@ export const toMssqAppraise = (params, success, error) => _post("/app/code/compl
 // 诉求工单评价页面
 export const queryEnterpriseComplaintList = (params, success, error) => _get("/app/code/complaint/queryList",params,success,error)
 export const getObjByKey = (params, success, error) => _get("/app/satisfy/getObjByKey/"+params,null,success,error)
+export const mssqDownFiles = (params, success, error) => _post("/app/satisfy/mssqDownFiles",params,success,error)
+export const mssqDownFile = (params, success, error) => _post("/app/satisfy/mssqDownFile",params,success,error)
 /**
  * 查询企业行政执法通知记录
  * @param {*} params 

src/views/enterprise/complaintDetailView.vue

@@ -127,9 +127,9 @@
                       <span class="accept-item">注：选择“同意”，处置部门将通过登记的联系人、联系电话与您联系，并对您的个人信息严格保密。</span>
                   </div>
               </van-cell-group>
-              <van-action-bar v-if="data.isMssq">
-                  <van-button round block type="info" @click="mssq">评价</van-button>
-              </van-action-bar>
+<!--              <van-action-bar v-if="data.isMssq">-->
+<!--                  <van-button round block type="info" @click="mssq">评价</van-button>-->
+<!--              </van-action-bar>-->
           </van-form>
       </div>
   </div>

src/views/enterprise/complaintEvaluate.vue

@@ -86,26 +86,15 @@
                 <div class="file-upload-center">
                     <label>附件</label>
                 </div>
-                <!--          <van-uploader v-model="submitData.fileListObj"  class="file" :after-read="uploadFiles" multiple :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile">-->
-                <!--            <template #preview-cover="{ file }">-->
-                <!--              <div class="preview-cover van-ellipsis">{{ file.name }}</div>-->
-                <!--            </template>-->
-                <!--          </van-uploader>-->
-                <!-- <van-uploader v-model="submitData.fileListObj" max-count="9" class="file" multiple
-                              :after-read="uploadFiles" :before-delete="deleteFile">
+                <van-uploader v-model="submitData.fileObjList" class="file" multiple :show-upload="false" :deletable="false" readonly accept="image/*, video/*">
                     <template #preview-cover="{ file }">
-                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>
-                    </template>
-                </van-uploader> -->
-                <van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="9"
-                              :after-read="uploadFiles" :before-delete="deleteFile">
-                    <template #preview-cover="{ file }">
-                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>
+<!--                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>-->
                     </template>
                 </van-uploader>
-
             </div>
-
+            <video controls id="myVideo" v-for="(item, index) in data.videos">
+                <source :src="item" type="video/mp4" />
+            </video>
         </div>
     </div>
 </template>
@@ -116,7 +105,7 @@
     import {uploadFile} from '../../util/fileUpload'
     import {reactive, ref} from "vue";
     import * as w6s from 'szient-js-sdk';
-    import {queryEnterpriseComplaintList, getObjByKey} from "../../api/enterprise";
+    import {getObjByKey, mssqDownFile, mssqDownFiles} from "../../api/enterprise";
 
     const {useCommon, useMy} = $globalStore
 
@@ -131,10 +120,13 @@
             feedbackQualityMetrics: 0,
             writingEvaluation: "",
         },
+        videoPath: "",
+        uploadPaths: [],
+        videos: [],
     });
     //保存参数
     const submitData = reactive({
-        id: "",
+        fileObjList: [],
     });
 
     onMounted(() => {
@@ -145,11 +137,107 @@
     const getObjById = (proWorkCode) => {
         getObjByKey(proWorkCode, success => {
             data.dataObj = success.data
-            console.log("========> : ", data.dataObj);
+            if (null != data.dataObj.assessFiles && "" != data.dataObj.assessFiles) {
+                var fileObj = JSON.parse(data.dataObj.assessFiles);
+                for (var i=0; i<fileObj.length; i++) {
+                    let suffix = fileObj[i].filePath.substring(fileObj[i].filePath.lastIndexOf("."));
+                    downFile(fileObj[i].filePath, suffix);
+                }
+            }
+        }, error => {})
+    }
+    const downFile = (uploadPath, suffix) => {
+        mssqDownFile({"uploadPath": uploadPath}, success => {
+            let obj = JSON.parse(success.data);
+            if (".jpeg" == suffix) {
+                toImage(obj.data);
+                // submitData.images.push({"suffix":suffix, "url": obj.data});
+            }
+            if (".mp4" == suffix) {
+                toVideo(obj.data);
+                // console.log("obj.data mp4 ---> : ", obj.data);
+                // submitData.video.push({"suffix":suffix, "url": obj.data});
+            }
+        }, error => {})
+    }
+
+    const downFiles = (uploadPaths) => {
+        mssqDownFiles({"uploadPaths": uploadPaths}, success => {
+            for (var i=0; i<success.data.length; i++) {
+                let obj = JSON.parse(success.data[i]);
+                console.log("base64 -----> : ", obj.data)
+                let img = 'data:image/jpeg;base64,' + obj.data;
+                let imgurl = base64ImgtoFile(img);
+                console.log('imgurl===', imgurl)
+                let url = window.webkitURL.createObjectURL(imgurl) || window.URL.createObjectURL(imgurl);
+                // 创建图片地址
+                submitData.fileListObj.push({
+                    content: img,
+                    File: imgurl,
+                    name: 'v'+i,
+                    status: 'done',
+                    message: '上传中',
+                    isImage: true,
+                    url
+                })
+            }
+            console.log("======> : ", submitData.fileListObj);
         }, error => {
         })
     }
 
+    const toImage = (base64) => {
+        let img = 'data:image/jpeg;base64,' + base64;
+        let imgurl = base64ImgtoFile(img);
+        let url = window.webkitURL.createObjectURL(imgurl) || window.URL.createObjectURL(imgurl);
+        // 创建图片地址
+        submitData.fileObjList.push({
+            content: img,
+            File: imgurl,
+            name: 'v',
+            status: 'done',
+            message: '上传中',
+            isImage: true,
+            url
+        })
+    }
+
+    const toVideo = (base64) => {
+        let video = 'data:video/mp4;base64,' + base64;
+        let vidoeurl = base64ImgtoFile(video);
+        let url = window.webkitURL.createObjectURL(vidoeurl) || window.URL.createObjectURL(vidoeurl);
+
+        // let videos = document.getElementById("myVideo");
+        // videos.src = url
+
+        // 创建视频地址
+        // submitData.fileObjList.push({
+        //     content: video,
+        //     File: vidoeurl,
+        //     name: 'v',
+        //     status: 'done',
+        //     message: '上传中',
+        //     isImage: false,
+        //     url
+        // })
+        data.videos.push(url);
+    }
+
+    const base64ImgtoFile = (dataurl, filename = 'file') => {
+        const arr = dataurl.split(',')
+        const mime = arr[0].match(/:(.*?);/)[1]
+        const suffix = mime.split('/')[1]
+        const bstr = atob(arr[1])
+        let n = bstr.length
+        const u8arr = new Uint8Array(n)
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n)
+        }
+        return new File([u8arr], `${filename}.${suffix}`, {
+            type: mime
+        })
+    }
+
 
 </script>