saas_miniprogram/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="/static/logo2.png"
          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;
          background-color: #ffffff;
        "
      >
        <u-line color="#D6D6DB" />
        <view
          style="
            display: flex;
            justify-content: space-between;
            height: 78rpx;
            line-height: 78rpx;
            padding: 0 30rpx;
            font-size: 28rpx;
          "
        >
          <view
            style="
              color: #666666;
              white-space: nowrap;
              width: 80%;
              overflow-x: hidden;
            "
            >{{ selObj.eName }}：{{ selObj.pName }}-{{ selObj.bName }}</view
          >
          <view
            style="color: #007aff; width: 20%; font-size: 32rpx"
            @click="openLeft()"
            >重新选择</view
          >
        </view>
        <u-line color="#D6D6DB" />
        <view style="display: flex; align-items: center">
          <view style="margin: 0 auto"
            ><u-tabs
              :list="list"
              :current="current"
              @change="change"
              :scrollable="false"
            ></u-tabs
          ></view>
        </view>
        <u-line color="#D6D6DB" />
        <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 v-show="current == 0">
        <view class="listBox">
          <navigator
            hover-class="none"
            :url="'/pages3/course/detail?id=' + item.goodsId"
            v-for="(item, index) in list1"
            :key="index"
          >
            <view class="itemBox">
              <image
                :src="$method.splitImgHost(item.coverUrl, true)"
                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: 13rpx;
                "
              >
                <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 class="priceTag">¥ {{ item.standPrice.toFixed(2) }}</view>
              </view>
            </view>
          </navigator>
          <view class="emptyTip" v-if="list1.length == 0"
            >暂未上架相关网课~</view
          >
        </view>
      </view>
      <view v-show="current == 1">
        <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, true)"
                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 class="priceTag"
                    >¥ {{ item.standPrice.toFixed(2) }}</view
                  >
                </view>
              </view>
              <view
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-top: 13rpx;
                "
                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 class="priceTag">¥ {{ item.standPrice.toFixed(2) }}</view>
              </view>
            </view>
          </navigator>
          <view class="emptyTip" v-if="list2.length == 0"
            >暂未上架相关题库~</view
          >
        </view>
      </view>

      <view v-show="current == 2">
        <view class="listBox">
          <navigator
            hover-class="none"
            :url="'/pages5/liveDetail/index?id=' + item.goodsId"
            v-for="(item, index) in list3"
            :key="index"
          >
            <view class="itemBox">
              <image
                :src="$method.splitImgHost(item.coverUrl, true)"
                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 class="priceTag"
                    >¥ {{ item.standPrice.toFixed(2) }}</view
                  >
                </view>
              </view>
              <view
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-top: 13rpx;
                "
                v-if="false"
              >
                <view class="noteTag">
                  <image
                    src="/static/icon/wk_icon1.png"
                    class="wk_icon"
                  ></image>
                  <view class="priceTag"
                    >¥ {{ item.standPrice.toFixed(2) }}</view
                  >
                </view>
              </view>
            </view>
          </navigator>
          <view class="emptyTip" v-if="list3.length == 0"
            >暂未上架相关直播~</view
          >
        </view>
      </view>
    </view>
    <view v-show="show" class="popuBox">
      <view class="flex-d">
        <view class="contentZ">
          <view class="lzs">
            <view
              class="tylsz"
              v-for="(item, index) in eList"
              :key="index"
              @click="item.id === 0 ? activeAll(1) : active1(item)"
              :class="item.id === selObj.eId ? 'activeStys' : ''"
              >{{ item.educationName }}</view
            >
          </view>
          <view class="rzs">
            <view
              class="tylszB"
              v-for="(item, index) in bList"
              :key="index"
              @click="item.id === 0 ? activeAll(2) : active2(item)"
              :class="item.id === selObj.bId ? 'activeStys2' : ''"
              >{{ item.projectName }}-{{ item.businessName }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      show: false,
      list: [
        {
          name: "网课",
        },
        {
          name: "题库通",
        },
        {
          name: "直播课",
        },
      ],
      array: [
        "全部",
        "建设工程施工管理",
        "机电全科",
        "机电工程管理与实",
        "机电全科",
        "全科",
      ],
      current: 0,
      menuIndex: 0,
      menuIndex1: 0,
      paramList: [
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 0,
          goodsType: 1,
          subjectId: 0,
        },
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 0,
          goodsType: 2,
          subjectId: 0,
        },
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 0,
          goodsType: 6,
          subjectId: 0,
        },
      ],
      list1: [],
      list2: [],
      list3: [],
      eList: [],
      bList: [],
      sList: [],
      selObj: {
        eName: "",
        pName: "",
        bName: "",
        eId: 0,
        bId: 0,
        pId: 0,
      },
    };
  },
  onPullDownRefresh() {
    let that = this;
    this.initList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onLoad(option) {
    let eduStr = uni.getStorageSync("eduObj");
    console.log(eduStr, 987);
    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: {
    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;
      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) {
      this.selObj.bId = item.id;
      this.show = false;
      this.selObj.pId = item.projectId;
      this.selObj.bName = item.businessName;
      this.selObj.pName = item.projectName;
      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;
      this.$api.businessList(data).then((res) => {
        if (res.data.code == 200) {
          self.bList = res.data.rows;
          console.log(self.bList, 66);
        }
      });
    },
    active1(item) {
      this.selObj.eId = item.id;
      this.selObj.eName = item.educationName;
      this.businessList({ educationId: item.id });
    },
    educationList() {
      var self = this;
      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.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];
      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];
      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];
      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();
      }
    }
		if (this.current == 2) {
		  if (this.list3.length < this.paramList[2].total) {
		    this.paramList[2].pageNum++;
		    this.liveList();
		  }
		}
  },
  computed: { ...mapGetters(["userInfo"]) },
};
</script>
<style >
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
page {
  background-color: #eaeef1;
}
</style>
<style scoped lang="scss">
.emptyTip {
  color: #999999;
  font-size: 32rpx;
  text-align: center;
  margin-top: 20%;
}
.popuBox {
  top: 92px;
  width: 100%;
  bottom: 0;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #ffffff;
}
.activeStys2 {
  background: #007aff !important;
  color: #ffffff;
}
.tylszB {
  text-align: center;
  padding: 20rpx 10rpx;
  background: #ffffff;
  border: 2rpx solid #eeeeee;
  border-radius: 16rpx;
  margin-top: 15rpx;
  font-size: 30rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.activeStys {
  background: linear-gradient(
    90deg,
    rgba(1, 94, 234, 0.2),
    rgba(255, 255, 255, 0.6)
  );
  border-radius: 16rpx;
  font-weight: bold;
  color: #007aff !important;
}
.tylsz {
  color: #666;
  font-size: 30rpx;
  padding: 20rpx 10rpx;
  margin-top: 15rpx;
  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 {
  height: 100%;
  background-color: #ffffff;
  padding: 0 5%;
  font-size: 30rpx;
}
.contentZ {
  display: flex;
  height: 100%;
  padding: 10rpx;

  .lzs {
    width: 200rpx;
    height: 100%;
    overflow-y: scroll;
  }

  .rzs {
    margin-left: 40rpx;
    flex: 1;
    height: 100%;
    overflow-y: scroll;
  }
}
.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 {
  ont-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  align-items: center;
}
.priceTag {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ff2d55;
}
.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;
  box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
  border-radius: 24rpx;
  width: 100%;
  padding: 24rpx;
  margin-bottom: 24rpx;
}
.listBox {
  background-color: #eaeef1;
  padding: 24rpx;
  position: relative;
  top: 235rpx;
}
.menuSel {
  width: 100%;
  height: 70rpx;
  background: #eaeef1;
  white-space: nowrap;
  overflow: hidden;
}
.r_sliper {
  padding: 0 20rpx;
}
.r_t1 {
  height: 48rpx;
  background: #007aff;
  border-radius: 16rpx;
  padding: 3rpx 8rpx;
  margin-top: 11rpx;
  color: #ffffff;
}
.r_t2 {
  height: 48rpx;
  background: #ffffff;
  border: 2rpx solid #eeeeee;
  border-radius: 16rpx;
  padding: 3rpx 8rpx;
  margin-top: 11rpx;
  color: #666666;
  font-size: 30rpx;
}
</style>