mall-front-app/sheep/ui/su-image/su-image.vue

<template>
  <image
    v-if="!state.isError"
    class="su-img"
    :style="customStyle"
    :draggable="false"
    :mode="mode"
    :src="sheep.$url.cdn(src)"
    @tap="onImgPreview"
    @load="onImgLoad"
    @error="onImgError"
  ></image>
</template>

<script setup>
  /**
   * 图片组件
   *
   * @property {String} src 						- 图片地址
   * @property {Number} mode 						- 裁剪方式
   * @property {String} isPreview 		  		- 是否开启预览
   * @property {Number} previewList 				- 预览列表
   * @property {String} current 		  			- 预览首张下标
   *
   * @event {Function} load 						- 图片加载完毕触发
   * @event {Function} error 						- 图片加载错误触发
   *
   */

  import { reactive, computed } from 'vue';
  import sheep from '@/sheep';

  // 组件数据
  const state = reactive({
    isError: false,
    imgHeight: 600,
  });

  // 接收参数
  const props = defineProps({
    src: {
      type: String,
      default: '',
    },
    errorSrc: {
      type: String,
      default: '/static/img/shop/empty_network.png',
    },
    mode: {
      type: String,
      default: 'widthFix',
    },
    isPreview: {
      type: Boolean,
      default: false,
    },
    previewList: {
      type: Array,
      default() {
        return [];
      },
    },
    current: {
      type: Number,
      default: -1,
    },
    height: {
      type: Number,
      default: 0,
    },
    width: {
      type: Number,
      default: 0,
    },
    radius: {
      type: Number,
      default: 0,
    },
  });

  const emits = defineEmits(['load', 'error']);

  const customStyle = computed(() => {
    return {
      height: (props.height || state.imgHeight) + 'rpx',
      width: props.width ? props.width + 'rpx' : '100%',
      borderRadius: props.radius ? props.radius + 'rpx' : '',
    };
  });

  // 图片加载完成
  function onImgLoad(e) {
    if (props.height === 0) {
      state.imgHeight = (e.detail.height / e.detail.width) * 750;
    }
  }

  // 图片加载错误
  function onImgError(e) {
    state.isError = true;
    emits('error', e);
  }

  // 预览图片
  function onImgPreview() {
    if (!props.isPreview) return;
    uni.previewImage({
      urls: props.previewList.length < 1 ? [props.src] : props.previewList,
      current: props.current,
      longPressActions: {
        itemList: ['发送给朋友', '保存图片', '收藏'],
        success: function (data) {
          console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
        },
        fail: function (err) {
          console.log(err.errMsg);
        },
      },
    });
  }
</script>

<style lang="scss" scoped>
  .su-img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
  }
</style>