2025/2/24

dist/dev/mp-weixin/components/firstui/fui-gallery/fui-gallery.js

@@ -0,0 +1,145 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const _sfc_main = {
+  name: "fui-gallery",
+  emits: ["change", "hide"],
+  props: {
+    urls: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    srcKey: {
+      type: String,
+      default: "src"
+    },
+    descrKey: {
+      type: String,
+      default: "descr"
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    current: {
+      type: [Number, String],
+      default: 0
+    },
+    //文字超出是否省略成一行
+    ellipsis: {
+      type: Boolean,
+      default: false
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 1001
+    },
+    //是否适配底部安全区
+    safeArea: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    urls(newVal, oldVal) {
+      this.initData(newVal);
+    },
+    current(newVal) {
+      this.defActive = this.active;
+      let val = Number(newVal);
+      setTimeout(() => {
+        this.defActive = val;
+        this.active = val;
+      }, 20);
+    }
+  },
+  mounted() {
+    let sys = common_vendor.index.getSystemInfoSync();
+    this.height = sys.windowHeight;
+    this.top = sys.statusBarHeight + 20;
+    this.defActive = Number(this.current);
+    this.active = this.defActive;
+    this.initData(this.urls);
+  },
+  data() {
+    let isNvue = false;
+    return {
+      isNvue,
+      imgUrls: [],
+      active: 0,
+      defActive: 0,
+      top: 20,
+      descr: "",
+      iphoneX: false,
+      height: 800
+    };
+  },
+  methods: {
+    initData(vals) {
+      if (vals && vals.length > 0) {
+        if (typeof vals[0] === "string") {
+          vals = vals.map((item) => {
+            return {
+              [this.srcKey]: item
+            };
+          });
+        }
+        this.imgUrls = vals;
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.getDescr(this.active);
+          }, 10);
+        });
+      }
+    },
+    change(e) {
+      this.active = e.detail.current;
+      this.getDescr(this.active);
+      this.$emit("change", {
+        index: this.active
+      });
+    },
+    getDescr(index) {
+      let item = this.imgUrls[index];
+      if (item) {
+        this.descr = item[this.descrKey] || "";
+      }
+    },
+    hideGallery() {
+      this.$emit("hide", {});
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return common_vendor.e({
+    a: $props.show || !$data.isNvue
+  }, $props.show || !$data.isNvue ? common_vendor.e({
+    b: common_vendor.f($data.imgUrls, (item, index, i0) => {
+      return {
+        a: item[$props.srcKey],
+        b: common_vendor.o((...args) => $options.hideGallery && $options.hideGallery(...args), index),
+        c: index
+      };
+    }),
+    c: $data.height + "px",
+    d: $data.height + "px",
+    e: $data.height + "px",
+    f: $data.height + "px",
+    g: common_vendor.o((...args) => $options.change && $options.change(...args)),
+    h: $data.defActive,
+    i: common_vendor.t($data.active + 1),
+    j: common_vendor.t($data.imgUrls.length),
+    k: $data.top + "px",
+    l: $data.descr
+  }, $data.descr ? {
+    m: common_vendor.t($data.descr),
+    n: $props.ellipsis ? 1 : "",
+    o: $data.iphoneX && $props.safeArea ? 1 : ""
+  } : {}, {
+    p: $props.zIndex,
+    q: common_vendor.n($props.show ? "fui-gallery__show" : "fui-gallery__hidden")
+  }) : {});
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c9e13cde"]]);
+wx.createComponent(Component);

dist/dev/mp-weixin/components/firstui/fui-gallery/fui-gallery.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

dist/dev/mp-weixin/components/firstui/fui-gallery/fui-gallery.wxml

@@ -0,0 +1 @@
+<view wx:if="{{a}}" style="{{'z-index:' + p + ';' + virtualHostStyle}}" class="{{['fui-gallery__wrap', 'data-v-c9e13cde', q, virtualHostClass]}}"><swiper class="fui-gallery__img-wrap data-v-c9e13cde" style="{{'height:' + f}}" indicator-dots="{{false}}" bindchange="{{g}}" current="{{h}}" autoplay="{{false}}" duration="{{500}}"><swiper-item wx:for="{{b}}" wx:for-item="item" wx:key="c" class="data-v-c9e13cde" style="{{'height:' + e}}"><view class="fui-gallery__swiper-item data-v-c9e13cde" style="{{'height:' + d}}"><image mode="aspectFit" class="fui-gallery__img data-v-c9e13cde" style="{{'height:' + c}}" src="{{item.a}}" catchtap="{{item.b}}"></image></view></swiper-item></swiper><view class="fui-gallery__index-wrap data-v-c9e13cde" style="{{'top:' + k}}"><text class="fui-gallery__index data-v-c9e13cde">{{i}}/{{j}}</text></view><view wx:if="{{l}}" class="{{['fui-gallery__descr-wrap', 'data-v-c9e13cde', o && 'fui-gallery__weex-safe']}}"><text class="{{['fui-gallery__descr', 'data-v-c9e13cde', n && 'fui-gallery__text-ellipsis']}}">{{m}}</text></view></view>

dist/dev/mp-weixin/components/firstui/fui-gallery/fui-gallery.wxss

@@ -0,0 +1,94 @@
+
+.fui-gallery__wrap.data-v-c9e13cde {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background: #000;
+}
+.fui-gallery__img-wrap.data-v-c9e13cde {
+
+		width: 100%;
+
+		flex: 1;
+		position: relative;
+		font-size: 0;
+}
+.fui-gallery__swiper-item.data-v-c9e13cde {
+
+		width: 100%;
+		display: flex;
+
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+}
+.fui-gallery__hidden.data-v-c9e13cde {
+
+		display: none;
+		visibility: hidden;
+}
+.fui-gallery__show.data-v-c9e13cde {
+
+		display: flex;
+		visibility: visible;
+
+		flex-direction: column;
+}
+.fui-gallery__index-wrap.data-v-c9e13cde {
+		position: absolute;
+		left: 0;
+		right: 0;
+
+		display: flex;
+
+		align-items: center;
+		justify-content: center;
+}
+.fui-gallery__index.data-v-c9e13cde {
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		font-size: 34rpx;
+		line-height: 34rpx;
+		color: #fff;
+		text-align: center;
+		font-weight: normal;
+		padding: 6rpx 20rpx;
+		border-radius: 100px;
+		background: rgba(0, 0, 0, .6);
+}
+.fui-gallery__descr-wrap.data-v-c9e13cde {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(17, 17, 17, .6);
+
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+}
+.fui-gallery__descr.data-v-c9e13cde {
+		flex: 1;
+		font-size: 30rpx;
+		color: #fff;
+		font-weight: normal;
+		padding: 26rpx 32rpx;
+
+		display: block;
+		box-sizing: border-box;
+		z-index: 10;
+}
+.fui-gallery__text-ellipsis.data-v-c9e13cde {
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		white-space: nowrap;
+}
+.fui-gallery__img.data-v-c9e13cde {
+
+		width: 100%;
+}