h5-colexiu-website/src/views/home/co-tenant/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';

import styles from './index.module.less';
import img1 from '../images/co-tenant/img1.png';
import img2 from '../images/co-tenant/img2.png';
import img3 from '../images/co-tenant/img3.png';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';

import { Vue3Lottie } from 'vue3-lottie';
import request from 'umi-request';

export default defineComponent({
  name: 'music-room',
  setup() {
    const swipeIndex = ref(1);
    const animation = reactive({
      animaRef1: null as any,
      animaRef2: null as any,
      animaRef3: null as any,
      subjectJSON: '',
      ensembleJSON: '',
      soloJSON: ''
    });

    onMounted(async () => {
      await request(location.pathname + 'data/ensemble.json').then(res => {
        animation.ensembleJSON = res;
      });
      await request(location.pathname + 'data/solo.json').then(res => {
        animation.soloJSON = res;
      });
      await request(location.pathname + 'data/subject.json').then(res => {
        animation.subjectJSON = res;
      });
    });
    return () => (
      <div class={styles.coTenant}>
        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>客制化训练教程</span>
          </div>
          <div class={[styles.content, styles.center]}>
            专属定制训练教程，让学员所学即所练
          </div>

          <Swiper
            class={styles.swipe}
            initialSlide={1}
            slidesPerView={'auto'}
            centeredSlides={true}
            onSlideChange={swiper => {
              swipeIndex.value = swiper.activeIndex;
              if (swiper.activeIndex === 0) {
                //   animation.animPlay = true;
                //   animation.animPlay2 = false;
                //   animation.animPlay3 = false;
                animation.animaRef1?.play();
                animation.animaRef2?.stop();
                animation.animaRef3?.stop();
              } else if (swiper.activeIndex === 1) {
                //   animation.animPlay = false;
                //   animation.animPlay2 = true;
                //   animation.animPlay3 = false;
                animation.animaRef1?.stop();
                animation.animaRef2?.play();
                animation.animaRef3?.stop();
              } else if (swiper.activeIndex === 2) {
                //   animation.animPlay = false;
                //   animation.animPlay2 = false;
                //   animation.animPlay3 = true;
                console.log(animation.animaRef3);
                animation.animaRef1?.stop();
                animation.animaRef2?.stop();
                animation.animaRef3?.play();
              }
            }}>
            <SwiperSlide>
              <div class={styles.swipeContainer}>
                <Vue3Lottie
                  ref={el => (animation.animaRef1 = el)}
                  animationData={animation.subjectJSON}
                  autoPlay={false}></Vue3Lottie>
                <div class={styles.desc}>
                  <p>
                    声部教材全量制作为练习曲目，课堂所学即课后所练。让学生循序渐进逐步掌握器乐演奏技能
                  </p>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div class={styles.swipeContainer}>
                <Vue3Lottie
                  ref={el => (animation.animaRef2 = el)}
                  animationData={animation.ensembleJSON}
                  autoPlay={true}></Vue3Lottie>

                <div class={styles.desc}>
                  <p>
                    不同难度的小曲目、流行乐曲持续更新，每首曲目都带有伴奏，在课程之外提升练习兴趣
                  </p>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div class={styles.swipeContainer}>
                <Vue3Lottie
                  ref={el => {
                    animation.animaRef3 = el;
                  }}
                  animationData={animation.soloJSON}
                  autoPlay={false}></Vue3Lottie>
                <div class={styles.desc}>
                  <p>
                    每首合奏曲目都包含多分轨和对应分轨伴奏。同一教学体系下的合奏训练，合排更容易，演出更出彩
                  </p>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>

          <div class={styles.pagination}>
            <i
              class={[
                styles.paginationItem,
                swipeIndex.value === 0 && styles.active
              ]}></i>
            <i
              class={[
                styles.paginationItem,
                swipeIndex.value === 1 && styles.active
              ]}></i>
            <i
              class={[
                styles.paginationItem,
                swipeIndex.value === 2 && styles.active
              ]}></i>
          </div>
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>训练统计</span>
          </div>
          <div class={[styles.content, styles.center]}>
            学生练习情况统计，让您随时掌握训练情况
          </div>

          <img src={img1} class={'w100'} />
        </div>

        <div class={styles.section3}>
          <div class={[styles.title]}>
            <span>即时通讯</span>
          </div>
          <div class={[styles.content]}>
            自定义教学群组，让学生的问题及时解决，让学生和家长感受到全方面的优秀服务
          </div>

          <img src={img2} class={'w100'} />
        </div>

        <div class={styles.section4}>
          <div class={[styles.title]}>
            <span>高效管理</span>
          </div>
          <div class={[styles.content, styles.center]}>
            老师、学生信息一首掌握，让您的管理更加高效
          </div>

          <img src={img3} class={'w100'} />
        </div>
      </div>
    );
  }
});