Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6084
Star 96
Fork 167
H
hello uni-app x
提交 210208d4 编写于 作者: DCloud_iOS_WZT's avatar DCloud_iOS_WZT
浏览文件
操作

feat: 新增 choose-media测试例

上级 a184942b
显示空白变更内容
内联 并排
Showing with 464 addition and 0 deletion
pages.json
浏览文件 @ 210208d4
......@@ -1122,6 +1122,23 @@
}
},
// #endif
// #ifdef APP
{
"path" : "pages/API/choose-media/choose-media",
"group": "1,7,11",
"style" :
{
"navigationBarTitleText" : "chooseMedia | 拍摄或从手机相册中选择图片或视频"
}
},
{
"path" : "pages/API/choose-media/fullscreen-video",
"style" :
{
"navigationStyle" : "custom"
}
},
// #endif
// #ifdef APP-ANDROID || APP-IOS || WEB || MP-WEIXIN
{
"path": "pages/API/get-network-type/get-network-type",
......@@ -2982,6 +2999,10 @@
{
"id": "api.media.getBackgroundAudioManager",
"name": "getBackgroundAudioManager"
},
{
"id": "api.media.chooseMedia",
"name": "chooseMedia"
}
]
},
......
pages/API/choose-media/choose-media.uvue 0 → 100644
浏览文件 @ 210208d4
<template>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
来源
</view>
<view class="uni-list-cell-right" @click="chooseMediaSource">
<text class="click-t">{{sourceTypes[sourceTypeIndex].title}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
质量
</view>
<view class="uni-list-cell-right" @click="chooseSizeType">
<text class="click-t">{{sizeTypes[sizeTypeIndex].title}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
方式
</view>
<view class="uni-list-cell-right" @click="chooseMediaType">
<text class="click-t">{{mediaTypes[mediaTypeIndex].title}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
数量限制
</view>
<view class="uni-list-cell-right">
<input class="click-t" ref="refCountInput" :value="countIndex" type="number" :maxlength="1" @blur="chooseMediaCount"
confirm-type="done" />
</view>
</view>
<!-- #ifdef APP -->
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
屏幕方向
</view>
<view class="uni-list-cell-right" @click="chooseOrientationType">
<text class="click-t">{{orientationTypes[orientationTypeIndex].title}}</text>
</view>
</view>
<!-- #endif -->
<!-- #ifdef APP-ANDROID -->
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
相册模式
</view>
<view class="uni-list-cell-right" @click="albumModeChange">
<text class="click-t">{{albumModeTypes[albumModeTypeIndex].title}}</text>
</view>
</view>
<!-- #endif -->
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left uni-label">
摄像头
</view>
<view class="uni-list-cell-right" @click="chooseCameraType">
<text class="click-t">{{cameraTypes[cameraTypeIndex].title}}</text>
</view>
</view>
</view>
<input-data title="最长拍摄时间，单位秒" defaultValue="10" type="number" @confirm="onMaxDurationConfirm"></input-data>
<view class="uni-list list-pd" style="padding: 15px;">
<view class="uni-flex" style="margin-bottom: 10px;">
<view class="uni-list-cell-left">点击预览</view>
<view style="margin-left: auto;">
<text class="click-t">{{mediaList.length}}/{{countIndex}}</text>
</view>
</view>
<view class="uni-flex" style="flex-wrap: wrap;">
<view v-for="(file,index) in mediaList" :key="index" class="uni-uploader__input-box" style="border: 0;">
<image style="width: 104px; height: 104px;" :src="file.imagePath" :data-src="file.imagePath"
@tap="previewMedia(index)">
</image>
<image src="/static/plus.png" class="image-remove" @click="removeMedia(index)"></image>
</view>
<image class="uni-uploader__input-box" @tap="chooseMedia" src="/static/plus.png"></image>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
type FileSource = {
imagePath : string;
filePath : string;
fileType : string;
};
type ChooseSource = {
value : string[];
title : string;
};
const sourceTypeList : ChooseSource[] = [
{
value: ['camera'],
title: '拍摄',
},
{
value: ['album'],
title: '相册',
},
{
value: ['camera', 'album'],
title: '拍摄或相册',
}
];
const mediaTypeList : ChooseSource[] = [
{
value: ['image'],
title: '仅图片',
},
{
value: ['video'],
title: '仅视频',
},
{
value: ['image', 'video'],
title: '不限制',
}
];
const sizeTypeList : ChooseSource[] = [
{
value: ['compressed'],
title: '压缩',
},
{
value: ['original'],
title: '原图',
},
{
value: ['compressed', 'original'],
title: '压缩或原图',
}
];
const orientationTypeList : ChooseSource[] = [
{
value: ['portrait'],
title: '竖屏',
},
{
value: ['landscape'],
title: '横屏',
},
{
value: ['auto'],
title: '自动',
}
];
const cameraTypeList : ChooseSource[] = [
{
value: ['front'],
title: '前置摄像头',
},
{
value: ['back'],
title: '后置摄像头',
}
];
const albumModeList : ChooseSource[] = [
{
value: ['custom'],
title: '自定义相册',
},
{
value: ['system'],
title: '系统相册',
}
];
export default {
data() {
return {
title: 'chooseMedia',
mediaList: [] as Array<FileSource>,
sourceTypeIndex: 2,
mediaTypeIndex: 2,
sizeTypeIndex: 2,
cameraTypeIndex: 1,
orientationTypeIndex: 0,
albumModeTypeIndex: 0,
countIndex: 9,
maxDuration: 10,
sourceTypes: sourceTypeList,
mediaTypes: mediaTypeList,
sizeTypes: sizeTypeList,
cameraTypes: cameraTypeList,
orientationTypes: orientationTypeList,
albumModeTypes: albumModeList,
}
},
methods: {
chooseMediaSource() {
uni.showActionSheet({
itemList: ['拍摄', '相册', '拍摄或相册'],
success: (e) => {
this.sourceTypeIndex = e.tapIndex!
}
})
},
chooseSizeType() {
uni.showActionSheet({
itemList: ['压缩', '原图', '压缩或原图'],
success: (e) => {
this.sizeTypeIndex = e.tapIndex!
}
})
},
chooseMediaType() {
uni.showActionSheet({
itemList: ['仅图片', '仅视频', '不限制'],
success: (e) => {
this.mediaTypeIndex = e.tapIndex!
}
})
},
chooseMediaCount(event: UniInputBlurEvent) {
let count = parseInt(event.detail.value)
if (count < 1 || count > 9 || Number.isNaN(count)) {
uni.showToast({
position: "bottom",
title: "图片数量应该不小于1不大于9"
})
this.countIndex = 9;
if(this.$refs['refCountInput'].value != this.countIndex){
this.$refs['refCountInput'].value = this.countIndex;
}
return
}
this.countIndex = count
if(this.$refs['refCountInput'].value != this.countIndex){
this.$refs['refCountInput'].value = this.countIndex;
}
},
chooseOrientationType() {
uni.showActionSheet({
itemList: ['竖屏', '横屏', '自动'],
success: (e) => {
this.orientationTypeIndex = e.tapIndex!
}
})
},
chooseCameraType() {
uni.showActionSheet({
itemList: ['前置', '后置'],
success: (e) => {
this.cameraTypeIndex = e.tapIndex!
}
})
},
onMaxDurationConfirm(value : number) {
this.maxDuration = value;
},
albumModeChange(){
uni.showActionSheet({
itemList: ['自定义相册','系统相册'],
success: (e) => {
this.albumModeTypeIndex = e.tapIndex!
}
})
},
chooseMedia() {
if (this.mediaList.length >= this.countIndex) {
const message = "已经有" + this.countIndex + "个了，请删除部分后重新选择";
uni.showToast({
position: "bottom",
title: message
})
return
}
uni.chooseMedia({
count: this.mediaList.length + this.countIndex > 9 ? 9 - this.mediaList.length : this.countIndex,
sourceType: sourceTypeList[this.sourceTypeIndex].value,
sizeType: sizeTypeList[this.sizeTypeIndex].value,
mediaType: mediaTypeList[this.mediaTypeIndex].value,
camera: cameraTypeList[this.cameraTypeIndex].value,
maxDuration: this.maxDuration,
// #ifdef APP
pageOrientation: orientationTypeList[this.orientationTypeIndex].value,
// #endif
// #ifdef APP-ANDROID
albumMode: albumModeList[this.albumModeTypeIndex].value,
// #endif
success: (res) => {
const tempFiles : ChooseMediaTempFile[] = res.tempFiles as ChooseMediaTempFile[];
for (let i = 0; i < tempFiles.length; i++) {
const tempFile : ChooseMediaTempFile = tempFiles[i]
const imagePath = tempFile.fileType == "image" ? tempFile.tempFilePath : tempFile.thumbTempFilePath;
const file : FileSource = { imagePath: imagePath, filePath: tempFile.tempFilePath, fileType: tempFile.fileType };
this.mediaList.push(file);
}
},
fail: (err) => {
console.log("err: ", JSON.stringify(err));
}
})
},
previewMedia: function (index : number) {
const file : FileSource = this.mediaList[index];
if(file.fileType == "image"){
uni.previewImage({
current: 0,
urls: [file.filePath]
})
}else{
const url = "/pages/API/choose-media/fullscreen-video?url=" + file.filePath + "&cover=" + file.imagePath;
uni.navigateTo({
url:url,
})
}
},
removeMedia(index : number) {
this.mediaList.splice(index, 1)
},
}
}
</script>
<style>
.cell-pd {
padding: 11px 15px;
}
.click-t {
color: darkgray;
}
.list-pd {
margin-top: 25px;
}
.uni-uploader__input-box {
margin: 5px;
width: 104px;
height: 104px;
border: 1px solid #D9D9D9;
}
.uni-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.image-remove {
transform: rotate(45deg);
width: 25px;
height: 25px;
position: absolute;
top: 0;
right: 0;
border-radius: 13px;
background-color: rgba(200, 200, 200, 0.8);
}
.item_width {
width: 130px;
}
</style>
pages/API/choose-media/fullscreen-video.uvue 0 → 100644
浏览文件 @ 210208d4
<template>
<view style="flex:1">
<view ref="back" @click="back" class="nav-back">
<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
</view>
<video ref="video" class="video-box" :src="url" controls="false" autoplay="true" show-progress="false"
show-fullscreen-btn="false" show-play-btn="false" show-center-play-btn="false"></video>
</view>
</template>
<script>
export default {
data() {
return {
url: "",
coverPath: ""
}
},
onLoad(options : OnLoadOptions) {
this.url = options["url"] as string;
this.coverPath = options["cover"] as string;
},
methods: {
back() {
uni.navigateBack()
}
}
}
</script>
<style>
.nav-back {
position: absolute;
/* #ifdef APP */
top: 35px;
/* #endif */
background-color: rgba(220, 220, 220, 0.8);
border-radius: 100px;
margin: 6px;
width: 32px;
height: 32px;
justify-content: center;
align-items: center;
z-index: 10;
}
.nav-back .back-img {
width: 18px;
height: 18px;
}
.video-box {
width: 100%;
flex: 1;
height: 100%;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或