zc_saas_h5/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 :src="logo"></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)"
            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> -->
      <!-- 日历-->
      <!-- <view>
				<view class="calendar_card">
					<view class="card_box">
						<u-row gutter="16">
							<u-col span="10" >
								<view  style="height:60rpx;">
									<text class="t1" v-if="nearByDay !== '' && nearByDay !== null">距离最近一次考试还剩{{nearByDay}}天</text> 
								</view>
							</u-col>
							<u-col offset="1" span="1">
								<view @click="jumpPlan"><image src="/static/more.png" class="img_more"></image></view>
							</u-col>
						</u-row>
					</view>
					<u-line color="#EEEEEE" />
					<view style="width: 100%;display: flex;justify-content:center;margin-top: 20rpx;">
						<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
					</view>
					<view style="width: 100%; display: flex; margin-top: 40rpx; flex-wrap: wrap;">
						<view v-for="(item, index) in date_num" :key="index" class="date_num">
							<view class="items">
								{{ item.date }}
							</view>
							<view v-if="item.color == 0" class="date_num_color0" v-show="item.date > 0">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 1" class="date_num_color1">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 2" class="date_num_color2">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
							<view v-if="item.color == 3" class="date_num_color3">
								{{ item.date }}
								<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
								<view v-if="item.dot" class="date_dot"></view>
							</view>
						</view>
					</view>
					<view style="width: 100%;margin-top: 20rpx;" v-if="workList.length > 0">
						<u-row gutter="16">
							<u-col span="2" text-align="center">
								<view><image src="/static/left.png" class="arr-icon" @click="preveItem"></image></view>
							</u-col>
							<u-col span="8" text-align="center">
								<view class="course_title" @click="jumpGoodsDetail(goodsItem)">{{ goodsItem.goodsName }}</view>
							</u-col>
							<u-col span="2" text-align="center">
								<view><image src="/static/right.png" class="arr-icon" @click="nextItem"></image></view>
							</u-col>
						</u-row>
					</view>
				</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="tabs">
        <view
          v-for="(item, index) in menu"
          :key="index"
          class="tab_item"
          :class="{ nactive: tabNum == index }"
          @click="tab(index)"
          >{{ item.name }}</view
        >
      </view>
      <view class="filters">
        <scroll-view class="scroll_view_H" scroll-x="true">
          <template v-if="tabNum == 0 && courseName.length > 1">
            <view
              v-for="(item, index) in courseName"
              :key="index"
              class="filter_item"
              @click="changeCou(item.recommendId, index)"
            >
              <view class="name" :class="{ nactive: couIndex == index }">{{
                item.name
              }}</view>
            </view>
          </template>
          <template v-if="tabNum == 1 && bankName.length > 1">
            <view
              v-for="(item, index) in bankName"
              :key="index"
              class="filter_item"
              @click="changebank(item.recommendId, index)"
            >
              <view class="name" :class="{ nactive: bankIndex == index }">{{
                item.name
              }}</view>
            </view>
          </template>
        </scroll-view>
      </view>
      <!-- v-if="tabNum == 0" -->
      <!-- <view class="filters">
				<scroll-view class="scroll_view_H" scroll-x="true" >
					
					<template >
						<view v-for="(item, index) in subjectList" :key="index" class="filter_item"  @click="changeSub(item.id, index)">
							<view class="name" :class="{nactive: subIndex == index}">{{ item.subjectName }}</view>
						</view>
					</template>
				</scroll-view>
			</view> -->
      <view class="course-list" v-show="tabCurrent == 0">
        <template v-if="list1.length">
          <!-- hover-class="none" -->
          <view
            class="list_item"
            v-for="(item, index) in list1"
            :key="index"
            @click="tobuy(item)"
          >
            <view class="course_content">
              <view class="c_title">{{ item.goodsName }}</view>
              <view class="c_downs">
                <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="desc">
                    <view class="left">
                      <view
                        class="mon_t"
                        :class="item.standPrice === 0 ? 'free' : ''"
                        v-if="
                          !item.specTemplateId ||
                          (!item.maxPrice && !item.minPrice)
                        "
                      >
                        {{
                          item.standPrice === 0
                            ? "免费"
                            : `￥${item.standPrice}`
                        }}
                      </view>
                      <!-- 范围价格 -->
                      <view v-else class="mon_t">
                        <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"
                        >&nbsp;{{ item.linePrice }}</text
                      >
                    </view>
                    <view class="right">
                      <view v-if="!hideBuyState" class="regiser_row"
                        >立即购买</view
                      >
                    </view>
                  </view>
                  <view v-if="item.buyUserNum" class="joins">
                    <!-- <image class="people" src="/static/index/people.png"></image> -->
                    <!-- 为0时，不显示 -->
                    <view class="people">{{ item.buyUserNum }}人参与</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <u-empty text="暂无推荐课程" mode="list" margin-top="100"></u-empty>
        </template>
      </view>
      <view class="course-list" v-show="tabCurrent == 1">
        <template v-if="list2.length">
          <navigator
            hover-class="none"
            class="list_item"
            v-for="(item, index) in list2"
            :key="index"
            :url="'/pages2/bank/detail?id=' + item.goodsId"
          >
            <view class="course_content">
              <view class="c_title">{{ item.goodsName }}</view>
              <view class="c_downs">
                <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="desc">
                    <view class="left">
                      <view
                        class="mon_t"
                        :class="item.standPrice === 0 ? 'free' : ''"
                        v-if="
                          !item.specTemplateId ||
                          (!item.maxPrice && !item.minPrice)
                        "
                      >
                        {{
                          item.standPrice === 0
                            ? "免费"
                            : `￥${item.standPrice}`
                        }}
                      </view>
                      <!-- 范围价格 -->
                      <view v-else class="mon_t">
                        <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"
                        >&nbsp;{{ item.linePrice }}</text
                      >
                    </view>
                    <view class="right">
                      <view v-if="!hideBuyState" class="regiser_row"
                        >立即购买</view
                      >
                    </view>
                  </view>
                  <view v-if="item.buyUserNum" class="joins">
                    <!-- 为0时，不显示 -->
                    <view class="people">{{ item.buyUserNum }}人参与</view>
                  </view>
                </view>
              </view>
            </view>
          </navigator>
        </template>
        <template v-else>
          <u-empty text="暂无推荐题库" mode="list" margin-top="100"></u-empty>
        </template>
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view :style="{ opacity: opacitys }" class="officials">
      <view class="weixin_official_account">
        <image class="off_logo" src="/static/index/official.png"></image>
        <view>
          <view class="one">关注 “祥粤学校” 公众号</view>
          <view class="two">学习提醒、 报考通知不会错过</view>
        </view>
        <button type="default" class="btn btn-official">
          去关注
          <official-account
            class="official-account"
            id="official_account"
          ></official-account>
        </button>
        <view class="close_icon">
          <u-icon name="close" class="icon-close" @click="closeOff"></u-icon>
        </view>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import config from "@/common/config";
export default {
  data() {
    return {
      logo: config.TOP_LOGO,
      tabNum: 0,
      infoNums: 0,
      list: [],
      tabCurrent: 0,
      date: ["日", "一", "二", "三", "四", "五", "六"],
      date_num: [],
      current: 0,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swiperHeight: 0,
      nearByDay: "", //距离最近一天考试
      menu: [
        {
          name: "推荐课程",
        },
        {
          name: "推荐题库",
        },
      ],
      goodsIndex: 0,
      goodsItem: 0,
      workList: [],
      workTextList: [],
      planGoodsList: [],
      paramList: [
        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          // showStatus: 0,
          getUserNum: 1, //是否返回商品购买用户数量 1带 0不带	,会返回个buyUserNum
          goodsType: 1,
        },

        {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          // showStatus: 0,
          getUserNum: 1,
          goodsType: 2,
        },
      ],
      total1: 0,
      total2: 0,
      list1: [],
      list2: [],
      isLogin: false,
      isOld: false,
      current: 0,
      showOfficial: false,
      // opacity: 1,
      isFollow: null, //是否关注过,不是1就是没关注
      curClose: true, // 当天时是否关闭过
      courseName: [],
      bankName: [],
      couIndex: 0,
      bankIndex: 0,
      courseId: "",
      bankId: "",
      subjectList: [],
      subIndex: 0,
      courSubjectId: "",
      optObj: {},
    };
  },
  async onLoad(option) {
    this.isLogin = this.$method.isLogin();
    this.dictObj;
    this.getAdvertising();
    if (this.$method.isLogin()) {
      try {
        await this.getUserInfo();
      } catch (err) {}
    } else {
      if (uni.getStorageSync("needToLogin")) {
        uni.removeStorageSync("needToLogin");
        uni.navigateTo({
          url: "/pages4/login/login",
        });
      }
    }

    this.init();

    wx.getSystemInfo({
      success: function (res) {
        let version = res.SDKVersion;
        console.log("该版本号为: ", version);
      },
    });
  },
  async onShow() {
    // #ifdef H5
    if (location.search) {
      console.log("url值：", location.search);
      let arrs = location.search.slice(1).split("&");
      for (let i = 0; i < arrs.length; i++) {
        this.optObj[arrs[i].split("=")[0]] = arrs[i].split("=")[1];
      }
      console.log("获取的optObj:", this.optObj);
      uni.setStorageSync("h5_code", this.optObj.code);
      this.OfficialLogin();
    } else {
      // 没有code,就重定向到地址https://www.xyyxt.net?ask_type=h.xyyxt.net 去获取code，授权后就会把code带上然后访问域名
      // h.gdzzkj.net
      if (!uni.getStorageSync("h5_code")) {
        // location.replace("https://www.xyyxt.net/?ask_type=" + config.domain);
        return;
      }
    }
    // #endif
    this.getInfo(); // 判断有没有关注公众号
    this.isClickOff(); //关注公众号，每天最多显示1次；当天学员关闭弹窗后，无需再显示
    uni.removeStorageSync("goPath");

    this.list1 = [];
    this.list2 = [];
    this.paramList[0].pageNum = 1;
    this.paramList[1].pageNum = 1;
    this.courseLists();
    if (uni.getStorageSync("updateHome")) {
      this.init();
      uni.removeStorageSync("updateHome"); //消费首页刷新事件
    }

    this.appCommonConfig({
      version: config.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) {
    return {
      title: "中正",
      path:
        `/pages/index/index?inviteCode=` + userInfo == null
          ? ""
          : userInfo.userAccount,
    };
  },
  async onPullDownRefresh() {
    // console.log('下拉this.courseId:', this.courseId)
    if (this.tabNum == 0) {
      this.list1 = [];
      this.paramList[0].pageNum = 1;
      this.list1 = await this.getGoodsList(
        this.courseId,
        0,
        this.courSubjectId
      );
    } else {
      this.list2 = [];
      this.paramList[1].pageNum = 1;
      this.list2 = await this.getGoodsList(this.bankId, 1, this.courSubjectId);
    }
  },
  async onReachBottom() {
    // console.log('加载this.courseId:', this.courseId, this.list1.length, this.paramList[0].total)
    if (this.tabNum == 0) {
      if (this.list1.length < this.paramList[0].total) {
        this.paramList[0].pageNum++;
        let list1 = await this.getGoodsList(
          this.courseId,
          0,
          this.courSubjectId
        );
        this.list1.push(...list1);
      }
    } else {
      if (this.list2.length < this.paramList[1].total) {
        this.paramList[1].pageNum++;
        let list2 = await this.getGoodsList(this.bankId, 1, this.courSubjectId);
        this.list1.push(...list2);
      }
    }
  },
  computed: {
    ...mapGetters(["dictObj", "userInfo", "hideBuyState"]),
    opacitys() {
      const value =
        [1011, 1017, 1025, 1047, 1124].includes(this.$store.state.scene) &&
        this.isLogin &&
        this.isFollow != 1 &&
        this.curClose
          ? 1
          : 0;
      return value;
    },
  },
  methods: {
    ...mapActions(["getUserInfo", "appCommonConfig"]),
    // 公众号登录
    OfficialLogin() {
      console.log("公众号登录");
      this.$http({
        url: "/app/common/gzh_login",
        method: "post",
        data: {
          code: this.optObj.code,
        },
        noToken: true,
      }).then((res) => {
        if (res.data.code == 200) {
        } else {
          this.$u.toast(res.data.msg);
        }
      });
    },
    tobuy(item) {
      if (item.goodsType == 2) {
        uni.navigateTo({
          url: "/pages2/bank/detail?id=" + item.goodsId,
        });
      } else {
        // 视频、直播 /pages5/liveDetail/index
        uni.navigateTo({
          url:
            "/pages3/course/detail?id=" +
            item.goodsId +
            "&goodsType=" +
            item.goodsType,
        });
      }
    },
    getInfo() {
      if (!this.$method.isLogin()) {
        return;
      }
      // /app/user/getInfo 登录用户信息 // fromPlat来源平台 1小程序 2PC网站
      this.$api.getInfo({ fromPlat: 1 }).then((res) => {
        if (res.data.code == 200) {
          this.$store.state.userInfo = res.data.data;
          this.isFollow = res.data.data.userFollowWx; // 不是1就是没关注
        }
      });
    },
    // 每天最多显示1次；当天学员关闭弹窗后，无需再显示
    isClickOff() {
      //当天23：59：59秒 转换成的毫秒数
      const end = new Date(
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1
      ).getTime();
      const start = new Date().getTime(); //当前时间的毫秒数
      if (uni.getStorageSync("endTime")) {
        //首先判断本地有没有存入当天23：59：59秒的毫秒数
        if (start > uni.getStorageSync("endTime")) {
          //当前时间毫秒数大于当天23：59：59秒
          this.curClose = true;
          uni.removeStorageSync("curClose");
          uni.removeStorageSync("endTime");
        } else {
          this.curClose = uni.getStorageSync("curClose") ? false : true;
        }
      } else {
        uni.setStorageSync("endTime", end); //存入当天晚上23：59：59秒的毫秒数
      }
    },
    closeOff() {
      this.curClose = false;
      uni.setStorageSync("curClose", "1");
    },
    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)
          },
        });
      }
    },
    /**
     * 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.getLocation();
      // await this.advertisingList();
    },

    getUserSubscribeRecentExam() {
      return new Promise((resolve) => {
        this.$api.getUserSubscribeRecentExam().then((res) => {
          if (res.data.code == 200) {
            if (res.data.data) {
              let day = this.$method
                .timestampToTime(res.data.data.applySiteExamTime, true)
                .replace(/-/g, "/");
              let dayTime = day + " " + res.data.data.applySiteStartTime;
              let NowTime = new Date(); //考试时间
              let examTime = new Date(dayTime); //考试时间
              let t =
                examTime.getTime() / 1000 -
                (NowTime.getTime() / 1000).toFixed(0);
              if (t > 0) {
                let day = +this.$method.GetRTime(
                  examTime.getTime() / 1000,
                  true
                );
                this.nearByDay = day;
              }
            }

            resolve();
          }
        });
      });
    },

    advertisingHomeLocation() {
      return new Promise((resolve) => {
        this.$api.advertisingHomeLocation().then((res) => {
          this.interval = res.data.data.intervalTime * 1000;
          resolve();
        });
      });
    },
    getLocation() {
      this.$api
        .advertisingLocation({
          platform: 1,
          status: 1,
          locationKey: "home-banner",
        })
        .then((res) => {
          if (res.data.code == 200) {
            let locationId =
              (res.data.data && res.data.data[0].locationId) || 1;
            console.log("locationId:", locationId);
            this.advertisingList(locationId);
          }
        });
    },
    advertisingList(locationId) {
      // return new Promise(resolve => {
      this.$api.advertisingList({ locationId: locationId }).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",
                });
              }
            });
        }
      }
    },
    async changeCou(recommendId, index) {
      this.couIndex = index;
      this.courseId = recommendId;
      this.paramList[0].pageNum = 1;
      this.list1 = [];
      let list1 = await this.getGoodsList(recommendId, 0, this.courSubjectId);
      this.list1.push(...list1);
    },
    async changebank(recommendId, index) {
      this.bankIndex = index;
      this.bankId = recommendId;
      this.paramList[1].pageNum = 1;
      this.list2 = [];
      let list2 = await this.getGoodsList(recommendId, 1, this.courSubjectId);
      this.list2.push(...list2);
    },
    async changeSub(subjectId, index) {
      // console.log('subjectId, index:', subjectId, index, 'this.courseId:', this.courseId, 'this.bankId:', this.bankId)
      this.subIndex = index;
      this.courSubjectId = subjectId;
      this.paramList[this.tabNum].pageNum = 1;
      if (this.tabNum == 0) {
        this.list1 = [];
        let list1 = await this.getGoodsList(this.courseId, 0, subjectId);
        this.list1.push(...list1);
      } else {
        this.list2 = [];
        let list2 = await this.getGoodsList(this.bankId, 1, subjectId);
        this.list2.push(...list2);
      }
    },
    //课程
    courseLists() {
      // var param = this.paramList[0];
      // /app/common/goods/list
      this.$http({
        url: "/app/common/activity/recommend/list",
        method: "get",
        data: {
          platform: 1,
          status: 1,
        },
        noToken: true,
      }).then(async (res) => {
        if (res.data.code == 200) {
          let list = res.data.rows || [];
          //课程
          this.courseName = list
            .filter((x) => x.type == 1)
            .sort((a, b) => a.sort - b.sort)
            .map((x) => {
              return {
                name: x.name,
                recommendId: x.recommendId,
              };
            });
          // console.log('couIndex', this.couIndex, this.courseName)
          //题库
          this.bankName = list
            .filter((x) => x.type == 2)
            .sort((a, b) => a.sort - b.sort)
            .map((x) => {
              return {
                name: x.name,
                recommendId: x.recommendId,
              };
            });
          if (this.courseName.length) {
            let courseId = "";
            if (this.courseId) {
              courseId = this.courseId;
            } else {
              courseId = this.courseName[0].recommendId;
              this.courseId = this.courseName[0].recommendId;
            }
            // console.log('courseId:', courseId)
            this.getSubjectList(courseId);
            let list1 = await this.getGoodsList(courseId, 0, "");
            this.list1.push(...list1);
          }

          if (this.bankName.length) {
            let bankId = "";
            if (this.bankId) {
              bankId = this.bankId;
            } else {
              bankId = this.bankName[0].recommendId;
              this.bankId = this.bankName[0].recommendId;
            }
            let list2 = await this.getGoodsList(bankId, 1, "");
            this.list2.push(...list2);
          }
        }
      });
    },
    getGoodsList(recommendId, num, subjectId) {
      return new Promise((resolve, reject) => {
        let params = {
          pageNum: this.paramList[num].pageNum,
          pageSize: this.paramList[num].pageSize,
          recommendId: recommendId,
        };
        subjectId && (params.subjectId = subjectId);
        // console.log('params:', params)
        this.$http({
          url: `/app/common/activity/recommend/goodsList`,
          method: "get",
          data: params,
          noToken: true,
        }).then((res) => {
          if (res.data.code == 200) {
            this.paramList[num].total = res.data.total;
            resolve(res.data.rows);
          }
        });
      });
    },
    getSubjectList(recommendId) {
      this.$http({
        url: `/app/common/activity/recommend/subjectList`,
        method: "get",
        data: {
          recommendId: recommendId,
        },
        noToken: true,
      }).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data || [];
          this.subjectList = [{ id: "", subjectName: "全部" }, ...data];
          // console.log('this.subjectList:', this.subjectList)
        }
      });
    },
    /**
     * @param {Object} item
     * 跳转课程详情
     */
    async jumpGoodsDetail(item) {
      uni.navigateTo({
        url: "/pages2/wd/class",
      });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$api
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    preveItem() {
      if (this.goodsIndex > 0) {
        this.goodsIndex = this.goodsIndex - 1;
        this.planGoodsList = this.workList[this.goodsIndex].goodsVos;
        this.goodsItem = this.planGoodsList[0];
        this.dealRL(this.workList[this.goodsIndex].calendarStudyVo);
      }
    },
    nextItem() {
      if (this.goodsIndex < this.workList.length - 1) {
        this.goodsIndex = this.goodsIndex + 1;
        this.planGoodsList = this.workList[this.goodsIndex].goodsVos;
        this.goodsItem = this.planGoodsList[0];
        this.dealRL(this.workList[this.goodsIndex].calendarStudyVo);
      }
    },
    jumpPlan() {
      if (!this.$method.isLogin()) {
        this.$navTo.togo("/pages4/login/login");
      } else {
        this.$navTo.togo("/pages2/plan/index", {});
      }
    },
    async init() {
      if (!this.$method.isLogin()) {
        //未登录
        this.date_num = [];
        this.workList = [];
        this.planGoodsList = [];
        this.initDay();
      } else {
        this.date_num = [];
        this.workList = [];
        this.planGoodsList = [];
        await this.userPlanSeven();
        await this.getUserSubscribeRecentExam();
      }
    },
    getMonDate() {
      var d = new Date(),
        day = d.getDay(),
        date = d.getDate();
      if (day == 0) return d;
      else d.setDate(date - day);
      return d;
    },
    initDay() {
      // d是当前星期一的日期对象
      var d = this.getMonDate();
      var arr = [];
      let date = new Date();
      let num = date.getDate();
      this.date_num = [];
      for (var i = 0; i < 7; i++) {
        let item = { date: d.getDate() };
        item.color = 0;
        if (d.getDate() == num) {
          item.color = 3;
        }
        this.date_num.push(item);
        d.setDate(d.getDate() + 1);
      }
    },
    dealRL(calendarStudyVo) {
      let self = this;
      self.date_num = [];
      let date = new Date();
      let num = date.getDate();
      let month = date.getMonth() + 1;
      let list = [];
      for (let j = 0; j < calendarStudyVo.length; j++) {
        let item = calendarStudyVo[j];
        list = item.dayStudyList;
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          item.color = 0;
          if (item.date == num) {
            item.color = 3;
          }
          if (item.perform == 1) {
            item.color = 1;
          }
          if (item.perform == 2) {
            item.color = 2;
          }
          item.note = item.studyCourseKnob;
          if (item.note > 0) {
            item.dot = true;
          }
          self.date_num.push(item);
        }
      }
    },
    userPlanSeven() {
      return new Promise((resolve) => {
        let self = this;
        this.$api.userPlanSeven().then((result) => {
          if (result.data.data && result.data.data.length > 0) {
            self.workList = result.data.data;
            self.planGoodsList = self.workList[0].goodsVos;
            if (self.planGoodsList != null && self.planGoodsList.length > 0) {
              self.goodsItem = self.planGoodsList[0];
            }
            self.dealRL(result.data.data[0].calendarStudyVo);
          } else {
            self.initDay();
          }

          resolve();
        });
      });
    },
    swiperChange(e) {
      this.current = e.detail.current;
    },
    tab(e) {
      this.tabCurrent = e;
      this.tabNum = e;
      this.paramList[this.tabNum].pageNum = 1;
      if (e == 0) {
        this.list1 = [];
      } else {
        this.list2 = [];
      }
      this.courseLists();
      // let recommendId = e == 0 ? this.courseId : this.bankId
      // this.getSubjectList(recommendId)
    },
    updateHomePlan() {
      this.$refs.home.init();
    },
    beforeSwitch(index) {
      let that = this;
      if (index == 1) {
        this.isClick1 = true;
      }
      if (index == this.current) {
        return false;
      }
      if (!this.$method.isLogin()) {
        if (index == 0 || index == 1) {
          return true;
        } else {
          this.$navTo.togo("/pages4/login/login");
          return false;
        }
      } else {
        if (index == 2) {
          this.$refs.refMy.init();
        }
        return true;
      }
    },
  },
};
</script>

<style>
page {
  background: #eaeef1;
}
</style>
<style lang="scss" scoped>
@mixin threeDot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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;
    background: rgba(234, 238, 241, 1);
    padding-bottom: 100rpx;
    .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;
      }
    }

    .date-list {
      margin-top: 16rpx;
      width: 718rpx;
      height: 330rpx;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 18rpx 27rpx;

      .title {
        font-size: 30rpx;
        font-weight: bold;
        color: #007aff;
      }

      .list {
        margin-top: 40rpx;
        display: flex;
        justify-content: space-around;

        .item {
          .top {
            text-align: center;
            font-size: 26rpx;
            color: rgba(102, 102, 102, 0.6);
          }

          .bottom {
            text-align: center;
            line-height: 48rpx;
            margin-top: 30rpx;
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            color: rgba(51, 51, 51, 1);
            font-size: 26rpx;
            position: relative;

            &.red {
              color: #ff3b30;
            }

            &.green {
              color: #36c75a;
            }

            &.blue {
              background: #007aff;
              color: #fff;
            }

            .note {
              width: 30rpx;
              height: 30rpx;
              border: 2rpx solid #ff9500;
              border-radius: 50%;
              position: absolute;
              top: -20rpx;
              right: -20rpx;
              line-height: 28rpx;
              text-align: center;
              color: #ff9500;
              font-size: 26rpx;
            }

            .point {
              margin: 0 auto;
              width: 8rpx;
              height: 8rpx;
              background: #ff9500;
              border-radius: 50%;
            }
          }
        }
      }

      .btns {
        margin-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .left,
        .right {
          width: 40rpx;
          height: 40rpx;
        }

        .center {
          width: 440rpx;
          height: 56rpx;
          background: #ffffff;
          box-shadow: 0px 0px 9rpx 1rpx rgba(47, 67, 121, 0.1);
          border-radius: 28rpx;
          color: rgba(255, 149, 0, 1);
          line-height: 56rpx;
          text-align: center;
          font-size: 30rpx;
          margin: 0 30rpx;
        }
      }
    }

    .tabs {
      width: 100%;
      height: 78rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #f2f7ff;
      border-radius: 38rpx;
      margin: 34rpx 0rpx 24rpx 0rpx;
      padding: 0rpx 5rpx;
      .tab_item {
        width: 345rpx;
        height: 65rpx;
        line-height: 65rpx;
        font-size: 28rpx;
        font-weight: bold;
        border-radius: 32rpx;
        text-align: center;
        color: #333;
        &.nactive {
          color: #fff;
          background-color: #3577e8;
        }
      }
    }

    .course-list {
      box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
      .list_item {
        padding: 24rpx;
        // height: 278rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1, 99, 235, 0.1);
        border-radius: 24rpx;
        background: #fff;
        margin-bottom: 32rpx;
        display: flex;
        align-items: center;
        .c_title {
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 24rpx;
          font-weight: bold;
          color: #222222;
        }
        .c_downs {
          display: flex;
        }
        .img {
          position: relative;
          margin-right: 24rpx;
          border-radius: 16rpx;
          overflow: hidden;
          width: 204rpx;
          height: 120rpx;
          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 {
          width: 440rpx;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 120rpx;
          .joins {
            .people {
              width: 160rpx;
              font-size: 20rpx;
              color: #999999;
              padding: 0rpx 8rpx;
              text-align: center;
              height: 36rpx;
              line-height: 36rpx;
              background: #f6f7fb;
              border-radius: 4px;
            }
          }
          .desc {
            margin-top: 10rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .left {
              flex: 1;
              color: #333;
              font-size: 26rpx;
              .mon_t {
                display: flex;
                font-weight: bold;
                color: #fc3f3f;
                font-size: 36rpx;
                view::before {
                  content: "￥";
                  font-size: 24rpx;
                  font-weight: bold;
                }
              }
              .free {
                font-size: 24rpx;
              }
              .sale {
                color: #999999;
                font-size: 24rpx;
                margin-left: 8rpx;
              }
              .price_line {
                color: #999999;
                font-size: 24rpx;
                text-decoration: line-through;
                font-weight: 400;
              }
            }

            .right {
              font-size: 24rpx;
              font-weight: bold;
              .regiser_row {
                width: 144rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                border-radius: 16rpx;
                background-color: #fc3f3f;
                color: #fff;
                font-weight: 500;
                font-size: 26rpx;
              }
            }
          }
        }
      }
    }

    .filters {
      width: 100%;
      padding: 0rpx 16rpx;
      margin-bottom: 32rpx;
      display: flex;
      align-items: center;
      .scroll_view_H {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
      }
      .filter_item {
        display: inline-block;
        margin-right: 16rpx;
        .name {
          font-size: 24rpx;
          color: #666666;
          padding: 12rpx 16rpx;
          height: 56rpx;
          text-align: center;
          background: #ffffff;
          border-radius: 8rpx;
          &.nactive {
            color: #3f8dfd;
          }
        }
      }
    }
  }

  .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;
      }
    }
  }
}
.date_dot {
  width: 6rpx;
  height: 6rpx;
  background: #ffcc00;
  border-radius: 50%;
  margin: 0 auto;
}
.date_note {
  border-radius: 50%;
  width: 29rpx;
  height: 29rpx;
  border: 1px solid #ffcc00;
  font-size: 18rpx;
  color: #ffcc00;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: -19rpx;
  right: 9rpx;
}
.circle_num {
  border-radius: 50%;
  width: 29rpx;
  height: 29rpx;
  border: 1px solid #ffcc00;
  font-size: 18rpx;
  color: #ffcc00;
  text-align: center;
  display: inline-block;
  margin: 5rpx;
}
.date_num {
  width: 14%;
  text-align: center;
  position: relative;
  display: inline-block;
  margin-top: 20rpx;
  .items {
    width: 100%;
  }
}
.course_title {
  color: #2f4379;
  box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(47, 67, 121, 0.1);
  border-radius: 28rpx;
  width: 100%;
  height: 48rpx;
  line-height: 48rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arr-icon {
  width: 40rpx;
  height: 40rpx;
}
.date_num_color0 {
  color: #32467b;
}
.date_num_color1 {
  color: #34c759;
}
.date_num_color2 {
  color: #ff3b30;
}
.date_num_color3 {
  color: #ffffff;
  background-color: #ffcc00;
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
  display: inline-block;
}
.card_date {
  width: 14%;
  text-align: center;
  color: #7f8caf;
}

.calendar_card {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.1);
  border-radius: 22rpx;
  margin-top: 16rpx;
  padding-bottom: 15rpx;
}
.calendar_card .card_box {
  height: 60rpx;
  line-height: 60rpx;
  margin-left: 20rpx;
}
.calendar_card .t1 {
  color: #007aff;
  font-size: 24rpx;
}
.img_more {
  width: 26rpx;
  height: 26rpx;
}
.flex-d {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.contentZ {
  flex: 1;
  overflow-y: auto;
  padding-left: 35rpx;
  display: flex;
  justify-content: space-around;
}
.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: #32467b;
  font-weight: 500;
}
.right_Btns {
  font-size: 30rpx;
  color: #fff;
  background-color: #32467b;
  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);
}
.lzs {
  width: 31%;
  margin: 0rpx 1%;
  max-width: 31%;
}
.tylsz {
  margin-top: 23rpx;
  color: #666;
  font-weight: 400;
  font-size: 24rpx;
}
.tylsz:first-child {
  text-align: center;
}
.activeStys {
  font-weight: bold;
  color: #32467b;
}
.officialsss {
  position: fixed;
  left: 0;
  bottom: 100rpx;
  width: 100%;
}
.officials {
  width: 100%;
  height: 104rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weixin_official_account {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  width: 718rpx;
  height: 104rpx;
  padding: 0 32rpx;
  margin-left: 16rpx;
  background: #3a3f54;
  border-radius: 16rpx;
  .off_logo {
    width: 48rpx;
    height: 48rpx;
    margin-right: 24rpx;
  }
  .one {
    color: #fff;
    font-size: 24rpx;
    font-weight: 500;
  }
  .two {
    color: #bcbec7;
    font-size: 20rpx;
  }
  .btn {
    position: relative;
    top: 0;
    left: 35rpx;
    width: 128rpx;
    height: 56rpx;
    line-height: 56rpx;
    padding: 0;
    background: linear-gradient(274deg, #408bf6 0%, #40b4f6 100%);
    border-radius: 156rpx;
    overflow: hidden;
    text-align: center;
    font-size: 24rpx;
    color: #fff;

    .official-account {
      position: absolute;
      z-index: 1000;
      right: -9px;
      top: -38px;
      opacity: 0;
    }
  }
  .close_icon {
    width: 40rpx;
    height: 40rpx;
    background: #ffffff;
    opacity: 0.2;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    border-radius: 0rpx 16rpx;
  }
  .icon-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50rpx;
    height: 68rpx;
    font-size: 22rpx;
    color: #7b8284;
  }
}
</style>