zc_saas_h5/pages/course/index.vue

<template>
  <view>
    <u-navbar
      :is-back="false"
      title="选课中心"
      :border-bottom="false"
      title-color="#333333"
      back-icon-color="#ffffff"
    >
      <view class="slot-wrap">
        <image
          :src="$method.splitImgHost(config.h5Logo)"
          style="width: 178rpx; height: 31rpx; margin-left: 30rpx"
        ></image>
      </view>
    </u-navbar>
    <view v-show="!show">
      <view style="position: fixed; width: 100%; z-index: 999">
        <view class="check_ck">
          <view style="display: flex; align-items: center">
            <view style="margin: 0 auto">
              <u-tabs
                :list="courseLists"
                height="70"
                :current="current"
                @change="change"
                :scrollable="false"
                font-size="32"
              ></u-tabs>
            </view>
          </view>
          <view class="check_search u-flex">
            <view class="check_level u-flex" @click="openLeft()">
              <view class="u-line-1"
                >{{ selObj.eName }}：{{ selObj.aliasName }}</view
              >
              <u-icon name="arrow-down-fill" color="#333333" size="20"> </u-icon
            ></view>
            <view class="line">|</view>
            <view class="check_search_input u-flex">
              <!-- <img src="../../static/icon/icon-search.png" /> -->
              <u-icon name="search" color="#333333" size="28"> </u-icon>
              <u-input
                style="padding-left: 10rpx"
                v-model="goodsName"
                type="text"
                placeholder="搜索"
                @blur="blurSearch"
                :auto-blur="true"
                confirm-type="search"
                :clearable="false"
              />
            </view>
          </view>
          <view class="menuSel" v-show="current == 0">
            <scroll-view class="r_sliper" scroll-x="true">
              <view
                v-for="(item, index) in sList"
                :key="index"
                style="margin-right: 20rpx; display: inline-block"
              >
                <view
                  :class="paramList[0].subjectId == item.id ? 'r_t1' : 'r_t2'"
                  @click="cMenu(item.id)"
                >
                  {{ item.subjectName }}
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="menuSel" v-show="current == 1">
            <scroll-view class="r_sliper" scroll-x="true">
              <view
                v-for="(item, index) in sList"
                :key="index"
                style="margin-right: 20rpx; display: inline-block"
              >
                <view
                  :class="paramList[1].subjectId == item.id ? 'r_t1' : 'r_t2'"
                  @click="cMenu1(item.id)"
                >
                  {{ item.subjectName }}
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="menuSel" v-show="current == 2">
            <scroll-view class="r_sliper" scroll-x="true">
              <view
                v-for="(item, index) in sList"
                :key="index"
                style="margin-right: 20rpx; display: inline-block"
              >
                <view
                  :class="paramList[2].subjectId == item.id ? 'r_t1' : 'r_t2'"
                  @click="cMenu2(item.id)"
                >
                  {{ item.subjectName }}
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <view v-show="current == 0" class="contents">
        <view class="listBox">
          <navigator
            hover-class="none"
            :url="
              '/pages3/course/detail?id=' +
              item.goodsId +
              '&goodsType=' +
              item.goodsType
            "
            v-for="(item, index) in list1"
            :key="index"
          >
            <view class="itemBox">
              <image
                :src="$method.splitImgHost(item.coverUrl)"
                style="height: 367rpx; width: 100%; border-radius: 24rpx"
              ></image>
              <view
                style="display: flex; margin-top: 13rpx; align-items: center"
              >
                <view class="yearTag" v-if="item.year">{{ item.year }}</view>
                <view class="titleTag">{{ item.goodsName }}</view>
              </view>
              <view
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-top: 15rpx;
                "
              >
                <view class="noteTag"
                  ><image
                    src="/static/icon/wk_icon1.png"
                    class="wk_icon"
                  ></image>
                  共 <text class="blackFont">{{ item.courseNum }}</text>
                  <text class="margin30">课程</text>
                  <text class="blackFont">{{ item.classHours || "-" }}</text>
                  学时</view
                >
                <view>
                  <view
                    class="priceTag"
                    v-if="
                      !item.specTemplateId || (!item.maxPrice && !item.minPrice)
                    "
                  >
                    {{
                      item.standPrice === 0 ? "免费" : `￥${item.standPrice}`
                    }}
                  </view>
                  <!-- 范围价格 -->
                  <view v-else class="priceTag">
                    <view>{{ item.minPrice }}</view>
                    <template v-if="item.minPrice != item.maxPrice">
                      <text>-</text>
                      <view>{{ item.maxPrice }}</view>
                    </template>
                  </view>
                  <text v-if="item.linePrice" class="sale">¥ </text>
                  <text v-if="item.linePrice" class="price_line">
                    {{ item.linePrice }}</text
                  >
                </view>
              </view>
            </view>
          </navigator>
          <view class="emptyTip" v-if="list1.length == 0"
            >暂未上架相关网课~</view
          >
        </view>
      </view>
      <view v-show="current == 1" class="contents">
        <view class="listBox">
          <navigator
            hover-class="none"
            :url="'/pages2/bank/detail?id=' + item.goodsId"
            v-for="(item, index) in list2"
            :key="index"
          >
            <view class="itemBox">
              <image
                :src="$method.splitImgHost(item.coverUrl)"
                style="height: 367rpx; width: 100%; border-radius: 24rpx"
              ></image>
              <view
                style="display: flex; margin-top: 13rpx; align-items: center"
              >
                <view class="yearTag" v-if="item.year">{{ item.year }}</view>
                <view
                  class="titleTag"
                  style="display: flex; justify-content: space-between; flex: 1"
                >
                  <view style="flex: 1">{{ item.goodsName }}</view>

                  <view>
                    <view
                      class="priceTag"
                      v-if="
                        !item.specTemplateId ||
                        (!item.maxPrice && !item.minPrice)
                      "
                    >
                      {{
                        item.standPrice === 0 ? "免费" : `￥${item.standPrice}`
                      }}
                    </view>
                    <!-- 范围价格 -->
                    <view v-else class="priceTag">
                      <view>{{ item.minPrice }}</view>
                      <template v-if="item.minPrice != item.maxPrice">
                        <text>-</text>
                        <view>{{ item.maxPrice }}</view>
                      </template>
                    </view>
                    <text v-if="item.linePrice" class="sale">¥ </text>
                    <text v-if="item.linePrice" class="price_line">
                      {{ item.linePrice }}</text
                    >
                  </view>
                </view>
              </view>
              <view
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-top: 15rpx;
                "
                v-if="false"
              >
                <view class="noteTag"
                  ><image
                    src="/static/icon/wk_icon1.png"
                    class="wk_icon"
                  ></image>
                  共 <text class="blackFont">6</text>
                  <view class="margin30">张卷</view>
                  <text class="blackFont">120</text>道题
                </view>
                <view>
                  <view
                    class="priceTag"
                    v-if="
                      !item.specTemplateId || (!item.maxPrice && !item.minPrice)
                    "
                  >
                    {{
                      item.standPrice === 0 ? "免费" : `￥${item.standPrice}`
                    }}
                  </view>
                  <!-- 范围价格 -->
                  <view v-else class="priceTag">
                    <view>{{ item.minPrice }}</view>
                    <template v-if="item.minPrice != item.maxPrice">
                      <text>-</text>
                      <view>{{ item.maxPrice }}</view>
                    </template>
                  </view>
                  <text v-if="item.linePrice" class="sale">¥ </text>
                  <text v-if="item.linePrice" class="price_line">
                    {{ item.linePrice }}</text
                  >
                </view>
              </view>
            </view>
          </navigator>
          <view class="emptyTip" v-if="list2.length == 0"
            >暂未上架相关题库~</view
          >
        </view>
      </view>
      <view v-show="current == 2" class="contents">
        <view class="listBox">
          <!-- /pages5/liveDetail/index -->
          <navigator
            hover-class="none"
            :url="
              '/pages3/course/detail?id=' +
              item.goodsId +
              '&goodsType=' +
              item.goodsType
            "
            v-for="(item, index) in list3"
            :key="index"
          >
            <view class="itemBox">
              <image
                :src="$method.splitImgHost(item.coverUrl)"
                style="height: 367rpx; width: 100%; border-radius: 24rpx"
              ></image>
              <view
                style="display: flex; margin-top: 13rpx; align-items: center"
              >
                <view class="yearTag" v-if="item.year">{{ item.year }}</view>
                <view
                  class="titleTag"
                  style="display: flex; justify-content: space-between; flex: 1"
                >
                  <view style="flex: 1">{{ item.goodsName }}</view>

                  <view>
                    <view
                      class="priceTag"
                      v-if="
                        !item.specTemplateId ||
                        (!item.maxPrice && !item.minPrice)
                      "
                    >
                      {{
                        item.standPrice === 0 ? "免费" : `￥${item.standPrice}`
                      }}
                    </view>
                    <!-- 范围价格 -->
                    <view v-else class="priceTag">
                      <view>{{ item.minPrice }}</view>
                      <template v-if="item.minPrice != item.maxPrice">
                        <text>-</text>
                        <view>{{ item.maxPrice }}</view>
                      </template>
                    </view>
                    <text v-if="item.linePrice" class="sale">¥ </text>
                    <text v-if="item.linePrice" class="price_line">
                      {{ item.linePrice }}</text
                    >
                  </view>
                </view>
              </view>
              <!-- <view style="display: flex;justify-content: space-between;margin-top: 15rpx;" v-if="false">
								<view class="noteTag">
									<image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
									<view>
										<text v-if="item.standPrice" class="priceTag">¥ {{item.standPrice.toFixed(2)}}</text>
										<text v-else class="priceTag free">免费</text>
										<view class="priceTag">¥ {{item.standPrice.toFixed(2)}}</view>
										<text class="sale"> ¥ </text>
										<text class="price_line"> {{ item.linePrice }}</text>
									</view>
									
								</view>
							</view> -->
            </view>
          </navigator>
          <view class="emptyTip" v-if="list3.length == 0"
            >暂未上架相关直播~</view
          >
        </view>
      </view>
    </view>
    <u-popup
      v-model="show"
      mode="bottom"
      border-radius="32"
      :mask-close-able="false"
    >
      <view class="popuBox">
        <view class="popuBox-title">选择分类</view>
        <view class="flex-d">
          <view class="contentZ">
            <view class="lzs">
              <view
                class="tylsz u-flex"
                v-for="(item, index) in eList"
                :key="index"
                @click="active1(item)"
                :class="item.id === selObj.eId ? 'activeStys' : 'b-l-eee'"
                ><view style="padding-left: 30rpx">{{
                  item.educationName
                }}</view></view
              >
            </view>
            <view class="rzs">
              <view
                class="tylszB"
                v-for="(item, index) in bList"
                :key="index"
                @click="active2(item)"
                :class="item.id === selObj.bId ? 'activeStys2' : ''"
                >{{ item.aliasName }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      show: false,
      courseLists: [
        {
          name: "网课",
        },
        {
          name: "题库通",
        },
        {
          name: "直播课",
        },
      ],
      // array:['全部','建设工程施工管理','机电全科','机电工程管理与实','机电全科','全科'],
      current: 0,
      menuIndex: 0,
      menuIndex1: 0,
      paramList: [
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 1,
          goodsType: 1,
          subjectId: 0,
          sortType: 1,
        },
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 1,
          goodsType: 2,
          subjectId: 0,
          sortType: 1,
        },
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 1,
          goodsType: 6,
          subjectId: 0,
          sortType: 1,
        },
      ],
      goodsName: "",
      preGoodsName: "",
      list1: [],
      list2: [],
      list3: [],
      eList: [],
      bList: [],
      sList: [],
      selObj: {
        eName: "",
        pName: "",
        bName: "",
        eId: 0,
        bId: 0,
        pId: 0,
      },
    };
  },
  onPullDownRefresh() {
    this.initList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onLoad(option) {
    console.log("item", this.current);
    let eduStr = uni.getStorageSync("eduObj");
    if (eduStr) {
      this.selObj = JSON.parse(eduStr);
      this.subjectList({
        businessId: this.selObj.bId,
        projectId: this.selObj.pId,
        educationId: this.selObj.eId,
      });
      this.mergeBusiness();
    } else {
      this.show = true;
    }
    this.initList();
  },
  methods: {
    blurSearch() {
      this.preGoodsName != this.goodsName && this.initList();
    },
    mergeBusiness() {
      this.paramList[0].educationTypeId = this.selObj.eId;
      this.paramList[0].businessId = this.selObj.bId;
      this.paramList[0].subjectId = 0;
      this.paramList[1].educationTypeId = this.selObj.eId;
      this.paramList[1].businessId = this.selObj.bId;
      this.paramList[1].subjectId = 0;
      this.paramList[2].educationTypeId = this.selObj.eId;
      this.paramList[2].businessId = this.selObj.bId;
      this.paramList[2].subjectId = 0;
    },
    subjectList(data) {
      var self = this;
      // /app/common/course/subject/list
      this.$api.subjectList(data).then((res) => {
        if (res.data.code == 200) {
          self.sList = res.data.rows;
          let allItem = { id: 0, subjectName: "全部" };
          self.sList.unshift(allItem);
        }
      });
    },
    active2(item) {
      // console.log('item', item)
      if (item.topicId) {
        uni.navigateTo({
          url: "/pages4/courseTopic/goodsTopic?topicId=" + item.topicId,
        });
        return;
      }

      this.selObj.bId = item.id;
      this.show = false;
      this.selObj.pId = item.projectId;
      this.selObj.bName = item.businessName;
      this.selObj.pName = item.projectName;
      this.selObj.aliasName = item.aliasName;
      uni.setStorageSync("eduObj", JSON.stringify(this.selObj));
      this.subjectList({
        businessId: item.id,
        projectId: item.projectId,
        educationId: this.selObj.eId,
      });
      this.mergeBusiness();
      //初始化
      this.initList();
    },
    businessList(data) {
      var self = this;
      // /app/common/course/business/list
      this.$api.businessList(data).then((res) => {
        if (res.data.code == 200) {
          self.bList = res.data.rows;
        }
      });
    },
    active1(item) {
      this.selObj.eId = item.id;
      this.selObj.eName = item.educationName;
      this.businessList({ educationId: item.id });
    },
    educationList() {
      var self = this;
      // /app/common/course/educationType/list
      this.$api.educationTypeList().then((res) => {
        if (res.data.code == 200) {
          self.eList = res.data.rows;
          if (self.selObj.eId) {
            self.businessList({ educationId: self.selObj.eId });
          } else {
            this.active1(self.eList[0]);
          }
        }
      });
    },
    openLeft() {
      this.show = true;
    },
    initList() {
      this.paramList[0].pageNum = 1;
      this.paramList[1].pageNum = 1;
      this.list1 = [];
      this.list2 = [];
      this.list3 = [];
      this.preGoodsName = this.goodsName;
      this.courseList();
      this.bankList();
      this.liveList();
      this.educationList();
    },
    cMenu(index) {
      this.paramList[0].pageNum = 1;
      this.paramList[0].subjectId = index;
      this.list1 = [];
      //	this.menuIndex
      this.courseList();
    },
    cMenu1(index) {
      this.paramList[1].pageNum = 1;
      this.paramList[1].subjectId = index;
      this.list2 = [];
      //	this.menuIndex1 = index;
      this.bankList();
    },

    cMenu2(index) {
      this.paramList[2].pageNum = 1;
      this.paramList[2].subjectId = index;
      this.list3 = [];
      //	this.menuIndex1 = index;
      this.liveList();
    },
    change(index) {
      this.current = index;
    },
    //课程
    courseList() {
      var self = this;
      var param = this.paramList[0];
      param.goodsName = this.goodsName;
      this.$api.goodsList(param).then((res) => {
        self.paramList[0].total = res.data.total;
        self.list1.push.apply(self.list1, res.data.rows);
        // if (self.list1.length === res.data.total) {
        // 	self.paramList[0].showStatus = true;
        // }
      });
    },
    //题库
    bankList() {
      var self = this;
      var param = this.paramList[1];
      param.goodsName = this.goodsName;
      this.$api.goodsList(param).then((res) => {
        self.paramList[1].total = res.data.total;
        self.list2.push.apply(self.list2, res.data.rows);
        // if (self.list2.length === res.data.total) {
        // 	self.paramList[1].showStatus = true;
        // }
      });
    },
    //直播
    liveList() {
      var self = this;
      var param = this.paramList[2];
      param.goodsName = this.goodsName;
      this.$api.goodsList(param).then((res) => {
        self.paramList[2].total = res.data.total;
        self.list3.push.apply(self.list3, res.data.rows);
        // if (self.list3.length === res.data.total) {
        // 	self.paramList[2].showStatus = true;
        // }
      });
    },
  },
  onReachBottom() {
    if (this.current == 0) {
      if (this.list1.length < this.paramList[0].total) {
        this.paramList[0].pageNum++;
        this.courseList();
      }
    }
    if (this.current == 1) {
      if (this.list2.length < this.paramList[1].total) {
        this.paramList[1].pageNum++;
        this.bankList();
      }
    }
  },
  computed: { ...mapGetters(["userInfo", "config"]) },
};
</script>
<style >
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
page {
  background-color: #eaeef1;
}
</style>
<style scoped lang="scss">
.check_ck {
  background: #ffffff;
  padding: 0 38rpx 24rpx;
  .again_ck {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .check_search {
    border: 2rpx solid #333333;
    border-radius: 100rpx;
    margin-top: 32rpx;
    padding: 0 28rpx;
    height: 72rpx;
    .check_level {
      font-size: 28rpx;
      .u-line-1 {
        width: 160rpx;
        margin-right: 8rpx;
      }
    }
    .line {
      margin: -10rpx 18rpx 0 20rpx;
      color: #d9d9d9;
    }
    .check_search_input {
      flex: 1;
      img {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
}
.contents {
  position: relative;
  left: 0;
  top: 320rpx;
}
.emptyTip {
  color: #999999;
  font-size: 32rpx;
  text-align: center;
  margin-top: 20%;
}
.popuBox {
  border-radius: 30% !important;
  height: 70vh;
  width: 100%;
  background-color: #ffffff;
  .popuBox-title {
    border-radius: 30%;
    font-weight: bold;
    color: #222222;
    font-size: 32rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }
}
.activeStys2 {
  color: #007aff;
}
.tylszB {
  margin-bottom: 56rpx;
  background: #ffffff;
  font-size: 32rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.activeStys {
  height: 32rpx;
  font-weight: bold;
  color: #222222 !important;
  border-left: 6rpx solid #0080ff;
}
.b-l-eee {
  border-left: 6rpx solid #ffffff;
}
.tylsz {
  color: #666;
  font-size: 30rpx;
  font-size: 32rpx;
  color: #999999;
  margin-bottom: 40rpx;
  vertical-align: bottom;
  white-space: nowrap;
}
.popup_t1 {
  padding-left: 35rpx;
  border-bottom: 1rpx solid #eee;
  height: 57rpx;
  margin-top: 86rpx;
  font-weight: bold;
  color: #007aff;
  font-size: 27rpx;
}
.flex-d {
  background-color: #ffffff;
  font-size: 30rpx;
}
.contentZ {
  display: flex;
  height: calc(70vh - 100rpx);
  .lzs {
    width: 208rpx;
    height: 100%;
    overflow-x: auto;
    border-right: 2rpx solid #e8e8e8;
  }

  .rzs {
    margin-left: 32rpx;
    flex: 1;
    height: 100%;
    overflow-x: auto;
  }
}
.contentZ::-webkit-scrollbar {
  display: none;
}
.fots {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #eee;
}
.leftBtns {
  font-size: 30rpx;
  color: #007aff;
  font-weight: 500;
}
.right_Btns {
  font-size: 30rpx;
  color: #fff;
  background-color: #007aff;
  border-radius: 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  padding: 0rpx 23rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
}
.blackFont {
  color: #333333;
  margin: 0 10rpx;
}
.margin30 {
  margin: 0 20rpx 0 0;
}
.wk_icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 12rpx;
}
.noteTag {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  align-items: center;
}
.priceTag {
  display: flex;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fc3f3f;
  view::before {
    content: "￥";
    font-size: 24rpx;
    font-weight: bold;
  }
}
.sale {
  color: #999999;
  font-size: 28rpx;
  margin-left: 8rpx;
}
.price_line {
  color: #999999;
  font-size: 28rpx;
  text-decoration: line-through;
  font-weight: 400;
}
.titleTag {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-left: 8rpx;
}
.yearTag {
  width: 80rpx;
  height: 32rpx;
  background: #ebf5ff;
  border: 2rpx solid #007aff;
  border-radius: 16rpx;
  font-size: 24rpx;
  color: #007aff;
  text-align: center;
  line-height: 32rpx;
}
.itemBox {
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
  padding: 23rpx 22rpx 32rpx 22rpx;
  margin-bottom: 24rpx;
  box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1, 99, 235, 0.1);
}
.listBox {
  background-color: #eaeef1;
  padding: 24rpx 24rpx 120rpx 24rpx;
  position: relative;
  // top: 235rpx;
}
.menuSel {
  margin-top: 32rpx;
  // width: 100%;
  // height: 70rpx;
  // padding: 30rpx 0rpx;
  // background: #eaeef1;
  white-space: nowrap;
  overflow: hidden;
}
.r_sliper {
  padding: 0 20rpx;
}
.r_t1 {
  background: #f2f7ff;
  border-radius: 8rpx;
  padding: 9rpx 21rpx;
  font-size: 26rpx;
  color: #3f8dfd;
}
.r_t2 {
  background: #f7f8fc;
  border-radius: 8rpx;
  padding: 9rpx 21rpx;
  color: #666666;
  font-size: 26rpx;
}
</style>