choose-image.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="chooseImageSource">
              <text class="click-t">{{sourceType[sourceTypeIndex]}}</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="chooseImageType">
              <text class="click-t">{{sizeType[sizeTypeIndex]}}</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" :value="countIndex+1" type="number" :maxlength="1" @confirm="chooseImageCount"
                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">{{orientationType[orientationTypeIndex]}}</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">{{albumModeType[albumModeTypeIndex]}}</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">
              <switch :checked="isCrop" @change="switchCrop"></switch>
            </view>
          </view>
          <view ref="cropOptionNode" class="crop-option"
            :style="{'height':isCrop?'200px':'0px','margin-bottom':isCrop?'11px':'0px'}">
            <view class="uni-list-cell cell-pd">
              <view class="uni-list-cell-left item_width">
                图片质量(%)
              </view>
              <view class="uni-list-cell-right">
                <input :value="cropPercent" @confirm="cropPercentConfim" type="number" maxlength="-1" />
              </view>
            </view>
            <view class="uni-list-cell cell-pd">
              <view class="uni-list-cell-left item_width">
                裁剪宽度(px)
              </view>
              <view class="uni-list-cell-right">
                <input :value="cropWidth" @confirm="cropWidthConfim" type="number" maxlength="-1" />
              </view>
            </view>
            <view class="uni-list-cell cell-pd">
              <view class="uni-list-cell-left item_width">
                裁剪高度(px)
              </view>
              <view class="uni-list-cell-right">
                <input :value="cropHeight" @confirm="cropHeightConfim" type="number" maxlength="-1" />
              </view>
            </view>
            <view class="uni-list-cell cell-pd">
              <view class="uni-list-cell-left item_width">
                保留原宽高
              </view>
              <view class="uni-list-cell-right">
                <switch :checked="cropResize" @change="cropResizeChange"></switch>
              </view>
            </view>
          </view>
        </view>

        <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">{{imageList.length}}/{{countIndex+1}}</text>
            </view>
          </view>
          <view class="uni-flex" style="flex-wrap: wrap;">
            <view v-for="(image,index) in imageList" :key="index" class="uni-uploader__input-box" style="border: 0;">
              <image style="width: 104px; height: 104px;" :src="image" :data-src="image" @tap="previewImage(index)">
              </image>
              <image src="/static/plus.png" class="image-remove" @click="removeImage(index)"></image>
            </view>
            <image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
          </view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  var sourceTypeArray = [
    ['camera'],
    ['album'],
    ['camera', 'album']
  ]
  var sizeTypeArray = [
    ['compressed'],
    ['original'],
    ['compressed', 'original']
  ]
  var orientationTypeArray = [
    'portrait',
    'landscape',
    'auto'
  ]
  var albumModeTypeArray = [
    "custom",
    "system"
  ]
  export default {
    data() {
      return {
        title: 'chooseImage',
        imageList: [] as Array<string>,
        sourceTypeIndex: 2,
        sourceType: ['拍照', '相册', '拍照或相册'],
        sizeTypeIndex: 2,
        sizeType: ['压缩', '原图', '压缩或原图'],
        orientationTypeIndex: 0,
        orientationType: ['竖屏', '横屏', '自动'],
        albumModeTypeIndex:0,
        albumModeType:["自定义相册","系统相册"],
        countIndex: 8,
        count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        isCrop: false,
        cropPercent: 80,
        cropWidth: 100,
        cropHeight: 100,
        cropResize: false
      }
    },
    onUnload() {
      this.imageList = [];
      this.sourceTypeIndex = 2
      this.sourceType = ['拍照', '相册', '拍照或相册']
      this.sizeTypeIndex = 2
      this.sizeType = ['压缩', '原图', '压缩或原图']
      this.countIndex = 8
      this.orientationTypeIndex = 0
      this.orientationType = ['竖屏', '横屏', '自动']
    },
    methods: {
      cropHeightConfim(e : InputConfirmEvent) {
        let value = parseInt(e.detail.value)
        if (value > 0) {
          this.cropHeight = value
        } else {
          uni.showToast({
            position: "bottom",
            title: "裁剪高度需要大于0"
          })
        }
      },
      cropWidthConfim(e : InputConfirmEvent) {
        let value = parseInt(e.detail.value)
        if (value > 0) {
          this.cropWidth = value
        } else {
          uni.showToast({
            position: "bottom",
            title: "裁剪宽度需要大于0"
          })
        }
      },
      cropPercentConfim(e : InputConfirmEvent) {
        let value = parseInt(e.detail.value)
        if (value > 0 && value <= 100) {
          this.cropPercent = value
        } else {
          uni.showToast({
            position: "bottom",
            title: "请输入0~100之间的值"
          })
        }
      },
      albumModeChange(){
        uni.showActionSheet({
          itemList: this.albumModeType,
          success: (e) => {
            this.albumModeTypeIndex = e.tapIndex!
          }
        })
      },
      cropResizeChange(e : UniSwitchChangeEvent) {
        this.cropResize = e.detail.value
      },
      switchCrop(e : UniSwitchChangeEvent) {
        this.isCrop = e.detail.value
      },
      removeImage(index : number) {
        this.imageList.splice(index, 1)
      },
      chooseImageSource() {
        uni.showActionSheet({
          itemList: ['拍照', '相册', '拍照或相册'],
          success: (e) => {
            this.sourceTypeIndex = e.tapIndex!
          }
        })
      },
      chooseImageType() {
        uni.showActionSheet({
          itemList: ['压缩', '原图', '压缩或原图'],
          success: (e) => {
            this.sizeTypeIndex = e.tapIndex!
          }
        })
      },
      chooseOrientationType(){
        uni.showActionSheet({
          itemList: ['竖屏', '横屏', '自动'],
          success: (e) => {
            this.orientationTypeIndex = e.tapIndex!
          }
        })
      },
      chooseImageCount(event : InputConfirmEvent) {
        let count = parseInt(event.detail.value) - 1
        if (count < 0) {
          uni.showToast({
            position: "bottom",
            title: "图片数量应该大于0"
          })
          return
        }
        this.countIndex = count
      },
      chooseImage: function () {
        // var cropOption:ChooseImageCropOptions|null = this.isCrop ? null : new ChooseImageCropOptions(  )
        if (this.imageList.length >= 9) {
          uni.showToast({
            position: "bottom",
            title: "已经有9张图片了，请删除部分图片之后重新选择"
          })
          return
        }
        uni.chooseImage({
          sourceType: sourceTypeArray[this.sourceTypeIndex],
          sizeType: sizeTypeArray[this.sizeTypeIndex],
          crop: this.isCrop ? { "quality": this.cropPercent, "width": this.cropWidth, "height": this.cropHeight, "resize": this.cropResize } as ChooseImageCropOptions : null,
          count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
          pageOrientation: orientationTypeArray[this.orientationTypeIndex],
          albumMode: albumModeTypeArray[this.albumModeTypeIndex],
          success: (res) => {
            this.imageList = this.imageList.concat(res.tempFilePaths);
          },
          fail: (err) => {
            console.log("err: ", JSON.stringify(err));
          }
        })
      },
      previewImage: function (index : number) {
        uni.previewImage({
          current: index,
          urls: this.imageList
        })
      }
    }
  }
</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;
  }

  .crop-option {
    margin-left: 11px;
    margin-right: 11px;
    border-radius: 11px;
    background-color: #eee;
    transition-property: height, margin-bottom;
    transition-duration: 200ms;
  }
</style>