hospital_health_check/src/views/Guidance.vue

<template>
  <div class="guidance">
    <div class="guide_title">{{ article.title }}</div>
    <div v-html="article.content" class="guide_contant" ref="scrollView" id="scroll-view"></div>
    <div class="guide_btn">
      <div class="guide_actBtn" @click="doCancel">取消</div>
      <div class="guide_actBtn blue" @click="doRead">已阅读</div>
    </div>
    <!-- 采集头像弹框 -->
    <van-overlay :show="isShowAvatar">
      <div class="wrapper" @click.stop>
        <div class="img_box">
          <img :src="avatar" alt="">
        </div>
        <div class="tips">头像采集</div>
        <div class="tip_txt">上传近期半身本人照片</div>
        <div class="btn" @click="chooseAvatar">上传照片</div>
      </div>
      <div class="close_box" @click="isShowAvatar = false"><img src="~@/assets/image/close.png" alt=""></div>
    </van-overlay>
  </div>
</template>

<script>
import { queryArticleDetail, getCupImg, saveCupImg } from "@/api/hospital";
export default {
  data() {
    return {
      isFlag: false,//是否阅读到底部
      article: {
        title: '',
        content: ''
      },//须知内容
      isShowAvatar: false,//是否显示采集头像弹框
      avatar: '',//头像
      userInfo: null,//用户信息
    }
  },
  mounted() {
    if (this.$route.query.deptId) {
      this.queryAticle(this.$route.query.deptId);
    }
    let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
    if (userInfo) {
      this.userInfo = userInfo;
      this.queryCupImg();//校验用户头像是否采集
    }
  },
  methods: {
    //校验用户头像是否采集
    queryCupImg() {
      this.$toast.loading({
        message: '加载中',
        duration: 0,
      })
      if (this.GlobalConfig.appMode) {
        vaildInterfacefn("cgstjyyxuwxt", "qdsgajjtjczdhqwzxq", JSON.stringify({ cupCardNo: this.Base64.encode(this.userInfo.papersnumber) }), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway).then((value) => {
          this.$toast.clear();
          let retData = JSON.parse(value);
          if (retData.code == 200) {
            this.avatar = retData.data;
          }
        }, err => {
          this.$toast.clear();
        })
      } else {
        getCupImg(this.Base64.encode(this.userInfo.papersnumber)).then(res => {
          this.$toast.clear();
          if (res.code == 200) {
            this.avatar = res.data;
          }
        }, err => {
          this.$toast.clear();
        })
      }
    },
    //头像选择
    chooseAvatar() {
      lightAppJssdk.media.chooseImage({
        arg: '200',
        type: '1',
        success: (data) => {
          //成功回调
          if (data.picPath.length > 1) {
            this.$toast('头像只能选择一张');
          }
          else {
            // if (this.calcBaseSze(data.picPath[0]) > 1024) {

            // } else {
            //   this.avatar = 'data:image/jpg;base64,' + data.picPath[0];
            // }
            //保存采集头像
            let avatar = 'data:image/jpg;base64,' + data.picPath[0];
            this.saveCupImg(avatar);
          }
        },
        fail: (data) => {
          //错误返回
        }
      });
    },
    //保存采集头像
    saveCupImg(avatar) {
      let param = { data: { cupCardNo: this.Base64.encode(this.userInfo.papersnumber), cupImg: avatar } };
      this.$toast.loading({
        message: '请求中',
        duration: 0,
      })
      try {
        if (this.GlobalConfig.appMode) {
          vaildInterfacefn("cgstjyyxuwxt", "qdsgajjtjczdhqwzxq", JSON.stringify(param), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway).then((value) => {
            this.$toast.clear();
            let retData = JSON.parse(value);
            if (retData.code == 200) {
              this.$toast('采集成功');
              this.avatar = avatar;
            } else {
              this.$toast(retData.msg);
            }
          }, err => {
            this.$toast.clear();
          })
        }
        else {
          saveCupImg(JSON.stringify(param)).then(res => {
            this.$toast.clear();
            if (res.code == 200) {
              this.$toast('采集成功');
              this.avatar = avatar;
            } else {
              this.$toast(res.msg);
            }
          }, err => {
            this.$toast.clear();
          })
        }
      } catch (error) {
        this.$toast.clear();
      }
    },
    //计算base64图形大小
    calcBaseSze(base64) {
      const kb = Math.ceil(parseInt(base64.length - (base64.length / 8) * 2) / 1024);
      console.log('chooseimage', base64.length / 1024, kb);
      return kb;
    },
    //须知详情
    queryAticle(id) {
      this.$toast.loading({
        message: '加载中',
        duration: 0,
      })
      try {
        if (this.GlobalConfig.appMode) {
          vaildInterfacefn("cgstjyyxuwxt", "qdsgajjtjczdhqwzxq", JSON.stringify({ createDept: id }), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway).then((value) => {
            this.$toast.clear();
            let retData = JSON.parse(value);
            if (retData.code == 200 && JSON.stringify(retData.data) != '{}') {
              retData.data.content = decodeURIComponent(retData.data.content);
              this.article = retData.data;
            }
          }, err => {
            this.$toast.clear();
          })
        }
        else {
          queryArticleDetail(id).then(res => {
            this.$toast.clear();
            if (JSON.stringify(res.data) != '{}') {
              res.data.content = decodeURIComponent(res.data.content);
              this.article = res.data;
            }
          }, err => {
            this.$toast.clear();
          })
        }
      } catch (error) {
        this.$toast.clear();
      }
    },
    //取消
    doCancel() {
      this.$router.go(-1);
    },
    //已阅读
    doRead() {
      //校验是否已采集头像
      if (this.avatar == '') {
        this.isShowAvatar = true;
      } else {
        this.$router.replace({ name: 'examination', query: { id: this.$route.query.deptId } });
      }
      // let readBox = this.$refs.scrollView;
      // console.log(readBox.scrollHeight, parseInt(readBox.scrollTop), readBox.clientHeight)
      // if (readBox.scrollHeight - parseInt(readBox.scrollTop) !== readBox.clientHeight) {
      //   console.log('未阅读完成');
      //   this.isFlag = false;
      // } else {
      //   this.isFlag = true;
      // }
      // if (!this.isFlag) {
      //   //未阅读完整
      //   lightAppJssdk.notification.alert({
      //     message: "须知未完全阅读，请滑动屏幕完成阅读",
      //     title: "提示",//可传空
      //     buttonName: "继续阅读",
      //     success: function (data) {
      //       /*回调*/
      //     },
      //     fail: function (data) { //错误返回
      //     }
      //   });
      // }
      // else {
      //   //阅读完整
      //   this.$router.replace({ name: 'examination', query: { id: this.$route.query.deptId } })
      // }
    },
    //监听阅读进度
    scroll(e) {
      if (this.isFlag) {
        return;
      }
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      console.log(scrollTop, clientHeight, scrollHeight)
      if ((scrollTop + clientHeight) >= (scrollHeight - 5) || scrollTop == 0) {
        this.isFlag = true;
        console.log('阅读完成')
      }
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.guidance {
  height: 100%;
  background-color: #fff;

  .guide_title {
    color: #333333;
    line-height: 0.5rem;
    font-size: 0.36rem;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    text-align: center;
    margin: 0.72rem 0 0;
  }

  .guide_contant {
    height: 6rem;
    color: #333333;
    font-size: 0.26rem;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    overflow-y: auto;
    margin: 0.93rem 0.4rem 0 0;
    padding: 0 0.4rem;

    img {
      max-width: 100% !important;
    }
  }

  .guide_btn {
    margin: 0.86rem 0.4rem 0;

    .guide_actBtn {
      float: left;
      display: inline-block;
      width: 3rem;
      color: #999999;
      font-size: 0.3rem;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      line-height: 0.98rem;
      text-align: center;
      background: #FFFFFF;
      border-radius: 0.08rem;
      border: 0.02rem solid #E1E1E1;

      &.blue {
        float: right;
        color: #fff;
        background: #1677FF;
        border-color: #1677FF;
      }
    }
  }

  .wrapper {
    width: 5.98rem;
    height: 6.66rem;
    background: #FFFFFF;
    border-radius: 0.16rem;
    margin: 0 auto;
    margin-top: 2.76rem;

    .img_box {
      display: flex;
      justify-content: center;

      img {
        width: 2.4rem;
        height: 2.4rem;
        margin-top: 0.6rem;
      }
    }

    .tips {
      display: flex;
      justify-content: center;
      font-size: 0.34rem;
      color: #000;
      font-weight: bold;
      margin: 0.56rem 0 0.2rem 0;
      font-family: PingFang SC-Regular, PingFang SC;

    }

    .tip_txt {
      width: 3.8rem;
      color: #666;
      font-size: 0.24rem;
      text-align: center;
      font-family: PingFang SC-Regular, PingFang SC;
      margin: 0 auto;
    }

    .btn {
      width: 3rem;
      height: 0.8rem;
      background: #1677FF;
      border-radius: 0.08rem;
      margin: 0 auto;
      margin-top: 0.6rem;
      font-size: 0.3rem;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC-Regular, PingFang SC;
    }
  }

  .close_box {
    display: flex;
    justify-content: center;
    margin-top: 0.6rem;

    img {
      width: 0.5rem;
      height: 0.5rem;
    }
  }
}
</style>