提交 42235b33 作者: 方治民

合并分支 '3.0' 到 'main'

3.0

查看合并请求 !7
......@@ -135,7 +135,7 @@
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"prettier": "^2.8.4",
"rimraf": "^4.3.1",
"rimraf": "^4.4.0",
"sass": "^1.58.3",
"sort-package-json": "^2.4.1",
"stylelint": "^14.16.1",
......
......@@ -63,7 +63,7 @@ specifiers:
postcss-less: ^6.0.0
prettier: ^2.8.4
qs: ~6.9.7
rimraf: ^4.3.1
rimraf: ^4.4.0
sass: ^1.58.3
sort-package-json: ^2.4.1
stompjs: ^2.3.3
......@@ -157,7 +157,7 @@ devDependencies:
postcss-html: 1.5.0
postcss-less: 6.0.0_postcss@8.4.21
prettier: 2.8.4
rimraf: 4.3.1
rimraf: 4.4.0
sass: 1.58.3
sort-package-json: 2.4.1
stylelint: 14.16.1
......@@ -3741,7 +3741,7 @@ packages:
postcss: ^8.1.0
dependencies:
browserslist: 4.21.5
caniuse-lite: 1.0.30001462
caniuse-lite: 1.0.30001464
fraction.js: 4.2.0
normalize-range: 0.1.2
picocolors: 1.0.0
......@@ -3955,8 +3955,8 @@ packages:
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true
dependencies:
caniuse-lite: 1.0.30001462
electron-to-chromium: 1.4.322
caniuse-lite: 1.0.30001464
electron-to-chromium: 1.4.325
node-releases: 2.0.10
update-browserslist-db: 1.0.10_browserslist@4.21.5
......@@ -4035,8 +4035,8 @@ packages:
engines: {node: '>=10'}
dev: true
/caniuse-lite/1.0.30001462:
resolution: {integrity: sha512-PDd20WuOBPiasZ7KbFnmQRyuLE7cFXW2PVd7dmALzbkUXEP46upAuCDm9eY9vho8fgNMGmbAX92QBZHzcnWIqw==}
/caniuse-lite/1.0.30001464:
resolution: {integrity: sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g==}
/chalk/2.4.2:
resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
......@@ -4248,7 +4248,7 @@ packages:
resolution: {integrity: sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==}
/concat-map/0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
/content-disposition/0.5.4:
resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
......@@ -4437,7 +4437,7 @@ packages:
resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
/cookie-signature/1.0.6:
resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
resolution: {integrity: sha1-4wOogrNCzD7oylE6eZmXNNqzriw=}
dev: true
/cookie/0.5.0:
......@@ -4858,11 +4858,11 @@ packages:
dev: true
/ee-first/1.1.1:
resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
dev: true
/electron-to-chromium/1.4.322:
resolution: {integrity: sha512-KovjizNC9XB7dno/2GjxX8VS0SlfPpCjtyoKft+bCO+UfD8bFy16hY4Sh9s0h9BDxbRH2U0zX5VBjpM1LTcNlg==}
/electron-to-chromium/1.4.325:
resolution: {integrity: sha512-K1C03NT4I7BuzsRdCU5RWkgZxtswnKDYM6/eMhkEXqKu4e5T+ck610x3FPzu1y7HVFSiQKZqP16gnJzPpji1TQ==}
/emittery/0.8.1:
resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==}
......@@ -7367,7 +7367,7 @@ packages:
dev: true
/media-typer/0.3.0:
resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
resolution: {integrity: sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=}
engines: {node: '>= 0.6'}
dev: true
......@@ -7412,7 +7412,7 @@ packages:
dev: true
/merge-descriptors/1.0.1:
resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
resolution: {integrity: sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=}
dev: true
/merge-stream/2.0.0:
......@@ -7559,7 +7559,7 @@ packages:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
/mute-stream/0.0.7:
resolution: {integrity: sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==}
resolution: {integrity: sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=}
dev: true
/mute-stream/0.0.8:
......@@ -8612,8 +8612,8 @@ packages:
glob: 7.2.3
dev: true
/rimraf/4.3.1:
resolution: {integrity: sha512-GfHJHBzFQra23IxDzIdBqhOWfbtdgS1/dCHrDy+yvhpoJY5TdwdT28oWaHWfRpKFDLd3GZnGTx6Mlt4+anbsxQ==}
/rimraf/4.4.0:
resolution: {integrity: sha512-X36S+qpCUR0HjXlkDe4NAOhS//aHH0Z+h8Ckf2auGJk3PTnx5rLmrHkwNdbVQuCSUhOyFrlRvFEllZOYE+yZGQ==}
engines: {node: '>=14'}
hasBin: true
dependencies:
......@@ -9715,7 +9715,7 @@ packages:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
/utils-merge/1.0.1:
resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
engines: {node: '>= 0.4.0'}
dev: true
......@@ -9882,6 +9882,7 @@ packages:
/w3c-hr-time/1.0.2:
resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
deprecated: Use your platform's native performance.now() and performance.timeOrigin.
dependencies:
browser-process-hrtime: 1.0.0
dev: true
......@@ -10124,7 +10125,7 @@ packages:
dev: false
/xregexp/3.1.0:
resolution: {integrity: sha512-4Y1x6DyB8xRoxosooa6PlGWqmmSKatbzhrftZ7Purmm4B8R4qIEJG1A2hZsdz5DhmIqS0msC0I7KEq93GphEVg==}
resolution: {integrity: sha1-FNhGHgvdOCJL/uUDmgiY/EL80zY=}
/xtend/4.0.2:
resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
......
<script lang="ts" setup>
import type { PropType } from 'vue'
import { nanoid } from 'nanoid'
import { isImage, isVideo, getPoster } from './utils'
type URLs = { url: string }[]
const props = defineProps({
width: {
type: [String, Number],
default: '96',
},
height: {
type: [String, Number],
default: '96',
},
mode: {
type: String,
default: 'aspectFit',
},
assets: {
type: Array as PropType<Recordable & URLs>,
},
})
// 生成预览容器高度
const containerHeight = `${props.height}rpx`
// 分离图片和视频资源地址
const images = computed(() => props.assets.filter((item) => isImage(item.url)))
const videos = computed(() => props.assets.filter((item) => isVideo(item.url)))
// 预览图片
const preview = (index: number) => {
uni.previewImage({
urls: images.value.map((item) => item.url),
current: index,
})
}
// 初始化视频组件配置
const videoId = nanoid()
const videoContext = ref()
const playVideoSrc = ref()
// 播放视频
const play = (index: number) => {
playVideoSrc.value = videos.value[index].url
videoContext.value?.requestFullScreen()
videoContext.value?.play()
}
const videoFullScreenChange = (e: any) => {
// 非全屏状态下停止播放
if (!e.detail.fullScreen) {
videoContext.value?.stop()
}
}
onMounted(() => {
// 初始化视频组件上下文对象
videoContext.value = uni.createVideoContext(videoId)
})
</script>
<template>
<view class="preview-wrap">
<!-- 视频预览 -->
<fui-lazyload
class="preview-video"
:mode="props.mode"
v-for="(item, index) in videos"
:key="item.url"
:src="getPoster(item.url)"
:width="props.width"
:height="props.height"
:radius="10"
@tap="play(index)"
>
<view class="icon-wrap" :style="{ width: props.width, height: props.height }">
<fui-icon class="video-play-icon" name="suspend" size="40" color="#fff" />
</view>
</fui-lazyload>
<!-- 图片预览 -->
<fui-lazyload
class="preview-image"
:mode="props.mode"
v-for="(item, index) in images"
:key="item.url"
:src="getPoster(item.url)"
:width="props.width"
:height="props.height"
:radius="10"
@tap="preview(index)"
/>
<!-- 视频 -->
<video
:id="videoId"
:src="playVideoSrc"
class="video"
autoplay
controls
@fullscreenchange="videoFullScreenChange"
></video>
</view>
</template>
<style lang="less" scoped>
.preview-wrap {
display: flex;
flex-wrap: wrap;
margin: -10rpx;
.preview-image,
.preview-video {
margin: 10rpx !important;
position: relative;
:deep(.fui-lazyload__img) {
height: v-bind(containerHeight) !important;
}
.icon-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10rpx;
.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.video {
position: absolute;
top: -999999px;
}
}
</style>
export type FileType = 'image' | 'video' | 'audio'
export function isImage(url: string) {
return /\.(png|jpe?g|gif|svg)(\?.*)?$/i.test(url)
}
export function isVideo(url: string) {
return /\.(mp4|m3u8)(\?.*)?$/i.test(url)
}
export function getPoster(url: string) {
if (!isVideo(url)) {
return url
}
return url + '.jpg'
}
......@@ -2,8 +2,9 @@
<view class="fui-uploadv__wrap">
<view class="fui-uploadv__item" :style="{width:width+'rpx',height:height+'rpx'}" v-for="(item,index) in urls"
:key="index">
<view :style="{width:width+'rpx',height:height-(isView?0:40)+'rpx',background:'#000'}" v-if="!showVideo"></view>
<video class="fui-upload__video" :style="{width:width+'rpx',height:height-(isView?0:40)+'rpx'}"
:src="getVideoSrc(item)"></video>
:src="getVideoSrc(item)" v-if="showVideo"></video>
<view class="fui-uploadv__del-wrap" :style="{width:width+'rpx'}" v-if="!isView">
<view class="fui-uploadv__flex-row" @tap.stop="reUpload(index)">
<fui-icon name="checkbox" color="#fff" :size="32" v-if="progress[index]===100"></fui-icon>
......@@ -49,6 +50,11 @@
type: [Number, String],
default: 320
},
// 防止原生组件层级问题的视频显示
hideVideo: {
type: Boolean,
default: false
},
fileList: {
type: Array,
default () {
......@@ -146,6 +152,7 @@
//preupload、uploading、success、error
status: [],
progress: [],
showVideo: true,
};
},
created() {
......@@ -154,7 +161,16 @@
watch: {
fileList(vals) {
this.initData(vals)
}
},
hideVideo(value) {
if (value) {
this.showVideo = false
} else {
setTimeout(() => {
this.showVideo = true
}, 300)
}
}
},
computed: {
showAdd() {
......
......@@ -31,7 +31,7 @@
// #endif
// #ifndef APP-PLUS
Message.toast(`使用 APP 运行点击有惊喜~ ╰(*°▽°*)╯`)
Message.toast(`在手机上运行点击有惊喜~ ╰(*°▽°*)╯`)
// #endif
}
......
......@@ -69,6 +69,7 @@ module.exports = {
],
'selector-type-no-unknown': null,
'comment-empty-line-before': null,
'function-no-unknown': null,
},
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
overrides: [
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论