EveryLike/pages/API/preview-image/preview-image.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="padding-left: 8px; padding-right: 8px">
      <view>
        <text class="text-desc">图片指示器样式</text>
        <radio-group class="cell-ct" style="background-color: white" @change="onIndicatorChanged">
          <view class="indicator-it" v-for="(item, index) in indicator" :key="item.value">
            <radio :disabled="isWeb" :checked="index == 0" :value="item.value">{{
              item.name
            }}</radio>
          </view>
        </radio-group>
      </view>
      <view>
        <checkbox-group @change="onCheckboxChange" style="margin-top: 16px; margin-bottom: 16px; margin-left: 8px">
          <checkbox :disabled="isWeb" :checked="isLoop" style="margin-right: 15px">循环播放</checkbox>
        </checkbox-group>
      </view>
      <view>
        <checkbox-group @change="onLongPressCheckboxChange"
          style="margin-top: 16px; margin-bottom: 16px; margin-left: 8px">
          <checkbox :disabled="isWeb" :checked="isLongPress" style="margin-right: 15px">支持长按事件</checkbox>
        </checkbox-group>
      </view>
      <view style="background-color: white">
        <text class="text-desc">点击图片开始预览</text>
        <view class="cell-ct" style="margin: 8px;">
          <view class="cell cell-choose-image" v-for="(image, index) in imageList" :key="index">
            <text style="width: 100px; height: 100px;background-color: lightgray; color: red; text-align: center; line-height: 100px;font-size: 14px;" v-if="image.error"
              @click="previewImage(index)">图片路径非法</text>
            <image style="width: 100px; height: 100px;background-color: white;" mode="aspectFit" :src="image.src"
              v-if="!image.error" @click="previewImage(index)"
              @error="onImageLoadError(index,$event as ImageErrorEvent)">
            </image>
          </view>
          <image class="cell cell-choose-image" src="/static/plus.png" @click="chooseImage">
            <view></view>
          </image>
        </view>
      </view>
      <view style="margin:8px;">
        <text style="color: black;font-size: 18px;margin-bottom: 4px;">注意事项:</text>
        <text style="font-size: 17px;margin-left: 4px;color: darkgray;">1、indicator属性仅App平台支持。</text>
        <text style="font-size: 17px;margin-left: 4px;color: darkgray;">2、Web平台不支持loop属性。</text>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  type Indicator = "number" | "default" | "none"
  type ItemType = {
    value : Indicator,
    name : string
  }

  type ImageType = {
    src : string,
    error : boolean
  }
  export default {
    data() {
      return {
        imageList: [{ src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", error: false }, { src: "/static/uni.png", error: false },
        // #ifdef APP
        { src: "/static/uni2.png", error: false },
        // #endif
        ] as ImageType[],
        indicator: [{
          value: "default",
          name: "圆点"
        }, {
          value: "number",
          name: "数字"
        }, {
          value: "none",
          name: "不显示"
        }] as ItemType[],
        currentIndicator: "default" as Indicator,
        // #ifdef WEB
        isWeb: true,
        // #endif
        // #ifndef WEB
        isWeb: false,
        // #endif
        // #ifdef APP-IOS
        isIOS: true,
        // #endif
        // #ifndef APP-IOS
        isIOS: false,
        // #endif
        isLongPress: true,
        isLoop: true,
      }
    },
    methods: {
      previewImage(index : number) {
        let list = [] as Array<string>
        this.imageList.forEach((item : ImageType) => {
          list.push(item.src)
        })
        uni.previewImage({
          urls: list,
          current: index,
          indicator: this.currentIndicator,
          loop: this.isLoop,
          longPressActions: (this.isLongPress ? ({
            itemList: ["按钮1", "按钮2", "按钮3"],
            itemColor: "#ccc",
            success: (e : LongPressActionsSuccessResult) => {
              uni.showToast({
                title: "用户选中了第" + (e.index + 1) + "张图片，并选中了第" + (e.tapIndex + 1) + "个选项",
                position: "bottom"
              })
            },
            fail: (e : LongPressActionsFailResult) => {
              uni.showToast({
                title: "用户关闭了action sheet",
                position: "bottom"
              })
            }
          } as LongPressActionsOptions) : null)
        })
      },
      chooseImage() {
        uni.chooseImage({
          sourceType: ['album'],
          count: 1,
          success: (e) => {
            this.imageList = this.imageList.concat({ src: e.tempFilePaths[0], error: false } as ImageType)
            // this.imageList = this.imageList.concat(e.tempFilePaths)
          },
          fail(_) {
          }
        })
      },
      onIndicatorChanged(e : UniRadioGroupChangeEvent) {
        this.currentIndicator = e.detail.value as Indicator
      },
      onCheckboxChange(_ : UniCheckboxGroupChangeEvent) {
        this.isLoop = !this.isLoop
      },
      onLongPressCheckboxChange() {
        this.isLongPress = !this.isLongPress
      },
      onImageLoadError(index : number, error : UniImageErrorEvent) {
        this.imageList[index].error = true
      }
    }
  }
</script>

<style>
  .text-desc {
    margin-top: 16px;
    margin-left: 8px;
    margin-bottom: 16px;
    font-weight: bold;
  }

  .cell-ct {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .cell {
    margin-left: 3px;
    margin-right: 3px;
    width: 100px;
    height: 100px;
  }

  .cell-choose-image {
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
  }

  .indicator-it {
    margin: 8px;
  }
  .cell-pd {
    padding: 11px 0px;
  }
</style>