yitisheng-mini-app/pages/zyb/major/list.vue

<!--
上下翻形式
-->
<script>
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import ImagesConstant from "@/common/ImagesConstant";
import {arrayIsNotEmpty} from "@/common/util";

let request = new Request()
export default {
  computed: {
    ImagesConstant() {
      return ImagesConstant
    }
  },
  data() {
    return {
      majorName: '',
      tabs: [
        {
          id: 1,
          name: '本科'
        }, {
          id: 2,
          name: '专科'
        }
      ],
      scrollLeft: 0,
      currentTab: 0,
      old: {
        scrollTop: 0
      },
      tabCurrent: '1',
      // Tab切换内容
      artMajor:[],
      artMiniMajorList:[],
      majorTypeIndex: 0,
    }
  },
  onLoad() {
    this.getMajorList()
  },
  methods: {
    openMajorDetail: function (e, majorTypeName) {
      console.log(e)
      uni.navigateTo({
        url: '/pages/zyb/major/detail?majorCode=' + e.majorCode + "&majorTypeName=" + majorTypeName
      })
    },
    swichMenu(id) {
      this.currentTab = id
      console.log(id)
      //this.tabCurrent = 'tabNum'+ id
      // 滑动swiper后，每个选项距离其父元素最左侧的距离
      this.scrollLeft = 0;
      for (let i = 0; i < id; i++) {
        this.scrollLeft += 60
        console.log(this.scrollLeft, 60, id)
      }
      this.getMajorList()
    },
    /*切换 专业类*/
    switchMajorType(e, index) {
      this.majorTypeIndex = index
    },
    getMajorList() {
      let that = this
      let educationalLevel = this.tabs[this.currentTab].id
      let thisLevelMajorList = this.artMajor[educationalLevel]
      if (arrayIsNotEmpty(thisLevelMajorList)) {
        //已缓存的该数据
        this.artMiniMajorList = thisLevelMajorList
        return
      }
      request.get(ApiConstant.Major.miniMajorList, {
        majorName: this.majorName,
        educationalLevel: educationalLevel
      }).then(r => {
        console.log(r)
        if (r.success) {
          this.artMajor[educationalLevel] = r.result
          this.artMiniMajorList = r.result
        }
      }).catch(err => {
      }).finally(() => {
      });

    }
  }
}
</script>
<template>
  <!-- 使用scroll-view实现tabs滑动切换 -->
  <view style="padding: 0 200rpx" class="background-white border-bottom border-top">
    <view style="" class="menu-topic-view " v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index"
          @click="swichMenu(index)">
      <view :class="currentTab===index ? 'menu-topic-act' : 'menu-topic'">
        <text class="menu-topic-text">{{ item.name }}</text>
        <view class="menu-topic-bottom">
          <view class="menu-topic-bottom-color"></view>
        </view>
      </view>
    </view>
  </view>
  <view class="flex" style="height: 93%">
    <!--专业类别-->
    <scroll-view scroll-y="true" class="flex-item-25 background-f6f6f6">
      <view>
        <view class="flex font-weight-550" style="padding: 25rpx 0; min-height: 60rpx"
              :class="majorTypeIndex===index?'background-white':''"
              @click="switchMajorType(item,index)"
              v-for="(item,index) in artMiniMajorList" :key="index">
          <text style="margin: auto 10rpx" :class="majorTypeIndex===index?'blue background-white':'slateGray'">
            {{ item.majorTypeName }}
          </text>
        </view>
      </view>
    </scroll-view>
    <scroll-view scroll-y="true" class="flex-item-75 background-white">
      <view class="padding30" v-if="artMiniMajorList && artMiniMajorList.length>0 && artMiniMajorList[majorTypeIndex]">
        <view v-for="(item,index) in artMiniMajorList[majorTypeIndex].majorList" :key="index">
          <view class="majorItem background-fafafa" @click="openMajorDetail(item,artMiniMajorList[majorTypeIndex].majorTypeName)">
            <view class="majorName font-weight-b font-size-mini3">{{ item.majorName }}</view>
            <view class="flex slateGray" style="margin-top: 20rpx">
              <view class="flex-item-4">
                <text>学制：</text>
                <text v-if="item.semester" class="black">{{item.semester}}年</text>
              </view>
              <view class="flex-item-6">
                <text>开设院校：</text>
                <text>{{ item.schoolNum||'0'}}个</text>
              </view>
            </view>
          </view>
        </view>
      </view>

    </scroll-view>
  </view>
</template>

<style scoped lang="scss">

/*tabs 栏*/

.menu-topic-view {
  background-color: white;
  display: inline-block;
  white-space: nowrap;
  height: 86rpx;
  position: relative;
  width: 50%;
  text-align: center;

  .menu-topic-text {
    font-size: 30rpx;
    color: #708090;
    padding: 10rpx 40rpx;
    font-weight: 500;
  }

  .menu-topic-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;

    .menu-topic-bottom-color {
      width: 40rpx;
      height: 4rpx;
    }
  }

  .menu-topic-act .menu-topic-bottom {
    display: flex;
    justify-content: center;
  }

  .menu-topic-act .menu-topic-text {
    color: #4975fd;
    font-weight: 600;
  }


  .menu-topic-act .menu-topic-bottom-color {
    background: #4975fd;
  }
}

.majorItem {
  margin-bottom: 30rpx;
  padding: 30rpx;
  border-radius: 10rpx;
}
</style>