mteacher/src/views/audition/modal/workModel.vue

<template>
  <div class="workModel">
    <van-sticky>
      <van-nav-bar
        title="训练曲目"
        left-arrow
        @click-left="close"
      />
    </van-sticky>
    <base-list @onDetail="onDetail" v-if="index == 1" />
    <classify @onDetail="onDetail" v-if="index == 2" />
    <accompaniment-modal v-if="index == 3" :id="id" @onSelectMusic="onSelectMusic" :searchSubjectId="searchSubjectId" />

    <!-- <div class="button-group-popup">
      <span class="btn" @click="close">关闭</span>
    </div> -->
  </div>
</template>

<script>
import BaseList from './baseList'
import Classify from './classify'
import AccompanimentModal from './accompanimentModal'
export default {
  props: ["searchSubjectId"],
  name: 'workModel',
  components: { BaseList, Classify, AccompanimentModal },
  data() {
    return {
      index: 1,
      id: null,
    }
  },
  methods: {
    onDetail(option) {
      if(option.path == 'classify') {
        this.index = 2
      } else if(option.path == 'list') {
        this.index = 3
        this.id = option.id
      }
    },
    onSelectMusic(item) {
      this.index = 1
      this.close()
      this.$emit('onSelectMusic', item)
    },
    close() {
      if(this.index == 1) {
        this.$emit('close')
      } else {
        this.index = 1
      }
      document.querySelector('.van-popup').scrollTop = 0
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../../../assets/commonLess/variable.less");
.button-group-popup {
  position: fixed;
  bottom: 0;
  padding: 0.1rem 0;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  .btn {
    line-height: 0.5rem;
    display: inline-block;
    border: 1px solid @mColor;
    border-radius: 0.4rem;
    color: @mColor;
    background: #fff;
    font-size: 0.18rem;
    width: 90%;
    &.primary {
      color: #fff;
      background: @mColor;
    }
  }
  .btn + .btn {
    margin-left: 0.1rem;
  }
}
/deep/.van-nav-bar .van-icon {
  color: #212121
}
</style>