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

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

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