mschool/src/views/activity-record/detail-swiper.tsx

import { Cell, CellGroup, Skeleton, SkeletonParagraph, Image } from 'vant';
import { defineComponent, onMounted, reactive, watch, ref } from 'vue';
import styles from './detail.module.less';
import SwiperClass, { Navigation, Thumbs, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';
import 'swiper/css/pagination';
import iconVideoDefault from '@common/images/icon-video-r.png';
import { checkFile } from '@/helpers/toolsValidate';
import palyBtn from './images/palyBtn.png';
import arrayIcon from './images/array-icon.png';
export default defineComponent({
  name: 'detail-swiper',
  emits: ['showImageToas'],
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  setup(props, { slots, emit }) {
    const forms = reactive({
      loading: false
    });
    const thumbsSwiper = ref<SwiperClass>();
    const setThumbsSwiper = (swiper: SwiperClass) => {
      thumbsSwiper.value = swiper;
      console.log(thumbsSwiper.value, 'setThumbsSwiper');
    };
    const modules = [Navigation, Thumbs, Pagination];
    onMounted(() => {});

    return () => (
      <>
        {props.item.attachmentUrl.length > 0 ? (
          <div class={styles.progItemList}>
            <Swiper
              class="topSwiper"
              style={{
                '--swiper-navigation-color': '#fff',
                '--swiper-pagination-color': '#fff'
              }}
              modules={modules}
              space-between={10}
              pagination={true}
              thumbs={{ swiper: thumbsSwiper.value }}>
              {props.item.attachmentUrl.map((i: any, index: number) => (
                <SwiperSlide class="slide">
                  <div
                    class={styles.photo}
                    onClick={() => {
                      emit('showImageToas', {
                        imagePreview: props.item.attachmentUrl,
                        imageShow: true,
                        startPosition: index
                      });
                      // forms.imagePreview = item.attachmentUrl;
                      // forms.imageShow = true;
                      // forms.startPosition = index;
                    }}>
                    {checkFile(i, 'image') ? (
                      <Image src={i + '@base@tag=imgScale'} fit="cover" />
                    ) : (
                      <div class={styles.videoWErap}>
                        <Image src={palyBtn} class={styles.palyBtn}></Image>
                        <video
                          style={{ backgroundColor: '#F8F8F8' }}
                          poster={iconVideoDefault}
                          src={i + '#t=1,4'}
                        />
                      </div>
                    )}

                    {props.item.attachmentUrl.length > 4 && index === 3 ? (
                      <div class={styles.photoMore}>
                        +{props.item.attachmentUrl.length - 4}
                      </div>
                    ) : (
                      ''
                    )}
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
            <div class={styles.thumbsWrap}>
              <div
                class={styles.thumbsMore}
                onClick={() => {
                  emit('showImageToas', {
                    imagePreview: props.item.attachmentUrl,
                    imageShow: true,
                    startPosition: 0
                  });
                }}>
                <p>全</p>
                <p>部</p>

                <Image class={styles.arrayIcon} src={arrayIcon}></Image>
              </div>
              <Swiper
                class="thumbs-swiper"
                modules={modules}
                space-between={10}
                slides-per-view={4}
                watch-slides-progress={true}
                freeMode={true}
                onSwiper={setThumbsSwiper}>
                {props.item.attachmentUrl.map((i: any, index: number) => (
                  <SwiperSlide class="slide">
                    <div class={styles.photo}>
                      {checkFile(i, 'image') ? (
                        <Image
                          src={i + '@base@tag=imgScale&w=120'}
                          fit="cover"
                        />
                      ) : (
                        <div class={styles.videoSmallWErap}>
                          <Image src={palyBtn} class={styles.playBtn}></Image>
                          <video
                            style={{ backgroundColor: '#F8F8F8' }}
                            poster={iconVideoDefault}
                            src={i + '#t=1,4'}
                          />
                        </div>
                      )}

                      {props.item.attachmentUrl.length > 4 && index === 3 ? (
                        <div class={styles.photoMore}>
                          +{props.item.attachmentUrl.length - 4}
                        </div>
                      ) : (
                        ''
                      )}
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>
          </div>
        ) : null}
      </>
    );
  }
});