water_affairs/pages/facility/modules/previewImage.vue

<template>
  <view class="container">
    <network v-if="network.show" :num="network.num" :tips="network.tips" />
    <view
      v-if="ctrlItem"
      class="ctrl-but"
      :style="{ background: ctrlItem.background }"
      hover-class="navigator-hover"
      @click.stop="changeItem(ctrlItem)"
    >
      {{ ctrlItem.showValue }}
    </view>
    <swiper
      v-if="list.length"
      class="swiper"
      :indicator-dots="list.length > 1"
      :circular="true"
      indicator-color="#999"
      indicator-active-color="#fff"
    >
      <swiper-item
        v-for="(item, index) in list"
        @click="preview(index)"
        :key="item.url"
      >
        <image
          class="image"
          :src="item.url"
          mode="aspectFit"
          lazy-load="true"
        />
      </swiper-item>
    </swiper>
    <My_input ref="MyInput" />
  </view>
</template>
<script>
import network from "./network.vue";
export default {
  name: "previewImage",
  components: { network },
  props: {
    attinfos: Array,
  },
  data() {
    return {
      list: [],
      network: {
        show: false,
        num: 0,
        tips: "",
      },
      ctrlItem: null,
    };
  },
  watch: {
    attinfos: function (newVal) {
      this.list = newVal.filter((v) => v.usetype == "previewImage");
    },
  },
  methods: {
    preview(index) {
      uni.previewImage({
        current: index,
        urls: this.list.map((v) => v.url),
        indicator: "number",
        loop: true,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    openNetwork(num = 0, tips = "信号强度：") {
      this.network = {
        show: true,
        num,
        tips,
      };
    },
    setData(params) {
      for (const key in params) {
        this[key] = params[key];
      }
    },
    changeItem(item) {
      this.$refs.MyInput.openInput(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  .swiper {
    width: 355px;
    height: 158px;
    margin: 15px auto 0;

    .image {
      width: 355px;
      height: 158px;
    }
  }

  .ctrl-but {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 12px;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 1;
  }
}
</style>