zc_saas_h5/pages2/learn/my_learn.vue

<template>
  <view class="safeArea">
    <nav-bar title="目录"></nav-bar>
    <view
      style="
        width: 100%;
        text-align: center;
        position: fixed;
        height: 96rpx;
        z-index: 999;
      "
    >
      <u-tabs
        :list="list"
        sticky
        :current="current"
        @change="change"
        active-color="#333"
        inactive-color="#999"
      ></u-tabs>
    </view>
    <view class="learnWrap">
      <template v-if="current === 0">
        <view class="noData" v-if="listData.length == 0"
          >您暂无相关学时审核记录哦~</view
        >
        <view class="learnItem" v-for="(item, index) in listData" :key="index">
          <view class="title">{{ item.goodsName }}</view>
          <view class="status">
            <view class="label">审核状态：</view>
            <view
              class="val"
              :class="
                item.periodStatus === -1
                  ? 'red'
                  : item.periodStatus === 1
                  ? 'green'
                  : item.periodStatus === 2 || item.periodStatus === 3
                  ? 'blue'
                  : ''
              "
            >
              <text>
                {{
                  item.periodStatus === -1
                    ? "不可审核"
                    : item.periodStatus === 1
                    ? "机构审核通过"
                    : item.periodStatus === 2
                    ? "等待审核"
                    : item.periodStatus === 3
                    ? "审核中"
                    : item.periodStatus === 0
                    ? "机构审核不通过"
                    : ""
                }}
              </text>
              <view
                v-if="item.periodStatus === 0"
                style="font-size: 24rpx; color: #666"
              >
                有
                <text style="color: #ff3b30">{{ item.rebuild }}节</text>
                需要重修
              </view>
            </view>
          </view>

          <view class="tip" v-if="item.periodStatus === 1">
            <template
              v-if="
                item.educationName == '继续教育' &&
                item.businessName == '二级' &&
                item.projectName == '建造师'
              "
            >
              <view class="label">审核提示：</view>
              <view>
                机构已审核通过，需等待注册中心复审后即可获得继续教育学时。审核时间约15个工作日，届时请前往官网申请证书延期。
                <view class="copySty" @tap="copyText">复制官网链接</view>
              </view>
            </template>
          </view>
          <view class="tip" v-else>
            <view class="label">审核提示：</view>
            <view class="val color666" v-if="item.periodStatus === -1"
              >您的学时还未修完，请尽快完成课程学习</view
            >
            <view class="val color666" v-if="item.periodStatus === 2"
              >学习完成后7-15个工作日完成学时审核。</view
            >
            <view class="val color666" v-if="item.periodStatus === 0"
              >请查看需重学记录，并及时重学对应课程，以免延误学时审核进度。</view
            >
            <view class="val color666" v-if="item.periodStatus === 3"
              >会在7-15个工作日左右完成学时审核</view
            >
          </view>
          <view v-if="item.periodStatus !== 2">
            <u-line color="#EEEEEE" />
            <view v-if="item.periodStatus === -1">
              <view class="btnBox"
                ><view
                  class="btn"
                  v-if="!showLearn(item)"
                  @click="jumpPage(item, 1, index)"
                  >课程学习</view
                ></view
              >
            </view>
            <view>
              <view
                v-if="
                  item.periodStatus === 1 &&
                  item.applyStatus === 1 &&
                  !(
                    sysTime <= item.serviceStartTime ||
                    sysTime >= item.serviceEndTime ||
                    (item.classStartTime && sysTime <= item.classStartTime) ||
                    (item.classEndTime && sysTime >= item.classEndTime) ||
                    item.learningStatus == 2 ||
                    item.classStatus == 0 ||
                    (item.learningStatus == 3 &&
                      sysTime < item.learningTimeStart)
                  )
                "
              >
                <template v-for="apply in item.applyList">
                  <view class="subTitle">{{ apply.applyName }}</view>
                  <!-- <view class="status">
										<view class="label">审核状态：</view>
										<view class="val green">
											<text>
												机构审核通过
											</text>
										</view>
									</view> -->
                  <view class="btnBox"
                    ><view class="btn" @click="jumpPage(item, 2, index, apply)"
                      >预约考试</view
                    ></view
                  >
                </template>
              </view>
              <u-line
                color="#EEEEEE"
                v-if="item.periodStatus === 1 && item.applyStatus === 1"
              />
              <view
                v-if="
                  item.periodStatus === 1 &&
                  item.beforeStatus === 1 &&
                  !(
                    sysTime <= item.serviceStartTime ||
                    sysTime >= item.serviceEndTime ||
                    (item.classStartTime && sysTime <= item.classStartTime) ||
                    (item.classEndTime && sysTime >= item.classEndTime) ||
                    item.learningStatus == 2 ||
                    item.classStatus == 0 ||
                    (item.learningStatus == 3 &&
                      sysTime < item.learningTimeStart)
                  )
                "
              >
                <view class="subTitle">{{ item.beforeName }}</view>
                <!-- <view class="status">
									<view class="label">审核状态：</view>
									<view class="val green">
										<text>
											机构审核通过
										</text>
									</view>
								</view> -->
                <view class="btnBox"
                  ><view class="btn" @click="jumpPage(item, 3, index)"
                    >进入刷题</view
                  ></view
                >
              </view>
            </view>

            <view v-if="item.periodStatus === 0 && item.rebuildStatus === 0">
              <view class="btnBox"
                ><view class="btn" @click="jumpPage(item, 4, index)"
                  >查看详情</view
                ></view
              >
            </view>
            <view v-if="item.periodStatus === 0 && item.rebuildStatus === 1">
              <view class="btnBox"
                ><view class="btn" @click="jumpPage(item, 5, index)"
                  >重修目录</view
                ></view
              >
            </view>
          </view>
        </view>
      </template>
      <template v-if="current === 1">
        <view class="noData" v-if="listData.length == 0"
          >您暂无相关学习凭证记录哦~</view
        >
        <view
          class="learnItem card"
          v-for="(item, index) in listData"
          :key="index"
        >
          <view class="title">{{ item.title }}</view>
          <view class="number">
            <text class="label">编号：</text>
            {{ item.certificateCode }}
          </view>
          <view class="btnBox">
            <view class="btn" @click="showPhoto(item)">电子照片</view>
            <view class="btn" @click="saveEwm(item)">下载凭证</view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      loading: false,
      current: 0,
      list: [
        {
          name: "学时审核",
        },
        {
          name: "学习凭证",
        },
      ],
      param: {
        pageNum: 1,
        pageSize: 10,
        orderGoodsId: "",
      },
      total: 0,
      itemIndex: "",
      listData: [],
      orderGoodsId: 0,
      sysTime: 0,
    };
  },
  onLoad(option) {
    this.orderGoodsId = option.orderGoodsId || "";
    console.log(this.orderGoodsId);
    this.param.orderGoodsId = option.orderGoodsId || "";
    this.getcourseperiodlistGoods();
  },
  onShow() {
    this.sysTime = +this.$method.timest();
    if (this.itemIndex !== "") {
      if (this.current == 0) {
        this.refreshByIndex();
      }
    }
  },
  onReachBottom() {
    if (this.listData.length < this.total) {
      this.param.pageNum++;
      if (this.current == 0) {
        this.getcourseperiodlistGoods();
      } else if (this.current == 1) {
        this.getUserCertificateList();
      }
    }
  },
  methods: {
    showLearn(item) {
      console.log(item.goodsName);
      console.log(
        (item.interfacePushId > 0 && item.officialStatus != 1) ||
          this.sysTime <= item.serviceStartTime ||
          this.sysTime >= item.serviceEndTime ||
          (item.classStartTime && this.sysTime <= item.classStartTime) ||
          (item.classEndTime && this.sysTime >= item.classEndTime) ||
          item.learningStatus == 2 ||
          item.classStatus == 0 ||
          (item.learningStatus == 3 && this.sysTime < item.learningTimeStart)
      );
      return (
        (item.interfacePushId > 0 && item.officialStatus != 1) ||
        this.sysTime <= item.serviceStartTime ||
        this.sysTime >= item.serviceEndTime ||
        (item.classStartTime && this.sysTime <= item.classStartTime) ||
        (item.classEndTime && this.sysTime >= item.classEndTime) ||
        item.learningStatus == 2 ||
        item.classStatus == 0 ||
        (item.learningStatus == 3 && this.sysTime < item.learningTimeStart)
      );
    },
    refreshByIndex() {
      this.$api
        .getcourseperiodlistGoods({
          pageNum: this.itemIndex + 1,
          pageSize: 1,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$set(this.listData, this.itemIndex, res.data.rows[0]);
          }
        });
    },
    copyText() {
      uni.setClipboardData({
        data: "http://gdzczx.gdcic.net/",
        success: () => {
          //复制成功的回调函数
          uni.showToast({
            //提示
            title: "复制成功",
          });
        },
      });
    },
    jumpPage(v, int, index, appoint) {
      this.itemIndex = index;
      //int 1.课程学习 2.预约考试 3.进入刷题 4.查看详情 5.重修目录
      if (int === 1) {
        this.$navTo.togo(
          `/pages2/wd/course?id=${v.goodsId}&gid=${v.gradeId}&orderGoodsId=${v.orderGoodsId}`
        );
      }
      if (int === 2) {
        var data = {
          goodsId: v.goodsId,
          gradeId: v.gradeId,
          applyId: appoint.applyId,
        };
        this.$api.getApplysubscribe(data).then((res) => {
          if (res.data.code === 500) {
            uni.showModal({
              showCancel: false,
              content: res.data.msg,
            });
          }
          if (res.data.code === 200) {
            this.$navTo.togo("/pages2/appointment/index", {
              goodsId: v.goodsId,
              gradeId: v.gradeId,
              orderGoodsId: v.orderGoodsId,
              applyId: appoint.applyId,
            });
          }
        });
      }
      if (int === 3) {
        this.appBeforeAddress(v);
      }
      if (int === 4) {
        this.$navTo.togo(
          `/pages2/learn/details?goodsId=${v.goodsId}&gradeId=${v.gradeId}&orderGoodsId=${v.orderGoodsId}`
        );
      }
      if (int === 5) {
        this.$navTo.togo(
          `/pages2/wd/course?id=${v.goodsId}&gid=${v.gradeId}&orderGoodsId=${v.orderGoodsId}`
        );
      }
    },
    getUserCertificateList() {
      this.loading = true;
      this.$api
        .getUserCertificateList(this.param)
        .then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            this.listData = [...this.listData, ...res.data.rows];
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    getcourseperiodlistGoods() {
      this.loading = true;
      this.$api
        .getcourseperiodlistGoods(this.param)
        .then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            this.listData = [...this.listData, ...res.data.rows];
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    appBeforeAddress(v) {
      this.$api
        .appBeforeAddress({
          goodsId: v.goodsId,
          orderGoodsId: v.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            uni.navigateToMiniProgram({
              appId: res.data.data.url,
              success(res) {
                // 打开成功
              },
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
            });
          }
        });
    },
    change(index) {
      if (this.loading) {
        return;
      }
      this.current = index;
      this.listData = [];
      this.total = 0;
      this.param = {
        pageNum: 1,
        pageSize: 10,
        orderGoodsId: this.orderGoodsId,
      };
      if (this.current == 0) {
        this.getcourseperiodlistGoods();
      } else if (this.current == 1) {
        this.getUserCertificateList();
      }
    },
    showPhoto(item) {
      // 预览图片
      uni.previewImage({
        urls: [this.$method.splitImgHost(item.certificatePath, true, 1000)],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    saveEwm(item) {
      //获取相册授权
      uni.getSetting({
        success: (res) => {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success() {
                //这里是用户同意授权后的回调
                this.saveImgToLocal(item);
              },
              fail() {
                //这里是用户拒绝授权后的回调
              },
            });
          } else {
            //用户已经授权过了
            this.saveImgToLocal(item);
          }
        },
      });
    },
    saveImgToLocal(item) {
      uni.showModal({
        title: "提示",
        content: "确定保存到相册吗",
        success: (res) => {
          if (res.confirm) {
            uni.downloadFile({
              url: this.$method.splitImgHost(item.certificatePath, true, 1000), //图片地址
              success: (res) => {
                if (res.statusCode === 200) {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function () {
                      uni.showToast({
                        title: "保存成功",
                        icon: "none",
                      });
                    },
                    fail: function () {
                      uni.showToast({
                        title: "保存失败",
                        icon: "none",
                      });
                    },
                  });
                }
              },
            });
          } else if (res.cancel) {
          }
        },
      });
    },

    downloadCard(item) {
      console.log(this.$method.splitImgHost(item.certificatePath, true));
      uni.downloadFile({
        url: this.$method.splitImgHost(item.certificatePath, true),
        success: function (res) {
          console.log(res, "res");
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log(res, "打开文档成功");
            },
            fail: function (err) {
              console.log(err);
            },
          });
        },
      });
    },
  },
  computed: { ...mapGetters(["userInfo"]) },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scoped lang="scss">
.copySty {
  color: #007aff;
  text-decoration: underline;
}
.color666 {
  color: #666;
}
.learnWrap {
  padding: 98rpx 8rpx 8rpx;
}
.noData {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin: 160rpx auto;
  text-align: center;
}
.learnItem {
  position: relative;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx 32rpx 0;
  font-family: PingFang SC;
  margin-bottom: 16rpx;
  overflow: hidden;

  &.card {
    &::before {
      content: "";
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      background: #eaeef1;
      left: -10rpx;
      bottom: 80rpx;
      border-radius: 50%;
    }

    &::after {
      content: "";
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      background: #eaeef1;
      right: -10rpx;
      bottom: 80rpx;
      border-radius: 50%;
    }
  }

  .red {
    color: #ff3b30 !important;
  }
  .blue {
    color: #007aff !important;
  }
  .green {
    color: #34c759 !important;
  }
  .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 68rpx;
  }
  .status {
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    margin-bottom: 26rpx;
    display: flex;
  }
  .number {
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    margin-bottom: 26rpx;
    font-size: 30rpx;
    font-weight: bold;
    font-family: PingFang SC;
    color: #333;
    .label {
      font-size: 24rpx;
      font-weight: 500;
      color: #666666;
    }
  }
  .val {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    .remark {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }
    .link {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      text-decoration: underline;
      color: #007aff;
      margin-top: 36rpx;
      text-decoration: underline;
    }
  }
  .tip {
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    margin: 30rpx 0 27rpx;
    display: flex;
  }
  .label {
    width: 120rpx;
    flex-shrink: 0;
    margin-top: 5rpx;
  }
  .subTitle {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin: 15rpx 0 40rpx;
  }
  .btnBox {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn {
      width: 224rpx;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      background: #007aff;
      border-radius: 16rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin-left: 16rpx;
    }
  }
}
</style>