From 210208d41081d7618b5a9c08786b67dd697d72db Mon Sep 17 00:00:00 2001
From: wangzhitong <wangzhitong@dcloud.io>
Date: Wed, 18 Dec 2024 17:02:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20choose-media?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                   |  21 +
 pages/API/choose-media/choose-media.uvue     | 387 +++++++++++++++++++
 pages/API/choose-media/fullscreen-video.uvue |  56 +++
 3 files changed, 464 insertions(+)
 create mode 100644 pages/API/choose-media/choose-media.uvue
 create mode 100644 pages/API/choose-media/fullscreen-video.uvue

diff --git a/pages.json b/pages.json
index 98055b21..886f2a58 100644
--- a/pages.json
+++ b/pages.json
@@ -1121,6 +1121,23 @@
 				"navigationBarTitleText": "compressVideo | 压缩视频"
 			}
 		},
+    // #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
 		{
@@ -2982,6 +2999,10 @@
 						{
 							"id": "api.media.getBackgroundAudioManager",
 							"name": "getBackgroundAudioManager"
+						},
+						{
+							"id": "api.media.chooseMedia",
+							"name": "chooseMedia"
 						}
 					]
 				},
diff --git a/pages/API/choose-media/choose-media.uvue b/pages/API/choose-media/choose-media.uvue
new file mode 100644
index 00000000..d8632c7e
--- /dev/null
+++ b/pages/API/choose-media/choose-media.uvue
@@ -0,0 +1,387 @@
+<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>
diff --git a/pages/API/choose-media/fullscreen-video.uvue b/pages/API/choose-media/fullscreen-video.uvue
new file mode 100644
index 00000000..45689622
--- /dev/null
+++ b/pages/API/choose-media/fullscreen-video.uvue
@@ -0,0 +1,56 @@
+<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>
-- 
GitLab