teaching-uniapp/pages/resource/resource.vue

<template>
  <view class="resource">
    <statusBar :item="navBarData"></statusBar>
    <view class="search">
      <uni-search-bar
        v-model="searchText"
        bgColor="#f0f2f5"
        class="btntop"
        placeholder="搜索"
        cancelButton="none"
        clearButton="none"
      ></uni-search-bar>
    </view>

    <view class="top">
      <view
        class="left"
        @click="phoneLogin"
        :class="current == 0 ? info1 : info2"
      >
        <text class="">资源库</text>
        <view v-if="current == 0" class="yun">
          <image
            src="http://43.139.158.220:5007/img/static/yym/Ellipse 10.png"
            mode="aspectFill"
          ></image>
        </view>
      </view>
      <view
        class="right"
        @click="accountLogin"
        :class="current == 1 ? info1 : info2"
      >
        <text class="">精品慕课</text>
        <view v-if="current == 1" class="yun">
          <image
            src="http://43.139.158.220:5007/img/static/yym/Ellipse 10.png"
            mode="aspectFill"
          ></image>
        </view>
      </view>
    </view>

    <swiper
      class="scroll-view-height"
      :style="{ height: swiper + 'px' }"
      @change="swipeIndex"
      :current="current"
      :duration="300"
    >
      <swiper-item>
        <scroll-view scroll-y="true" :style="{ height: swiper + 'px' }">
          <view class="contBox">
            <view
              class="cont"
              @click="gotoLogin"
              v-for="(item, index) in filteredClassList"
              :index="index"
              :key="index"
            >
              <image class="image" :src="item.url" mode="aspectFill" />
              <view class="tit btn-font">{{ item.className }}</view>
              <view class="teacher fz-font">{{ item.th_name }}</view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <swiper-item>
        <scroll-view scroll-y="true" :style="{ height: swiper + 'px' }">
          <view class="contBox">
            <view
              class="cont"
              @click="gotoWeb(index)"
              v-for="(item, index) in filteredClassList2"
              :index="index"
              :key="index"
            >
              <image class="image" :src="item.url" mode="aspectFill" />
              <view class="tit btn-font">{{ item.className }}</view>
              <view class="teacher fz-font">{{ item.th_name }}</view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navBarData: {
        title: "资源库",
        btn: 0,
      },
      current: 0, //登录方式切换
      info1: "info1", //类名
      info2: "info2",
      swiper: 0,
      searchText: "", // 搜索文本
      classList: [
        {
          url: "http://43.139.158.220:5007/img/static/pubic/img5.jpg",
          className: "创新思维",
          th_name: "主讲教师： 吴伟",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/sc.jpg",
          className: "商机识别与创业营销 ",
          th_name: "主讲教师：明照凤 ",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/sg.jpg",
          className: "双创生态圈构建 ",
          th_name: "主讲教师： 徐文泽",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/cy.jpg",
          className: "创业基础 ",
          th_name: "主讲教师： 杨哲旗",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/ks.png",
          className: "跨界产品研发实战 ",
          th_name: "主讲教师： 王程程",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/cs.jpg",
          className: "创造性思维与创新方法训练 ",
          th_name: "主讲教师： 申珊珊",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/hs.jpg",
          className: "行业创业实践 ",
          th_name: "主讲教师： 陆亚文",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/cx.png",
          className: "创新方法与训练 ",
          th_name: "主讲教师： 张梦龙",
        },
      ],
      classList2: [
        {
          url: "http://43.139.158.220:5007/img/static/img/ydjk.png",
          className: "运动与健康",
          th_name: "主讲教师： 代方梅 史文文",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/shyy.png",
          className: "生活英语听说",
          th_name: "主讲教师： 杨芳 张文霞",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/yyll.jpg",
          className: "科研伦理与学术规范",
          th_name: "主讲教师： 印波",
        },
        {
          url: "http://43.139.158.220:5007/img/static/img/kylw.png",
          className: "如何写好科研论文",
          th_name: "主讲教师： 高飞飞 张靖",
        },
      ],
    };
  },
  // 模糊搜索
  computed: {
    filteredClassList() {
      const filteredList = this.classList.filter((item) =>
        item.className.includes(this.searchText)
      );
      return this.searchText ? filteredList : this.classList;
    },
    filteredClassList2() {
      const filterdList2 = this.classList2.filter((item) =>
        item.className.includes(this.searchText)
      );
      return this.searchText ? filterdList2 : this.classList2;
    },
  },
  methods: {
    gotoLogin() {
      // uni.navigateTo({
      // 	url: "/pages/login/login"
      // })
      const value = uni.getStorageSync("login");
      if (value == 0) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else if (this.current === 0) {
        const selectedItem = this.classList[this.current];
        const url =
          "https://zyk.icve.com.cn/chuangxin/18a329e8-3cd6-4983-a1aa-945a28198bc3";
        uni.navigateTo({
          url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
        });
      }
    },
    gotoWeb(index) {
      if (this.current === 1) {
        const urls = [
          "https://www.xuetangx.com/course/HUBU10011000132/16906642?channel=i.area.course_list_all",
          "https://www.xuetangx.com/course/THU05021000376?channel=i.area.course_list_all",
          "https://www.xuetangx.com/course/BNU03031000037/16905009?channel=i.area.course_list_all",
          "https://www.xuetangx.com/course/THU04011000365/16906220?channel=i.area.course_list_all",
        ];
        if (index >= 0 && index < urls.length) {
          const url = urls[index];
          uni.navigateTo({
            url: "/pages/skipone/skipone?url=" + encodeURIComponent(url),
          });
        }
      }
    },

    toggleActive1() {
      this.isActive1 = true;
      this.isActive2 = false;
      this.tab = true;
    },
    toggleActive2() {
      this.isActive1 = false;
      this.isActive2 = true;
      this.tab = false;
    },
    swipeIndex(index) {
      this.current = index.detail.current;
    },
    phoneLogin() {
      this.current = 0;
    },
    accountLogin() {
      this.current = 1;
    },
  },
  onReady() {},
  onLoad() {
    if (this.navheight) {
      this.swiper = this.screenHeight - this.navheight - 140;
    } else {
      this.swiper = this.screenHeight - this.customBar - 150;
    }
  },
};
</script>

<style lang="scss" scoped>
.btntop {
  width: 100%;
}
.resource {
  .search {
    background-color: #ffffff;
    position: relative;
    display: flex;
    width: 750rpx;
    height: 88rpx;
    justify-content: center;
    align-items: center;

    // background-color: rebeccapurple;
    .inpSer {
      width: 690rpx;
      height: 65rpx;
      margin: auto;
      background-color: rgba(240, 242, 245, 1);
      border-radius: 5rpx;
      color: rgba(0, 0, 0, 0.26);
      position: relative;

      .inpTxt {
        // padding: 0px, 12rpx, 0px, 12rpx;
        color: #000;

        height: 100%;
        width: 100%;
      }

      input::placeholder {
        color: #000;
      }

      .ico {
        position: absolute;
        top: 50%;
        left: 20rpx;
        transform: translate(0, -50%);
        display: flex;
        align-items: center;

        image {
          margin-right: 10rpx;
        }
      }
    }
  }

  .top {
    // width: 500rpx;
    display: flex;
    justify-content: space-between;
    margin: auto;
    background-color: #ffffff;
    padding: 10px 150rpx;

    // margin-bottom: 40px;
    // font-size: 18px;
    // padding-top: 0;
    .info1 {
      font-weight: bold !important;
      position: relative;
      color: rgba(0, 0, 0, 0.8);
      font-size: 34rpx;
      line-height: 48rpx;
      width: 136rpx;
      height: 48rpx;
      text-align: center;

      // font-family: PingFang SC;
      // font-family: \9ed1\4f53;
      .yun {
        width: 134rpx;
        height: 32rpx;
        position: absolute;
        left: 0;
        bottom: -10rpx;

        // transform: translate(-50%,0%);
        // box-shadow: 0px 10rpx 30rpx 6rpx #4a97f2;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .info2 {
      color: rgba(0, 0, 0, 0.6);
      font-size: 34rpx;
      font-weight: 400;
      line-height: 48rpx;
      width: 136rpx;
      height: 48rpx;
      text-align: center;
      font-family: 微软雅黑;
    }
  }

  .scroll-view-height {
    // background-color: ;
    // height: 68vh;
    // background-color: red;
    // padding-bottom: 50px;
    .contBox {
      width: 100%;
      padding: 10px 30rpx;
      // height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // background-color: greenyellow;
      margin-bottom: 50px;

      .cont {
        background-color: #ffffff;
        width: 332rpx;
        padding: 20rpx 15rpx;
        border-radius: 10px;
        margin-bottom: 20rpx;

        image {
          width: 300rpx;
          height: 170rpx;
          border-radius: 10rpx;
        }

        .tit {
          width: 257rpx;
          margin: 10rpx 0;
          // height: 80rpx;
          font-weight: bold;
          white-space: normal;
          display: -webkit-box;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /*设置 需要显示的行数*/
        }

        .teacher {
          color: #999999;
        }
      }
    }
  }
}
</style>