EveryLike/pages/API/choose-media/choose-media.uvue

<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="chooseMediaType">
              <text class="click-t">{{(mediaTypes[mediaTypeIndex] as ChooseSource).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="count" type="number" :maxlength="1" @blur="chooseMediaCount"/>
            </view>
          </view>

          <!-- #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="chooseOrientationType">
              <text class="click-t">{{orientationTypes[orientationTypeIndex].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>
        <!-- #ifdef APP-IOS -->
        <input-data title="最长拍摄时间，单位秒" defaultValue="10" type="number" @confirm="onMaxDurationConfirm"></input-data>
        <!-- #endif -->
        <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}}/{{count}}</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 orientationTypeList : ChooseSource[] = [
    {
      value: ['portrait'],
      title: '竖屏',
    },
    {
      value: ['landscape'],
      title: '横屏',
    },
    {
      value: ['auto'],
      title: '自动',
    }
  ];
  const cameraTypeList : ChooseSource[] = [
    {
      value: ['front'],
      title: '前置摄像头',
    },
    {
      value: ['back'],
      title: '后置摄像头',
    }
  ];
  export default {
    data() {
      return {
        title: 'chooseMedia',
        mediaList: [] as Array<FileSource>,
        sourceTypeIndex: 2,
        mediaTypeIndex: 2,
        cameraTypeIndex: 1,
        orientationTypeIndex: 0,
        albumModeTypeIndex: 0,
        count: 9,
        maxDuration: 10,
        sourceTypes: sourceTypeList as ChooseSource[],
        mediaTypes: mediaTypeList as ChooseSource[],
        cameraTypes: cameraTypeList as ChooseSource[],
        orientationTypes: orientationTypeList as ChooseSource[]
      }
    },
    methods: {
      chooseMediaSource() {
        uni.showActionSheet({
          itemList: ['拍摄', '相册', '拍摄或相册'],
          success: (e) => {
            this.sourceTypeIndex = 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 || isNaN(count)) {
          uni.showToast({
            position: "bottom",
            title: "图片数量应该不小于1不大于9"
          })
          return
        }
        this.count = count
      },
      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;
      },
      chooseMedia() {
        if (this.mediaList.length >= this.count) {
          const message = "已经有" + this.count + "个了，请删除部分后重新选择";
          uni.showToast({
            position: "bottom",
            title: message
          })
          return
        }

        uni.chooseMedia({
          count: this.count - this.mediaList.length,
          sourceType: sourceTypeList[this.sourceTypeIndex].value,
          mediaType: mediaTypeList[this.mediaTypeIndex].value,
          camera: cameraTypeList[this.cameraTypeIndex].value[0],
          // #ifdef APP-IOS
          maxDuration: this.maxDuration,
          // #endif
          // #ifdef APP-ANDROID
          pageOrientation: orientationTypeList[this.orientationTypeIndex].value[0],
          // #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));
            uni.showToast({
              title:"choose media error.code:" + err.errCode+";message:"+err.errMsg,
              position:"bottom"
            })
          }
        })
      },
      previewMedia: function (index : number) {
        const file : FileSource = this.mediaList[index];
        if (file.fileType == "image") {
          uni.previewImage({
            current: 0,
            urls: [file.filePath]
          })
        } else {
          uni.$once("__ONFULLVIDEOLOAD", () => {
            uni.$emit("__ONRECEIVEURL", {
              "url": file.filePath,
              "cover": file.imagePath
            })
          })
          const url = "/pages/API/choose-media/fullscreen-video";
          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>