saas_miniprogram/pages/index/index.vue

<template>
  <view class="index">
    <u-navbar
      class="navbar"
      :is-back="false"
      :border-bottom="false"
      title-color="#333333"
      back-icon-color="#ffffff"
    >
      <view class="slot-wrap">
        <image @click="openLeft()" src="/static/logo2.png"></image>
      </view>
    </u-navbar>
    <view class="swiper">
      <swiper
        :indicator-dots="false"
        indicator-color="#fff"
        indicator-active-color="#007AFF"
        :style="{ height: swiperHeight + 'rpx' }"
        @change="swiperChange"
        :interval="interval"
        :duration="duration"
        :autoplay="autoplay"
        :circular="true"
      >
        <swiper-item
          v-for="(swiper, index) in list"
          :key="index"
          @click="swiperClick(swiper)"
        >
          <image
            @load="imageLoad"
            :src="$method.splitImgHost(swiper.adverUrl, true)"
            mode="widthFix"
          ></image>
        </swiper-item>
      </swiper>
      <view class="dots">
        <view
          class="dot"
          :class="{ active: index == current }"
          v-for="(swiper, index) in list"
          :key="index"
        ></view>
      </view>
    </view>
    <view class="content">
      <view class="notice" v-if="infoNums">
        <view class="notice__content">
          <image src="/static/icon/msg_icon1.png" class="icon"></image>
          <view class="text"> 您有{{ infoNums }}条新的通知 </view>
          <view class="btn" @click="jumpPage">立即查看</view>
        </view>
      </view>
      <view class="my-list">
        <view class="my-list__item my-list__item--course" @click="go('course')">
          <image src="../../static/mycourse.png"></image>
          <text>我的网课</text>
        </view>
        <view class="my-list__item my-list__item--bank" @click="go('bank')">
          <image src="../../static/mybank.png"></image>
          <text>我的题库</text>
        </view>
      </view>
      <u-tabs
        class="tabs"
        :current="tabCurrent"
        @change="tab"
        :list="menu"
        :activeStyle="{ fontSize: '36rpx' }"
        :inactiveStyle="{ color: '#EAEEF1', fontSize: '30rpx' }"
        sticky
      ></u-tabs>
      <view class="menuSel" v-if="tabCurrent == 0">
        <picker
          class="picker"
          @change="cMenu"
          range-key="subjectName"
          :range="sList"
        >
          <view class="uni-input">{{ paramList[0].name }}</view>
        </picker>
        <u-icon name="arrow-down"></u-icon>
      </view>
      <view class="menuSel" v-if="tabCurrent == 1">
        <picker
          class="picker"
          @change="cMenu1"
          range-key="subjectName"
          :range="sList"
        >
          <view class="uni-input">{{ paramList[1].name }}</view>
        </picker>
        <u-icon name="arrow-down"></u-icon>
      </view>
      <view class="menuSel" v-if="tabCurrent == 2">
        <picker
          class="picker"
          @change="cMenu2"
          range-key="subjectName"
          :range="sList"
        >
          <view class="uni-input">{{ paramList[2].name }}</view>
        </picker>
        <u-icon name="arrow-down"></u-icon>
      </view>
      <view class="course-list" v-show="tabCurrent == 0">
        <navigator
          hover-class="none"
          class="item"
          v-for="(item, index) in list1"
          :key="index"
          :url="'/pages3/course/detail?id=' + item.goodsId"
        >
          <view class="img">
            <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
            <view class="time" v-if="item.year">{{
              item.year ? item.year : ""
            }}</view>
          </view>
          <view class="text">
            <view class="title">{{ item.goodsName }}</view>
            <view class="desc">
              <view class="left">
                {{ item.classHours || "-" }}
                <text>学时</text>
              </view>
              <view class="right">¥ {{ toFixed(item.standPrice) }}</view>
            </view>
          </view>
        </navigator>
      </view>
      <view class="course-list" v-show="tabCurrent == 1">
        <navigator
          hover-class="none"
          class="item"
          v-for="(item, index) in list2"
          :key="index"
          :url="'/pages2/bank/detail?id=' + item.goodsId"
        >
          <view class="img">
            <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
            <view class="time" v-if="item.year">{{
              item.year ? item.year : ""
            }}</view>
          </view>
          <view class="text">
            <view class="title">{{ item.goodsName }}</view>
            <view class="desc">
              <view class="left" v-if="false">
                {{ item.classHours || "-" }}
                <text>学时</text>
              </view>
              <view class="right">¥ {{ toFixed(item.standPrice) }}</view>
            </view>
          </view>
        </navigator>
      </view>
      <view class="course-list" v-show="tabCurrent == 2">
        <navigator
          hover-class="none"
          class="item"
          v-for="(item, index) in list3"
          :key="index"
          :url="'/pages2/bank/detail?id=' + item.goodsId"
        >
          <view class="img">
            <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
            <view class="time" v-if="item.year">{{
              item.year ? item.year : ""
            }}</view>
          </view>
          <view class="text">
            <view class="title">{{ item.goodsName }}</view>
            <view class="desc">
              <view class="left" v-if="false">
                {{ item.classHours || "-" }}
                <text>学时</text>
              </view>
              <view class="right">¥ {{ toFixed(item.standPrice) }}</view>
            </view>
          </view>
        </navigator>
      </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, mapActions } from "vuex";
// import { websocket } from '@/common/socket.js';
import { socket_url, version } from "@/common/request.js";
export default {
  components: {},
  data() {
    return {
      infoNums: 0,
      show: false,
      list: [],
      tabCurrent: 0,
      current: 0,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swiperHeight: 0,
      menu: [
        {
          name: "网课",
        },
        {
          name: "题库通",
        },
        {
          name: "直播课",
        },
      ],
      goodsIndex: 0,
      goodsItem: 0,
      workList: [],
      workTextList: [],
      planGoodsList: [],
      menuIndex: 0,
      menuIndex1: 0,
      paramList: [
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 0,
          goodsType: 1,
          subjectId: 0,
          name: "全部",
        },
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 0,
          goodsType: 2,
          subjectId: 0,
          name: "全部",
        },
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          showStatus: 0,
          goodsType: 6,
          subjectId: 0,
          name: "全部",
        },
      ],
      list1: [],
      list2: [],
      list3: [],
      eList: [],
      bList: [],
      sList: [],
      selObj: {
        eName: "",
        pName: "",
        bName: "",
        eId: 0,
        bId: 0,
        pId: 0,
      },
      isLogin: false,
      isOld: false,
    };
  },
  onPullDownRefresh() {
    let that = this;
    this.initList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    if (this.tabCurrent == 0) {
      if (this.list1.length < this.paramList[0].total) {
        this.paramList[0].pageNum++;
        this.courseList();
      }
    }
    if (this.tabCurrent == 1) {
      if (this.list2.length < this.paramList[1].total) {
        this.paramList[1].pageNum++;
        this.bankList();
      }
    }
    if (this.tabCurrent == 2) {
      if (this.list3.length < this.paramList[2].total) {
        this.paramList[2].pageNum++;
        this.liveList();
      }
    }
  },
  async 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();
    this.getAdvertising();
    if (this.$method.isLogin()) {
      try {
        await this.getUserInfo();
        // websocket.sokcet(socket_url+this.userInfo.userId+'-'+this.$method.getRandomString(6))
        // websocket.sokcet(socket_url+this.userInfo.userAccount)
      } catch (err) {}
    } else {
      if (uni.getStorageSync("needToLogin")) {
        uni.removeStorageSync("needToLogin");
        uni.navigateTo({
          url: "/pages4/login/login",
        });
      }
    }
  },
  onShow() {
    uni.removeStorageSync("goPath");
    if (uni.getStorageSync("updateHome")) {
      this.init();
      uni.removeStorageSync("updateHome"); //消费首页刷新事件
    }

    this.appCommonConfig({
      version,
    });

    if (this.$method.isLogin()) {
      this.$store.state.allowLoading = false;
      this.$api.getinfoAttached().then((res) => {
        if (res.data.code === 200) {
          this.infoNums = res.data.data.informSum;
          const nums =
            res.data.data.informSum +
            res.data.data.orderSum +
            res.data.data.periodSum +
            res.data.data.planSum +
            res.data.data.subscribeSum;
          this.$store.commit("tabNum", nums);
        }
      });
      this.$store.state.allowLoading = true;
    } else {
      this.$store.commit("tabNum", 0);
    }
  },
  onShareAppMessage(res) {
    var self = this;
    return {
      title: "中正",
      path:
        `/pages/index/index?inviteCode=` + userInfo == null
          ? ""
          : userInfo.userAccount,
    };
  },
  methods: {
    ...mapActions(["getUserInfo", "appCommonConfig"]),
    mergeBusiness() {
      this.paramList[0].educationTypeId = this.selObj.eId;
      this.paramList[0].businessId = this.selObj.bId;
      this.paramList[0].subjectId = 0;
      this.paramList[0].name = "全部";
      this.paramList[1].educationTypeId = this.selObj.eId;
      this.paramList[1].businessId = this.selObj.bId;
      this.paramList[1].name = "全部";
      this.paramList[2].educationTypeId = this.selObj.eId;
      this.paramList[2].businessId = this.selObj.bId;
      this.paramList[2].name = "全部";
    },
    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 });
    },
    openLeft() {
      this.show = true;
    },
    toFixed(number) {
      if (number > 0) {
        return number.toFixed(2);
      } else {
        return "0.00";
      }
    },
    /**
     * @param {Object} swiper
     * 点击轮播图
     */
    swiperClick(swiper) {
      if (swiper.jumpType == 1) {
        //无跳转
        return;
      } else if (swiper.jumpType == 2) {
        //url
        let url = encodeURIComponent(swiper.jumpUrl);
        uni.navigateTo({
          url: "/pages/webview/index?url=" + swiper.jumpUrl,
        });
      } else if (swiper.jumpType == 3) {
        //内部接口
        uni.navigateTo({
          url: swiper.jumpUrl,
        });
      } else if (swiper.jumpType == 4) {
        //外部接口
        uni.navigateToMiniProgram({
          appId: swiper.remarks,
          path: swiper.jumpUrl,
          extraData: {},
          success(res) {
            // 打开成功
          },
          fail(err) {
            console.log(err);
            //  uni.showToast({
            //  	title:'无效的appId，'+err.errMsg,
            // icon:'none'
            //  })
          },
        });
      }
    },
    /**
     * banner图片加载完成
     */
    imageLoad(e) {
      let winW = 750;
      let imgW = e.detail.width;
      let imgH = e.detail.height;
      this.swiperHeight = (750 * imgH) / imgW;
    },
    async getAdvertising() {
      await this.advertisingHomeLocation();
      await this.advertisingList();
    },

    advertisingHomeLocation() {
      return new Promise((resolve) => {
        this.$api.advertisingHomeLocation().then((res) => {
          this.interval = res.data.data.intervalTime * 1000;
          resolve();
        });
      });
    },
    advertisingList() {
      return new Promise((resolve) => {
        this.$api.advertisingList({ locationId: 1 }).then((res) => {
          this.list = res.data.rows;
          resolve();
        });
      });
    },
    jumpPage() {
      this.$navTo.togo("/pages4/msg/index");
    },
    go(type) {
      if (!this.$method.isLogin()) {
        if (type == "course") {
          uni.setStorageSync("goPath", "course");
        } else if (type == "bank") {
          uni.setStorageSync("goPath", "bank");
        }
        this.$navTo.togo("/pages4/login/login");
      } else {
        if (type == "course") {
          uni.navigateTo({
            url: "/pages2/wd/class",
          });
        } else if (type == "bank") {
          this.$api
            .lockLockStatus({
              action: "bank",
            })
            .then((res) => {
              if (res.data.code == 200) {
                //有其他端在操作，不能学习
                uni.showToast({
                  icon: "none",
                  title: res.data.msg,
                  duration: 3000,
                });
              } else if (res.data.code == 500) {
                //可以学习
                uni.navigateTo({
                  url: "/pages2/wd/question_bank",
                });
              }
            });
        }
      }
    },
    //课程
    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;
        }
      });
    },
    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]);
          }
        }
      });
    },
    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(e) {
      this.paramList[0].pageNum = 1;
      this.paramList[0].subjectId = this.sList[e.detail.value].id;
      this.paramList[0].name = this.sList[e.detail.value].subjectName;
      this.list1 = [];
      //	this.menuIndex
      this.courseList();
    },
    cMenu1(e) {
      this.paramList[1].pageNum = 1;
      this.paramList[1].subjectId = this.sList[e.detail.value].id;
      this.paramList[1].name = this.sList[e.detail.value].subjectName;
      this.list2 = [];
      //	this.menuIndex1 = index;
      this.bankList();
    },

    cMenu2(e) {
      this.paramList[2].pageNum = 1;
      this.paramList[2].subjectId = this.sList[e.detail.value].id;
      this.paramList[2].name = this.sList[e.detail.value].subjectName;
      this.list3 = [];
      //	this.menuIndex1 = index;
      this.liveList();
    },
    swiperChange(e) {
      this.current = e.detail.current;
    },
    tab(e) {
      this.tabCurrent = e;
    },
  },
  computed: { ...mapGetters(["userInfo"]) },
};
</script>
<style>
page {
  background: #eaeef1;
  font-size: 28rpx;
}
</style>
<style lang="scss" scoped>
.index {
  .navbar {
    /deep/ .u-navbar-inner {
      margin-right: 0 !important;
    }

    .slot-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 178rpx;
        height: 31rpx;
      }
    }
  }

  .swiper {
    width: 100%;
    position: relative;

    .dots {
      position: absolute;
      left: 0;
      bottom: 8rpx;
      width: 100%;
      display: flex;
      justify-content: center;

      .dot {
        width: 8rpx;
        height: 8rpx;
        background: #ffffff;
        border-radius: 50%;
        margin: 0 4rpx;
        transition: all 0.3s;

        &.active {
          width: 24rpx;
          height: 8rpx;
          background: #007aff;
          border-radius: 4rpx;
        }
      }
    }
    image {
      width: 100%;
    }
  }

  .content {
    overflow: hidden;
    padding: 0 16rpx 16rpx;
    background: rgba(234, 238, 241, 1);

    .notice {
      background: #fff;
      border-radius: 16rpx;
      margin-top: 32rpx;
      overflow: hidden;
      &__content {
        padding: 0 8rpx;
        height: 56rpx;
        background: linear-gradient(
          -90deg,
          rgba(255, 209, 0, 0.3),
          rgba(255, 255, 255, 0.3)
        );
        display: flex;
        align-items: center;
      }

      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
      }

      .text {
        flex: 1;
        font-size: 24rpx;
        color: #333333;
        position: relative;
      }

      .btn {
        font-size: 24rpx;
        color: #007aff;
      }
    }

    .tabs {
      /deep/ .u-tabs {
        background: none !important;
      }
    }

    .course-list {
      .item {
        background: #fff;
        box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
        padding: 24rpx 16rpx;
        border-radius: 16rpx;
        border-bottom: 1rpx solid #eeeeee;
        display: flex;
        margin-bottom: 20rpx;

        .img {
          position: relative;
          margin-right: 10rpx;
          border-radius: 16rpx;
          overflow: hidden;
          width: 320rpx;
          height: 180rpx;

          image {
            width: 100%;
            height: 100%;
          }

          .time {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 80rpx;
            height: 32rpx;
            background: rgba(1, 25, 45, 0.4);
            color: #fff;
            text-align: center;
            line-height: 32rpx;
            font-size: 24rpx;
            border-radius: 10rpx 0px 10rpx 0px;
          }
        }

        .text {
          flex: 1;
          padding-right: 10rpx;
          position: relative;
          .title {
            font-size: 30rpx;
            color: #333333;
          }

          .desc {
            margin-top: 40rpx;
            display: flex;
            position: absolute;
            bottom: 0;
            width: 100%;
            .left {
              flex: 1;
              color: #333;
              font-size: 26rpx;

              text {
                font-size: 24rpx;
                color: #999;
              }
            }

            .right {
              font-size: 24rpx;
              font-weight: bold;
              color: #ff2d55;
            }
          }
        }
      }
    }
  }

  .my-list {
    margin: 32rpx 0;
    display: flex;
    justify-content: space-between;
    &__item {
      width: 351rpx;
      height: 96rpx;
      position: relative;
      padding: 25rpx 0 0 25rpx;
      font-size: 32rpx;

      &--bank {
        text {
          position: relative;
          z-index: 2;
          color: #00998a;
        }
      }

      &--course {
        text {
          position: relative;
          z-index: 2;
          color: #0062d9;
        }
      }

      image {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: 1;
      }
    }
  }
}
.popuBox {
  z-index: 99;
  top: 68px;
  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;
}
.menuSel {
  padding: 0 24rpx;
  margin: 24rpx 0;
  width: 100%;
  height: 70rpx;
  background: #fff;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;

  .picker {
    flex: 1;
  }
}
.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>