hospital_health_check/src/components/Guidance.vue

<template>
  <div class="guidance">
    <div class="guide_title">海慈医院体检预约须知</div>
    <div class="guide_contant" ref="scrollView" id="scroll-view" @scroll="scroll">
      <p>尊敬的驾驶员：</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
    </div>
    <div class="guide_btn">
      <van-button size="small" @click="doCancel">取消</van-button>
      <van-button @click="doRead" type="info" size="small" :disabled="this.isFlag ? false : true">已阅读</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Guidance",
  props: {
    msg: String,
  },
  data() {
    return {
      isFlag: false,//是否阅读到底部
    }
  },
  methods: {
    //取消
    doCancel() {
      this.$emit('doCancelGuide','');
    },
    //已阅读
    doRead() {
      if (!this.isFlag) {
        //未阅读完整
        lightAppJssdk.notification.alert({
          message: "还有内容没有阅读完，请滑动屏幕阅读完全",
          title: "",//可传空
          buttonName: "确定",
          success: function (data) {
            //onSuccess将在点击button之后回调
            /*回调*/
          },
          fail: function (data) { //错误返回
          }
        });
      }
      else {
        //阅读完整
        this.$router.push({ name: '', params: {} })
      }
    },
    //监听阅读进度
    scroll(e) {
      if (this.isFlag) {
        return;
      }
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollTop + clientHeight === scrollHeight) {
        this.isFlag = true;
        console.log('阅读完成')
      }
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.guidance {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;

  .guide_title {
    font-size: 0.22rem;
    text-align: center;
    padding: 0.15rem 0;
  }

  .guide_contant {
    height: 5rem;
    line-height: 0.22rem;
    overflow-y: auto;
    margin: 0.1rem 0;
    padding: 0 0.3rem;
  }

  .guide_btn {
    text-align: center;
    margin-top: 0.15rem;
  }
}
</style>