cashier_wx/components/xb-swiper-preview/index.vue

<template>
  <view class="swiper-content" v-if="visable">
    <view class="hander-top p-lr-32 w-s flex-j-sb--a-ct">
      <view class="icon-back-wrap" @click="onBack">
        <image class="icon-back" src="./images/icon-back.png" mode="widthFix" />
      </view>
      <view class="count">{{ currentImg + 1 }} / {{ imgs.length }}</view>
    </view>

    <swiper
      class="swiper-img"
      :current="currentImg"
      :duration="300"
      @change="changeSwiper"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in imgs"
        :key="index"
      >
        <view class="img-page">
          <movable-area scale-area>
            <movable-view
              direction="all"
              scale="true"
              scale-min="1"
              scale-max="4"
              @click.stop="onBack"

            >
              <image
              @click.stop="onBack"
                class="max-img"
                :src="item"
                :lazy-load="true"
                mode="aspectFill"
              />
            </movable-view>
          </movable-area>
        </view>
      </swiper-item>
    </swiper>
    <view class="item-bottom" v-if="false">
      <scroll-view
        class="scroll-view_H"
        :scroll-x="true"
        :scroll-into-view="scrollTopIndex"
        :scroll-with-animation="true"
        scroll-left="20"
      >
        <view
          class="img-page-box scroll-view-item_H"
          :class="currentImg == index ? 'img-page-checked' : ''"
          v-for="(item, index) in imgs"
          :key="index"
          :id="`scrollToIndex${index}`"
          @click.stop="toImg(index)"
        >
          <image class="img" :src="item" mode="aspectFill" />
        </view>
      </scroll-view>
    </view>

    <view class="pop" v-if="isPop">
      <view class="item" @click.stop="share()">分享图片</view>
      <!-- #ifndef H5 -->
      <view class="item" @click.stop="saveImg(false)">保存图片</view>
      <view class="item" @click.stop="saveImg(true)">保存全部图片</view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    imgs: {
      type: Array,
      default: () => [],
    },
    visable: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:visable'],
  data() {
    return {
      currentImg: 0,
      isPop: false,
      scrollTopIndex: "",

      isScale: false,
      isCollect: false,
      isLike: false,
    };
  },
  onLoad(options) {
    // let { imgs, current } = options;
    // this.imgs = JSON.parse(imgs);
    // this.currentImg = current;
  },
  methods: {
    changeSwiper(e) {
      this.currentImg = e.detail.current;
      console.log("e", e);

      this.scrollTopIndex = `scrollToIndex${e.detail.current}`;
    },
    toImg(index) {
      this.currentImg = index;
    },
    onBack() {
      this.$emit('update:visable', false);
    },
    share() {
      uni.downloadFile({
        // 下面一行时拼接预览PDF的地址！！！
        url: this.imgs[this.currentImg],
        success: function (res) {
          var filePath = res.tempFilePath;
          if (!filePath) return;
          uni.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log(res);
              console.log("打开文档成功");
            },
          });
        },
      });
    },
    saveImg(isAll = false) {
      const that = this;
      if (!isAll) {
        uni.downloadFile({
          url: this.imgs[this.currentImg],
          success: (res) => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function () {
                  uni.showToast({
                    icon: "none",
                    title: "保存成功",
                  });
                  that.isPop = false;
                },
                fail: function () {},
              });
            } else {
            }
          },
        });
        return;
      }
      this.imgs.forEach((item) => {
        uni.downloadFile({
          url: item,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function () {
                  uni.showToast({
                    icon: "none",
                    title: "保存全部成功",
                  });
                  that.isPop = false;
                },
                fail: function () {},
              });
            } else {
            }
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper-content {
  width: 100vw;
  top: 0;
  height: 100vh;
  position: fixed;
  background: #000;
  z-index: 99999;
}
movable-view {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

movable-area {
  position: fixed;

  overflow: hidden;

  width: 100%;
  height: 100%;

  transform: scale();
}

movable-view image {
  width: 100%;
}

uni-image > img {
  z-index: -1 !important;
}

.hander-top {
  position: absolute;
  z-index: 1000;
  top: 48rpx;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
  .icon-back-wrap {
    width: 64rpx;
    height: 64rpx;
    .icon-back {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .count {
    box-sizing: border-box;
    padding: 8rpx 24rpx;

    color: #fff;
    border-radius: 24rpx;
    background: rgba(0, 0, 0, 0.4);

    font-size: 28rpx;
  }
}

.swiper-img {
  width: 100vw;
  height: 100vh;

  background-color: #000;

  .swiper-item {
    width: 100vw;
    height: 100vh;

    .img-page {
      display: flex;
      align-items: center;

      width: 100vw;
      height: 100vh;

      .max-img {
        // width: 100%;
        // height: 100%;
      }
    }
  }
}

.handle-wrap {
  position: absolute;
  z-index: 100;
  bottom: 40rpx;
  left: 0;

  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 32rpx;
  box-sizing: border-box;
  image {
    width: 64rpx;
    height: 64rpx;
  }

  width: 100%;
}

.item-bottom {
  position: fixed;
  z-index: 9999;
  bottom: 110rpx;
  left: 0rpx;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: 100vw;

  //  height: 200rpx;
  padding: 30rpx;

  transition: ease-in-out 0.3s;
}

.small-list-page {
  min-height: 60rpx;
}

.scroll-Y {
  height: 300rpx;
}

.scroll-view_H {
  width: 100%;
  box-sizing: border-box;
  padding-right: 32rpx;
  white-space: nowrap;
}

.scroll-view-item_H {
  display: inline-block;

  margin-right: 10rpx;

  transition: ease-in 0.1s;
  transform: scale(0.8);

  border-radius: 11rpx;
  background: #c2c2c2;

  &:last-child {
    margin-right: 0;
  }

  .img {
    display: block;

    width: 160rpx;
    height: 272rpx;
  }
}

.img-page-checked {
  transform: translateY(-28rpx) scale(1);
}

.pop {
  position: fixed;
  z-index: 999999;
  top: 50%;
  left: 50%;

  overflow: hidden;

  width: 500rpx;

  transform: translate(-50%, -50%);

  border-radius: 20rpx;
  background-color: #fff;

  .item {
    height: 100rpx;
    padding: 0 50rpx;

    transition: all 0.2s;

    border-radius: 20rpx;

    line-height: 100rpx;

    &:active {
      background-color: #eee;
    }
  }
}
</style>