family-education/education_uni/components/xb-swiper-preview/index.vue

<template>
  <view class="swiper-content">
    <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="/static/xb-swiper-preview/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">
              <image class="max-img"
                     :src="item"
                     :lazy-load="true"
                     mode="aspectFill" />
            </movable-view>
          </movable-area>
        </view>
      </swiper-item>
    </swiper>
    <view class="item-bottom">
      <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="handle-wrap flex-j-sb--a-ct p-lr-32">
      <view class="w-64 h-64"
            @click="isScale = !isScale">
        <image v-show="isScale"
               class="w-64 h-64"
               src="/static/xb-swiper-preview/icon-scale-yes.png"
               mode="widthFix" />
        <image v-show="!isScale"
               class="w-64 h-64"
               src="/static/xb-swiper-preview/icon-scale.png"
               mode="widthFix" />
      </view>

      <view class="w-64 h-64"
            @click="isCollect = !isCollect">
        <image v-show="isCollect"
               class="w-64 h-64"
               src="/static/xb-swiper-preview/icon-collect-yes.png"
               mode="widthFix" />
        <image v-show="!isCollect"
               class="w-64 h-64"
               src="/static/xb-swiper-preview/icon-collect.png"
               mode="widthFix" />
      </view>

      <view class="w-64 h-64"
            @click="isLike = !isLike">
        <image v-show="isLike"
               class="w-64 h-64"
               src="/static/xb-swiper-preview/icon-like-yes.png"
               mode="widthFix" />
        <image v-show="!isLike"
               class="w-64 h-64"
               src="/static/xb-swiper-preview/icon-like.png"
               mode="widthFix" />
      </view>

      <image class="w-64 h-64"
             src="/static/xb-swiper-preview/icon-set-wallpaper-yes.png"
             mode="widthFix" />
      <image class="w-64 h-64"
             src="/static/xb-swiper-preview/icon-share.png"
             mode="widthFix" />
      <image class="w-64 h-64"
             src="/static/xb-swiper-preview/icon-download.png"
             mode="widthFix" />
    </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 {
  data() {
    return {
      imgs: [
      ],
      currentImg: 0,
      isPop: false,
      scrollTopIndex: "",

      isScale: false,
      isCollect: false,
      isLike: false,
    };
  },
  created() {
	this.getSmallPig()
  },
  onLoad(options) {
    // let { imgs, current } = options;
    // this.imgs = JSON.parse(imgs);
    // this.currentImg = current;
  },
  methods: {
	async getSmallPig() {
		const {data: result} = await uni.$http.get('/education/strategy/getSmallPig')
		this.imgs = result.data.list
	},
    changeSwiper(e) {
      this.currentImg = e.detail.current;
      // console.log("e", e);

      this.scrollTopIndex = `scrollToIndex${e.detail.current}`;
    },
    toImg(index) {
      this.currentImg = index;
    },
    onBack() {
      uni.navigateBack();
    },
    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: 100%;
		height: 100vh;
		position: relative;
	}
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, .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: 10rpx;
   left: 0rpx;

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

   width: 100vw;

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

   transition: ease-in-out .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 .1s;
   transform: scale(.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 .2s;

      border-radius: 20rpx;

      line-height: 100rpx;

      &:active {
         background-color: #eee;
      }
   }
}

</style>