Compare commits

2 Commits

Author SHA1 Message Date
xuli
485a9511a1 Merge branch 'develop' of http://123.57.20.168:4000/admin/ys-app into develop 2025-12-23 18:11:12 +08:00
xuli
eddd2a4bf7 增加新 选择视频和图片的插件 2025-12-23 18:10:37 +08:00
3 changed files with 176 additions and 74 deletions

View File

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

View File

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

View File

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