提交 02d2d151 authored 作者: lidongxu's avatar lidongxu

fix(xlmobileupload): 修复:勤策移动端_售点稽查_安卓手机拍视频功能修复

上级 f1f47714
<!-- 移动端上传图片/视频组件 -->
<template>
<div class="xl-mobile-upload">
<!-- 苹果设备上传组件 -->
<van-uploader :max-count="maxCount"
<van-uploader ref="uploaderRef"
:max-count="maxCount"
:accept="supportedTypes"
:model-value="photoList"
:after-read="commitStorePhotosRead"
......@@ -13,9 +13,19 @@
@oversize="onOversize">
<!-- 自定义上传按钮 -->
<template #default>
<div class="upload-btn">
<!-- <div class="upload-btn">
<van-icon name="photograph" />
</div> -->
<div class="upload-btn"
@click.stop="customUploadClick">
<van-icon name="photograph" />
</div>
<!-- iOS设备或不支持视频的安卓设备:使用默认上传按钮(由van-uploader自动处理点击) -->
<!-- <div v-else
class="upload-btn">
<van-icon name="photograph" />
</div> -->
</template>
<!-- 自定义预览内容 -->
......@@ -60,9 +70,11 @@
</div>
</template>
</van-uploader>
<!-- 拍照方式选择 -->
<van-action-sheet v-model:show="show"
:actions="actions"
teleport="body"
@select="onSelect" />
</div>
</template>
......@@ -111,6 +123,21 @@ const supportedTypes = computed(() => {
}
return 'image/*'
})
// 自定义点击拍照按钮效果
const customUploadClick = () => {
if (getMobileType() === 'ios') {
// 苹果设备:直接触发点击事件
nextTick(() => {
const inputElement = uploaderRef.value.$el.querySelector('input[type="file"]')
if (inputElement) {
inputElement.click()
}
})
} else {
// 安卓设备:显示拍照/录像方式确认菜单
show.value = true
}
}
/*************** android 拍照/录像方式确认 ***************/
// 显示菜单
const show = ref(false)
......@@ -258,6 +285,7 @@ const requestFullscreen = (element) => {
<style scoped
lang="scss">
.xl-mobile-upload {
.van-uploader {
::v-deep(.van-uploader__wrapper) {
gap: 10px;
......@@ -278,14 +306,16 @@ const requestFullscreen = (element) => {
border-radius: 4px;
color: #dcdee0;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
}
}
}
/* 预览区域 */
::v-deep(.van-uploader__preview) {
margin: 0;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论