增加新 选择视频和图片的插件

src/pages/business/polling/optionDetail.vue

@@ -288,6 +288,10 @@ onLoad(option => {
 
 })
 
+onShow(()=>{
+    
+})
+
 // 下拉刷新
 const mescrollRef = ref(null);
 const mescrollInit = (mescroll) => {

src/pages/business/polling/problemLog.vue

@@ -58,20 +58,24 @@
                             <!-- <video :src="item" controls></video> -->
                             <DomVideoPlayer :src="item2.url" objectFit="cover" />
                         </view>
-                        <!-- #ifdef APP-PLUS -->
+
-                        <view class="img-con" @click="chooseMedia">
+                        <!-- loading -->
-                            <img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
+                        <view class="img-con" v-if="imgLoading">
-                            <!-- loading -->
+                            <view class="upload-loading">
-                            <view class="upload-loading" v-if="imgLoading">
                                 <uni-icons type="refreshempty" size="30" color="#C9C9C9"></uni-icons>
                                 <view>上传中....</view>
                             </view>
                         </view>
-                        <!-- #endif -->
+                        <view class="img-con" @click="chooseMedia" v-else>
-                        <!-- #ifndef APP-PLUS -->
-                        <view class="img-con">
                             <img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
                         </view>
+
+                        <!-- #ifdef APP-PLUS -->
+                        <!-- #endif -->
+                        <!-- #ifndef APP-PLUS -->
+                        <!-- <view class="img-con">
+                            <img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
+                        </view> -->
                         <!-- #endif -->
                     </view>
                 </view>
@@ -84,21 +88,26 @@
 
     <!-- 图片放大 -->
     <mediaPreview :visible="isVisible" :url="mediaUrl" @close="handlePreviewClose"></mediaPreview>
+
+    <!-- 选择图片或者视频 -->
+    <chooseMediaVue ref="chooseMediaRef" @getMediaArr="getMediaArr" @closeMedia="closeMedia"></chooseMediaVue>
 </view>
 </template>
 
 <script setup>
-import { ref,onMounted,onUnmounted,nextTick,computed,reactive } from 'vue'
+import { ref,onMounted,onUnmounted,nextTick,computed,reactive,getCurrentInstance } from 'vue'
 import { onLoad,onHide, onShow} from '@dcloudio/uni-app';
 import customHeader from '@/components/customHeader.vue';
 import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
 import mediaPreview from "@/components/mediaPreview.vue"
+import chooseMediaVue from '@/components/chooseMedia.vue'
 import DomVideoPlayer from 'uniapp-video-player'
 import { getUserInfo } from '@/api/auth.js'
 import { problemDetail,problemAddLog,minioUpload } from '@/api/polling.js'
 import { MINIO_KEY } from '@/enums/cacheEnums';
 import {showAlert,showLoading,hideLoading} from '@/utils/message.js'
 import {compressImageUni} from '@/utils/common.js'
+const { proxy } = getCurrentInstance();
 
 let problemId = ref('');
 let realname = ref('');
@@ -114,6 +123,9 @@ onLoad(async option => {
 
     getList();
 })
+onShow(()=>{
+    imgLoading.value=false;
+})
 
 // 查询列表
 let list = ref([]);
@@ -156,7 +168,9 @@ let imgArr=ref([]);//图片 后台返回的
 let videoArr = ref([]);//视频 后台返回的
 let imgLoading = ref(false)
 const chooseMedia = () => {
-    uni.chooseMedia({
+    proxy.$refs["chooseMediaRef"].openPicker();
+    imgLoading.value=true; 
+   /* uni.chooseMedia({
         count: 9,
         mediaType: ['image', 'video'], // 指定可选择图片和视频
         sourceType: ['album', 'camera'],
@@ -204,7 +218,40 @@ const chooseMedia = () => {
                 })
             });
         }
-    });
+    });*/
+}
+
+const closeMedia = ()=>{
+    imgLoading.value=false; 
+}
+
+// 插件回调
+const getMediaArr=(arr)=>{
+    // console.log("插件回调=>",arr)
+    try {
+        arr.forEach(data=>{
+            mediaArr.value.push(data.fileName);
+            if(data.fileType=="image"){
+                imgArr.value.push({
+                    shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
+                    url:minioObj.minioUrl +"/"+data.fileName,
+                    name:data.fileName
+                })
+            }else if(data.fileType == "video"){
+                videoArr.value.push({
+                    shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
+                    url:minioObj.minioUrl +"/"+data.fileName,
+                    name:data.fileName
+                })
+            }
+        })
+        // console.log(imgArr.value,videoArr.value)
+        imgLoading.value=false; 
+    } catch (error) {
+        console.error(error)
+        imgLoading.value=false; 
+    }
+    
 }
 
 // 视频或图片删除 根据数组下标删除数组里的某个图片或视频

src/pages/business/polling/problemReport.vue

@@ -62,21 +62,23 @@
                             <!-- <video :src="item.url" controls></video> -->
                             <DomVideoPlayer :src="item2.url" objectFit="cover" />
                         </view>
-                        <!-- #ifdef APP-PLUS -->
-                        <view class="img-con" @click="chooseMedia">
-                            <img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
                        
-                            <!-- loading -->
+                        <!-- loading -->
-                            <view class="upload-loading" v-if="imgLoading">
+                        <view class="img-con" v-if="imgLoading">
+                            <view class="upload-loading">
                                 <uni-icons type="refreshempty" size="30" color="#C9C9C9"></uni-icons>
                                 <view>上传中....</view>
                             </view>
                         </view>
-                        <!-- #endif -->
+                        <view class="img-con" @click="chooseMedia" v-else>
-                        <!-- #ifndef APP-PLUS -->
-                        <view class="img-con">
                             <img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
                         </view>
+                        <!-- #ifdef APP-PLUS -->
+                        <!-- #endif -->
+                        <!-- #ifndef APP-PLUS -->
+                        <!-- <view class="img-con">
+                            <img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
+                        </view> -->
                         <!-- #endif -->
                     </view>
                 </view>
@@ -89,14 +91,18 @@
 
     <!-- 图片放大 -->
     <mediaPreview :visible="isVisible" :url="mediaUrl" @close="handlePreviewClose"></mediaPreview>
+
+    <!-- 选择图片或者视频 -->
+    <chooseMediaVue ref="chooseMediaRef" @getMediaArr="getMediaArr" @closeMedia="closeMedia"></chooseMediaVue>
 </view>
 </template>
 
 <script setup>
-import { ref,onMounted,onUnmounted,nextTick,computed,reactive, watch } from 'vue'
+import { ref,onMounted,onUnmounted,nextTick,computed,reactive, watch,getCurrentInstance } from 'vue'
 import { onLoad,onShow,onHide} from '@dcloudio/uni-app';
 import customHeader from '@/components/customHeader.vue';
 import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
+import chooseMediaVue from '@/components/chooseMedia.vue'
 import mediaPreview from "@/components/mediaPreview.vue"
 import DomVideoPlayer from 'uniapp-video-player'
 import { getUserInfo } from '@/api/auth.js'
@@ -104,6 +110,7 @@ import { problemDetail,problemAdd,problemEdit,minioUpload } from '@/api/polling.
 import {compressImageUni,getFileType} from '@/utils/common.js'
 import {showAlert,showLoading,hideLoading} from '@/utils/message.js'
 import { MINIO_KEY } from '@/enums/cacheEnums';
+const { proxy } = getCurrentInstance();
 
 let taskId = ref('');//任务id
 let groupId = ref('');//组id
@@ -124,6 +131,10 @@ onLoad(async option => {
     getList();
 })
 
+onShow(()=>{
+    imgLoading.value=false;
+})
+
 // 查询列表
 let list = ref([]);
 let optionObj = ref({})
@@ -202,63 +213,98 @@ let imgArr=ref([]);//图片 后台返回的
 let videoArr = ref([]);//视频 后台返回的
 let imgLoading = ref(false)
 const chooseMedia = () => {
-    uni.chooseMedia({
+    // console.log("chooseMedia=>") 
-        count: 9,
+    proxy.$refs["chooseMediaRef"].openPicker();
-        mediaType: ['image', 'video'], // 指定可选择图片和视频
+    imgLoading.value=true; 
-        sourceType: ['album', 'camera'],
+    // uni.chooseMedia({
-        maxDuration: 60, // 拍摄视频最长拍摄时间
+    //     count: 9,
-        camera: 'back',
+    //     mediaType: ['image', 'video'], // 指定可选择图片和视频
-        success: (res) => {
+    //     sourceType: ['album', 'camera'],
-            // console.log("chooseMedia=>",res)
+    //     maxDuration: 60, // 拍摄视频最长拍摄时间
-            res.tempFiles.forEach(async file => {
+    //     camera: 'back',
-                // console.log(`文件类型: ${file.fileType}, 文件路径: ${file.tempFilePath}`);
+    //     success: (res) => {
-                let compressImg = file.tempFilePath;
+    //         // console.log("chooseMedia=>",res)
-                // 图片进行压缩
+    //         res.tempFiles.forEach(async file => {
-                if (file.fileType === 'image') {
+    //             // console.log(`文件类型: ${file.fileType}, 文件路径: ${file.tempFilePath}`);
-                    // #ifdef APP-PLUS
+    //             let compressImg = file.tempFilePath;
-                    // 压缩图片
+    //             // 图片进行压缩
-                    compressImg = await compressImageUni(file.tempFilePath);
+    //             if (file.fileType === 'image') {
-                    // #endif
+    //                 // #ifdef APP-PLUS
-                }
+    //                 // 压缩图片
+    //                 compressImg = await compressImageUni(file.tempFilePath);
+    //                 // #endif
+    //             }
 
-                // 执行上传
+    //             // 执行上传
-                let param = {
+    //             let param = {
-                    filePath: compressImg,
+    //                 filePath: compressImg,
-                    name: 'file',
+    //                 name: 'file',
-                    formData: {
+    //                 formData: {
-                        directory:'polling'
+    //                     directory:'polling'
-                    },
+    //                 },
-                }
+    //             }
-                imgLoading.value=true;        
+    //             imgLoading.value=true;        
-                minioUpload(param).then(res=>{
+    //             minioUpload(param).then(res=>{
-                    let data = res.data;//console.log("上传成功后=>",res)
+    //                 let data = res.data;//console.log("上传成功后=>",res)
-                    mediaArr.value.push(data.fileName);
+    //                 mediaArr.value.push(data.fileName);
-                    if (file.fileType === 'image') {// 图片
+    //                 if (file.fileType === 'image') {// 图片
-                        imgArr.value.push({
+    //                     imgArr.value.push({
-                            shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
+    //                         shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
-                            url:minioObj.minioUrl +"/"+data.fileName,
+    //                         url:minioObj.minioUrl +"/"+data.fileName,
-                            name:data.fileName
+    //                         name:data.fileName
-                        })
+    //                     })
-                    } else if (file.fileType === 'video') {// 视频
+    //                 } else if (file.fileType === 'video') {// 视频
-                        videoArr.value.push({
+    //                     videoArr.value.push({
-                            shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
+    //                         shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
-                            url:minioObj.minioUrl +"/"+data.fileName,
+    //                         url:minioObj.minioUrl +"/"+data.fileName,
-                            name:data.fileName
+    //                         name:data.fileName
-                        })
+    //                     })
-                    }
+    //                 }
-                }).finally(()=>{
+    //             }).finally(()=>{
-                    imgLoading.value=false;
+    //                 imgLoading.value=false;
+    //             })
+                
+    //         });
+    //     }
+    // });
+}
+const closeMedia = ()=>{
+    imgLoading.value=false; 
+}
+
+// 插件回调
+const getMediaArr=(arr)=>{
+    // console.log("插件回调=>",arr)
+    try {
+        arr.forEach(data=>{
+            mediaArr.value.push(data.fileName);
+            if(data.fileType=="image"){
+                imgArr.value.push({
+                    shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
+                    url:minioObj.minioUrl +"/"+data.fileName,
+                    name:data.fileName
                 })
+            }else if(data.fileType == "video"){
+                videoArr.value.push({
+                    shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
+                    url:minioObj.minioUrl +"/"+data.fileName,
+                    name:data.fileName
+                })
+            }
+        })
+        // console.log(imgArr.value,videoArr.value)
+        imgLoading.value=false; 
+    } catch (error) {
+        console.error(error)
+        imgLoading.value=false; 
+    }
     
-            });
-        }
-    });
 }
 
 // 视频或图片删除 根据数组下标删除数组里的某个图片或视频
 const handleDelete=(arr,index2)=>{
-    arr.splice(index2, 1);
     let item = arr[index2];
+    arr.splice(index2, 1);
     mediaArr.value = mediaArr.value.filter(item2=>item2!=item.name);
     console.log("删除后=>",mediaArr.value)
 }
@@ -303,7 +349,10 @@ const handleSubmit=()=>{
         }
         // console.log("problemEdit=>",param)
         problemEdit(param).then(res=>{
-            showAlert("修改问题上报成功！")
+            // showAlert = (content, title = '提示',showCancel=false,succFun)
+            showAlert("修改问题上报成功！","提示",false,()=>{
+                uni.navigateBack()
+            })
         }).finally(()=>{
             hideLoading();
         })
@@ -317,8 +366,10 @@ const handleSubmit=()=>{
         }
         // console.log("problemAdd=>",param)
         problemAdd(param).then(res=>{
-            showAlert("新建问题上报成功！");
+            showAlert("新建问题上报成功！","提示",false,()=>{
-            problemId.value = res;
+                problemId.value = res;
+                uni.navigateBack()
+            })
         }).finally(()=>{
             hideLoading();
         })