first commit

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-image/props.js

@@ -0,0 +1,87 @@
+"use strict";
+const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
+const props = {
+  props: {
+    // 图片地址
+    src: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.src
+    },
+    // 裁剪模式
+    mode: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.mode
+    },
+    // 宽度，单位任意
+    width: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.width
+    },
+    // 高度，单位任意
+    height: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.height
+    },
+    // 图片形状，circle-圆形，square-方形
+    shape: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.shape
+    },
+    // 圆角，单位任意
+    radius: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.radius
+    },
+    // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+    lazyLoad: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.lazyLoad
+    },
+    // 开启长按图片显示识别微信小程序码菜单
+    showMenuByLongpress: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.showMenuByLongpress
+    },
+    // 加载中的图标，或者小图片
+    loadingIcon: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.loadingIcon
+    },
+    // 加载失败的图标，或者小图片
+    errorIcon: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.errorIcon
+    },
+    // 是否显示加载中的图标或者自定义的slot
+    showLoading: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.showLoading
+    },
+    // 是否显示加载错误的图标或者自定义的slot
+    showError: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.showError
+    },
+    // 是否需要淡入效果
+    fade: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.fade
+    },
+    // 只支持网络资源，只对微信小程序有效
+    webp: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.webp
+    },
+    // 过渡时间，单位ms
+    duration: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.duration
+    },
+    // 背景颜色，用于深色页面加载图片时，为了和背景色融合
+    bgColor: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.image.bgColor
+    }
+  }
+};
+exports.props = props;

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-image/u-image.acss

@@ -0,0 +1,38 @@
+.u-empty.data-v-abebd402,
+.u-empty__wrap.data-v-abebd402,
+.u-tabs.data-v-abebd402,
+.u-tabs__wrapper.data-v-abebd402,
+.u-tabs__wrapper__scroll-view-wrapper.data-v-abebd402,
+.u-tabs__wrapper__scroll-view.data-v-abebd402,
+.u-tabs__wrapper__nav.data-v-abebd402,
+.u-tabs__wrapper__nav__line.data-v-abebd402 {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+.u-image.data-v-abebd402 {
+  position: relative;
+  transition: opacity 0.5s ease-in-out;
+}
+.u-image__image.data-v-abebd402 {
+  width: 100%;
+  height: 100%;
+}
+.u-image__loading.data-v-abebd402, .u-image__error.data-v-abebd402 {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: #f3f4f6;
+  color: #909193;
+  font-size: 46rpx;
+}

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-image/u-image.axml

@@ -0,0 +1 @@
+<u-transition class="data-v-abebd402" u-s="{{['d']}}" u-i="abebd402-0" onVI="__l" u-p="{{z}}"><view class="u-image data-v-abebd402" onTap="{{w}}" style="{{x + ';' + y}}"><image a:if="{{a}}" src="{{b}}" mode="{{c}}" onError="{{d}}" onLoad="{{e}}" show-menu-by-longpress="{{f}}" lazy-load="{{g}}" class="u-image__image data-v-abebd402" style="{{'border-radius:' + h + ';' + ('width:' + i) + ';' + ('height:' + j)}}"></image><view a:if="{{k}}" class="u-image__loading data-v-abebd402" style="{{'border-radius:' + m + ';' + ('background-color:' + n) + ';' + ('width:' + o) + ';' + ('height:' + p)}}"><slot name="loading"><u-icon class="data-v-abebd402" u-i="abebd402-1,abebd402-0" onVI="__l" u-p="{{l}}"></u-icon></slot></view><view a:if="{{q}}" class="u-image__error data-v-abebd402" style="{{'border-radius:' + s + ';' + ('width:' + t) + ';' + ('height:' + v)}}"><slot name="error"><u-icon class="data-v-abebd402" u-i="abebd402-2,abebd402-0" onVI="__l" u-p="{{r}}"></u-icon></slot></view></view></u-transition>

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-image/u-image.js

@@ -0,0 +1,138 @@
+"use strict";
+const uni_modules_uviewPlus_components_uImage_props = require("./props.js");
+const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
+const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
+const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
+const common_vendor = require("../../../../common/vendor.js");
+const _sfc_main = {
+  name: "u-image",
+  mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uImage_props.props],
+  data() {
+    return {
+      // 图片是否加载错误，如果是，则显示错误占位图
+      isError: false,
+      // 初始化组件时，默认为加载中状态
+      loading: true,
+      // 不透明度，为了实现淡入淡出的效果
+      opacity: 1,
+      // 过渡时间，因为props的值无法修改，故需要一个中间值
+      durationTime: this.duration,
+      // 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+      backgroundStyle: {},
+      // 用于fade模式的控制组件显示与否
+      show: false
+    };
+  },
+  watch: {
+    src: {
+      immediate: true,
+      handler(n) {
+        if (!n) {
+          this.isError = true;
+        } else {
+          this.isError = false;
+          this.loading = true;
+        }
+      }
+    }
+  },
+  computed: {
+    wrapStyle() {
+      let style = {};
+      style.width = uni_modules_uviewPlus_libs_function_index.addUnit(this.width);
+      style.height = uni_modules_uviewPlus_libs_function_index.addUnit(this.height);
+      style.borderRadius = this.shape == "circle" ? "10000px" : uni_modules_uviewPlus_libs_function_index.addUnit(this.radius);
+      style.overflow = this.radius > 0 ? "hidden" : "visible";
+      return uni_modules_uviewPlus_libs_function_index.deepMerge(style, uni_modules_uviewPlus_libs_function_index.addStyle(this.customStyle));
+    }
+  },
+  mounted() {
+    this.show = true;
+  },
+  emits: ["click", "error", "load"],
+  methods: {
+    addUnit: uni_modules_uviewPlus_libs_function_index.addUnit,
+    // 点击图片
+    onClick() {
+      this.$emit("click");
+    },
+    // 图片加载失败
+    onErrorHandler(err) {
+      this.loading = false;
+      this.isError = true;
+      this.$emit("error", err);
+    },
+    // 图片加载完成，标记loading结束
+    onLoadHandler(event) {
+      this.loading = false;
+      this.isError = false;
+      this.$emit("load", event);
+      this.removeBgColor();
+    },
+    // 移除图片的背景色
+    removeBgColor() {
+      this.backgroundStyle = {
+        backgroundColor: "transparent"
+      };
+    }
+  }
+};
+if (!Array) {
+  const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
+  const _easycom_u_transition2 = common_vendor.resolveComponent("u-transition");
+  (_easycom_u_icon2 + _easycom_u_transition2)();
+}
+const _easycom_u_icon = () => "../u-icon/u-icon.js";
+const _easycom_u_transition = () => "../u-transition/u-transition.js";
+if (!Math) {
+  (_easycom_u_icon + _easycom_u_transition)();
+}
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return common_vendor.e({
+    a: !$data.isError
+  }, !$data.isError ? {
+    b: _ctx.src,
+    c: _ctx.mode,
+    d: common_vendor.o((...args) => $options.onErrorHandler && $options.onErrorHandler(...args)),
+    e: common_vendor.o((...args) => $options.onLoadHandler && $options.onLoadHandler(...args)),
+    f: _ctx.showMenuByLongpress,
+    g: _ctx.lazyLoad,
+    h: _ctx.shape == "circle" ? "10000px" : $options.addUnit(_ctx.radius),
+    i: $options.addUnit(_ctx.width),
+    j: $options.addUnit(_ctx.height)
+  } : {}, {
+    k: _ctx.showLoading && $data.loading
+  }, _ctx.showLoading && $data.loading ? {
+    l: common_vendor.p({
+      name: _ctx.loadingIcon,
+      width: _ctx.width,
+      height: _ctx.height
+    }),
+    m: _ctx.shape == "circle" ? "50%" : $options.addUnit(_ctx.radius),
+    n: this.bgColor,
+    o: $options.addUnit(_ctx.width),
+    p: $options.addUnit(_ctx.height)
+  } : {}, {
+    q: _ctx.showError && $data.isError && !$data.loading
+  }, _ctx.showError && $data.isError && !$data.loading ? {
+    r: common_vendor.p({
+      name: _ctx.errorIcon,
+      width: _ctx.width,
+      height: _ctx.height
+    }),
+    s: _ctx.shape == "circle" ? "50%" : $options.addUnit(_ctx.radius),
+    t: $options.addUnit(_ctx.width),
+    v: $options.addUnit(_ctx.height)
+  } : {}, {
+    w: common_vendor.o((...args) => $options.onClick && $options.onClick(...args)),
+    x: common_vendor.s($options.wrapStyle),
+    y: common_vendor.s($data.backgroundStyle),
+    z: common_vendor.p({
+      mode: "fade",
+      show: $data.show,
+      duration: _ctx.fade ? 1e3 : 0
+    })
+  });
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-abebd402"]]);
+my.createComponent(Component);

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-image/u-image.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "u-icon": "../u-icon/u-icon",
+    "u-transition": "../u-transition/u-transition"
+  }
+}