zc_saas_h5/pages2/msg/detail.vue

<template>
  <view>
    <nav-bar title="消息详情"></nav-bar>
    <view class="item">
      <view class="title">{{ getTitleName() }}</view>
      <view class="time">{{
        $method.timestampToTime(listData.sendTime, false)
      }}</view>
      <view
        v-if="listData.systemStatus === 2"
        class="content"
        v-html="listData.informVo.affiche"
        style="width: 100%"
      ></view>
      <view
        v-if="listData.systemStatus === 1"
        class="content"
        style="width: 100%"
        >{{ listData.text }}</view
      >
      <view class="boxstistyle" v-if="listData.informVo">
        <view
          class="lsow"
          style="border-bottom: 1rpx solid #eee; margin-top: 10rpx"
          v-for="(item, index) in listData.informVo.informCourseVo"
          :key="index"
        >
          <view class="h4">{{ item.goodsName }}</view>
          <view class="h33">
            {{ item.courseName
            }}{{ item.moduleName ? "/" + item.moduleName : ""
            }}{{ item.chapterName ? "/" + item.chapterName : ""
            }}{{ item.sectionName }}
          </view>
          <view
            style="display: flex; align-items: center; margin: 28rpx 0rpx"
            @click="jumpSection(item)"
          >
            <image
              style="width: 35rpx; height: 35rpx"
              src="@/static/courseIcon.png"
              mode=""
            ></image>
            <text class="timeStys">{{
              $method.secondToTime(item.topicNum, false)
            }}</text>
            <text class="aSty">点击可直接跳转</text>
          </view>
        </view>
        <view
          class="lsow"
          style="border-bottom: 1rpx solid #eee; margin-top: 10rpx"
          v-for="(item, index) in listData.informVo.informExamVo"
          :key="index"
        >
          <view class="h4">{{ item.goodsName }}</view>
          <view class="h33"
            >{{ item.moduleName ? "/" + item.moduleName : ""
            }}{{ item.chapterName ? "/" + item.chapterName : ""
            }}{{ item.examName }}</view
          >
          <view
            style="display: flex; align-items: center; margin: 28rpx 0rpx"
            @click="jumpExam(item)"
          >
            <image
              style="width: 35rpx; height: 35rpx"
              src="@/static/examIcon.png"
              mode=""
            ></image>
            <text class="timeStys">第{{ item.topicNum }}道题</text>
            <text class="aSty">点击可直接跳转</text>
          </view>
        </view>
      </view>
    </view>
    <view
      class="btn1"
      @click="isOk"
      v-if="listData.systemStatus === 2 && listData.receiptStatus === 0"
      >我已阅读</view
    >
    <view
      class="btn1"
      v-if="
        statusGO &&
        listData.systemStatus === 1 &&
        getNames(listData.remindId) !== ''
      "
      @click="jumpFuns(goodsData, listData.remindId)"
      >{{ getNames(listData.remindId) }}</view
    >
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      listData: {},
      goodsData: {},
      sysTime: 0,
      id: null,
      img1: "/static/icon/msg_icon1.png",
      img2: "/static/icon/msg_icon2.png",
      statusGO: true,
      orderGoodsId: 0,
    };
  },
  onPullDownRefresh() {},
  onLoad(option) {
    this.sysTime = this.$method.timest();
    this.id = Number(option.id);
    this.orderGoodsId = option.orderGoodsId;
  },
  onShow() {
    this.getInfo();
    /* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
  },
  onShareAppMessage(res) {
    var self = this;
    return {
      title: "中正",
      path:
        `/pages/index/index?inviteCode=` + userInfo == null
          ? ""
          : userInfo.userAccount,
    };
  },
  methods: {
    getTitleName() {
      // 28-已开通商品课程2天后学员未上课,29-已开通商品课程5天后学员未上课,31-近3天学员没有学习,32-近5天学员没有学习
      if ([28, 29, 31, 32].includes(+this.listData.remindId)) {
        // 要先判断督学消息的显示
        return this.listData.remind;
      } else {
        return this.listData.systemStatus === 2
          ? this.listData.informVo.informName
          : this.listData.systemStatus === 1
          ? this.listData.remind
          : "";
      }
    },
    /**
     * 获取系统当前时间
     */
    commonSystemTime() {
      this.$api.commonSystemTime().then((res) => {
        this.sysTime = res.data.data;
      });
    },
    //跳转页面
    async jumpFuns(item, remindId) {
      console.log("======items", item);
      switch (remindId) {
        case 1:
        case 3:
        case 5:
        case 6:
        case 7:
        case 19:
        case 21:
        case 22:
        case 23:
        case 10:
        case 12:
        case 18:
        case 28:
        case 29:
        case 31:
        case 32:
          //课程
          if (item.goodsType == 1) {
            this.$api
              .orderInfo({
                orderGoodsId: this.orderGoodsId,
              })
              .then(async (res) => {
                console.log(res);
                let item = res.data.data;

                let currentTime = this.$method.timest();
                console.log(currentTime);
                console.log(item);
                console.log(item.serviceStartTime);
                console.log(item.serviceEndTime);
                console.log(
                  currentTime < item.serviceStartTime ||
                    currentTime > item.serviceEndTime
                );
                //内部系统
                if (item.interfacePushId > 0 && item.officialStatus != 1) {
                  // ，有疑问请联系020-87085982
                  uni.showModal({
                    showCancel: false,
                    content: "机构正在为您报名中，请耐心等待！",
                  });
                  return;
                }
                if (
                  this.sysTime <= item.serviceStartTime ||
                  this.sysTime >= item.serviceEndTime
                ) {
                  uni.showToast({
                    icon: "none",
                    title: "不在学习服务期，不能进入学习",
                  });
                  return;
                }

                if (
                  (item.classStartTime &&
                    this.sysTime <= item.classStartTime) ||
                  (item.classEndTime && this.sysTime >= item.classEndTime)
                ) {
                  uni.showToast({
                    icon: "none",
                    title: "不在班级有效期，不能进入学习",
                  });
                  return;
                }

                if (item.learningStatus == 2) {
                  uni.showToast({
                    icon: "none",
                    title: "开放学习时间待定，不能进入学习",
                  });
                  return;
                }

                if (item.classStatus == 0) {
                  uni.showToast({
                    icon: "none",
                    title: "尚未开班，不能进入学习",
                  });
                  return;
                }
                console.log(this.sysTime, item.learningTimeStart);
                console.log(this.sysTime < item.learningTimeStart);
                if (
                  item.learningStatus == 3 &&
                  this.sysTime < item.learningTimeStart
                ) {
                  uni.showToast({
                    icon: "none",
                    title: "不在开放学习时间,不能进入学习",
                  });
                  return;
                }

                if (
                  item.gradeStatus == 1 &&
                  item.status == 1 &&
                  item.serviceEndTime > this.sysTime &&
                  item.classEndTime &&
                  item.classEndTime < this.sysTime &&
                  (item.periodStatus == 0 || item.periodStatus == -1) &&
                  item.studyCount > 0
                ) {
                  uni.showModal({
                    title: "提示",
                    content: "班级有效期已过期，请选择班级",
                    success: (res) => {
                      if (res.confirm) {
                        uni.navigateTo({
                          url: "../wd/class",
                        });
                      }
                    },
                  });
                  return;
                }

                let rebuildStatus = await this.courseGoodsRebuildStatus(
                  item.goodsId,
                  item.gradeId
                );

                if (rebuildStatus == 0) {
                  this.$navTo.togo("/pages2/learn/details", {
                    gradeId: item.gradeId,
                    goodsId: item.goodsId,
                    orderGoodsId: this.orderGoodsId,
                  });
                  return;
                }
                this.$api
                  .courseCourseList({
                    pageNum: 1,
                    pageSize: 1,
                    goodsId: item.goodsId,
                    gradeId: item.gradeId,
                    orderGoodsId: this.orderGoodsId,
                  })
                  .then((res) => {
                    if (res.data.code == 200) {
                      if (res.data.total > 1) {
                        // this.$navTo.togo(`/pages2/wd/course?id=${item.goodsId}&gid=${item.gradeId}&orderGoodsId=${this.orderGoodsId}`);
                        uni.navigateTo({
                          url: `/pages3/polyv/detail?id=''&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`,
                        });
                      } else if (res.data.total == 1) {
                        uni.navigateTo({
                          url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${this.orderGoodsId}&gradeId=${item.gradeId}`,
                        });
                      } else {
                        uni.showToast({
                          icon: "none",
                          title: "暂无可观看的视频课程",
                        });
                      }
                    }
                  });
                // if(item.courseNum == 1 ) {

                // 	this.$api.courseCourseList({
                // 		pageNum:1,
                // 		pageSize:1,
                // 		goodsId:item.goodsId,
                // 		gradeId:item.gradeId
                // 	}).then(res => {
                // 		if(res.data.code == 200) {
                // 			uni.navigateTo({
                // 				url:`/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}`
                // 			})
                // 		}
                // 	});
                // 	return;
                // }

                // this.$navTo.togo('/pages2/wd/course', {
                // 	id: item.goodsId,
                // 	gid: item.gradeId
                // });
              });

            // arsty = '立刻学习';

            //题库
          } else if (item.goodsType == 2) {
            // this.$navTo.togo('/pages2/bank/question_detail', {
            // 	id: item.goodsId
            // });
            uni.navigateTo({
              url:
                "/pages2/bank/question_detail?id=" +
                item.goodsId +
                "&orderGoodsId=" +
                this.orderGoodsId,
            });
          } else if (item.goodsType == 6) {
            // 进入直播课
            this.toLive(item);
          }

          break;
        case 2:
        case 4:
          this.$navTo.togo("/pages2/verify/input", {
            id: item.goodsId,
          });
          break;
        case 24:
          this.$navTo.togo("/pages2/verify/input2", {
            id: item.goodsId,
          });
          break;
        case 11:
        case 13:
          var data = {
            goodsId: item.goodsId,
            gradeId: item.gradeId,
          };
          this.$api.getApplysubscribe(data).then((res) => {
            if (res.data.code === 500) {
              uni.showModal({
                showCancel: false,
                content: res.data.msg,
              });
            }
            if (res.data.code === 200) {
              // 725,645,2232
              this.$navTo.togo("/pages2/appointment/index", {
                goodsId: item.goodsId,
                gradeId: item.gradeId,
                orderGoodsId: this.orderGoodsId,
              });
            }
          });
          break;
        case 20:
          this.$navTo.togo("/pages3/course/detail", {
            id: item.goodsId,
            goodsType: item.goodsType,
          });
          break;
        default:
          break;
      }
    },
    toLive(item) {
      this.$api
        .courseCourseList({
          pageNum: 1,
          pageSize: 1,
          goodsId: item.goodsId,
          gradeId: 0,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            if (res.data.total > 1) {
              // uni.navigateTo({
              // 	url:'/pages5/liveDetail/course?orderGoodsId='+this.orderGoodsId+'&goodsId='+item.goodsId+'&gradeId=0'
              // })
              uni.navigateTo({
                url:
                  "/pages3/live/detail?orderGoodsId=" +
                  this.orderGoodsId +
                  "&goodsId=" +
                  item.goodsId +
                  '&gradeId=0&courseId=""',
              });
            } else if (res.data.total == 1) {
              uni.navigateTo({
                url:
                  "/pages3/live/detail?orderGoodsId=" +
                  this.orderGoodsId +
                  "&goodsId=" +
                  item.goodsId +
                  "&gradeId=0&courseId=" +
                  res.data.rows[0].courseId,
              });
            } else {
              uni.showToast({
                icon: "none",
                title: "暂无可观看的直播课程",
              });
            }
          }
        });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$api
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    //跳转节视频
    jumpSection(item) {
      console.log(item);
      item.noteSecond = Number(item.topicNum) * 60; //转秒数
      this.$navTo.togo("/pages3/polyv/detail", {
        id: item.courseId,
        goodsId: item.goodsId,
        noteSecond: item.noteSecond,
        sectionId: item.sectionId,
        recordingUrl: item.recordingUrl,
        moduleId: item.moduleId || 0,
        chapterId: item.chapterId || 0,
        orderGoodsId: this.orderGoodsId,
        gradeId: item.gradeId,
      });
    },
    //跳转题库题目
    jumpExam(item) {
      console.log(item);
      uni.navigateTo({
        url:
          "/pages2/bank/questionBank?current=" +
          (item.topicNum - 1) +
          "&id=" +
          item.examId +
          "&goodsid=" +
          item.goodsId +
          "&chapterId=" +
          item.moduleId +
          "&moduleId=" +
          item.moduleId,
      });
    },
    isOk() {
      this.$api
        .courseappinformUser({ id: this.listData.id, receiptStatus: 1 })
        .then((res) => {
          if (res.data.code === 200) {
            uni.navigateBack({
              delta: 1,
            });
          }
        });
    },
    backPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getInfo() {
      // /app/informUser/' + data,
      this.$api.getappinformUserId(this.id).then((res) => {
        if (res.data.code === 200) {
          if (
            res.data.data.receiptStatus === 1 &&
            (res.data.data.remindId === 2 ||
              res.data.data.remindId === 4 ||
              res.data.data.remindId === 24)
          ) {
            this.$api
              .getbaseprofiletpgetInfo({ goodsId: res.data.data.goodsId })
              .then((k) => {
                if (
                  (k.data.data.status === 3 &&
                    k.data.data.changeStatus === 2) ||
                  k.data.data.status === 2 ||
                  k.data.data.status === 1
                ) {
                  this.statusGO = false;
                }
              });
          }
          if (!res.data.data.receiptStatus) {
            this.$api
              .courseappinformUser({ id: res.data.data.id, receiptStatus: 1 })
              .then((res) => {
                if (res.data.code === 200) {
                }
              });
          }
          if (res.data.data.informVo && res.data.data.informVo.affiche) {
            res.data.data.informVo.affiche =
              res.data.data.informVo.affiche.replace(
                /<img/gi,
                '<img style="max-width:100%;"'
              );
          }

          this.listData = res.data.data;
          console.log("listDatalistData:", this.listData);
          if (res.data.data.goodsId) {
            if (res.data.data.gradeId) {
              // /goods/'+ data,
              this.$api.goodsDetail(res.data.data.goodsId).then((rs) => {
                this.goodsData = rs.data.data;
                if (
                  rs.data.data.goodsType === 3 &&
                  (res.data.data.remindId === 1 ||
                    res.data.data.remindId === 3 ||
                    res.data.data.remindId === 5 ||
                    res.data.data.remindId === 6 ||
                    res.data.data.remindId === 7 ||
                    res.data.data.remindId === 19 ||
                    res.data.data.remindId === 21 ||
                    res.data.data.remindId === 22)
                ) {
                  this.statusGO = false;
                }
              });
            } else {
              this.$api.commonGoodsDetail(res.data.data.goodsId).then((rs) => {
                this.goodsData = rs.data.data;
                if (
                  rs.data.data.goodsType === 3 &&
                  (res.data.data.remindId === 1 ||
                    res.data.data.remindId === 3 ||
                    res.data.data.remindId === 5 ||
                    res.data.data.remindId === 6 ||
                    res.data.data.remindId === 7 ||
                    res.data.data.remindId === 19 ||
                    res.data.data.remindId === 21 ||
                    res.data.data.remindId === 22)
                ) {
                  this.statusGO = false;
                }
              });
            }
          }
        }
      });
    },
    change(index) {
      this.current = index;
    },
    getNames(int) {
      var arsty = "";
      switch (int) {
        case 1:
        case 3:
        case 5:
        case 6:
        case 7:
        case 19:
        case 21:
        case 22:
        case 23:
        case 28:
        case 29:
        case 31:
        case 32:
          arsty = "立刻学习";
          break;
        case 2:
        case 4:
        case 24:
          arsty = "马上填写";
          break;
        case 10:
        case 12:
        case 18:
          arsty = "立即重学";
          break;
        case 11:
          arsty = "立即预约";
          break;
        case 13:
          arsty = "预约考试";
          break;
        case 20:
          arsty = "重新购买";
          break;
        default:
          break;
      }
      return arsty;
    },
  },
  onReachBottom() {},
  computed: { ...mapGetters(["userInfo"]) },
  onUnload() {
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; //当前页面
    var prePage = pages[pages.length - 2]; //上一个页面
    //调用上一页拉取数据的方法
    if (prePage.route == "pages2/msg/index") {
      prePage.$vm.getChangeData(this.id);
    }
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scoped>
.lsow:last-child {
  border-bottom: none !important;
}
.timeStys {
  margin: 0rpx 6rpx;
  color: #007aff;
  font-size: 28rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #007aff;
}
.h4 {
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
}
.aSty {
  color: #999;
  font-size: 24rpx;
  margin-left: 8rpx;
}
.h33 {
  font-size: 28rpx;
  color: #666;
}
.content {
  font-size: 28rpx;
  color: #666666;
  line-height: 36rpx;
}
.time {
  font-size: 24rpx;
  color: #999999;
  margin: 15rpx 0;
}
.btn1 {
  width: 526rpx;
  height: 80rpx;
  background: #007aff;
  border-radius: 40rpx;
  color: #ffffff;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx auto;
}
.item {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 15rpx;
}
.title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
}
</style>