uniapp/subPackages/components/product-swiper/product-swiper.vue

<template>
  <view class="swiper-wrap">
    <swiper
      class="swiper"
      ref="swiper"
      :autoplay="autoplay"
      :circular="circular"
      :interval="interval"
      :duration="duration"
      @change="swiperChange"
    >
      <block v-for="(item, index) in urls" :key="index">
        <swiper-item @tap="previewImage(index)">
          <view v-if="item.type == 'video'" class="video-wrap">
            <!-- #ifdef H5 || MP-WEIXIN -->
            <video
              id="myVideo"
              class="my-video"
              :enable-progress-gesture="false"
              :controls="showControls"
              :show-progress="true"
              :show-fullscreen-btn="showControls"
              :src="item.url"
              :show-center-play-btn="false"
              :muted="false"
              show-mute-btn="true"
              @error="videoErrorCallback"
              :show-play-btn="showControls"
              @click="play"
              @ended="playEnd"
              @fullscreenchange="fullscreenchange"
            ></video>
            <image
              v-show="showPlay"
              @tap.stop="play"
              src="/static/images/icon_play.png"
              class="icon-play"
            >
            </image>

            <!--  <image v-show="showPlay" style="right: 50rpx;bottom: 50rpx;" @tap.stop="play" src="/static/images/all.png" class="icon-play">
                        </image> -->
            <!-- #endif -->
            <!-- #ifdef APP-PLUS -->
            <j-video
              :url="item.url"
              height="750rpx"
              width="750rpx"
              :poster="urls[1].url"
            ></j-video>
            <!-- #endif -->
          </view>
          <u-image
            v-else
            width="750rpx"
            height="750rpx"
            :src="item.url"
            mode="aspectFill"
          ></u-image>
        </swiper-item>
      </block>
    </swiper>
    <view class="dots black sm bg-white br60" id="bottom"
      >{{ currentSwiper + 1 }}/{{ urls.length }}</view
    >
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      currentSwiper: 0,
      urls: [],
      showPlay: true,
      showControls: false,
      autoplay: true,
      start: 0,
    };
  },

  components: {},
  props: {
    imgUrls: {
      type: Array,
      default: () => [],
    },
    circular: {
      type: Boolean,
      default: true,
    },
    interval: {
      type: Number,
      default: 3000,
    },
    duration: {
      type: Number,
      default: 500,
    },
    video: {
      type: String,
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },

  watch: {
    imgUrls: {
      handler(val) {
        this.urls = val.map((item) => {
          return {
            url: item.uri,
            type: "image",
          };
        });
        if (this.video) {
          this.urls.unshift({
            url: this.video,
            type: "video",
          });
          this.autoplay = false;

          this.$nextTick(() => {
            this.videoContext = uni.createVideoContext("myVideo", this);
            this.videoContexts = uni.createVideoContext("videos", this);
          });
        }
      },
      immediate: true,
    },
    isShow: {
      handler(val) {
        if (val == true && !this.showPlay) {
          this.videoContext.stop();
        } else if (val == false && this.showPlay == false) {
          this.videoContext.play();
        }
      },
    },
  },

  methods: {
    swiperChange(e) {
      this.currentSwiper = e.detail.current;
      if (e.detail.current !== 0 && this.video != "") {
        try {
          this.showPlay = true;
          this.videoContext.stop();
          this.videoContexts.stop();
        } catch (error) {
          console.log("err==>", err);
        }
      }
    },
    videoErrorCallback(err) {
      console.log("err==>", err);
    },

    previewImage(current) {
      let index = current;

      if (current == 0 && this.video) {
        return false;
      }

      // #ifdef MP-WEIXIN
      wx.previewMedia({
        current,
        indicator: "default",
        sources: this.urls,
      });
      //#endif
      // #ifdef H5 || APP-PLUS
      if (this.video) {
        index = current - 1;
      }
      if (this.urls[current].type == "video") {
        this.videoContext.requestFullScreen();
      } else {
        uni.previewImage({
          indicator: "default",
          index,
          urls: this.imgUrls.map((item) => item.uri),
        });
      }

      //#endif
    },
    play() {
      if (this.start == 0) {
        this.start = 1;
        this.showPlay = false;
        this.videoContext.play();
      } else {
        this.start = 0;
        this.showPlay = true;
        this.videoContext.stop();
      }
    },

    playEnd() {
      this.start = 0;
      this.showPlay = true;
    },

    fullscreenchange(e) {
      const { fullScreen } = e.detail;
      !fullScreen && this.videoContext.stop();
      this.showControls = fullScreen ? true : false;
      this.showPlay = fullScreen ? false : true;
    },
  },
};
</script>
<style lang="scss">
.swiper-wrap {
  width: 100%;
  height: 750rpx;
  position: relative;

  .close {
    width: 250rpx;
    height: 250rpx;
    top: 230rpx;
    right: 50rpx;
    z-index: 1000;
    position: relative;
    position: fixed;

    .close-item {
      top: 0rpx;
      right: 0rpx;
      position: absolute;
      z-index: 1001;
    }
  }
}

.swiper-wrap .swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

.swiper-wrap .swiper .slide-image {
  width: 100%;
  height: 100%;
}

.swiper-wrap .dots {
  position: absolute;
  right: 24rpx;
  bottom: 24rpx;
  display: flex;
  height: 34rpx;
  padding: 0 15rpx;
}

.swiper-wrap .video-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.swiper-wrap .my-video {
  width: 100%;
  height: 100%;
}

.swiper-wrap .icon-play {
  width: 90rpx;
  height: 90rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
</style>